Qué Sucede Cuando Construyes Tu Aplicación

Rate this content
Bookmark
Slides

¿Cómo inicias tu aplicación en el simulador por la mañana? ¿Siempre ejecutas react-native run-ios? Si es así, podrías estar perdiendo mucho tiempo. Vamos a ver juntos cómo se ve una aplicación de React Native por debajo del capó. Esto nos ayudará a ser más eficientes en nuestro día a día. Identificaremos los pasos más cortos para ejecutar acciones diarias, como iniciar nuestras aplicaciones lo más rápido posible (¡sin compilaciones innecesarias de módulos nativos!) o lidiar con los molestos errores rojos que nos arroja Metro.

20 min
24 Oct, 2022

Video Summary and Transcription

La charla de hoy profundiza en el desarrollo de React Native, explorando el proceso de desarrollo, la comunicación entre JavaScript y nativo, y la implementación de aplicaciones. Destaca el proceso de construcción de aplicaciones, el comando React Native Run iOS y los gestos de desarrollo para una ejecución eficiente. La charla también enfatiza el proceso recomendado para iniciar y probar tu aplicación, así como manejar el error de la 'pantalla roja de la muerte' instalando bibliotecas faltantes y comprendiendo el papel del administrador de interfaz de usuario en la creación de vistas nativas.

Available in English

1. Introducción al desarrollo de React Native

Short description:

Hola a todos, soy Charlotte, una líder técnica de React Native en BAM. Hoy profundizaremos en tu aplicación, entenderemos qué sucede cuando la construyes y aprenderemos a ser más eficientes. Permíteme compartir una historia. Un día, me encontré con un gran error y no sabía cómo resolverlo. Solía ​​eliminar todo y comenzar desde cero, perdiendo tiempo. Mi colega me aconsejó entender qué está sucediendo dentro de la caja negra. Eso es lo que haremos hoy. Un recordatorio rápido: React Native utiliza componentes principales en lugar de elementos HTML. ¡Comencemos!

tu aplicación. Estudiaremos el interior de tu aplicación y qué sucede cuando la construyes. Y luego veremos cómo podemos utilizar esta información para ser más eficientes en nuestro día a día. Pero déjenme contarles una breve historia antes.

Un día estaba trabajando en mi escritorio y apareció un gran error rojo en mi pantalla. El tipo de error que no entendía y no sabía cómo resolver. Ese día hice lo que solía hacer en ese entonces para solucionarlo. Eliminé todo. Mi aplicación, mi simulador, tal vez incluso mi servidor de metro. Y después de ese segundo paso, volví a lanzarlo todo desde cero, completamente nuevo. Ejecuté Yang install, Pod install. Reconstruí toda mi aplicación. No entendía lo que estaba sucediendo dentro de mi simulador. Así que no pude identificar qué pieza del rompecabezas estaba fallando. Así que comencé todo de nuevo. Y funcionó. Pero estaba perdiendo mucho tiempo. Y ese día, una de mis colegas pasó y me vio eliminando todo sin ninguna compasión. Y me aconsejó tratar de entender qué estaba sucediendo dentro de esta caja negra. Así que eso es lo que hice. Y eso es lo que vamos a hacer hoy.

Un recordatorio rápido antes de comenzar. Para aquellos de ustedes que trabajan en la web, lo que deben saber sobre React Native es que en lugar de usar elementos HTML como divs y spans, vamos a usar componentes principales de React Native, como botones y texto. Y a partir de esos componentes, React Native va a pedirle al nativo que cree los componentes nativos asociados de Android e iOS. De acuerdo. Comencemos. Esta es una vista de una aplicación de React Native en nuestro entorno de desarrollo. Hay dos partes en este esquema, una parte de JavaScript y una parte nativa. En el lado de JavaScript, tenemos algo de código.

2. Proceso de desarrollo de React Native

Short description:

Tenemos código JS, JSX y TypeScript, que se transferirá a JavaScript mediante Babel. Mitro, el empaquetador de JavaScript, empaquetará el JavaScript en un solo archivo llamado bundle. En el lado nativo, tenemos Swift y Objective-C en iOS, y Java y Kotlin en Android. El código nativo debe compilarse, lo que producirá un archivo ejecutable IPA en iOS y APK en Android. Una aplicación de React Native es una aplicación nativa que instancia un motor de JavaScript para compilar y ejecutar el bundle de JavaScript, permitiendo la comunicación entre el mundo JavaScript y el mundo nativo.

