Lokalizacija dinamičke aplikacije kao što je Sprout Social na više jezika složen je pothvat. Prijevod teksta koji se pojavljuje u aplikaciji samo je pola priče. To također uključuje razvoj naše aplikacije na način koji olakšava izdvajanje i zamjenu tog teksta za prijevode. U Sproutu se za prijevode oslanjamo na dobavljače treće strane. Ali i dalje su nam potrebni alati za izdvajanje, grupiranje i slanje zahtjeva za prijevod tim dobavljačima, a zatim posluživanje i renderiranje prijevoda krajnjim korisnicima.



Godinama se Sprout inženjerski tim snalazio s prilagođenim rješenjem za lokalizaciju, budući da su rješenja otvorenog koda tek sazrijevala. Omogućio nam je da izađemo u susret našim najvećim klijentima na našim podržanim jezicima, ali su nedostajale neke korisne značajke. U ovom ću članku opisati naš novi sustav lokalizacije, kako rješava najsloženije scenarije lokalizacije i kako smo postupno uvodili te promjene u cijeloj organizaciji web inženjeringa.



777 broj god

Naš stari sustav

Da biste razumjeli naš novi sustav lokalizacije, prvo morate razumjeti kako je naš stari sustav funkcionirao i područja u kojima bismo ga mogli poboljšati.

Sintaksa poruke

Lokalizacija aplikacije funkcionira apstrahiranjem teksta koji je vidljiv krajnjem korisniku u jedinice niza, koje se nazivaju poruke. Te se poruke izdvajaju i šalju prevoditeljima. Apstrahiranjem ovih nizova, možemo ih lako zamijeniti ovisno o preferiranom jeziku krajnjeg korisnika.

Te poruke mogu biti jednostavni statični nizovi kao što je 'Hello, world' ili imati rezervirana mjesta kao što je 'Hello, {name}' ili formatiranje obogaćenog teksta poput 'Hello, world'. Budući da ove značajke moraju biti serijalizirane u nizove, potrebna vam je sintaksa koju razumiju i prevoditelji i kod aplikacije kako biste ispravno preveli i prikazali tekst.

Dio onoga što je otežavalo korištenje našeg starog sustava lokalizacije bilo je to što smo izmislili vlastitu sintaksu i održavali domaći 'parser' za navedenu sintaksu. Održavanje ovog koda zahtijevalo je mnogo vremena, a sintaksa je bila prilično minimalna. Htjeli smo dodatne značajke za pomoć u prikazivanju složenijih poruka.

Primjer: u aplikaciji Sprout potreban nam je način renderiranja 'Imate X objava' gdje je X dinamička numerička vrijednost.



Razmotrite slučaj u množini, 'Imate 5 postovi ”. Razmotrite pojedinačni slučaj, 'Imate 1 objaviti ”. Razmotrite slučaj '0'. Razmotrite jezike koji bi mogli imati gramatiku za slučaj '1', poput kineskog i japanskog. Razmotrimo jezike koji imaju gramatiku za slučaj kada je X 'veliki broj' poput arapskog, poljskog i ruskog.

Upravljanje porukama

Imamo poruke koje možemo poslati prevoditeljima i zamijeniti ih u našoj aplikaciji. Našoj aplikaciji treba način pohranjivanja tih poruka i posluživanja našim krajnjim korisnicima.

Naš stari sustav spremao je sve naše poruke u JSON datoteke (nazvali smo ih 'lang datoteke'), kojima se upravljalo ručno. Referencirali smo poruke u ovim datotekama pomoću ID-ova u našem izvornom javascript kodu. Kad bi korisnik želio aplikaciju na španjolskom, mi bismo poslužili naše datoteke na španjolskom jeziku, a zatim bi javascript prikazao odgovarajuću poruku na španjolskom koristeći ID.



Zbog performansi, pokušali smo poslužiti samo korisničke poruke koje su bile na toj stranici, tako da smo imali zasebne jezične datoteke za različite stranice aplikacije. Ovo je bio valjan sustav, ali kako su se naš tim i aplikacija skalirali, to je značilo više ručnog vremena programera za stvaranje i upravljanje tim ID-ovima i lang datotekama.

Snimka zaslona JavaScripta koji se prethodno koristio za ručno upravljanje porukama i prijevodom u Sproutu's codebase.

Da bi dodali novu poruku u aplikaciju, programeri su ih morali ručno dodati u ispravnu lang datoteku s jedinstvenim ID-om za referencu te poruke. Ponekad bismo naišli na probleme s kolizijama ID-a i pogrešaka pri upisu ID-a što je dovelo do nedostatka jezika u aplikaciji. Dodavanje teksta u web aplikaciju činilo se zamornim s brojnim koracima koji nisu bili intuitivni.

