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

♪ 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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í.