Tenemos código JS, JSX, pero también código TypeScript. Este código se transferirá a JavaScript mediante Babel. El JSX se transferirá a JS y el JS se transferirá a un JS más antiguo sin ninguna de las nuevas características que las máquinas antiguas no pueden entender. Luego tenemos Mitro. Mitro es un empaquetador de JavaScript, el equivalente móvil de Webpack. Empaquetará el JavaScript en un solo archivo que se llama bundle. Y React Native solo trabajará con este archivo único. Si realizas cambios en tu código JavaScript, Mitro agregará esos cambios al bundle y actualizará tu aplicación al vuelo. Eso es todo para el JS.

Ahora, echemos un vistazo a la parte nativa. En el lado nativo, tenemos código nativo, ya sea Swift y Objective-C en iOS, y Java y Kotlin en Android. Si abres tu aplicación en tu IDE, verás una carpeta de Android y una de iOS. Y en este directorio de iOS, tienes todo lo que necesitas para crear una aplicación de iOS. Si estás construyendo una en Swift, de hecho, estarías trabajando dentro de este directorio.

Ahora, este código nativo debe compilarse, y este proceso de compilación va a producir una aplicación ejecutable, IPA en iOS, APK en Android. Estas son aplicaciones nativas que podremos instalar en nuestro teléfono. Estas dos aplicaciones, el bundle y el IPA, nos permitirán construir nuestra aplicación de React Native. Echemos un vistazo más de cerca a ellas. Esta es la parte interna de una aplicación de React Native. En realidad, se construye a partir del IPA que se ejecutó. Una aplicación de React Native es realmente solo una aplicación nativa que instanciará un motor de JavaScript que compilará y ejecutará el bundle de JavaScript. El mundo JavaScript podrá comunicarse con el mundo nativo. Esto funciona así. Imagina que tenemos este componente simple que renderiza un botón con un título especial. Primero, el JavaScript renderizará su botón en la pantalla. Para hacer esto, dará instrucciones al nativo para que renderice el componente nativo equivalente. Entonces dice: `Por favor, nativo, ¿podrías renderizar este botón para mí?` Y el nativo responde: `Por supuesto. Aquí lo tienes. El usuario acaba de presionarlo. Tal vez deberías activar esta devolución de llamada cuando se presione.`

3. Comunicación entre JavaScript y Nativo y Despliegue de la Aplicación

Short description:

El JavaScript se comunica con el lado nativo a través de un puente, que cambiará con la nueva arquitectura. Si quieres saber más, asiste a charlas en React Advanced. Una vez desplegados en las tiendas, el paquete de JavaScript y la aplicación nativa se producen en tiempo de compilación. Antes de continuar, déjame preguntarte, ¿siempre ejecutas React Native Runner OS para iniciar tu aplicación por la mañana?

Y el JavaScript lo hace. En nuestro caso, cambia el título del botón. Entonces el JavaScript dice, oye, nativo, ¿podrías cambiar este título de botón por mí? Y el nativo lo hace. Y así es como, como usuario, ahora puedo ver el nuevo título del botón en la pantalla.

Ahora, la comunicación entre el JavaScript y el nativo actualmente se maneja a través de un puente. El puente es una cola donde el JavaScript y el nativo intercambian mensajes JSON, como por favor cambia este título de botón. Pero esto cambiará con la nueva arquitectura de la que quizás hayas oído hablar. No profundizaremos en este tema, pero las ideas principales de esta charla seguirán siendo válidas dentro de tu arquitectura. Y si quieres saber más sobre lo que cambiará, habrá varias charlas sobre este tema en React Advanced.

Así que te aconsejaría que escuches una de las charlas de Nicola Corti o Gunther Bord. Volvamos a nuestra aplicación React Native. Tenemos nuestra aplicación. Pero tal vez, algún día, nos gustaría tener algunos usuarios y enviarla a algunas tiendas. Dijimos anteriormente que nuestro entorno de desarrollo de JavaScript producía el paquete de JavaScript. Pero una vez que lo desplegamos en las tiendas, ya no tenemos nuestro entorno de desarrollo. No necesitamos que Metro agregue ningún cambio de JavaScript con escrituras. En modo de lanzamiento, el paquete de JavaScript se produce de una vez por todas en tiempo de compilación. Y lo mismo ocurre con la aplicación nativa. Desplegamos eso en las tiendas. Así que genial. Tenemos nuestra aplicación React Native.

Antes de continuar, tengo una pregunta rápida para ti. ¿Cómo inicias tu aplicación por la mañana? ¿Por casualidad siempre ejecutas React Native Runner OS? Espero que no. No, espera. En realidad, sí lo hago. De lo contrario, no tendría nada que enseñarte. De todos modos, eso es lo que solía hacer. Pero no era la forma más eficiente de comenzar mi día. Para aquellos de ustedes que trabajan en la web, React Native Runner OS es el comando que usamos para crear y ejecutar nuestra aplicación. Es un comando muy práctico.

4. Proceso de Construcción de la Aplicación

Short description:

Cuando construimos nuestra aplicación, lleva bastante tiempo, aproximadamente cinco minutos cada vez. Veamos qué sucede durante este proceso.

Se inicia un simulador. Se construye e instala nuestra aplicación, y estamos listos para comenzar. El problema es que este comando lleva bastante tiempo, aproximadamente cinco minutos cada vez. Pero, ¿qué está tardando tanto? Veamos qué sucede cuando construimos nuestra aplicación, ¿de acuerdo? Aquí encontraremos los mismos elementos que en los primeros esquemas, pero en una vista más cronológica. Además, en este momento estoy hablando mucho sobre iOS. Pero Android es prácticamente lo mismo. Y para esta parte, ten en cuenta que estoy hablando de la architecture heredada, no la nueva , pero las conclusiones serán las mismas. Comencemos.

5. Comando React Native Run iOS

Short description:

Cuando ejecutamos React Native Run iOS, ocurren dos cosas en paralelo. En primer lugar, un servidor Metro recopila y transpila el código JavaScript en un paquete. En segundo lugar, se lanzan simuladores y se compila el código nativo para producir un IPA ejecutable. Los módulos nativos se cargan y el motor JavaScript solicita el paquete a Mitra. Una vez recibido el paquete, el motor JavaScript lo ejecuta, creando vistas nativas para los componentes de la interfaz de usuario. Tu aplicación está lista para usar.

Esta es una vista de nuestro comando React Native Run iOS. Cuando ejecutamos React Native Run iOS, ocurren dos cosas en paralelo. Por un lado, vamos a ejecutar un servidor Metro. Este servidor Metro va a recopilar todo el código JavaScript en el paquete, transpilarlo con Babel y entregar este paquete. Pero por ahora, es un servidor. Está ramificado en un puerto y está esperando instrucciones para llegar.

Por otro lado, vamos a abrir nuestros simuladores y lanzarlos. Y vamos a ocuparnos de nuestro código nativo. Como dijimos antes, el código nativo debe ser compilado. Y este proceso de compilación va a producir una aplicación, un ejecutable, un IPA que vamos a instalar en nuestro simulador. Una vez instalado, lo vamos a lanzar.

Y ahora ocurren dos cosas más en paralelo. Por un lado, vamos a cargar los módulos nativos. Los módulos nativos exponen clases nativas al JavaScript. Esas son clases. Necesitan ser instanciadas en algún momento. Por otro lado, vamos a iniciar el motor JavaScript que va a hacer una solicitud a Mitra para obtener el paquete. Y en este punto, si miras en tu inspector de red, verás esta solicitud hecha a tu propio localhost. También verás en el servidor Mitra esta barra de progreso. Una vez que el motor JavaScript obtiene el paquete, lo ejecuta. Recorreremos el árbol de componentes JavaScript dando órdenes al nativo para crear las vistas nativas cada vez que se encuentre un componente de la interfaz de usuario. Y eso es todo. Tu aplicación está lista para usar. Felicidades.

6. Gestos de Desarrollo y Arranque de la Aplicación

Short description:

Vamos a explorar algunos gestos de desarrollo y cómo ejecutarlos de manera eficiente en el mundo móvil. Cuando realizamos un cambio en JavaScript, el sistema de escucha de Watchman de Mitra lo agrega al paquete y activa las recargas. Para los cambios nativos, el código debe compilarse e incluirse en la aplicación, lo que requiere una reconstrucción. La instalación de dependencias de JavaScript se puede hacer con YARN install, mientras que las dependencias nativas requieren ejecutar react native run iOS. Para iniciar la aplicación diariamente solo se necesita un servidor Mitra, el dispositivo anterior y la aplicación instalada.

Ahora que tenemos esto, echemos un vistazo a algunos gestos de desarrollo del día a día y veamos cómo podemos ejecutarlos de manera eficiente en nuestro mundo móvil. Lo primero que haces cuando desarrollas es, bueno, desarrollar. Entonces haces un cambio, un cambio en JavaScript. Esta receta diferente aquí es la de Mitra. Mitra tiene un sistema de escucha llamado Watchman que escuchará los cambios que hagas dentro del código. Y cuando agregas algo de JavaScript, lo agrega al paquete y activa las recargas. Entonces, para ver los cambios en nuestra aplicación, gracias a la recarga en caliente, solo necesitamos guardar nuestro código.