značaj broja 17

Naše novo rješenje

Znajući za te nedostatke, web inženjeri iz cijele organizacije proizvoda stvorili su radnu skupinu za lokalizaciju kako bi razvili rješenje. Redovito smo se sastajali da razmišljamo. Nakon procesa dubinskog istraživanja, odlučili smo migrirati aplikaciju Sprout iz našeg domaćeg sustava lokalizacije na korištenje FormatJS-a reagirati-intl knjižnicu i oko nje izgraditi infrastrukturu za upravljanje našim porukama. React-intl je bila najbogatija i najpopularnija lokalizacijska biblioteka otvorenog koda u ekosustavu javascripta i dobro integrirana u našu bazu kodova.

Sintaksa poruke

Htjeli smo robusnije rješenje i nismo htjeli stvarati nešto od nule. Usvojili smo Sintaksa ICU poruke , standardizirana sintaksa koja se koristi u Java, PHP i C aplikacijama i obuhvaća složenost dinamičkih aplikacijskih poruka. The reagirati-intl biblioteka također podržava raščlanjivanje i renderiranje poruka sintakse ICU poruka.

Usporedni primjer kako sintaksa ICU poruke bilježi množinu. S lijeve strane je poruka na engleskom, prije nego što se prevede na ruski. Desno je poruka prevedena na ruski. Obratite pozornost na to kako prevoditelji, kada ovu poruku pretvaraju u druge jezike, mogu dodavati i uklanjati velika i mala slova prema potrebi za pravilnu podršku jeziku. Ruski prijevod ove poruke dodaje 'nekoliko' i 'mnogo' slučajeva.

Ovo je primjer kako sintaksa ICU poruke bilježi množinu. Ovo je poruka na engleskom i ruskom. Obratite pozornost na to kako prevoditelji, kada ovu poruku pretvaraju u druge jezike, mogu dodavati i uklanjati velika i mala slova prema potrebi za pravilnu podršku jeziku. Ruski prijevod ove poruke dodaje 'nekoliko' i 'mnogo' slučajeva.

Sintaksa ICU poruka testirana je u bitkama u mnogim aplikacijama na bezbrojnim jezicima. Mogli smo vjerovati da može podržati naše sofisticirane potrebe korisnika i da postoji mnogo rješenja i/ili obrazovnih izvora za sva pitanja o lokalizaciji na koja smo naišli.

Upravljanje porukama

Razvili smo sustav koristeći alat FormatJS koji bi automatizirao proces dodavanja, uklanjanja i pohranjivanja poruka. To je uključivalo neke filozofske promjene u našem pristupu pohranjivanju poruka i referenciranju.

Velika promjena u odnosu na naš stari sustav koju FormatJS potiče je korištenje našeg UI koda kao izvora istine za poruke. U našem prethodnom sustavu, izvor poruka i upotreba poruka bili su na dva različita mjesta, što je značilo da smo ih morali sinkronizirati. Naš novi sustav čuva izvore poruka s ostatkom koda korisničkog sučelja. Jednostavno trebamo pokrenuti skriptu koja će izdvojiti sve poruke iz datoteka korisničkog sučelja kako bi generirala naše lang datoteke, a sadržaj poruke postaje jedinstveni ID uz pomoć hash funkcije.

numerologija broj 1 brak
Snimka zaslona JavaScripta koji se prethodno koristio za automatsko upravljanje porukama i prijevodom u Sproutu's codebase.

Ova promjena kolocira poruke s kodom korisničkog sučelja i imala je nekoliko prednosti:

6 značenje broja anđela
  • Čitljivije: Nema više ID-ova koji su dizajnirani za robote u našem UI kodu. Sada možemo čitati poruke na engleskom u UI kodu i razumjeti koji će tekst korisnik vidjeti.
  • Neručni ID-ovi: Ove ID-ove koje su koristili samo strojevi sada generiraju strojevi i po definiciji su jedinstveni po poruci.
  • Nema ručno upravljanih lang datoteka: Programeri ne bi trebali dirati ove lang datoteke. Naše skripte upravljaju dodavanjem i brisanjem poruka.

Kako smo migrirali?

Ali kako smo migrirali cijeli naš tim za web inženjering i bazu koda na ovaj novi sustav? Podijelili smo to na četiri prekretnice: pilotiranje novog sustava, educiranje našeg tima, ukidanje starog sustava i prelazak na naše novo rješenje.

