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.
personas todos los días, por lo que las cantidades de usuarios eran enormes. Y se nos pidió, a mi equipo se le pidió construir una nueva funcionalidad que permitiera contenido en vivo en su plataforma. Esto significaría
video, encuestas, chats y, por supuesto, artículos en vivo actualizados sobre diferentes cosas. Y había algunos requisitos, así que a pesar de tener estas tres o cuatro plataformas diferentes, cuatro aplicaciones diferentes, en realidad querían un solo código base. Así que esta funcionalidad que nosotros construiríamos como una biblioteca de componentes separada, necesitaría funcionar en todos estos cuatro proyectos, lo cual era bastante el requisito. Y también necesitaba tener una experiencia unificada para que se vea y se sienta igual a pesar de que la uses en una aplicación diferente, una aplicación nativa diferente, una aplicación web diferente, y así sucesivamente. Y el calendario de tiempo también era realmente ajustado, así que creo que querían sacar un MVP en menos de tres meses o algo así, lo cual para una empresa de su tamaño era una gran empresa, pero logramos obtener una versión bastante buena
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.
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. Entonces, por supuesto, había cosas buenas. 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. Y esos son realmente fáciles de construir tanto para web como para nativo si tienes un proyecto completamente nuevo de
React Native web. 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
React code funcionando en el proyecto
React, y necesitamos tener
React Native
code 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.
vamos a hacer componentes multiplataforma. En realidad, hay esta característica en
React Native que te permite hacer extensiones específicas de plataforma para archivos. Así que aquellos que han usado
React Native ya saben que si tienes un componente iOS o Android o
Vue, puedes simplemente poner el .ios antes de la extensión .js y
React Native
Bundler automáticamente sabrá qué componente usar y empaquetar en el paquete
JavaScript para qué plataforma. Y funciona realmente bien. Lo que la mayoría de la gente creo que se pierde la mayor parte del tiempo, porque cuando lo hicimos, no había tantas menciones de esto, es que en realidad también hay una extensión .native, que básicamente le dice a
React que, vale, usa este componente en la aplicación web y este con el nativo, úsalo en Android e iOS. La diferencia viene de que el otro es, por supuesto, administrado por
Webpack para la web, y luego Metro
Bundler, el empaquetador nativo de
React para el .native. Y usando esto, en realidad ya puedes crear componentes que funcionan en una u otra plataforma. Puedes ponerlos en un solo repositorio y usar eso. Pero eso en realidad no te permite construir componentes
cross-platform todavía. Todavía hay componentes separados en partes separadas. Pero vamos a profundizar en realidad mirando en
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.
cómo hacer esto. Entonces, volviendo al editor, puedes ver que este proyecto que construí, es una plantilla básica de tubería
React Native. Lo único que he añadido es la carpeta de origen con los componentes y las carpetas de utilidades. Aparte de eso, también he añadido dos instancias diferentes de
storybook. Así que, hay scripts para ejecutar
storybook en la web y luego ejecutar
storybook en
React Native. Y eso fue realmente algo que acabas de ver aquí. Entonces, si puedo volver atrás. Estas son las dos instancias separadas de
storybook. Puedes ver el botón básico allí y puedes ver el botón básico en el móvil también. Entonces, sí. Ahora, si volvemos al editor de
code, podemos ver que vamos a abrir el componente para el botón básico. En este caso se llama mi botón. Así que, vamos al archivo de mi botón. Y podemos ver ese único archivo que actualmente si miramos en el archivo .stories, podemos ver que es utilizado tanto por el lado nativo como por el lado de
React. Y la forma en que eso es posible es que mi botón es un componente que consta de opacidad de botón y párrafo. Ahora, esos no son ninguna etiqueta tradicional de
React Native o
React con la que puedas estar familiarizado. Pero en cambio están definidos de forma personalizada. Y puedes ver que están importados de este archivo utils.tags. Así que, vamos a ver eso. Y probablemente podamos tener una idea de cómo funciona esto. Entonces, primero veamos el archivo de etiquetas. Eso es realmente simple. Es solo exportar variables como heading1 es igual a la cadena h1. Y
React en realidad es bastante inteligente y puede manejar estos como los nombres de las etiquetas directamente, lo cual es realmente genial. Y también tenemos las etiquetas nativas. Y como mencionamos antes, si tenemos estas extensiones específicas de fondo, esto significa que
React Native y
React saben a cuál de estos archivos va a cuál. Entonces, si miramos el nativo, podemos ver que primero estamos importando todas estas imágenes de texto, touchable, highlighted, y opposite, y luego les estamos asignando los mismos nombres que tenemos en el lado del texto. Así que, tenemos el heading1, siempre es un componente de texto. Y eso en realidad nos permite construir la cosa. Así que, estamos exportando estos dos componentes en
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.
el componente y usándolos. Y luego, cuando
React toma este componente, verifica qué es la opacidad para
React y qué es para
React Native. Y eso funciona. Esto es casi estúpidamente simple. Pero funciona realmente bien. Como mencioné, hemos estado ejecutando esto en producción para millones de personas. Vale. A continuación, podrías estar preguntándote, ¿cómo hago realmente entonces, si volvemos, veamos los componentes. Así que, abramos el botón de estilo. Y en el lado de
React Native, podemos ver que hay un botón azul. En el lado de
React, podemos ver que también hay un botón azul. Los estilos son un poco diferentes.
React Native tiene un flex uno por defecto. Así que, ocupa todo el espacio disponible. Pero aún funcionan de la misma manera. Así que, no hacen nada. Pero son clickeables. Entonces, veamos el
code detrás de eso. Y aquí es realmente donde entran en juego los componentes estilizados. Abramos mi botón de estilo. Podemos ver que el botón de estilo está bien. Es muy similar a mi botón de antes. Tiene el elemento botón y el texto del botón. Pero en realidad, esos componentes no son los mismos que importamos del texto. Pero en cambio están aquí abajo. Y usando el constructor estilizado, estamos pasando la opacidad del botón y el elemento de párrafo, el constructor estilizado, y luego añadiendo estilos. Y eso estiliza el componente. De esta manera, puedes estilizar de manera multiplataforma realmente fácil. Funciona en ambos. Los
styled components usan
React Native
CSS, si recuerdo bien, para convertir los mismos estilos
CSS para las diferentes plataformas.
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.
props condicionales. Vale. Entonces, sí, ahora tenemos, ahora hemos mostrado cómo hacer realmente componentes funcionales, cómo estilizarlos para que sigan siendo el mismo archivo pero servidos desde dos plataformas completamente diferentes. ¿Qué pasa en un caso en el que tenemos un componente que en realidad los detalles de implementación entre las plataformas varían mucho? Bueno, vamos a echar un vistazo, así que volvamos a la
storybook y podemos ver aquí que tenemos la vista web componente y lo abrimos, abre
React Advanced en un pequeño iframe y lo mismo ocurre en realidad para la aplicación
React Native. Pero esto no es un iframe, porque
React Native no tiene soporte para iframe. Esto es en realidad un componente llamado
React Native web view que estamos simplemente envolviendo y asignando la URL como una prop. Así que vamos a mirar el
code un poco más. Vamos a abrir el componente de vista web aquí y podemos ver de inmediato que webview.native y webview.dsx son dos archivos separados. Así que eso nos dice que está bien, hay una diferencia entre la implementación entre las dos plataformas. En el lado nativo, podemos ver que eso es en realidad un contenedor. Bueno, eso es solo un wrapper que importamos de tax. Y luego tenemos errand webview que vemos que es en realidad una webview importada como un errand webview del paquete llamado
React Native WebView. Esto nos permite usar una webview en nuestra aplicación
React Native. Sin embargo, porque
React Native webview es, como el nombre lo indica, solo funciona en
React Native. Tenemos que tener una especie de implementación separada para la versión web. Así que, allí puedes ver que el componente de vista web es tal un iframe. Y a pesar de que estos son dos componentes diferentes, el webview.stories sabe automáticamente cuál importar. Y esto también funcionaría si lo usaste en una versión real de
React o
React Native. Sabría automáticamente qué componente debería usamos. Y espero que finalmente estés entendiendo la idea de cómo funciona esto. Es realmente simple. Realmente fácil. Y en mi opinión, mucho más mantenible que usar, por ejemplo, tener dos
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.
bases separadas de
code o añadiendo
React Native web a un proyecto de
React. Entonces, sí. Ahora hablemos un poco sobre por qué esta no es la solución perfecta. Así que, podrías haber notado ya que no había cosas de diseño responsivo. El I frame, por ejemplo, en la web no ocupaba toda la página o algo así o no coincidía. Lo mismo ocurre con los botones. Simplemente eran automáticamente de ese ancho. Eso es en parte porque hacer un diseño responsivo en con componentes de estilo es realmente fácil. El problema es que
React Native no soporta esas mismas etiquetas de diseño responsivo como viewport y así sucesivamente. En cambio, allí tienes que monitorear el tamaño del viewport manualmente a través del puente de
JavaScript. Y luego cambiar los estilos en base a eso. Así que, usualmente en esos casos, tienes dos opciones. O haces una función de ayuda para detectar en los estilos si estás usando si el componente se está utilizando en ese contexto o contexto nativo y aplicas las etiquetas de diseño responsivo en base a eso. O haces una solución completa basada en
JavaScript. O entonces tercero, separas esos dos componentes en dos diferentes archivos. Eso también funciona. Otra cosa muy similar son las
animations. Así que,
React Native no soporta
animations y
React no soporta la biblioteca animada de
React muy bien. Puedes sortear esto usando
React Spring. Hicimos esto en un proyecto. Funcionó relativamente bien. Es posible. No tuve tiempo de mostrártelo. Pero puedes encontrarlo en el repositorio. Y luego por supuesto la última parte es el problema es coincidir. En algunos casos, tienes la misma prop exacta, básicamente, pero tienen nombres diferentes. Tienes que hacer esta detección específica de la plataforma. ¿En cuál estamos ahora y a cuál deberíamos asignar esta función, por ejemplo. Pero en mi opinión esas cosas malas, por así decirlo, no son tan malas. Así que, este tipo de enfoque podría ser algo que yo altamente te sugeriría que pruebes en tu proyecto si necesitas soportar ambas plataformas,
React y
React Native. Una cosa que quiero mencionar sobre la
component library, en los archivos del proyecto, puedes encontrar un script de cómo empaquetar esto en un paquete de
npm, por lo que elimina el
code específico de la plataforma de las diferentes distribuciones de la biblioteca, para que no termines accidentalmente usando
code de
React Native o agrupándolo junto con tu aplicación web de
React. Pero, hey, sí, eso es todo lo que tengo. Espero que hayas aprendido algo nuevo, y espero, que te haya interesado probar este enfoque de
code específico de la plataforma, y eso es todo lo que tengo. ¡Gracias!
React Summit 2023
Comments