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.
This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.
FAQ
Perttu Lähtenalahti es un desarrollador originario de Finlandia, actualmente residente en Helsinki. Tiene experiencia en la creación de bibliotecas de componentes cross-platform para React y React Native.
En su presentación, Perttu Lähtenalahti habló sobre cómo construir bibliotecas de componentes cross-platform que pueden ser utilizadas tanto en React como en React Native, además de cómo manejar diferencias específicas de plataforma en el desarrollo de componentes.
La ventaja principal es la capacidad de usar una única base de código para compartir tanto código como sea posible entre diferentes plataformas como iOS, Android y la web, optimizando así los recursos y unificando la experiencia de usuario.
Perttu menciona el uso de extensiones específicas de plataforma, como .ios o .android para archivos, que permite al empaquetador de React Native decidir qué componente usar según la plataforma. También se pueden usar verificaciones de plataforma para aplicar propiedades específicas en React o React Native.
Durante la charla, se mencionaron herramientas como styled components, que facilitan la estilización de componentes en JS, y Storybook, que se usa para mostrar componentes en un contexto separado de una aplicación real.
El proyecto ya contaba con una aplicación React existente y grande, por lo que incluir React Native Web hubiera sido complicado debido a la necesidad de mantener la compatibilidad con el código de React existente y las demandas específicas de SEO como el uso de etiquetas HTML adecuadas.
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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!
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía). En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también. Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso. (Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas. Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?
¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.
Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Comments