Construir productos para múltiples plataformas como la web y el móvil a menudo requiere códigos base separados a pesar de que la mayoría de los componentes son idénticos en apariencia y sensación. ¿Existe una forma en la que podríamos usar la biblioteca de componentes compartidos de React en diferentes plataformas y ahorrar tiempo? En esta presentación demostraré una forma de construir una biblioteca de componentes verdaderamente multiplataforma con un enfoque único de usar React & React Native en combinación.
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Video Summary and Transcription
Esta charla discute la construcción de bibliotecas de componentes multiplataforma para React y React Native, basada en un proyecto exitoso con una gran organización de noticias propiedad del gobierno. Cubre los requisitos para el conocimiento de React Native, la construcción de componentes multiplataforma, componentes específicos de la plataforma, estilización y las herramientas utilizadas. La charla también destaca los desafíos de implementar un diseño responsivo en React Native.
1. Introducción a las bibliotecas de componentes multiplataforma
Hoy, voy a hablar sobre la construcción de bibliotecas de componentes multiplataforma para React y React Native. Discutiremos los requisitos para el conocimiento de React Native, la construcción de componentes multiplataforma, componentes específicos de la plataforma, estilización y las herramientas que utilizaremos. Este enfoque se basa en un proyecto exitoso con una gran organización de noticias propiedad del gobierno.
¡Hola a todos! Mi nombre es Perttu Lähtenalahti, y hoy voy a hablar sobre cómo construir bibliotecas de componentes cross-platform para React y React Native. Antes de sumergirme en ese tema, solo quiero presentarme brevemente. Mi nombre, como mencioné, es Perttu Lähtenalahti. No te preocupes, es realmente difícil. Incluso lo tuve mal una vez en mi pasaporte. La razón del nombre difícil es porque soy originario de Finlandia, actualmente viviendo en la hermosa Helsinki, Finlandia. Tengo un sitio web, perttu.dev. Puedes encontrar esta presentación como un artículo allí. Y un montón de otras cosas también. También puedes encontrarme en GitHub y Twitter usando este identificador aquí. Y las diapositivas para esta presentación, puedes encontrar en esta dirección. También puedes encontrar este proyecto allí. Lo que te permitirá probar y construir tus propios componentes utilizando la forma que voy a mostrarte. Entonces, sí. Vamos a sumergirnos en el tema de la charla de hoy. Entonces, de lo que va a tratar es, por supuesto, cómo construir componentes multiplataforma para que puedas usarlos tanto en proyectos de React como de React Native. Mi idea es que los requisitos para el conocimiento de React Native van a ser bastante escasos. Solo conocer las diferencias básicas entre React Native y React debería ser suficiente en este caso y espero que así sea. Y usando React Native, vamos a ver cómo usarlo para construir componentes multiplataforma que podemos usar tanto en la web como en nativo, en este caso iOS y Android, y también cómo construir estos componentes específicos de la plataforma para que podamos tener los mismos componentes pero el code siendo diferente entre estas dos plataformas. La razón de esto, vamos a hablar más tarde sobre ello, pero la idea básica es que queremos tener una única base de code y compartir tanto code como sea posible. Hacia el final de la charla, voy a profundizar un poco en la estilización y los pros y contras de este enfoque que voy a mostrarte. Luego, algunos puntos adicionales. No vamos a usar React Native web, que creo que voy a mencionar pronto, y también vamos a usar styled components y storybook. Para aquellos que no han usado styled components, es una solución realmente impresionante de CSS en JS que nos permite estilizar nuestros componentes de plataforma cerrada de manera muy sencilla en este caso. Storybook es simplemente algo que estoy usando ahora para mostrar los componentes en un contexto separado de la construcción de una aplicación real. Entonces, sí. Este proyecto o este enfoque que voy a mostrarte se basa realmente en un enfoque de cliente que hice hace un poco de tiempo. Entonces, ese cliente, no puedo mencionar el nombre, pero era una gran organización de noticias propiedad del gobierno y ellos en realidad tenían tres aplicaciones nativas de React y una aplicación web que estaba alimentada por React. Básicamente su sitio web principal. Y estaban sirviendo, diría, cerca, tal vez incluso más de un millón
2. Construyendo una Funcionalidad Unificada Multiplataforma
A mi equipo se le pidió construir una nueva funcionalidad que permitiera contenido en vivo en su plataforma. Querían un solo código base para todas sus diferentes aplicaciones y plataformas. La funcionalidad necesitaba funcionar en los cuatro proyectos y tener una experiencia unificada. A pesar del apretado calendario, logramos entregar una buena versión.
3. Introducción a los Componentes Multiplataforma
Ahora, algunos de ustedes que han usado React Native y quizás incluso React Native Web están en este punto preguntándose que, vale, esto parece una muy buena opción para usar React Native. Sin embargo, en realidad no teníamos esa opción, así que la razón por la que no usamos React Native fue múltiple, pero se redujo a esto. Podíamos usar los componentes familiares como view text e image que ya conocemos y los desarrolladores de las empresas estaban familiarizados con su uso en sus aplicaciones React Native. Sin embargo, en nuestro caso, ya era una aplicación React existente y enorme, por lo que no podíamos simplemente incluir React Native allí y hacer que funcionara, pero estábamos limitados a tenerlo de manera que necesitamos tener código React funcionando en el proyecto React, y necesitamos tener código React Native funcionando en el proyecto React. Y también en caso de que estuviéramos limitados también por estos componentes de view text e image porque necesitábamos un texto HTML adecuado como H1, H2, H3 para obtener todos los beneficios de SEO. Así que sí, sin más, hablemos realmente de cómo vamos a hacer esto, cómo vamos a hacer componentes multiplataforma.
4. Construyendo Componentes Multiplataforma
React Native tiene una característica que te permite hacer extensiones específicas de plataforma para archivos. Al usar las extensiones .ios y .android, el empaquetador de React Native puede empaquetar automáticamente el componente correcto para cada plataforma. Sin embargo, también está la extensión .native, que te permite crear componentes que funcionan tanto en plataformas web como nativas. Este enfoque todavía requiere componentes separados para cada plataforma, así que exploremos cómo construir verdaderos componentes multiplataforma.
5. Construyendo Componentes en React Native
Este proyecto es una plantilla básica de tubería React Native con carpetas de origen y utilidades. Incluye dos instancias separadas de Storybook para web y React Native. El componente para el botón básico, llamado mi botón, es utilizado tanto por el lado nativo como por React. Las etiquetas personalizadas utilizadas en este componente se definen en el archivo utils.tags, lo que permite a React manejarlas como nombres de etiquetas. Al utilizar extensiones específicas de fondo, React sabe a qué archivos pertenece cada plataforma.
6. Estilización de Componentes React con CSS de React Native
React toma el componente y verifica la opacidad para React y React Native. Es simple, pero funciona bien. Los estilos para los botones son ligeramente diferentes, pero funcionan de la misma manera. Los componentes estilizados permiten una fácil estilización multiplataforma utilizando CSS de React Native.
7. Manejo de clics de botón en React Native
Tenemos una base de código similar para dos plataformas diferentes. Para hacer que un botón sea clickeable en React Native, usamos el evento 'onPress' en lugar de 'onClick'. Hacemos una verificación de plataforma y aplicamos la prop correcta, 'onPress' para React Native y 'onClick' para React. El manejo de nombres de prop desajustados entre React y React Native se puede hacer con funciones de ayuda o hacking de TypeScript.
Y creo que eso es bastante genial. Todavía tenemos una base de code similar, pero en dos plataformas diferentes. Ahora, ¿qué pasa si realmente queremos hacer algo con el botón? Entonces, queremos que sea clickeable. Entonces, si volvemos al storybook, podemos ver que hay un botón funcional en ambos. Y lo que realmente hace es que funciona, pero realmente no hace mucho. Cuando haces clic en él, en realidad registra en una console que se presionó. Entonces, veamos el code detrás de aquí. Porque aquí es donde realmente empezaremos a ver donde tienes que empezar a hacer ciertas cosas para seguir siendo capaz de trabajar con un componente singular. Entonces, abramos el botón funcional y podemos ver que hay un evento de presión que luego hace el bloque de console presionado. Y en realidad está siendo llamado. No tengo la línea de comandos abierta, o disponible para mirar, pero puedo verificar que sí aparece, el texto de presión. Y esto es lo que realmente lo permite. Entonces, lo que está sucediendo aquí es que, porque en el lado de React, cuando estamos usando elementos DOM normales, cada elemento es clickeable porque los usas principalmente a través del ratón. Pero en React Native, porque siempre es, bueno, diría, casi siempre una pantalla táctil, es llamado un evento de presión allí. Y si en realidad solo ponemos presión aquí, se quejará porque esperará que el botón sea un botón de elemento HTML. Y si ponemos clic, en realidad podría quejarse de que no tienes el evento de presión y el evento de clic no existe en React Native. Entonces, en realidad tenemos que hacer este tipo de verificación de plataforma que, bien, plataforma, eso se exporta desde la plataforma de YouTube. Básicamente solo exporta una variable constante en qué plataforma es. Es Native para Native y web para web. Y hacemos una verificación aquí, bien, cuál es. Y aplicamos la prop correcta, ya sea clic o presión para React y React Native. Y este tipo de cosas pueden complicarse un poco si tienes, como, desajuste entre nombres de prop entre React y React Native. Podrías hacer fácilmente un manejador para estos o, como, una función de ayuda para permitirte construir estos más fácilmente. En este caso, o podrías hacer un poco de hacking de TypeScript. Eso probablemente también ayudaría a trabajar. En este caso, solo quería saber cómo, quería mostrarte cómo funciona, como, bajo el capó. Así que no es lo más limpio, pero todavía estás trabajando en un solo archivo, es bastante fácil mantener el control, para entender incluso este code condicional y
8. Implementación del Componente de Vista Web
Ahora exploremos un caso en el que los detalles de implementación entre plataformas varían significativamente. Nos centraremos en el componente de vista web, que abre React Advanced en un pequeño iframe para la versión web y utiliza un componente de vista web de React Native para la versión de React Native. A pesar de ser dos componentes diferentes, el archivo web view.stories determina automáticamente cuál importar en función de la plataforma. Este enfoque es simple, fácil y más mantenible que tener bases de código separadas o agregar React Native web a un proyecto de React.
9. Desafíos con el Diseño Responsivo en React Native
React Native no soporta etiquetas de diseño responsivo como viewport, por lo que tienes que monitorear manualmente el tamaño del viewport y cambiar los estilos en consecuencia. Puedes usar una función de ayuda para aplicar etiquetas de diseño responsivo basadas en el contexto o separar los componentos en diferentes archivos.