Internacionalizando React

Hola a todos, estoy muy emocionada de poder comenzar la edición remota de React Summit este año. Muchas gracias por venir a mi charla, que trata sobre la internacionalización de aplicaciones React. Si no hemos tenido la oportunidad de conocernos, mi nombre es Daria Carraway. Actualmente soy ingeniera de software en Workday en Boulder, Colorado, en los Estados Unidos. Quiero compartir un poco sobre mis experiencias en el aprendizaje de diferentes idiomas.

Viene una foto embarazosa de mi infancia, así que no se burlen demasiado. Nací en Boulder, Colorado, donde aprendí inglés como primer idioma. Esta es la foto más joven que pude encontrar. También soy mitad china, así que desde muy joven aprendí mandarín. Esta es una foto de mí en la escuela china a la que iba todos los domingos con mi hermana durante muchos años. Esta foto me hace reír mucho.

Cuando llegué al sexto grado, tuve la oportunidad de elegir un idioma para aprender en la escuela. Elegí español. Así que desde el sexto hasta el duodécimo grado, estudié español y al final era bastante fluida. Esta es una foto de mí en séptimo grado, con frenillos y todo. Y algo que he aprendido a lo largo de mi vida, además de que tal vez no necesito flequillo. Además de eso, he aprendido que aprender idiomas es bastante difícil. No tengo una gran memoria, por lo que memorizar vocabulario o gramática en diferentes idiomas puede ser bastante difícil. Bueno, esta soy yo ahora y han pasado muchos, muchos, muchos años desde el duodécimo grado. Y para ser honesta, he perdido muchas de mis habilidades para hablar chino y español. Los entiendo bastante bien, pero mi capacidad para hablarlos no es muy buena y mi capacidad para leer chino es de uno sobre diez. Y así he aprendido, especialmente a medida que envejezco, que mantener los idiomas incluso después de pasar todo ese tiempo aprendiéndolos también es bastante difícil. No tengo muchas oportunidades donde estoy para practicar español o chino así que se quedaron almacenados en la parte trasera de mi cerebro a la que no se puede acceder fácilmente. Al menos eso es lo que se siente. Pero como ingeniera de software, encuentro paralelismos entre mi vida y mi código porque eso es totalmente normal. Por primera vez en mi career estoy en un equipo que tiene que admitir varios idiomas y localizaciones en nuestra aplicación y me pregunto si, aunque los idiomas son difíciles para mí de aprender en la vida, hay una forma de arquitectar nuestra aplicación de react para que agregar y mantener nuevos idiomas no sea tan complicado. Después de todo, siento que enseñar a nuestras aplicaciones a manejar varios idiomas debería ser más fácil que enseñar a nuestros cerebros. Al menos esa es mi teoría. Pero antes de explorar esta teoría, quiero nivelar el vocabulario. El primer término que probablemente hayas visto es internationalization o I18N.

La abreviatura es así porque hay 18 letras entre la I y la N en la palabra internationalization y supongo que es bastante largo de decir. Hay muchas definiciones confusas por ahí para internationalization. Encontré muchas que me resultaron confusas mientras investigaba para esta charla. Pero creo que es así porque internationalization puede significar muchas cosas diferentes para diferentes personas, dependiendo de lo que haga tu aplicación, en qué industria te encuentres, qué tipo de standards debas cumplir.

Pero me gusta pensar en la internationalization como el proceso de arquitecturar tu aplicación para que cuando ocurra la localización, las cosas simplemente funcionen. Entonces, ¿qué es la localización o L10N? La localización es el proceso de adaptar realmente el contenido y la experiencia de tu aplicación para una ubicación específica. Así que la internationalization es como arquitecturarla, y luego la localización es cambiarla. Teóricamente, si has internacionalizado tu aplicación correctamente, cuando ocurra la localización, no deberías tener que hacer mucho.

