Naomi Meyer - Building React Apps with Internationalization (i18n) in Mind | React Week NY '19

hey everyone can you hear me awesome so thanks so much for coming out I'm really excited to be here my name is Naomi Meyer and I work as a software development engineer at Adobe here in New York City I'm on the UI team on the Adobe experience platform and I have had the opportunity of serving as the product champion or leader for internationalization on my team and I've learned some just really interesting exciting engineering topics and I have some kind of tips and tricks about building react apps with internationalization in mind so who here is currently internationalizing their apps who's using internationalization okay awesome so that's a lot of folks great so I'm gonna sort of level set and provide a high-level overview and then we'll get into some more details and like I said you know there's a lot of interesting thorny engineering challenges that we have with internationalization and I'm excited about it from a code perspective I'm also really interested in this topic from a more human perspective before I was a software engineer many years ago my first career was as an English teacher and this is a photo back when I had hair from when I talked when I taught in Okinawa Japan I worked across Asia and in West Africa so I know the feeling of needing something to be translated and not having a translated version and just experiencing different cultures so today I want to share what is internationalization why it's important and then tips on how to implement it so we'll do a react demo we'll talk a bit about testing TDD a bit about deploying see ICD and then go over some layout UX and design tips and then I want to end with some cultural considerations and my mission today is to invite you all to join me on my my goal of putting the world in the World Wide Web so to start let's talk about some definitions to level set and make sure we're all on the same page translation at the most granular level is the process of translating text from one language to another so who here speaks two languages anyone bilingual in the room awesome anyone three languages anyone for four oh we've got a couple for awesome so you know New York City we're a very cultural hub so that's great and obviously translation is taking hello the string changing it to hola Bonjour konichiwa the next level is localization and that's the process of translating the intern eyes internationalized app into a specific language for a particular locale and the key words to call out here are locale so you know here in the US I spelt localization with a Z and that's American English or US English if we go to London in the UK folks will spell localization with an S and those are both English they're both the same language but they're different regional locale variations of that language so with localization we call out the locale or the region no you know variation instead of the language the next level up is internationalization and that's the process of designing and preparing the app to be used within different locales so key words here are designing that CSS layout UX and then preparing that's our TDD our CID CI CD and bundling the full app to deploy to prod and then these all fall under the umbrella of globalization or g11 n important to note that globalization also includes like non engineering topics you know marketing sales legal but I'm not going to talk about those today and these are numeric acronyms so internationalization is I followed by the number of characters 18 followed by n so similar to accessibility a11y so to kind of paint the picture of these big these four big ideas I thought it would be fun to go over an example that I think is just kind of thought-provoking and interesting so when I started I said hello my name is Naomi Meyer write in English I used the syntax of my given name her first name followed by my last name or family name or surname and you know that's what most people do in English but I did a poll around the office some of my colleagues here helped and I took that string of hello my name is Naomi Meyer and these are the translated versions in Japanese Hindi Hebrew Arabic Korean and Chinese and as you can see English my first name Naomi is highlighted in blue and my last name is highlighted in purple and sometimes this structure is first name last name sometimes its last name first name and sometimes you know the text reads left-to-right sometimes it reads right-to-left so these are sort of really important things to keep in mind when we're storing our users name and you know our database which is common you know as a form input where we have first name followed by last name a separate columns in the database so and this is our name right like this is really important to get right when we're communicating with our users we want our users to have a good interaction a good experience on our apps on our websites and if we accidentally display their name incorrectly that's that's not ideal so we could do sort of a simple pseudocode function called get name order 2 which would take the arguments of first name last name and then user locale and I just want to quickly call out that a lot of the topics I'm gonna talk about today there's a lot more to them right they're really deep topics and I'm only going to scratch the surface on some of them and you know there's big debates happening with the best way to get and set the user locale some of the possibilities are through the accept HTTP header through the IP the OS you know build the regex to check for the characters input in the form you can ask the user directly but then you have to handle the business logic of if a user is browsing in a Chrome browser in Spanish and typing in Chinese and based you know in a New York City public library which I'm sure has happened before right so getting and studying the user locale and then checking if it's the if it's a locale from first name last name or last name first name right so then if we check it with me mo kaha Duke goes on looks like it checks out but you might be looking at this function and thinking like this is a lot of work right why should we do this why does it matter and if we look at the world's most spoken languages English is not number one the majority of people on earth do not speak English as their first language so we kind of have an opportunity from a business perspective to enter new markets and communicate with users in new and developing customer fields also you know in our apps and on our websites we display a lot of really important information like warning you're about to delete everything in the entire app don't proceed and if the user can't read that and doesn't understand that language then that sucks right by internationalizing our apps we can communicate with our users you know important error messages and also just from a human perspective if we enable our apps to be used across any locale users can work in their native mother tongue and I think that's important so let's talk about how we actually do that so let's start with translating the react app here is a screenshot of the react documentation sixteen point eight point six with hooks I'm sure many of us have seen this page recently right and it's the Japanese translated version of the documentation so big shout out to the open source contributors who are translating documentation you know they're doing a great job and the definitions and explanations are translated in Japanese but the function form sets the state to MARY POPPINS and displays that in the document title so you know I only lived in Japan for a year but I never met a Japanese person named Mary Poppins so this is kind of a hard coded English string that's set into state so what we can do is we can actually format that message so it can be used across any locale here's another example of the documentation in Ukrainian and this is an English hard-coded string but it's a Ukrainian hard-coded string that's displaying in the P tag with the function example so let's actually take this function example and format it so it can be used across any locale support it but to do that we're gonna use a library so I want to quickly talk about the libraries that are available particularly and react so EICMA script JavaScript out of the box has the internationalization API with the I entail object and there's some great tools in there this might be all you need for your unique use case and definitely check out the documentation I'm gonna provide my slides and all the links so there's a lot more to read about and this is one of these that's really interesting to read about there's also great open source tools so is anyone using moment j/s also moment.js is wonderful for dates and times and displaying integers anyone using react int L nice so format j/s is maintained by Yahoo and they have react int L and that's the one I'm most familiar with that's what we use on my team at Adobe and so that's what I'll use in my example but there's also globalized a yes anyone in the room anyone with I 18 next okay great so IOT next is really useful because it's framework agnostic you can use it with react you can also use it with angular view you know even backbone if you wanted to so let's look at the code so here we have our index at Jas right which is a very common file we're all familiar with seeing if we have create react app we'll have a registered service worker here and what I've done is I've just taken app and I wrapped it around the int L provider so the I entail provider will pass the locale to each of the elements each of the components in app and then I have a simple you know for the purposes of the demo example he'll get locale data which I'm passing as props to the int L provider so if we look at get locale data we're adding locale data from react int L and then building out a JSON object with each of the locale supported and as you can see here you know it en dash us so instead of just all English it's English in the US and then sending the locale so if I change this here to German we can see German updates in the app or to English here so then these messages are coming from our example folder and here's the English version where we have a JSON object where with key value pairs and the key is the ID that's used in the format message and the value is the string that will be displayed and that's the translated string so I took I just went into Google Translate and I got the Nepalese version I anyone speaking of Belize I hope that this is correct and then something that many you know internationalization experts suggests is to try and avoid contaminating strings like you can see here because translators need to be able to modify the word order so by when you concatenate strings like this it's harder for translators to go in and modify the word order but it is still technically possible so that that's how it would look so this this ID components that example that button is here in the example that we took directly from the hooks documentation and it's here so what I did is you know in the hook Sacrement ation it just said click me that was the hard coded English string I wrapped the click me text in a formatted message from react int L here and then pass the ID and then a default message to the formatted message so this is a really simple example where the string is click me but if we are concatenated strings like you click to count times this is how it would look so we have you clicked and then count which is that variable and we need to define the type as number and then because time or x is a plural react int L supports different types of supports pluralizing strings right so time or x here in the default message and that's basically it it's pretty simple and something that you know folks can do if you're at a startup or if you're at a smaller company is you might not have the full infrastructure in place for fully internationalizing your codebase but when you're building new code you know you can be forward-thinking and just wrap your hard-coded strings in a formatted message and default to the default message but plan for the future to translate those messages so this is an example where we're using state an effect I wanted to show another example where we're not using hooks but we're injecting the int all directly and then passing instead of a formatted message a formatted relative message which is coming from props so this is displayed here the display date component is rendered in the example component and date is coming from from state and example and then one other way of doing it so as you can see in this example the we're injecting the int l at the top level instead of just npm installing it or instead of importing it it's counter so this is sort of similar to a redux model where we're using reducer from hooks and I actually copy and pasted this code straight from the documentation too but all I did was I took the counter which was again a hard-coded English string and I wrapped it in a formatted message and set the ID and that's all you really need to do so it's super simple it shouldn't be too scary to internationalize the app and then by updating the locale you can see that everything is still working fine and the strings are translated and the dates and times are formatted correctly so when I build out these JSON objects I think it's really important to keep in mind the translators the human translators who are in here and taking these messages that were defining for them and translating them so translators are awesome right this is a photo from some translators I worked with in Burma Myanmar and like I said they have to think about concatenating strings they also have to keep in mind abbreviations and acronyms you know those are challenging to translate especially in non-roman texts they have to worry about gender and pluralization and tense so when you're building out your JSON objects to be translated you know think about the humans on the other side who are actually translating great another thing that translators and engineers have to keep in mind is keyboards so keyboards are different across different locales here's an example of a mexican keyboard and a spanish keyboard and the hotkeys are different right so if we're building apps with hotkeys a good rule of thumb is to keep your keyboard shortcuts alphanumeric I've heard stories about some of the big design apps added OB that have a lot of short keys and hotkeys and the process of internationalizing those was a large engineering load so you know make yourself happy later down the line make future developers happy by keeping your short Keys alphanumeric another thing that I just think is really interesting to think of out is sorting and filtering so I'm sure we've all seen tables that look like this and we're familiar with building out functionality to sort and filter by ascending and descending characters for each column but that's for hard-coded English strings right and when you're sorting ABC we can do that simply with JavaScript but sorting and non Roman characters you know in Chinese Hindi Hebrew they have different dictionary structures so the process of sorting and filtering those columns is different so there's tools available to you the simplest one is string prototype locale compare and that can help with the process of sorting and filtering there's also a lot of great libraries out there that are useful quickly I want to touch on testing who has used lorem ipsum in the past ok awesome so that's you know what most of us do and we want to get some test strings but this random text generator it can get lorem ipsum for you and any of these languages supported so if you want to test lorem ipsum in serbian and said to ensure that your UTF code encoding is ok you can do that with the random text generator also you know for people who only speak English they might not know that you can just right click in a Chrome web browser and translate your website into any of the languages supported by Chrome which is a lot so you know with with layout and you UI testing you can just quickly see does this look ok is you know everything overflowing in my app does it work in Chinese does it work in Arabic another thing I want to just quit briefly mention is CI CD so this is kind of a really crazy chart right and there's a lot to it but my point and and this chart is actually a workflow that most of our teams use at Adobe for updating human translated and machine translated strings but this is a lot right and it's my point is that it's really important to to think about when we're architecting our applications to include pipelines and odd made tools to update strengths and to make sure that we're testing new strings in our app something that we've been thinking a lot about is taking this and actually including a pre push or a pre-commit hook for machine translated strings we have one for es lint and prettier so that everyone's on the same page with tabs and spaces on our team so adding a pre push or a pre-commit hook to update your strings with machine translated versions is another option so let's talk about layout layout design UX so please handle the expansion of UI elements to accommodate translated text this is so important it's the most common UI bug if the English text is less than 10 characters you know folks suggests to handle at least a 300 percent expansion for a translated strength German and Russian are notorious for being significantly longer than English so this is your submit button your login button there that's those strings need to be significantly longer in in different locales but if the English text is less than 10 characters then you can handle a 30% expansion but we have tools for this we have CSS grid we have flex box you know we know how to handle responsive designs from browser to desktop to mobile devices right so we know how to handle expansion of text but it's not something that people always think about in internationalization another thing is font size so you know size 8 is really hard to read in English but size 8 font is impossible to read in Chinese so make sure that you handle a wider font size for most East Asian fonts and then emphasis so italics and bulbs don't register in Chinese and Korean and Japanese and many non sort of ABC fonts so think about other ways that you can emphasize text right-to-left and left-to-right right so this is the footer on Adobe com and this one's in Portuguese but as you can see the Adobe logos on the left the login button is on the right but this same footer in Arabic is reverse so laughter I and us react developers know that this is a lot of engineering work to handle both right-to-left and left-to-right so important to keep in mind also graphics this example has sort of a hard-coded English string that says parking or has a P for parking which is fine if you speak English but if you don't then this isn't fully accessible or internationalized app so a good rule of thumb is to try and keep our graphics our icons and photos separate from hard-coded strings from hard-coded English strings and you know many of us have gotten you know a photo or a design from a developer or excuse me a designer that has a photo with text in the image and that's sort of a hard-coded English string that would be difficult to understand if you don't speak English another thing to keep in mind is colors so colors have different meanings across certain cultures here's an example of an Adobe stock price app where change is highlighted as plus 8 in green in the English version but in the Japanese version it's or it's highlighted as plus a in red and that's because you know in the West here we often associate red with danger and warning messages but in parts of East Asia red is associated with happiness so thinking deeply about our use of colors and being culturally sensitive to colors and what they mean in different languages and different countries is important to keep in mind also contact details so this is one I've heard a lot about when I told people I was talking about internationalization today because they said oh my gosh when I lived abroad I couldn't enter my contact details I couldn't get things shift in the US apps because I didn't have a state or my zip code format was different so a good rule of thumb is to really try it and keep your contact detail forms generic you know instead of asking first state you can ask for country subdivision or administrative division and handling different lengths of telephone codes and zip codes also lists of countries so you know as developers we might just say okay we're gonna query an API and display a list of countries but this is kind of an important business decision to get right when we display conflict zones and disputed territories you know Israel Palestine Taiwan Tibet Russia Ukraine like these are important things that we want to think deeply about and handle with sensitivity so let's talk a bit about the cultural considerations many countries speak multiple languages many languages are spoken across many countries so instead of using a country flag to represent a language experts you know suggest to use region or language instead of the flag because it is much more culturally sensitive another thing to think about is maps and when we list territories and countries and lines on a map many of the big tech companies have actually gotten in trouble and have been sued and more for for their mapping software and how they're displaying these conflict zones so it's something to think deeply about and to be aware of and sensitive to and this is actually something that I care a lot about too and I'm sure many of you do this photo is from I spent a year with the Peace Corps working in rural Burkina Faso West Africa in a little town called Combe taiga and these kids were my neighbors there you are really great at playing soccer and they grow up speaking more a which is a tribal village language and it's their mother tongue but then when they go to school they're forced to learn French you know because French colonized parts of West Africa and for them you know French is the language of the colonizer and because of this structure more a there a local tribal language is now becoming an endangered language and it's actually dying out so this math is each dot represents a language that is in danger on earth and there are hundreds of them and I think in our crazy political climate that we're living in here in the u.s. like we have an opportunity as in our humble role as coders as react developers to increase the the width of our of our apps and of our strings and enable users across the world to to work effectively in our applications in their native mother tongue and it's just a couple extra lines of code to format the message and remove the hard-coded English strings but it can make an impact and can increase sort of access and accessibility to our apps so please join me on my quest on my mission of putting the world in the World Wide Web thank you [Applause]

Channel: React Week NY

Views: 5,861

Keywords: Naomi Meyer, react, reactjs, react week, react nyc, react new york

Id: DofzP6zDD9w

Length: 28min 0sec (1680 seconds)

Published: Sun Aug 18 2019