• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sposoby przygotowania słowników języków dla aplikacji [React, TS]

Aruba Cloud - Virtual Private Server VPS
+2 głosów
456 wizyt
pytanie zadane 12 kwietnia 2022 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
edycja 12 kwietnia 2022 przez Oskar Szkurłat

Cześć,

Założenie pierwotne:
Aplikacja ma możliwość przełączania się pomiędzy językami, np. ang / de / pl. Jest pisana w react. Używam Redux do zarządzania stanami globalnymi aplikacji.

Moje rozwiązanie:
Póki co budowałem aplikację, tak że przygotowałem sobie zmienną `localeIso` trzymaną w store od Redux i przygotowałem obiekty słowników podzielone na moduły (podstrony) aplikacji. W komponentach podłączałem teksty, jako referencje do tych słowników, a język pobierałem z wspomnianego localeIso. Więc sobie przerenderowuję komponenty, gdy była taka potrzeba - zmiana języka. Przykładowo:

export const DevicesModuleDictionary: IDictionary<IDevicesModuleLanguage> = {
  pl: { module: 'Urządzenia' },
  en: { module: 'Devices' },
}
import { DevicesModuleDictionary as Dictionary } from '../../../../constants/dictionary/modules/devicesModule'

const Component = (): JSX.Element => {
  const localeIso: ILocaleIso = useAppSelector(getLocaleIso) //ILocaleIso to: 'pl' | 'en'

  return <>{Dictionary[localeIso].module}</>
}

export default Component

Nowe założenie:
No i takie moje rozwiązanie działa w porządku, jedynie problem jest taki, że pojawił się wymóg, że edytować i rozszerzać o nowe języki ma osoba, która nie potrafi i nie ma się uczyć programować. Więc kształt nawet JSON odpada :(.

Podsumowanie - pytanie:
I tu pojawia się moje pytanie, w jaki sposób Wy przygotowujecie pliki ze słownikami, z których aplikacja czyta teksty i wyświetla na podstawie wybranego języka? Macie jakieś godne polecenia rozwiązania, tak żeby potem nietechniczne osoby mogły modyfikować treści? A może są w ogóle standardy na to i poniosła mnie zbytnio kreatywna wyobraźnia przy moim rozwiązaniu?

W tym momencie myślę, czy nie wyrzucić obiektów moich słowników do JSON i czytać z nich zamiast obiektów JS (chyba nie będzie problemu, bo stringi będą bundlowane jako osobny plik, zamiast w index.js?). Wówczas osoba odpowiadająca za zawartość słowników mogłaby sobie pisać w Excel i potem użyć jakiegoś gotowego rozwiązania do konwersji na JSON. Tylko musiałby tworzyć strikte o kształcie moich obiektów. Wiem, że są takie konwertery, ale nigdy nie używałem i nie wiem co mogę się spodziewać - czy nie skończy się na pisaniu customowego, żeby dopasować obiekty.

Waszym zdaniem warto iść w takie rozwiązanie, czy może znacie lepsze? Macie jakie rady lub sugestie? :)

 

Z góry dziękuję.

1 odpowiedź

+1 głos
odpowiedź 12 kwietnia 2022 przez rafal.budzis Szeryf (85,460 p.)
wybrane 19 kwietnia 2022 przez Oskar Szkurłat
 
Najlepsza
W moim odczuciu w redux powinieneś mieć zapisany tylko obecnie wykorzystywany język. A sam język trzymać w osobnym kontekście. Nie ma sensu raczej łączyć tego i wykonywać w wielu miejscach selektory podczas update czegokolwiek w store.

Co do zarzadzaniami tłumaczeniami przez osoby nie techniczne to może jakaś zewnętrzna usługa? Ja korzystałem z tego : https://locize.com/ Panel pod względem wyglądu i UX okropny ale samo narzędzie tanie ;D Każdy ma wjazd do panelu admina a ty po stronie FE możesz sobie pobrać dane w różnych formatach np JSON.

Jeśli jednak wolisz zrobić całość małym nakładem pracy to podpowiem że pliki JSON są traktowane jak JS i możesz je pobierać poprzez składnie import lub required. Gdy wczytujesz pliki JSON poprzez required masz pełne typowanie wczytanego obiektu co jest ekstra :D
komentarz 13 kwietnia 2022 przez Oskar Szkurłat Bywalec (2,780 p.)

W moim odczuciu w redux powinieneś mieć zapisany tylko obecnie wykorzystywany język.

Znaczy tak jest :) w store mam tylko string localeIso, który jest 'en' lub 'pl'. Same obiekty słowników aktualnie to zwykłe eksportowane consty z plików, które zawierają tylko i wyłącznie je. Stąd pomysł przejścia na json, bo tak naprawdę to "prawie to samo".

Nie ma sensu raczej łączyć tego i wykonywać w wielu miejscach selektory podczas update czegokolwiek w store.

Znaczy selektory są tylko po to, żeby odświeżyć komponenty i podmienić teksty (no bez przerenenderowania się nie uda), w których słownictwo się zmienia. Mógłbym odświeżyć całą stronę od razu i zaktualizować napisy, ale to trochę niezgodne z ideą Reacta mi się wydaje.

Jeśli jednak wolisz zrobić całość małym nakładem pracy to podpowiem że pliki JSON są traktowane jak JS i możesz je pobierać poprzez składnie import lub required. Gdy wczytujesz pliki JSON poprzez required masz pełne typowanie wczytanego obiektu co jest ekstra :D

Właśnie wiem i stąd pierwsza taka myśl ;). I chyba na to się zdecyduję, a ostatecznie napiszę sam prosty konwerter w nodejs dla nietechnicznego tłumacza. Z tym require mnie zaskoczyłeś, to brzmi jak przy import miałoby nie zadziałać typowanie z jsona?

A żeby zoptymalizować ilość pobieranych danych to spróbuje dać lazy na importach tych jsonów - słowników. Chociaż nie korzystałem z tego jeszcze nigdy i może moja wiedza się różnić od rzeczywistości, że to po prostu opakowanie importu w lazy().

Podobne pytania

0 głosów
0 odpowiedzi 137 wizyt
pytanie zadane 4 października 2023 w JavaScript przez reaktywny Nałogowiec (46,230 p.)
+1 głos
1 odpowiedź 476 wizyt
pytanie zadane 1 września 2021 w C# przez DarthMazut Bywalec (2,990 p.)
0 głosów
0 odpowiedzi 309 wizyt
pytanie zadane 21 października 2020 w C# przez Masterkk121 Początkujący (280 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...