Y hay muchos elementos de la localización. Esta lista no es exhaustiva. Y, como dije, diferentes aplicaciones tendrán que preocuparse por diferentes cosas. Es posible que debas implementar algunos o todos estos elementos. Realmente depende. Y si tienes que implementar todos o algunos de esos elementos, hay algunas bibliotecas populares de React que están destinadas a ser esa solución arquitectónica de internationalization. Si tienes que admitir la internationalization, te sugiero que investigues algunas de estas bibliotecas para ver si se adaptan a tus necesidades. Pero pensé que sería más divertido en esta charla construir algunas de esas internationalization ... ¿Eso está ... Está. Sí. Sí. Esa es una buena pregunta. En realidad, no estoy seguro si hay, como, una preferencia acordada. Creo que podría depender de ti. Las APIs, creo, son un poco diferentes. Por ejemplo, creo que en el objeto internacional, pasas la cadena de formato cuando lo llamas. Y en toLocaleString, creo que puedes establecer la ubicación una vez y luego siempre usarla después de eso. Así que creo que las APIs son un poco diferentes. También sé que el objeto internacional es un poco más nuevo. Entonces, si estás admitiendo versiones anteriores de IE, por ejemplo, no creo que esté disponible allí. Genial.

Otra pregunta es, ¿existen casos especiales o dificultades únicas para países que tienen múltiples dialectos o idiomas? Digamos, por ejemplo, en España, podrías encontrarte con el vasco o el catalán. Sí, es algo de lo que hay que estar consciente. Hay muchos países que tienen diferentes idiomas o incluso escrituras dentro de diferentes idiomas. Pero generalmente, si los defines en tu cadena de localización y el usuario también puede establecer sus preferencias ya sea en su navegador o tal vez si estás trabajando en un sitio web donde las personas crean un inicio de sesión, tal vez puedas hacer que establezcan sus preferencias allí, deberías poder crear una cadena de localización con el país, el idioma y la escritura, y algunas de esas otras propiedades.

De acuerdo. Otra pregunta es, ¿cómo permites que los traductores traduzcan las cadenas? Esa es una buena pregunta. Creo que eso depende completamente y es diferente para cada organización y tal vez para qué empresa trabajas. Si no trabajas para una gran empresa, es posible que uses algo como la API de traducción de Google para traducir en masa algunas de esas cadenas. La empresa para la que trabajo tiene un equipo de traductores especializados en muchos idiomas diferentes, por lo que realmente van y traducen manualmente muchas de las cadenas además de utilizar algunas APIs de machine learning para ayudar también. Creo que depende de cuánta infraestructura de traducción tenga tu empresa y cuánto esté dispuesta a invertir en ella. Wow, el machine learning suena increíble. Tengo que decirte eso. Otra pregunta es, ¿podrías repetir las bibliotecas de CSS de derecha a izquierda que te recomendaron? Recomendar. Puedo. No fue una lista exhaustiva en absoluto, y estas diapositivas se publicarán y podré compartirlas. Pero la que estoy usando es RTL-CSSJS, esa es la que te permite usar objetos de JavaScript en CSS en JS. Otra es RTL-CSS, es como una utilidad normal de CSS. Y también estaba JSS-RTL, que es para cuando escribes CSS en JS con JSS. Hay muchas S's. Lo siento. Sí, hay muchas S's. La última pregunta para ti es, ¿tienes alguna guía o sitio web, recursos para aprender más sobre la internacionalización y cómo integrarla en tus aplicaciones? Sí, tengo una página en GitHub que puedo compartir, puedo tuitearla, que tiene los recursos de toda la investigación que hice para esta charla, y todo lo que mencioné en esta charla también está enlazado allí. El sitio web de Material design tiene una especificación muy buena para los idiomas de derecha a izquierda que encontré increíblemente útil. Es muy detallado, habla sobre iconos específicos y todo lo relacionado con los idiomas de derecha a izquierda, así que definitivamente recomendaría ese recurso también.

Sí, muchas gracias una vez más, Pete. Fue una charla muy agradable de ver. Diste tantas buenas notas sobre la internacionalización, la localización y también ver a tanta gente discutiendo sobre idiomas. Es realmente importante y da vida a la aplicación en general. ¿Hay algo en particular que te gustaría agregar? No, creo que muchas gracias por tenerme aquí. Espero que este sea un tema interesante para mucha gente. Parece que mucha gente habla 3-4 idiomas, así que esto podría ser relevante para muchas personas, lo cual es genial. Muchas gracias, Daria, por darnos una charla realmente genial y venir aquí. Muchas gracias. Por supuesto. Gracias por tenerme. ¡Adiós, adiós!