Pilotiranje novog sustava

Radna grupa testirala je novi sustav u određenim dijelovima aplikacije kako bi stekla uvid u njegove najbolje prakse i puni opseg migracije. Time je novi sustav postavljen na strani klijenta (poly-fills, itd.) i na strani izrade aplikacije. To nam je omogućilo da ponovimo iskustvo programera i smanjimo rizik.

Obrazovanje

Uzeli smo ono što smo naučili od pilota i iskoristili to za edukaciju cijelog tima web inženjera. Razvili smo FAQ i drugu obrazovnu dokumentaciju i prezentacije za pomoć programerima koji koriste novu biblioteku. Lako je podcijeniti ovaj korak, ali ovaj dio migracije iznimno je važan. Nije važno koliko je dobar vaš novi sustav - ljudi moraju znati kako i zašto bi ga trebali koristiti.

Također smo razvili program veleposlanika u kojem je svaki tim za web značajke u Sproutu imao imenovanog ambasadora lokalizacije, koji je bio odgovoran za pomoć u edukaciji svog tima o novom sustavu i prijavljivanje problema ili bolnih točaka radnoj skupini.

To nam je omogućilo delegiranje odgovornosti za obrazovanje i identificiranje problema specifičnih za pojedinačne timove.

Odbacivanje starog sustava

Nakon što smo se uvjerili u iskustvo programera, zajedničko znanje i potencijal skaliranja novog sustava, obustavili smo stari sustav. Stvorili smo neka prilagođena eslint pravila i upotrijebili alat za linting, udlaga , za blokiranje upotrebe starog sustava, a dopuštajući postojeće upotrebe. Od ovog trenutka nadalje, od web inženjera se očekivalo da koriste novi sustav pri pisanju novog koda.

Migracija na naš novi sustav

S povjerenjem u naš novi sustav i fiksnim brojem starih upotreba, započeli smo migraciju.

Mnoge upotrebe imale su ekvivalente jedan na jedan u novom sustavu. Tamo gdje ovi ekvivalenti postoje, uspjeli smo automatizirati migraciju pisanjem kodnog moda pomoću jscodeshift . Uspjeli smo iterativno pokrenuti modificiranje koda preko odjeljaka baze koda, učeći i popravljajući probleme u hodu. Bilo je dovoljno nekoliko preostalih rubnih slučajeva koji se nisu mogli lako modificirati kodom da smo se osjećali ugodno popravljajući ih ručno.

Izvođenje

Zašto smo se odlučili za takav iterativni pristup umjesto da pokušamo migrirati sve odjednom? Korištenje iterativnog pristupa dio je Sproutove inženjerske kulture i vjerujemo u stalno učenje i poboljšanje.

Ovakvim pristupom migraciji mogli smo učiti u hodu, prilagođavajući se i popravljajući probleme u stvarnom vremenu. Također bismo mogli poništiti promjene ako bi migracija počela blokirati razvoj aplikacije. Naš iterativni pristup omogućio nam je napredak tijekom rada na drugim inicijativama i osnažio nas da značajkama označimo velike promjene s manjom grupom prije nego što ih objavimo svima. Ista načela razvoja značajki za aplikaciju primjenjuju se na razvoj internih razvojnih alata.

što znači 131

Učenja i pomaci

Ponovno osmišljavanje našeg sustava lokalizacije bio je golemi pothvat u cijeloj organizaciji web inženjeringa. Moj savjet drugima koji se suočavaju sa sličnim projektima ili izazovima bio bi:

  • Koristite široko prihvaćene standarde: Zašto stvarati prilagođenu sintaksu poruke kada su inženjeri koji su proveli godine razmišljajući o ovom problemskom prostoru već razvili sintaksu ICU poruke?
  • Razmislite o zajedničkom smještaju srodnih stavki: To će znatno olakšati njihovo dodavanje, mijenjanje i brisanje.
  • Prihvatite iterativno uvođenje: Osmislite uvođenje svoje promjene na način koji vam omogućuje da učite u hodu. Ne možete sve predvidjeti, stoga u svoj plan ugradite prostor za pribjegavanje.
  • Podijelite svoja učenja: Obrazovanje je pola uvođenja. Nije važno koliko je dobar vaš novi sustav ako ljudi ne znaju kako ga koristiti ili zašto je bolji.

Za više informacija o Sproutovoj inženjerskoj kulturi, pogledajte naše stranica karijera danas.

Podijelite Sa Svojim Prijateljima: