Ο εντοπισμός μιας δυναμικής εφαρμογής όπως το Sprout Social σε πολλές γλώσσες είναι ένα πολύπλοκο εγχείρημα. Η μετάφραση του κειμένου που εμφανίζεται στην εφαρμογή είναι μόνο το ήμισυ της ιστορίας. Περιλαμβάνει επίσης την ανάπτυξη της εφαρμογής μας με τρόπο που να διευκολύνει την εξαγωγή και την εναλλαγή αυτού του κειμένου με τις μεταφράσεις. Στο Sprout, βασιζόμαστε σε τρίτους προμηθευτές για μεταφράσεις. Ωστόσο, χρειαζόμαστε ακόμα εργαλεία για την εξαγωγή, τη δέσμη και την υποβολή αιτημάτων μετάφρασης σε αυτούς τους προμηθευτές και στη συνέχεια την προβολή και απόδοση των μεταφράσεων στους τελικούς χρήστες.



Για χρόνια, η ομάδα μηχανικών Sprout τα κατάφερε με μια προσαρμοσμένη λύση τοπικής προσαρμογής, καθώς οι λύσεις ανοιχτού κώδικα εξακολουθούσαν να ωριμάζουν. Μας επέτρεψε να φιλοξενήσουμε τους μεγαλύτερους πελάτες μας στις υποστηριζόμενες γλώσσες μας, αλλά δεν διέθετε ορισμένες χρήσιμες λειτουργίες. Σε αυτό το άρθρο, θα περιγράψω το νέο μας σύστημα τοπικής προσαρμογής, πώς αντιμετωπίζει τα πιο περίπλοκα σενάρια τοπικής προσαρμογής και πώς εισαγάγαμε σταδιακά αυτές τις αλλαγές στον οργανισμό μηχανικής ιστού.



Το παλιό μας σύστημα

Για να κατανοήσετε το νέο μας σύστημα τοπικής προσαρμογής, πρέπει πρώτα να κατανοήσετε πώς λειτουργούσε το παλιό μας σύστημα και τους τομείς όπου θα μπορούσαμε να το βελτιώσουμε.

Σύνταξη μηνυμάτων

Η τοπική προσαρμογή της εφαρμογής λειτουργεί αφαιρώντας το κείμενο που είναι ορατό στον τελικό χρήστη σε μονάδες συμβολοσειρών, που ονομάζονται μηνύματα. Αυτά τα μηνύματα εξάγονται και υποβάλλονται στους μεταφραστές. Αφαιρώντας αυτές τις συμβολοσειρές, μπορούμε εύκολα να τις ανταλλάξουμε ανάλογα με τη γλώσσα που προτιμά ο τελικός χρήστης.

πνευματική έννοια του 933

Αυτά τα μηνύματα μπορεί να είναι απλές στατικές συμβολοσειρές όπως 'Hello, world' ή έχουν σύμβολα κράτησης θέσης όπως 'Hello, {name}' ή μορφοποίηση εμπλουτισμένου κειμένου όπως 'Hello, world'. Δεδομένου ότι αυτά τα χαρακτηριστικά πρέπει να συνοψίζονται σε συμβολοσειρές, χρειάζεστε μια σύνταξη που κατανοούν τόσο οι μεταφραστές όσο και ο κώδικας της εφαρμογής για τη σωστή μετάφραση και απόδοση του κειμένου.

Μέρος αυτού που έκανε το παλιό μας σύστημα τοπικής προσαρμογής δύσκολο στη χρήση ήταν ότι φτιάξαμε τη δική μας σύνταξη και διατηρούσαμε έναν αυτοσχέδιο «αναλυτή» για την εν λόγω σύνταξη. Αυτός ο κώδικας ήταν χρονοβόρα στη συντήρηση και η σύνταξη ήταν αρκετά ελάχιστη. Θέλαμε πρόσθετες λειτουργίες για να βοηθήσουμε στην απόδοση πιο περίπλοκων μηνυμάτων.

Παράδειγμα: Στην εφαρμογή Sprout, χρειαζόμαστε έναν τρόπο απόδοσης 'Έχετε X αναρτήσεις' όπου το X είναι μια δυναμική αριθμητική τιμή.



Εξετάστε την περίπτωση του πληθυντικού: «Έχετε 5 αναρτήσεις '. Σκεφτείτε την ενική περίπτωση, «Έχετε 1 Θέση '. Εξετάστε την περίπτωση «0». Εξετάστε γλώσσες που μπορεί να έχουν γραμματική για την περίπτωση «1», όπως τα κινέζικα και τα ιαπωνικά. Εξετάστε γλώσσες που έχουν γραμματική για την περίπτωση που το X είναι «μεγάλος αριθμός», όπως τα αραβικά, τα πολωνικά και τα ρωσικά.

Διαχείριση μηνυμάτων

Έχουμε μηνύματα που μπορούμε να στείλουμε σε μεταφραστές και να τα ανταλλάξουμε στην εφαρμογή μας. Η εφαρμογή μας χρειάζεται έναν τρόπο αποθήκευσης αυτών των μηνυμάτων και προβολής τους στους τελικούς μας χρήστες.

Το παλιό μας σύστημα αποθήκευε όλα τα μηνύματά μας σε αρχεία JSON (τα ονομάζαμε 'αρχεία lang'), τα οποία διαχειρίζονταν χειροκίνητα. Αναφέραμε τα μηνύματα σε αυτά τα αρχεία χρησιμοποιώντας αναγνωριστικά στον πηγαίο κώδικα Javascript. Όταν ένας χρήστης ήθελε την εφαρμογή στα ισπανικά, εξυπηρετούσαμε τα αρχεία μας στην ισπανική γλώσσα και, στη συνέχεια, το javascript θα απέδιδε το αντίστοιχο ισπανικό μήνυμα χρησιμοποιώντας το αναγνωριστικό.



100 αριθμός αγγέλου

Για λόγους απόδοσης, προσπαθήσαμε να εξυπηρετούμε μόνο τα μηνύματα χρήστη που υπήρχαν σε αυτήν τη σελίδα, οπότε είχαμε ξεχωριστά αρχεία lang για τις διαφορετικές σελίδες της εφαρμογής. Αυτό ήταν ένα έγκυρο σύστημα, αλλά καθώς η ομάδα και η εφαρμογή μας κλιμακώθηκαν, σήμαινε περισσότερο χρόνο για τον προγραμματιστή για τη δημιουργία και διαχείριση αυτών των αναγνωριστικών και των αρχείων lang.

Στιγμιότυπο οθόνης JavaScript που χρησιμοποιήθηκε στο παρελθόν για τη μη αυτόματη διαχείριση μηνυμάτων και μετάφρασης στο Sprout's codebase.

Για να προσθέσουν ένα νέο μήνυμα στην εφαρμογή, οι προγραμματιστές έπρεπε να τα προσθέσουν χειροκίνητα στο σωστό αρχείο γλώσσας με ένα μοναδικό αναγνωριστικό για να αναφέρουν αυτό το μήνυμα. Κατά καιρούς, αντιμετωπίζαμε ζητήματα συγκρούσεων αναγνωριστικών και τυπογραφικά λάθη αναγνωριστικών που οδηγούσαν σε έλλειψη γλωσσών στην εφαρμογή. Η προσθήκη κειμένου στην εφαρμογή Ιστού ήταν κουραστική με πολλά βήματα που δεν ήταν διαισθητικά.

Η νέα μας λύση

Γνωρίζοντας αυτές τις ελλείψεις, οι μηχανικοί ιστού από όλο τον οργανισμό του Προϊόντος δημιούργησαν μια ομάδα εργασίας τοπικής προσαρμογής για την ανάπτυξη μιας λύσης. Συναντιόμασταν τακτικά για να σκεφτόμαστε. Μετά από μια εις βάθος ερευνητική διαδικασία, αποφασίσαμε να μεταφέρουμε την εφαρμογή Sprout από το οικιακό μας σύστημα τοπικής προσαρμογής για να χρησιμοποιήσουμε το FormatJS αντιδρώ-inl βιβλιοθήκη και να δημιουργήσουμε υποδομή γύρω από αυτήν για τη διαχείριση των μηνυμάτων μας. Το React-intl ήταν η πιο πλούσια σε χαρακτηριστικά και δημοφιλής βιβλιοθήκη τοπικής προσαρμογής ανοιχτού κώδικα στο οικοσύστημα javascript και ενσωματώθηκε καλά στη βάση κωδίκων μας.

Σύνταξη μηνύματος

Θέλαμε μια πιο ισχυρή λύση και δεν θέλαμε να δημιουργήσουμε κάτι από την αρχή. Υιοθετήσαμε το Σύνταξη μηνυμάτων ΜΕΘ , μια τυποποιημένη σύνταξη που χρησιμοποιείται σε εφαρμογές Java, PHP και C και καταγράφει την πολυπλοκότητα των μηνυμάτων δυναμικής εφαρμογής. ο αντιδρώ-inl Η βιβλιοθήκη υποστηρίζει επίσης την ανάλυση και την απόδοση συντακτικών μηνυμάτων της ΜΕΘ.

Παράδειγμα δίπλα-δίπλα του τρόπου με τον οποίο η σύνταξη μηνυμάτων της ICU καταγράφει πληθυντικές περιπτώσεις. Στα αριστερά είναι το μήνυμα στα αγγλικά, πριν μεταφραστεί στα ρωσικά. Στα δεξιά είναι το μήνυμα μεταφρασμένο στα ρωσικά. Παρατηρήστε πώς όταν οι μεταφραστές μετατρέπουν αυτό το μήνυμα σε άλλες γλώσσες, μπορούν να προσθέτουν και να αφαιρούν περιπτώσεις όπως απαιτείται για να υποστηρίζουν σωστά τη γλώσσα. Η ρωσική μετάφραση αυτού του μηνύματος προσθέτει «λίγες» και «πολλές» περιπτώσεις.

Αυτό είναι ένα παράδειγμα του τρόπου με τον οποίο η σύνταξη μηνυμάτων ICU καταγράφει πληθυντικές περιπτώσεις. Αυτό είναι το μήνυμα στα αγγλικά και τα ρωσικά. Παρατηρήστε πώς όταν οι μεταφραστές μετατρέπουν αυτό το μήνυμα σε άλλες γλώσσες, μπορούν να προσθέτουν και να αφαιρούν περιπτώσεις όπως απαιτείται για να υποστηρίζουν σωστά τη γλώσσα. Η ρωσική μετάφραση αυτού του μηνύματος προσθέτει «λίγες» και «πολλές» περιπτώσεις.

Η σύνταξη μηνυμάτων ICU έχει δοκιμαστεί από πολλές εφαρμογές σε αμέτρητες γλώσσες. Θα μπορούσαμε να πιστέψουμε ότι θα μπορούσε να υποστηρίξει τις εξελιγμένες ανάγκες των πελατών μας και ότι υπήρχαν πολλές λύσεις ή/και εκπαιδευτικοί πόροι για τυχόν ερωτήσεις τοπικής προσαρμογής που συναντούσαμε.

Διαχείριση μηνυμάτων

Αναπτύξαμε ένα σύστημα χρησιμοποιώντας εργαλεία που παρέχονται από το FormatJS που θα αυτοματοποιούσε τη διαδικασία προσθήκης, αφαίρεσης και αποθήκευσης μηνυμάτων. Αυτό περιλάμβανε κάποιες φιλοσοφικές αλλαγές στον τρόπο με τον οποίο προσεγγίσαμε την αποθήκευση και την αναφορά μηνυμάτων.

Μια σημαντική αλλαγή από το παλιό μας σύστημα που ενθαρρύνει το FormatJS ήταν η χρήση του κώδικα διεπαφής χρήστη ως πηγής αλήθειας για τα μηνύματα. Στο προηγούμενο σύστημά μας, η πηγή των μηνυμάτων και η χρήση των μηνυμάτων βρίσκονταν σε δύο διαφορετικά σημεία, πράγμα που σήμαινε ότι έπρεπε να τα διατηρήσουμε συγχρονισμένα. Το νέο μας σύστημα διατηρεί τις πηγές μηνυμάτων με τον υπόλοιπο κώδικα διεπαφής χρήστη. Χρειάζεται απλώς να εκτελέσουμε ένα σενάριο που θα εξάγει όλα τα μηνύματα από τα αρχεία διεπαφής χρήστη για να δημιουργήσει τα αρχεία lang μας και το περιεχόμενο του μηνύματος γίνεται τα μοναδικά αναγνωριστικά με τη βοήθεια μιας συνάρτησης κατακερματισμού.

Στιγμιότυπο οθόνης JavaScript που χρησιμοποιήθηκε στο παρελθόν για την αυτόματη διαχείριση μηνυμάτων και μετάφρασης στο Sprout's codebase.

Αυτή η αλλαγή εντοπίζει τα μηνύματα με τον κωδικό διεπαφής χρήστη και είχε πολλά πλεονεκτήματα:

  • Πιο ευανάγνωστο: Δεν υπάρχουν άλλα αναγνωριστικά που έχουν σχεδιαστεί για ρομπότ στον κώδικα διεπαφής χρήστη. Τώρα μπορούμε να διαβάσουμε τα αγγλικά μηνύματα στον κώδικα διεπαφής χρήστη και να καταλάβουμε τι κείμενο θα δει ο χρήστης.
  • Μη χειροκίνητα αναγνωριστικά: Αυτά τα αναγνωριστικά που χρησιμοποιήθηκαν μόνο από μηχανές δημιουργούνται τώρα από μηχανές και εξ ορισμού μοναδικά ανά μήνυμα.
  • Δεν υπάρχουν μη αυτόματα διαχειριζόμενα αρχεία lang: Οι προγραμματιστές δεν χρειάζεται να αγγίζουν αυτά τα αρχεία lang. Τα σενάρια μας διαχειρίζονται την προσθήκη και τη διαγραφή των μηνυμάτων.

Πώς μεταναστεύσαμε;

Αλλά πώς μεταφέραμε ολόκληρη την ομάδα μηχανικής ιστού και τη βάση κώδικα σε αυτό το νέο σύστημα; Το χωρίσαμε σε τέσσερα ορόσημα: πιλοτική εφαρμογή του νέου συστήματος, εκπαίδευση της ομάδας μας, κατάργηση του παλιού συστήματος και μετάβαση στη νέα μας λύση.

τι σημαίνει το 11111

Πιλοτική εφαρμογή του νέου συστήματος

Η ομάδα εργασίας χρησιμοποίησε πιλοτικά το νέο σύστημα σε συγκεκριμένες ενότητες της εφαρμογής για να κατανοήσει τις βέλτιστες πρακτικές του και το πλήρες εύρος της μετανάστευσης. Αυτό δημιούργησε το νέο σύστημα στην πλευρά του πελάτη (poly-fills, κ.λπ.) και στην πλευρά κατασκευής της εφαρμογής. Αυτό μας επέτρεψε να επαναλάβουμε την εμπειρία του προγραμματιστή και να μετριάσει τον κίνδυνο.

Εκπαίδευση

Πήραμε ό,τι μάθαμε από τον πιλότο και το χρησιμοποιήσαμε για να εκπαιδεύσουμε ολόκληρη την ομάδα web engineering. Δημιουργήσαμε ένα FAQ και άλλη εκπαιδευτική τεκμηρίωση και παρουσιάσεις για να βοηθήσουμε τους προγραμματιστές να χρησιμοποιούν τη νέα βιβλιοθήκη. Είναι εύκολο να υποτιμηθεί αυτό το βήμα, αλλά αυτό το μέρος μιας μετανάστευσης είναι εξαιρετικά σημαντικό. Δεν έχει σημασία πόσο καλό είναι το νέο σας σύστημα - οι άνθρωποι πρέπει να γνωρίζουν πώς και γιατί πρέπει να το χρησιμοποιούν.

Αναπτύξαμε επίσης ένα πρόγραμμα πρεσβευτών όπου κάθε ομάδα χαρακτηριστικών ιστού στο Sprout είχε έναν διορισμένο Πρεσβευτή Localization, ο οποίος ήταν υπεύθυνος να βοηθήσει στην εκπαίδευση της ομάδας τους σχετικά με το νέο σύστημα και να αναφέρει ζητήματα ή σημεία πόνου στην ομάδα εργασίας.

Αυτό μας επέτρεψε να αναθέσουμε τις ευθύνες εκπαίδευσης και να εντοπίσουμε ζητήματα ειδικά για μεμονωμένες ομάδες.

Καταστροφή του παλιού συστήματος

Αφού αισθανθήκαμε σίγουροι για την εμπειρία προγραμματιστή, την κοινή γνώση και τις δυνατότητες κλίμακας του νέου συστήματος, καταργήσαμε το παλιό σύστημα. Δημιουργήσαμε μερικούς προσαρμοσμένους κανόνες Eslint και χρησιμοποιήσαμε το εργαλείο linting, νάρθηκα , για να αποκλείσετε τη χρήση του παλιού συστήματος επιτρέποντας ταυτόχρονα τις υπάρχουσες χρήσεις. Από αυτό το σημείο και μετά, οι μηχανικοί ιστού αναμενόταν να χρησιμοποιήσουν το νέο σύστημα κατά τη σύνταξη νέου κώδικα.

Μετάβαση στο νέο μας σύστημα