Ahora otro tipo de cambio, uno más complicado que puedes hacer en el código, es un cambio nativo. Este nuevo código nativo que agregaste debe compilarse e incluirse en nuestra aplicación. Corresponde a este paso en nuestro árbol. Lo que debemos entender aquí es que este proceso de compilación producirá una nueva aplicación y la instalará en nuestro teléfono. Sobrescribirá por completo la aplicación anterior que teníamos instalada. Entonces, para ver nuestro nuevo cambio nativo, debemos reconstruir nuestra aplicación, ya sea ejecutando React Native run iOS o construyéndola con Xcode.

Ok, ¿qué más hacemos con frecuencia? ¡Ah, las bibliotecas! Digamos que tu aplicación se está ejecutando, estás programando felizmente y necesitas instalar una nueva dependencia de JavaScript. Lo que debes hacer aquí es simplemente ejecutar YARN install. Ves, Mitro vigila nuestro código fuente pero también vigila nuestros modules de nodo. Entonces ejecutas YARN install y Mitro agregará este cambio al paquete. Pero no solo dependemos de las dependencias de JavaScript. También dependemos de algunas dependencias nativas. Entonces, si agregaste una nueva dependencia nativa ejecutando prod install, que es el comando que usamos para agregar una dependencia nativa de iOS, el equivalente de YARN install en iOS. Si agregaste esta nueva biblioteca, esta nueva biblioteca nativa, este es un nuevo código nativo que también debe compilarse. Corresponde a este paso en R3. Entonces debes ejecutar react native run iOS para reconstruir tu aplicación.

Ahora el gesto principal que quería revisar contigo hoy es este, cómo iniciar tu aplicación diariamente. Porque, como dije, solía ejecutar React native run iOS todos los días para lanzar mi aplicación, pero no era realmente necesario. Ves, cuando ejecutas este comando, pasas por todos esos pasos, incluida la compilación del código nativo, que realmente lleva la mayor cantidad de tiempo aquí. Pero a menos que hayas agregado una nueva biblioteca nativa durante la noche, no necesitas hacer esto. Tu aplicación ya está instalada en algún lugar en un simulador en tu computadora. Lo que necesitas para iniciar tu aplicación son realmente tres cosas. Un servidor Mitra, el dispositivo que usaste el día anterior y la aplicación instalada en ese dispositivo.

7. Starting and Testing Your App

Short description:

El proceso recomendado para iniciar tu aplicación es ejecutar un servidor Mitra, lanzar tu simulador y hacer clic en tu aplicación para iniciarla. No es necesario ejecutar React Native en iOS todos los días, pero se recomienda hacerlo ocasionalmente. También es importante probar tu aplicación en un simulador diferente. No es necesario compilar tu código nativo nuevamente; puedes instalar el ejecutable en otro simulador. No es necesario cerrar el simulador al encontrar errores. Hay dos errores principales relacionados con el problema de los saldos: uno en JavaScript y otro en el mundo nativo.

Entonces, el proceso que recomendaría para iniciar tu aplicación es el siguiente. Primero, ejecutas un servidor Mitra ejecutando react native start. Luego, lanzas tu simulador. Puedes hacerlo en la línea de comandos o usando Spotlight seleccionando tu aplicación de simulador. Luego, debes hacer clic en tu aplicación en el simulador para iniciarla. Y eso es todo. Ya ahorra mucho tiempo.

Una pequeña advertencia, sin embargo. Aunque te recomiendo encarecidamente que no ejecutes React Native en iOS todos los días para iniciar tu aplicación, aún te recomiendo que lo ejecutes de vez en cuando. Verás, si estás trabajando en un proyecto donde ya no ocultas bibliotecas con frecuencia, el riesgo es que el día que necesites construir tu aplicación, ya no funcione. Y no quieres pasar tres horas depurando este proceso cuando tienes una nueva versión para entregar a las tiendas.

Avancemos al último gesto, probar tu aplicación en un simulador diferente. Eso es algo que tengo que hacer todos los días. Por lo general, trabajo en un simulador específico, pero tengo que probar mi código en diferentes situaciones, con una pantalla más pequeña o sin muesca, por ejemplo. Hasta que aprendí todo esto, solía ejecutar React Native Run iOS todos los días para hacerlo. Pero no es necesario. Puede que empieces a entender por qué ahora. No necesitas compilar tu código nativo nuevamente. Tu código nativo no es específico de un iPhone en particular. Todo lo que necesitas hacer es tomar el ejecutable que ya construiste e instalarlo en otro simulador. En Android, puedes hacer esto ejecutando ADP install. En iOS, puedes hacer esto en Xcode seleccionando Run Without Building.

Es posible que hayas notado que ninguno de estos pasos incluye cerrar tu simulador. Eso es algo que solía hacer cada vez que encontraba uno de esos grandes errores rojos de los que no sabía cómo deshacerme. Pero ahora que sabemos qué hay dentro de esta caja negra, tal vez podamos intentar juntos entender esos errores y ver cómo solucionarlos sin cerrar nada. Básicamente, nos encontramos con dos errores principales relacionados con el problema de los saldos. El primero ocurre en JavaScript, mientras que el otro ocurre en el mundo nativo. Echemos un vistazo al primero. Nos dice que no se pudo encontrar nuestra biblioteca dentro del proyecto. Esto significa que estamos usando una biblioteca que no hemos instalado.

8. Handling Red Screen of Death Error

Short description:

Para solucionar el error de la 'pantalla roja de la muerte', debes instalar la biblioteca faltante ejecutando 'yarn install'. Si la biblioteca tiene una parte nativa, también debes instalarla usando 'pod install' y reconstruir la aplicación con 'react native run iOS'. Es crucial comprender el papel del administrador de interfaz de usuario en la creación de vistas nativas. Si el administrador de interfaz de usuario no puede encontrar el elemento nativo, significa que la parte nativa de la biblioteca no se instaló correctamente. Asegúrate de instalar tanto las partes de JavaScript como las partes nativas para evitar errores. Gracias por escuchar!

Entonces, solo necesitamos instalarlo ejecutando 'yarn install' y aquí vamos de nuevo. Este error también puede ocurrir en otra situación. Imagina que mientras tu aplicación se está ejecutando, haces pull en tu rama principal y alguien más agregó una biblioteca. Antes de que tengas la oportunidad de ejecutar 'yarn install', estás usando una biblioteca que aún no has instalado. Entonces, JavaScript está diciendo que no conoce esta cosa que estás tratando de usar. Así que simplemente ejecutas 'yarn install'.

Pero, ¿qué pasa con lo instantáneo? Piensa en esto. Esta biblioteca también puede tener una parte nativa. En este caso, también debes instalarla ejecutando 'pod install' y compilarla. Entonces, debes reconstruir tu aplicación ejecutando 'react native run iOS'.

Avancemos al segundo error. Nos dice que no puede encontrar el elemento de nuestra biblioteca en el administrador de interfaz de usuario. El administrador de interfaz de usuario maneja las operaciones de interfaz de usuario, como la creación de vistas nativas. Cuando JavaScript solicita la creación de un elemento nativo, el administrador de interfaz de usuario maneja esa solicitud y la transfiere a la parte nativa. Y en este error, el administrador de interfaz de usuario está diciendo que no conoce el elemento nativo. Por lo tanto, significa que nuestra biblioteca no se ha instalado correctamente. Y específicamente, falta la parte nativa. Estamos seguros de que la parte de JavaScript se instaló. De lo contrario, habríamos tenido un error antes en el lado de JavaScript. El error que vimos justo antes, en realidad. En nuestro caso, este error ocurre después cuando JavaScript solicita al nativo que renderice los componentes. Para solucionar esto, solo necesitamos instalar la parte nativa ejecutando 'pod install' y luego 'react native run iOS'.

Espero que la próxima vez que te encuentres con la pantalla roja de la muerte, entiendas qué está sucediendo detrás de escena. Y sepas cómo manejarlo. Eso es todo por mi parte. Muchas gracias por escuchar. Fue mi primera charla y me alegró mucho darla. Además, por favor no cierres tu simulador. Son personas agradables.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
React Summit 2022React Summit 2022
27 min
Inside Fiber: the in-depth overview you wanted a TLDR for
I want to provide an in-depth overview of the important concepts behind reconciliation. We'll then explore how React uses the algorithm and go through a few magic words we hear a lot, like coroutines, continuations, fibers, generators, algebraic effects and see how they all relate to React.js.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Deep Diving on Concurrent React
Writing fluid user interfaces becomes more and more challenging as the application complexity increases. In this talk, we’ll explore how proper scheduling improves your app’s experience by diving into some of the concurrent React features, understanding their rationales, and how they work under the hood.
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel