React Native y Flipper!

react native

Friday, August 6, 2021

react native 0.62 en conjunto con Flipper para mejorar tu desempeño de desarrollo.

Buenas noticias, más progreso, react native 0.62 en conjunto con Flipper para mejorar tu desempeño de desarrollo.

Flipper

Expertos mencionan que podría ser la competencia divertida del react-native-debugger, incluyendo manejo de red, inspector del layout, React devtools incluido manejadores de estados!.

Flipper es una herramienta que hasta ahora se manejaba propiamente en sus respectivos IDEs Android Studio o XCode, pero gano mucha popularidad porque permite debuggear ambas aplicaciones desde este tool.

Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

Features

Flipper continue en general los siguientes features y adicionalmente puede tener mas agregandolos desde su propio store de plugins.

Metro Actions: Recarga el app y muestra del dev menu.
Crash Reporter: Visualiza reportes de Android y iOS.
React DevTools: El ultimo React Devtools!!!.
Network Inspector: Permite ver todos los request creados por la aplicación.
Metro and Device Logs: Ver, buscar y filtrar absolutamente todo del metro y del device.
Native Layout Inspector: Permite ver y editar el layout nativo generado por React Native Renderer.
Database and Preference Inspectors: Permite ver y editar databases y preferencias.

Hemos visto muchos react native developers usando el react native debugger de chrome, not the best! usar este debugger básicamente pone el desarrollo en un ambiente bajo el engine de chrome V8, el cual aveces suele crear comportamientos extraños, no en todos los casos. Por eso existen tools como Hermes creados para mejorar el performance de nuestras aplicaciones.

Hermes, JavaScript engine optimized for React Native

Versiones 0.62 vs Versiones

La diferencia radica en que react native 0.62 contiene por defecto Flipper instalado. :)

Network Inspector

Acceso a los requests, payloads, headers, body, request, response, incluido la facilidad de hacer una búsqueda.

Layout Inspector

Esto ya lo hemos visto en otros tools, incluido react-native-debugger, soporta otros tools Litho y ComponentKit se puede observar properties, props y state de los components. Algo muy util que permite es poder modificar los atributos en tiempo real, ahorrando mucho tiempo de reloading.