Με εμπιστοσύνη στο νέο μας σύστημα και έναν σταθερό αριθμό παλιών χρήσεων, ξεκινήσαμε τη μετεγκατάσταση.

Πολλές χρήσεις είχαν ισοδύναμα ένα προς ένα στο νέο σύστημα. Όπου υπάρχουν αυτά τα ισοδύναμα, μπορέσαμε να αυτοματοποιήσουμε τη μετεγκατάσταση γράφοντας ένα code-mod χρησιμοποιώντας jscodeshift . Μπορέσαμε να εκτελέσουμε επαναληπτικά το code-mod σε τμήματα της βάσης κώδικα, μαθαίνοντας και επιδιορθώνοντας προβλήματα καθώς προχωρούσαμε. Υπήρχαν αρκετές εναπομείνασες θήκες άκρων που δεν μπορούσαν εύκολα να κωδικοποιηθούν ώστε νιώσαμε άνετα να τις διορθώσουμε χειροκίνητα.

Απλώνω, ξεδιπλώνω, ξετυλίγω

Γιατί επιλέξαμε μια τέτοια επαναληπτική προσέγγιση αντί να προσπαθούμε να μεταφέρουμε τα πάντα με τη μία; Η χρήση μιας επαναληπτικής προσέγγισης είναι μέρος της κουλτούρας της Μηχανικής του Sprout και πιστεύουμε στη συνεχή μάθηση και βελτίωση.

Προσεγγίζοντας τη μετάβαση με αυτόν τον τρόπο, μπορέσαμε να μάθουμε καθώς προχωράμε, προσαρμόζοντας και διορθώνοντας προβλήματα σε πραγματικό χρόνο. Θα μπορούσαμε επίσης να επαναφέρουμε τις αλλαγές εάν η μετεγκατάσταση άρχιζε να εμποδίζει την ανάπτυξη εφαρμογών. Η επαναληπτική προσέγγισή μας μάς επέτρεψε να σημειώσουμε πρόοδο ενώ εργαζόμασταν σε άλλες πρωτοβουλίες και μας έδωσε τη δυνατότητα να επισημάνουμε σημαντικές αλλαγές με μια μικρότερη ομάδα προτού τη διαθέσουμε σε όλους. Οι ίδιες αρχές ανάπτυξης δυνατοτήτων για μια εφαρμογή ισχύουν για την ανάπτυξη εσωτερικών εργαλείων προγραμματιστή.

Εκμάθηση και σεμινάρια

Ο επανασχεδιασμός του συστήματος τοπικής προσαρμογής μας ήταν ένα τεράστιο εγχείρημα σε ολόκληρο τον οργανισμό μηχανικής ιστού. Η συμβουλή μου σε άλλους που αντιμετωπίζουν παρόμοια έργα ή προκλήσεις θα ήταν να:

88 πνευματική έννοια
  • Χρησιμοποιήστε ευρέως υιοθετημένα πρότυπα: Γιατί να δημιουργήσετε μια προσαρμοσμένη σύνταξη μηνυμάτων όταν μηχανικοί που έχουν περάσει χρόνια σκεπτόμενοι αυτόν τον προβληματικό χώρο έχουν ήδη αναπτύξει σύνταξη μηνυμάτων στη ΜΕΘ;
  • Εξετάστε το ενδεχόμενο να συντοπίσετε σχετικά στοιχεία: Θα κάνει την προσθήκη, την αλλαγή και τη διαγραφή τους πολύ πιο εύκολη.
  • Αποδεχτείτε μια επαναληπτική διάθεση: Σχεδιάστε την παρουσίαση της αλλαγής σας με τρόπο που σας επιτρέπει να μαθαίνετε καθώς προχωράτε. Δεν μπορείτε να τα προβλέψετε όλα, γι' αυτό δημιουργήστε χώρο για να προσφύγετε στο σχέδιό σας.
  • Μοιραστείτε τις γνώσεις σας: Η εκπαίδευση είναι το ήμισυ της ανάπτυξης. Δεν έχει σημασία πόσο καλό είναι το νέο σας σύστημα αν οι άνθρωποι δεν ξέρουν πώς να το χρησιμοποιούν ή γιατί είναι καλύτερο.

Για περισσότερες πληροφορίες σχετικά με την κουλτούρα της Μηχανικής του Sprout, ανατρέξτε στο δικό μας σελίδα σταδιοδρομίας σήμερα.

Μοιράσου Το Με Τους Φίλους Σου: