Flipper: La Plataforma de Herramientas de Desarrollo Extensible para React Native

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Eres un desarrollador de React Native? ¿Siempre has deseado el rico ecosistema de herramientas de desarrollo que existe para la web en Chrome y Firefox? Flipper es la plataforma interna y extensible de herramientas de desarrollo móvil de Facebook, utilizada por los desarrolladores móviles que trabajan en Facebook, WhatsApp, Instagram y muchas otras aplicaciones.


Recientemente, el equipo de React Native y Flipper ha estado trabajando arduamente para agregar soporte de primera clase para React Native. Esto significa que ahora se puede monitorear el tráfico y el rendimiento de la red, utilizar las herramientas de desarrollo de React, inspeccionar los registros del dispositivo y la aplicación, e incluso depurar JavaScript, todo ello de manera conveniente utilizando una sola herramienta coherente.


Y lo mejor de todo: Flipper es extensible, ¡así que construyamos nuestro propio complemento mientras lo hacemos!

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

Flipper es una plataforma de desarrollo de aplicaciones móviles desarrollada en Facebook, usada para inspeccionar y depurar aplicaciones, incluyendo soporte para React Native.

Flipper optimiza el proceso de desarrollo con React Native al proporcionar herramientas para inspeccionar rápidamente cambios en el código y visualizar elementos tanto de React como del lado nativo de la aplicación.

No es necesario utilizar Hermes para usar Flipper, aunque Hermes ofrece beneficios adicionales como herramientas de depuración paso a paso.

No se ha confirmado la compatibilidad de Flipper con Expo, ya que no ha sido probado directamente por el presentador.

Existen dos tipos de complementos para Flipper: complementos genéricos que aplican de manera general a una tecnología, y complementos específicos de la aplicación que se adaptan a servicios o características particulares.

Para extender Flipper con un nuevo complemento, se debe desarrollar código JavaScript para el escritorio y extender la aplicación móvil para interactuar con este, permitiendo la transmisión de datos y eventos entre ambos.

Los complementos de la comunidad, como los que integran ReactorTron o Redux, permiten centralizar herramientas de depuración y diagnóstico en un solo lugar, mejorando la eficiencia del desarrollo.

Michel Weststrate
Michel Weststrate
32 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Flipper es una plataforma de herramientas de desarrollo extensible para React Native, desarrollada en Facebook, que permite inspeccionar el árbol de desarrollo de React y los elementos nativos. Ofrece complementos para la inspección de la caché de imágenes, la modificación de preferencias y las solicitudes de red. Flipper se puede utilizar para construir complementos específicos de la aplicación e integra con Redux y ReactorTron. La herramienta está siendo sometida a una importante rediseño con nuevas características como el modo oscuro y una biblioteca de componentes estandarizada. Los mantenedores pueden depurar complementos dentro de complementos y hay planes para integrarse con GraphQL.

1. Introduction to Flipper and React Native

Short description:

Bienvenidos a mi charla sobre Flipper, la plataforma de herramientas de desarrollo extensible para React Native. React Native proporciona un ciclo de retroalimentación rápida, optimizando la velocidad de desarrollo. Flipper es una plataforma de desarrollo de aplicaciones móviles desarrollada en Facebook, utilizada por todos nuestros ingenieros móviles. Introdujimos soporte para React Native y les mostraré una demostración rápida. Descarguen Flipper, inicien el emulador y carguen el proyecto. Flipper nos permite inspeccionar el árbol de desarrollo de React y los elementos nativos, realizando cambios si es necesario.

♪ Hola, gente. Bienvenidos a mi charla sobre Flipper, la plataforma de herramientas de desarrollo extensible para, entre otros, React Native. Mi nombre es Michel Estrada y trabajo en Facebook en Flipper.

En Facebook, descubrimos que React Native es una pila de desarrollo increíble para el desarrollo móvil. ¿Por qué? Básicamente, porque proporciona un ciclo de retroalimentación rápida, optimizando el tiempo entre realizar cambios en el código y verlos en la pantalla. Así que eso es genial y es muy importante para tener una buena velocidad de desarrollo.

Pero hay otra pregunta que debemos hacernos, y es ¿qué tan rápido puedes descubrir qué cambio debes hacer? Y ahí es donde entra Flipper. Flipper es una plataforma de desarrollo de aplicaciones móviles desarrollada en Facebook y es utilizada por todos nuestros ingenieros móviles. A principios de este año, introdujimos soporte para React Native. Y les mostraré una demostración rápida de cómo se ve.

Primero, descargaremos Flipper desde nuestro sitio web. Ya omití esta parte porque ya lo tengo instalado previamente. Cuando inicias Flipper, verás que hay un lienzo bastante vacío. Para esta demostración, he preparado una pequeña aplicación en la que mostraremos algunos datos de Bitcoin. Aquí tenemos el código. Es un proyecto de React Native recién generado. El único cambio que haré es habilitar Hermes. Luego, iniciaré el emulador y mi proyecto. Esto lleva un poco de tiempo, pero ya terminamos. Se está cargando ahora y aquí tenemos un proyecto recién creado. Inmediatamente vemos que Flipper tiene mucho contenido. A la izquierda, hay dos secciones que podemos reconocer. La primera sección es nuestra aplicación, en este caso, la aplicación de monedas, y muestra todos los complementos que están conectados a esta aplicación. También vemos complementos conectados al dispositivo en sí, por ejemplo, los registros. En segundo lugar, tenemos esta conexión con el metrobundler en sí, lo que nos permite, por ejemplo, inspeccionar los registros, pero también inspeccionar el árbol de desarrollo de React. Con Flipper, podemos usar directamente las herramientas de desarrollo de React e inspeccionar los diseños. Pero lo que es aún mejor es que como Flipper es una herramienta desarrollada para el desarrollo móvil nativo, significa que también podemos inspeccionar los elementos nativos que son utilizados por el nativo para crear nuestro diseño. Entonces, si usamos el inspector de diseño, podemos inspeccionar un cierto elemento e incluso realizar cambios en él.

2. Explorando Flipper y Construyendo una Aplicación de Bitcoin

Short description:

Agregamos elementos nativos utilizados por React Native y exploramos los complementos disponibles, incluyendo la inspección de la caché de imágenes, la modificación de preferencias y el potente complemento de red. En esta demostración, construiremos una pequeña aplicación que muestra datos de Bitcoin utilizando componentes como vista de monedas y elemento de moneda. Podemos inspeccionar los datos utilizando console.log, pero Flipper proporciona capacidades más avanzadas como nivel de registro, copiar detalles y búsqueda. También podemos inspeccionar directamente las solicitudes de red.

Por ejemplo, si cambio el texto aquí, inmediatamente verás que eso se aplica a lo que está sucediendo en la pantalla. Ahora estamos agregando los elementos nativos utilizados por React Native. Y hay muchos más complementos disponibles de forma predeterminada, como la inspección de la caché de imágenes, ver las preferencias y modificarlas. Y un complemento muy poderoso es el complemento de red. Básicamente, esto te permite inspeccionar todas las solicitudes de red que realiza nuestra aplicación. Y vamos a profundizar un poco más en eso.

Esto es básicamente lo que obtienes de forma predeterminada si inicias Flipper en un proyecto fresco de React Native. Y eso es lo que quiero construir hoy para esta demostración, una pequeña aplicación que muestra datos de Bitcoin como en esta maqueta. Y voy a tomar un atajo y pegar algunos archivos que ya tengo en mi portapapeles. Esto reemplaza básicamente Apps.js con una interfaz de usuario y una lógica que obtiene Bitcoin de un punto final remoto. Y mostramos algunos datos de Bitcoin con sus propios componentes. Así que tenemos este componente de vista de moneda. Obtiene los data y utiliza un efecto. Luego utiliza un flatlist para mapear todos los data y mostrarlo. Luego está este componente de elemento de moneda. Y eso muestra registros mutuos.

Por ejemplo, si tengo una moneda, puedo inspeccionar qué hay dentro. Tenemos rango e ícono, pero ¿qué más hay? Una forma de averiguarlo es usar console.log. Así imprimo los data que recibo. Y echemos un vistazo a Metro Bundler. Ahora veo que está imprimiendo todos los data. Pero puedo ver los mismos data desde Flipper, que es más completo. Así que este es básicamente el mismo registro. Pero al ver esto en Flipper, tenemos más capacidades. Puedo ajustar el nivel de registro. Puedo copiar detalles. Puedo buscar. Así que esto es más poderoso. Y en realidad, ni siquiera necesitamos ese console.log, porque podríamos haber inspeccionado directamente las solicitudes de red que se están enviando. Por ejemplo, puedo inspeccionar una de esas solicitudes de red.

3. Inspectando Datos y Desarrollando Complementos

Short description:

Flipper proporciona un árbol interactivo para inspeccionar datos en el cuerpo de la solicitud. Adjuntar el depurador Hermes permite la depuración de puntos de interrupción sin depender de las solicitudes de red. Flipper es una plataforma extensible con complementos genéricos y específicos de la aplicación. Desarrollar un complemento de Flipper implica agregar JavaScript al escritorio de Flipper y extender la aplicación móvil. En la próxima demostración, construiremos un complemento para agregar y visualizar datos de Bitcoin a lo largo del tiempo. Eliminaremos el registro consultado y crearemos un nuevo complemento utilizando el paquete paper.

Y como esta es una respuesta JSON, obtengo este árbol interactivo que me muestra todos los datos disponibles en el cuerpo de la solicitud. Esta es una forma aún más fácil de averiguar qué está sucediendo y qué datos están llegando a mi aplicación.

Aún más poderoso es adjuntar el depurador Hermes. Por eso puedo usar el depurador Hermes desde el principio. Lo que puedo hacer al usar el depurador es encontrar ese componente de elemento de moneda, establecer un punto de interrupción y, la próxima vez que tengamos una representación, alcanzaremos el punto de interrupción y podremos inspeccionar el objeto. Ahora esta es una solución mucho más general y no depende de las solicitudes de red para poder ver qué está sucediendo en nuestra aplicación.

Básicamente, encontramos diferentes formas de inspeccionar nuestra aplicación, que son realmente difíciles cuando no tienes Flipper disponible. Por lo tanto, Flipper tiene muchas capacidades y potencia, pero eso no es todo. Flipper es una plataforma extensible. Y si, por ejemplo, abres una aplicación cuando trabajas en Facebook, probablemente tendrás alrededor de 50 complementos que te permitirán inspeccionar varios servicios de características en la aplicación. Por lo tanto, para nosotros, la extensibilidad es muy importante. Y básicamente, hay dos tipos de complementos que puedes desarrollar. Técnicamente son iguales, pero conceptualmente son muy diferentes.

En primer lugar, están los complementos genéricos. Estos son los complementos que hemos desarrollado hasta ahora, que se aplican de manera genérica a una pila de tecnología. Por ejemplo, la inspección de solicitudes de red o el diseño, que también pueden construir complementos específicos de la aplicación. Complementos que tienen nodos sobre el significado de tu aplicación y enriquecen tu experiencia de desarrollo de esa manera. Y voy a construir un pequeño ejemplo de eso.

Cuando se trata de desarrollar un complemento de Flipper, hay dos partes que deben implementarse. En primer lugar, hay algo de JavaScript que debe agregarse al escritorio de Flipper, solo para asegurarse de que tenga una interfaz de usuario agradable con la que pueda compartir los datos. En segundo lugar, debes extender la aplicación móvil para enriquecer tu aplicación y, por ejemplo, enviar eventos al escritorio de Flipper. Entonces, lo que quiero hacer en la próxima demostración es básicamente agregar datos de Bitcoin que tenemos y agregarlos a lo largo del tiempo para poder ver tendencias. Eso es algo que sería bastante difícil si solo miramos los registros con las solicitudes nativas que pasan. Cuando miramos los registros, vemos muchos datos, pero realmente no podemos saber qué están haciendo las monedas. Así que construyamos un complemento para eso.

Primero eliminamos el registro consultado que introdujimos anteriormente y luego vamos a crear un nuevo complemento utilizando el paquete paper. Así que tenemos un terminal nuevo, obtenemos un directorio nuevo y creamos la estructura básica utilizando el paquete paper. Y le damos el ID 'coins', eso es bastante importante porque es lo que alinea el escritorio y el lado móvil de las cosas. Esperamos a que se complete la instalación y veamos qué se ha generado para nosotros.

4. Implementando el complemento de Coins y enviando datos

Short description:

Al iniciar, hay un generador de usuarios que almacena eventos y muestra los datos en la pantalla. Al reiniciar Flipper, se carga nuestro complemento. Implementamos el complemento en la aplicación móvil, manejando eventos y enviando datos al escritorio. El complemento se carga condicionalmente en las compilaciones de desarrollo. Se instalan las conexiones nativas y se envían datos al escritorio de Flipper. Después de reiniciar la aplicación de Android y habilitar el complemento, los datos se muestran en la interfaz de Flipper, ordenados por moneda y agregados.

Entonces, cuando comenzamos, básicamente hay un generador de usuarios que toma los eventos y, por defecto, solo los almacena. Y como una forma razonable de eso, básicamente muestra todos los datos que tenemos en la pantalla hasta ahora. Así que, y reiniciemos Flipper, eso debería cargar nuestro complemento. Y si vamos a la pantalla de administración de complementos, verás que nuestro complemento de monedas se ha cargado.

Pero hasta ahora solo tenemos el lado del escritorio. Así que volvamos a nuestra aplicación móvil e implementemos nuestro complemento. Por ahora, lo voy a hacer directamente en este archivo. Así que creé un complemento de monedas que primero tiene que exponer este ID para conectarse al lado del escritorio. Y en segundo lugar, tiene que manejar algunos eventos. Por ejemplo, recibirá un evento de conexión con una conexión cuando el usuario seleccione este complemento en la interfaz de usuario. Y eso significa que hay una conexión abierta al escritorio del desarrollador y podemos comenzar a enviar mensajes. Para eso, introduzco un método para enviar monedas y, dada una conexión, enviar algunos datos a través del cable al escritorio.

Ahora quiero cargar el complemento solo si tengo una compilación de desarrollo. Las compilaciones de producción se eliminarán mediante el árbol de dependencias, por eso lo hago condicional. Y ahora tengo que instalar las conexiones nativas de Flipper también. Solo necesito hacerlo una vez. Eso está sucediendo en segundo plano. Y ahora, cada vez que recibamos nuevos datos y estemos en la compilación de desarrollo, voy a enviar esos datos al escritorio de Flipper. Esto debería ser básicamente todo lo que necesitamos para conectar la aplicación móvil a nuestro nuevo complemento. Ahora voy a reiniciar mi aplicación de Android solo una vez porque acabamos de instalar mis dependencias nativas frente a las conexiones de Flipper. Y también voy a iniciar los paquetes de Flipper en modo de observación para asegurarme de que nuestro escritorio se vuelva a compilar cada vez que haga algunos cambios allí. Así que esperemos a que se cargue la aplicación. Ahí vamos, tiene algunos datos. Y ahora nuestro complemento también es visible en la interfaz de Flipper. He habilitado el complemento y ahora vemos que los datos están llegando y se muestran en la pantalla. Esto demuestra que la conexión funciona. Hasta ahora, la interfaz de usuario es un poco fea. Nuevamente, tengo algo en mi portapapeles para que se vea bien. Y las posibilidades se recogen. Y si actualizamos los datos, lo que verás ahora es que los datos están ordenados por moneda y también se agregan.

5. Building Application-Specific Plugins

Short description:

Podemos usar Flipper como un control remoto para nuestra aplicación móvil, lo cual es conveniente para el desarrollo móvil. En la próxima demostración, introducimos un botón de pausa para detener la actualización de datos mientras depuramos. Al enviar un evento de pausa a la aplicación móvil, alternamos el estado actual utilizando el método setPause. El efecto ahora depende del estado de pausa actual, lo que nos permite salir temprano del efecto cuando está en pausa. Esto nos permite visualizar y controlar el comportamiento de nuestra aplicación móvil utilizando Flipper.

Entonces, si llega una segunda solicitud, podemos mostrar las tendencias entre los estados actual y anterior. Esto es muy específico para nuestra aplicación.

Básicamente, hemos realizado una integración unidireccional donde generamos datos en la aplicación móvil y los mostramos en Flipper. También podemos hacerlo al revés. Básicamente, podemos usar Flipper como un control remoto para nuestra aplicación móvil. Esto es bastante conveniente, especialmente cuando se realiza desarrollo móvil, ya que generalmente no hay mucho espacio en la pantalla para introducir utilidades de depuración.

En la próxima demostración, lo que quiero asegurarme es que, en lugar de actualizar los datos todo el tiempo en segundo plano, lo cual puede ser bastante molesto al depurar, quiero poder pausar este proceso para que como desarrollador, no esté mirando algo y al mismo tiempo estén llegando nuevos datos. Comencemos por introducir en nuestro complemento de escritorio un botón de pausa simple. Y si hago clic en él, enviaré un nuevo evento llamado pausa al cliente, es decir, a la aplicación móvil. Eso es bastante sencillo. El botón se muestra muy bien. Ahora, por supuesto, tenemos que procesar los datos en el otro lado. Ahí es donde también resulta útil el objeto de conexión. En la conexión, puedo comenzar a recibir nuevos eventos. Utilizo el método connection.receive y, para este evento de pausa, que puede tener algunos padres, no en este caso, y también tiene un respondedor, con el cual podemos enviar datos, nada en este caso, pero en este evento, llamamos al método de pausa. Y en el método de pausa, vamos a llamar a un método setPause, si tienes algo así, y alternar el estado actual. Ahora, setPause es básicamente un nuevo estado, una función de datos, que pasamos al complemento, nuevamente, en una compilación de desarrollo. Lo último que tenemos que hacer es asegurarnos de que nuestro efecto ahora dependa del estado actual de pausa. Y si el estado actual está en pausa, entonces podemos salir temprano del efecto en lugar de obtener datos. Esperemos la actualización, nuevamente. Ahí vamos. Ahora tarda unos segundos en cargar los datos de 10 puntos, pero ahí está. Y ahora puedo presionar el botón de pausa y dejará de obtener nuevas solicitudes de red. Ahora, esto es un poco difícil de ver ahora, así que visualicémoslo solo para esta demostración. Estamos en el estado de pausa, lo guardamos, esperamos la actualización. Esperemos hasta que el punto final vuelva y ahí está, algunos datos. Y ahora, si hago clic en el botón, verás de inmediato que el estado y la aplicación cambian. Básicamente, hemos construido un control remoto desde Flipper para interactuar con nuestra aplicación móvil y alterar su comportamiento. Así es como se pueden construir complementos específicos de la aplicación.

6. Community Plugins: ReactorTron and Redux Debugger

Short description:

Hay dos complementos de la comunidad que vale la pena mencionar: ReactorTron y Redux Debugger. ReactorTron integra la pila de ReactorTron en Flipper, proporcionando utilidades de depuración para aplicaciones nativas que utilizan stacks específicos como Redux o MobXtate3. El Redux Debugger es un complemento de la comunidad que permite una fácil depuración de las stores de Redux mostrando eventos y mostrando diferencias con acciones adyacentes.

Pero dado que también es posible construir complementos genéricos, hay bastantes complementos de la comunidad disponibles. Y hay dos que quiero destacar brevemente. El primero es el complemento de ReactorTron. Entonces, lo que hace esto es, si no estás familiarizado con las herramientas de ReactorTron, brindan utilidades de debug para aplicaciones nativas, para aplicaciones que utilizan cosas específicas, como stacks. Por ejemplo, Redux o MobXtate3. Y con el complemento de ReactorTron, la pila de ReactorTron se puede integrar y usar directamente desde Flipper, lo cual es genial porque entonces tienes todas tus utilidades de debug en un solo lugar.

7. Using the Redux Debugger Plugin

Short description:

En esta parte, demuestro el depurador de Redux, un complemento de la comunidad para Flipper. Creo una tienda Redux simple y uso el complemento como middleware. El depurador muestra eventos y diferencias con acciones adyacentes. Flipper es una plataforma extensible con componentes listos para usar. Estamos actualizando el diseño y mejorando la extensibilidad. Flipper es de código abierto, así que siéntete libre de contribuir. Flipper es una poderosa plataforma de desarrollo para React Native que proporciona herramientas para analizar aplicaciones.

Otro que es bastante genial, es el depurador de Redux. Nuevamente, este es un complemento de la comunidad, y voy a mostrarte rápidamente cómo usarlo. Ya lo tengo instalado, pero para obtener instrucciones de instalación, consulta su sitio web. Pero solo para esta demostración, voy a crear una tienda Redux, lo más simple posible, que toma una acción y simplemente hace que sus cargas útiles sean el siguiente estado. Nuevamente, esto es solo para mostrar la conexión.

Entonces, si creo una tienda Redux, y esta es una compilación de desarrollo, voy a cargar el complemento y usarlo como middleware para Redux. Así que creé la tienda, ahora cada vez que reciba nuevos datos, voy a despachar los nuevos datos que recibí. Y ahora, si vuelvo a Flipper, ahí está. De acuerdo. Ahora puedo habilitar este depurador. Y tan pronto como lleguen nuevos datos, veremos todos los eventos que llegan. Y de hecho, incluso nos muestra la diferencia con las acciones adyacentes. O podemos ver un estado como un todo holístico.

Ahora, lo bueno de este complemento es que realmente no se trata de, son tal vez 200 líneas de código. La razón es que todos los componentes que ves aquí, como la pantalla, la cosa div, las tablas, la descripción general, son todos componentes de Flipper, que están listos para usar si estás construyendo un complemento. Entonces, Flipper es una plataforma bastante extensible. Y nuestra hoja de ruta también se ve muy bien si tienes la intención de construir complementos. ¿Por qué? Porque estamos actualizando el diseño, y la biblioteca de componentes, y también vamos a mejorar la extensibilidad para que sea aún más fácil construir un complemento de lo que es ahora. Entonces, Flipper es de código abierto. Siéntete libre de contribuir ya sea escribiendo nuevos complementos o mejorando Flipper en sí. Eso es básicamente lo que quería compartir contigo. Creo que Flipper es una plataforma de desarrollo bastante impresionante para React Native, que proporciona muchas herramientas poderosas para analizar tus aplicaciones. Así que gracias por escuchar. Y si tienes alguna pregunta, simplemente espera a la sesión de preguntas y respuestas. Gracias. Gracias por acompañarnos. ¿Cómo va todo? Muy bien. Gracias. Y sí, hay un emoji de Flipper. Quiero decir, un emoji de delfín.

QnA

Flipper Q&A and Future

Short description:

Claramente, es un Flipper predeterminado. Comencemos con algunas preguntas de la comunidad. ¿Se puede usar Flipper sin Hermes? ¿Funciona Flipper con Expo? Quiero saber sobre el futuro de Flippr y qué más te gustaría aprender de él. Estamos trabajando en un Flipper completamente rediseñado con modo oscuro y una biblioteca de componentes estandarizada. Proporciona una nueva API.

Claramente, es un Flipper predeterminado. Esperemos que atraiga a algunos en el chat.

De acuerdo. Comencemos con algunas preguntas de la comunidad. Un par sobre Flipper y Paola pregunta, ¿se puede usar Flipper si no estás usando Hermes? ¿Hermes, Hermes? Así que puedes usar Flipper sin problemas sin el motor Hermes. El único beneficio que ofrece el motor Hermes es que puedes usar las herramientas de depuración para, por ejemplo, ir paso a paso en tu código si estás usando Hermes. Pero todas las demás funciones están disponibles en cualquier configuración. De acuerdo. Increíble. Y Adam pregunta, ¿funciona con Expo? Sinceramente, nunca lo he probado. Espero que funcione, pero por favor avísame si no es así. Si alguien sabe, asegúrate de mencionarlo en el chat. Ni siquiera sé si alguien de Expo está aquí. Genial.

Quiero escuchar un poco sobre cómo ves el futuro de Flippr y qué más te gustaría aprender de él. En realidad, estoy bastante emocionado al respecto. Y curiosamente, esta es la razón por la que no he sido muy público últimamente sobre Flippr, sin hacer mucho ruido. Y la razón es que estamos cambiando a cosas fundamentales. Una de ellas es que estamos trabajando en un Flipper completamente rediseñado, que se ve bastante genial. También ofrece modo oscuro. Sí. Así que estamos trabajando en esto. Y hemos rediseñado, ahora admitimos modos oscuros de forma predeterminada. Por lo tanto, lo incorporamos de inmediato. Pero el beneficio para nuestros autores de complementos es que ahora utilizamos una biblioteca de componentes estandarizada. Anteriormente, manteníamos la nuestra propia. Y eso significa que ciertas cosas eran realmente sofisticadas en algunos archivos y faltaban algunas cosas básicas simplemente porque nadie las necesitaba antes. Entonces, lo que hacemos ahora es estandarizar en el sistema de componentes final. Esto significa que tienes inmediatamente una cantidad enorme de componentes disponibles que están bien documentados y bien estilizados. Y solo proporcionamos algunos componentes adicionales de nivel superior sobre eso como tablas sofisticadas y similares. Y también proporciona una nueva API.

Flipper Redesign and Community Plugins

Short description:

Flipper está siendo sometido a una importante rediseño, lo que facilita su extensión e introduce nuevas características como el modo oscuro. Además, hay tres interesantes complementos de la comunidad: Redux, Reactortron y un complemento de medición de rendimiento para el tiempo de inicio de la aplicación nativa.

Entonces, Feather fue originalmente escrito. Era una aplicación Java y luego agregamos Flow y TypeScript. Ahora estamos rediseñando las APIs para asegurarnos de que sea mucho más fácil asegurarnos de nuevos tipos. Usamos provideaimler de forma predeterminada si estás escribiendo usuarios de lectura los mecanismos de suscripción son mucho más simples.

Entonces, eso en general hará que la experiencia del desarrollador para extender Flipper sea mucho, mucho más fácil. Así que esas son dos cosas que están por venir y todavía estamos bastante emocionados al respecto. Una vez que, como, ahora los estamos probando internamente en Facebook y una vez que estemos convencidos de que son lo suficientemente estables, nos aseguraremos de que también estén disponibles en la versión pública. Eso es emocionante. Así que es como una versión importante, importante. Sí. En principio, sí. Eso es muy emocionante. No puedo esperar, especialmente por el modo oscuro. Creo que eso es muy, muy importante. Sí. Mencionaste en tu charla, creo que uno o dos complementos de la comunidad, pero quería preguntarte cómo va la comunidad y si tienes algún complemento favorito o alguno genial que quieras destacar. De los que están disponibles públicamente, hay tres que son bastante interesantes. Uno es el complemento de Redux, que mostré en la charla. Y creo que lo genial de ese complemento es que requiere un esfuerzo mínimo y brinda resultados máximos. Así que, no creo que haya sido mucho trabajo para los autores escribirlo. Es un complemento bastante corto, pero inmediatamente te brinda mucha información sobre lo que está haciendo tu almacén de Redux, etc.

El segundo, que es interesante mencionar, es Reactortron. Reactortron es una herramienta nativa existente. Es posible que las personas lo estén usando de forma independiente, pero también puedes usarlo como complemento de Flipper. Básicamente es lo mismo, pero simplemente está integrado en Flipper para que tengas todas tus herramientas en un solo lugar. Y lo que encuentro bastante divertido al respecto es que Reactortron tiene su propio sistema de complementos. Así que tienes esta gran incepción de complementos donde tienes Reactortron como un complemento que a su vez tiene complementos. Así que eso es bastante divertido. Y el tercero, honestamente, olvidé el nombre.

Integración de complementos de Flipper y vida del mantenedor

Short description:

Hay un complemento que mide el rendimiento de arranque de tu aplicación nativa, aprovechando la integración de Flipper a nivel nativo. Es posible depurar complementos dentro de otros complementos a través de Chrome DevTools o ejecutando la versión de origen de Flipper. Como mantenedor, la fase inicial es la más emocionante, mientras que la fase posterior se centra en mantener las cosas en funcionamiento. Una idea de complemento es integrarse con GraphQL, como Apollo, para manipular solicitudes y agregar valor fuera de Facebook.

Pero hay un complemento que mide el rendimiento de arranque de tu aplicación nativa. Y luego puedes ver que realmente aprovecha el hecho de que Flipper no se integra solo a nivel de JavaScript. Realmente se integra a nivel nativo en C Sharp o Java. Así que originalmente se construyó para el desarrollo de aplicaciones nativas. Y ahí puedes ver que eso realmente es beneficioso. Puedes acceder a cosas a las que no podrías acceder desde el mundo de JavaScript.

Eso suena realmente útil en realidad. ¿Cómo depuras los complementos dentro de los complementos? Bueno, en realidad no es muy difícil. Es de código abierto, por lo que puedes, lo que puedes hacer es simplemente abrir las Chrome DevTools, hay una entrada de menú para eso si estás ejecutando Flipper. Entonces vas a Ver herramientas de desarrollo y luego obtienes las Chrome Developer Tools normales porque es una aplicación de electron. Pero lo que es aún mejor es si quieres profundizar, puedes consultar la versión de origen y ejecutarla desde Flipper desde el origen. Es muy fácil, solo clona el repositorio, instala yarn, comienza. Es realmente fácil, solo clona el repositorio. Para los verdaderos fanáticos de Flipper.

Exactamente, para los verdaderos fanáticos. Y también obtienes actualización rápida y ese tipo de cosas que hacen la vida mucho mejor si te gusta rediseñar mucho y ese tipo de cosas. Eso es realmente genial. Le pregunté esto a Brandon antes, pero obviamente has estado muy involucrado en el código abierto con esto y Imer y MobX. ¿Cómo es la vida del mantenedor? ¿Y cómo te va con eso? Estuve pensando en eso últimamente. Así que noté que para los proyectos, los primeros dos años son realmente geniales cuando están creciendo y tienes todas esas discusiones con los primeros adoptantes y es súper energizante. Y después de eso, noté que se trata principalmente de mantener las cosas en funcionamiento, ¿verdad? Todo está resuelto, el alcance está claro. Todo funciona en general, el ecosistema está cambiando continuamente. Por eso sigues haciendo cambios también. Pero luego solo se trata de mantener las cosas en funcionamiento. Definitivamente noté que encuentro la fase inicial la más emocionante y una vez que todo está en marcha, digo, está bien, hagamos algo más.

De acuerdo, tengo una pregunta más para ti. Si tuvieras la opción de crear cualquier complemento para Flipper, ya sea serio o no, ¿tienes alguno en mente que te gustaría ver construido? Sí, creo que uno que realmente deberíamos tener y que no tenemos ahora es uno que se integre con GraphQL, por ejemplo, con Apollo o algo así. Lo interesante es que dentro de Facebook, tenemos una pila de GraphQL separada o básicamente, sí, así que tenemos un complemento para eso, pero no agrega ningún valor fuera de Facebook y creo que realmente deberíamos tenerlo para la configuración de origen también. Entonces, si estás usando Apollo o algo así, o Pericle, puedes esperar esas solicitudes y manipularlas. Si alguien de Apollo o Ercle está escuchando esto, ya sabes lo que tienes que hacer.

Q&A and Conclusion

Short description:

Solo envíame un mensaje directo si tienes alguna pregunta. Usamos muchos emojis y a veces los invento. El nombre Flipper fue elegido debido a un conflicto de nombres anterior. Gracias por unirte a nosotros, Michelle. Si quieres pasar un rato, únete a la sala de Zoom. ¡Adiós!

Sí, solo envíame un mensaje directo. ¿Tienes los mensajes directos abiertos, sin embargo? Sí. De acuerdo, genial. Permíteme asegurarme de que no haya más preguntas de la audiencia. Recibiste algunos delfines en el chat. Así que es un emoji real. No estaba seguro. A veces me pasa que creo que hay un emoji, pero no existe. Y simplemente lo invento. Así que siempre es bueno verificar.

Muy bien. No puedo decirte con qué frecuencia lo usamos dentro del emoji. Oh, apuesto a que sí. ¿Estuviste involucrado en la elección del nombre? No. En realidad, me gustan algunos cambios de nombre en el pasado. Entonces, en el código fuente, encontrarás de vez en cuando el nombre Sonar y eso fue porque había otro producto comercial con el nombre Sonar. Así que cambié a Flipper. Todavía es bastante similar, pero ligeramente diferente. Y honestamente, Flipper- Me gusta. Sí, me gusta.

Muy bien, Michelle, gracias por pasar el rato con nosotros. Eso es todo el tiempo que tenemos, pero Michelle estará en una sala de Zoom más tarde, creo, justo después de esto, si quieres pasar el rato. Y voy a decir gracias y adiós y revelaremos la encuesta después. Muy bien, perfecto. Nos vemos. Muchas gracias por tenerme aquí.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Llevando los Componentes del Servidor React a React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.

Workshops on related topic

Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
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
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
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.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.