Saltar al contenido

¿Cuáles son las principales diferencias entre ReactJS y React-Native?

React-Native ha existido durante aproximadamente 2 años y se convirtió en un marco realmente interesante, ya que se puede usar para Android y nos permite crear aplicaciones móviles multiplataforma. Algunos colaboradores también personalizaron el marco para crear aplicaciones de escritorio para Mac y Windows, lo cual es bastante bueno.
React-Native es muy similar a ReactJS en cierto modo, pero hay diferencias que debe conocer antes de iniciar su primera aplicación nativa. En este artículo, voy a analizar las principales diferencias que encontré como desarrollador web de ReactJS que aprendió a usar React-Native y creó algunas aplicaciones nativas con esta tecnología.

Configuración y agrupación

React-Native es un marco, donde ReactJS es una biblioteca de JavaScript que puede usar para su sitio web. Cuando comience un nuevo proyecto con ReactJS, probablemente elija un paquete como Webpack e intente averiguar qué módulos de paquete necesita para su proyecto. React-Native viene con todo lo que necesita y lo más probable es que no necesite más. Cuando inicie un nuevo proyecto, notará lo fácil que es configurarlo: es muy rápido y solo necesita una línea de comando para ejecutarlo en la terminal y estará listo para comenzar. Puede comenzar a codificar su primera aplicación nativa inmediatamente usando ES6, algunas funciones de ES7 e incluso algunos polyfills.
Para ejecutar su aplicación, deberá tener Xcode (para iOS, solo en Mac) o Android Studio (para Android) instalado en su computadora. Puede decidir ejecutarlo en un simulador / emulador de la plataforma que desea usar o directamente en sus propios dispositivos.

DOM y estilo

React-Native no usa HTML para renderizar la aplicación, pero proporciona componentes alternativos que funcionan de manera similar. Esos componentes React-Native mapean los componentes nativos reales de la interfaz de usuario de iOS o Android que se representan en la aplicación.
La mayoría de los componentes proporcionados se pueden traducir a algo similar en HTML, donde, por ejemplo, un View componente es similar a un div etiqueta, y una Text componente es similar a un p etiqueta.
Debido a que su código no se procesa en una página HTML, esto también significa que no podrá reutilizar ninguna biblioteca que haya usado anteriormente con ReactJS que procesa cualquier tipo de HTML, SVG o Canvas. Aunque puede encontrar bibliotecas alternativas para React-Native, react.parts tiene una categoría nativa para que encuentre lo que necesita.
Para diseñar sus componentes React-Native, deberá crear hojas de estilo en Javascript. Se parece a CSS, pero no es exactamente lo mismo. Esto puede ser bastante confuso al principio, y puede llegar a un punto en el que se pregunte cómo puede crear mixins como lo haría con SASS, o cómo puede anular el estilo de un componente que desea reutilizar. Entonces comprenderá que React-Native no está hecho a partir de elementos web y no se puede diseñar de la misma manera. Afortunadamente, lo más probable es que encuentre soluciones alternativas disponibles para lograr lo que necesita.
No sé ustedes, pero a pesar de que Flexbox existe desde hace bastante tiempo, nunca he estado completamente inmerso en su uso, principalmente porque los proyectos en los que participé requerían compatibilidad con versiones anteriores de los navegadores más antiguos. Con React-Native, no hay mejor manera de crear una aplicación que responda bien que usando Flexbox. Puede ser complicado al principio, ya que no siempre se comporta como lo haría con CSS, pero rápidamente se volverá bueno en eso una vez que obtenga los conocimientos básicos. Le recomendaría que lea este artículo para obtener más información al respecto: Comprensión del diseño de caja flexible de React Native.

Animaciones y gestos

¡Adiós a las animaciones CSS! Con React-Native, tendrás que aprender una forma completamente nueva de animar los diferentes componentes de tu aplicación con Javascript. La forma recomendada de animar un componente es utilizar la API animada proporcionada por React-Native. Puede compararlo con la famosa biblioteca de JavaScript Velocity.js. Permite crear diferentes tipos de animaciones, cronometradas o basadas en una velocidad asociada a un gesto, y se puede utilizar con diferentes tipos de Easing. En general, puede hacer prácticamente cualquier tipo de animación que haría en la web. React-Native también proporciona LayoutAnimation, que en realidad es muy bueno y fácil de usar para las transiciones, pero solo funciona para iOS en este punto, ya que Android no lo admite muy bien.
Para interactuar con los gestos del usuario, React-Native proporciona algo similar a la API web de eventos táctiles de Javascript llamada PanResponder. Ponerlo en funcionamiento puede resultar desalentador, pero verá que finalmente no es tan complicado. El PanResponder debe aplicarse a una Vista (o Texto o Imagen) de su componente para habilitar el controlador táctil en esta Vista. A partir de ahí, PanResponder proporciona una lista de funciones que puede utilizar para capturar los diferentes eventos táctiles, como onPanResponderGrant (inicio táctil), onPanResponderMove (touchmove) o onPanResponderRelease (toque). Esas funciones le darán acceso al evento nativo y al estado del gesto con información como todos los toques y sus ubicaciones, así como la distancia acumulada, la velocidad y el origen del toque.
En mi opinión, la principal dificultad con el PanResponder viene cuando tiene vistas / componentes anidados con su propio PanResponder, y debe decidir a cuál se le debe otorgar el control del gesto. Para obtener más información sobre Animated y PanResponder, este artículo puede ser muy útil: React-native Animated API with PanResponder

Navegación

Cuando comencé a construir mi primera aplicación móvil con React-Native, me preguntaba cómo navegar entre 2 escenas. Lo primero que hice fue buscar una alternativa a react-router, esta famosa biblioteca que la mayoría de las aplicaciones web de React utilizan para hacer la transición entre páginas. Encontré algunas bibliotecas que hacen trabajos similares, pero siempre hubo algo que no me gustó de las que probé: o era bastante complicado de usar, no estaba satisfecho con las animaciones, no era personalizable de la forma en que lo hice. quería que fuera, o no se comportaba o no funcionaba correctamente en dispositivos Android e iOS. Luego comencé a preguntarme cómo funciona realmente la navegación y encontré el componente Navigator proporcionado por React-Native. Debería haber comenzado desde allí, buscar una alternativa de react-router no fue, en mi opinión, la mejor idea.
La mayoría de las aplicaciones móviles no tienen muchas escenas en todas direcciones como lo haría una aplicación web, el componente Navigator, aunque puede parecer un poco complicado de usar al principio, le proporcionará todo lo que necesita para administrar la transición entre escenas. A menos que cree una aplicación móvil a gran escala que requiera muchas escenas diferentes y tenga miedo de perderse en algún momento, creo que debería seguir con Navigator. También puede echar un vistazo a NavigatorExperimental, pero en mi opinión, aún no está listo para ser utilizado en producción.

Código específico de la plataforma

Diseñar una aplicación para múltiples plataformas con el mismo conjunto de código a veces puede ser un poco abrumador y su código pronto comenzará a verse feo. Estoy seguro de que ha estado involucrado en problemas similares al codificar para navegadores modernos y la necesidad de hacer que las cosas se vean “no tan mal” en navegadores más antiguos, agregando algunos conjuntos de código condicional aquí y allá en su CSS o incluso en Javascript. .
Cuando crea una aplicación nativa, es importante saber que la interfaz de usuario y la experiencia para iOS y Android pueden necesitar ser diferentes. Este artículo lo explica muy bien: Diseñar tanto para Android como para iOS.
Suponiendo que tiene el control sobre cómo se verá y se comportará su aplicación, tiene dos opciones:

  • Puede definir un diseño universal para que su aplicación se vea exactamente igual para ambas plataformas siempre que sea intuitiva y no confunda a los usuarios de ninguna de las plataformas.
  • Puede definir conjuntos de código para cada plataforma, lo que significa que tendrá un DOM diferente, hojas de estilo e incluso tal vez diferentes lógicas y animaciones para seguir las pautas de UI y UX de la plataforma.

Si decide ir con el segundo punto, React-Native puede detectar desde qué plataforma está ejecutando el código y cargar el código correcto para la plataforma correcta. Le recomendaría que tenga la lógica principal de sus componentes definida en un archivo llamado index.js, luego tendrá los componentes de presentación definidos con archivos individuales. Para iOS y Android, tendrá los archivos index.ios.js e index.android.js respectivamente.
Si organiza la estructura de su carpeta siguiendo mi recomendación, se verá así:


/src
/components
/Button
/components
/Icon
/index.android.js
/index.ios.js
/Content
/index.android.js
/index.ios.js
/index.js

Si cree que tener 2 archivos diferentes es demasiada sobrecarga para cambios mínimos, puede usar el módulo Plataforma con una declaración condicional.

Herramientas de desarrollo

Cuando comienzas un nuevo proyecto nativo, obtienes algunas herramientas de desarrollador listas para usar de React sin la necesidad de instalar nada, y eso es bastante impresionante en mi opinión. Hot Reloading está disponible y es excelente para usar cuando necesita realizar pequeños cambios en los estilos de su aplicación. Para cambios más grandes que afectan la lógica de la aplicación, generalmente prefiero usar Live Reload, que recarga su aplicación por completo a medida que realiza un cambio en el código.
La belleza de trabajar con React-Native también es la capacidad de usar la mayoría de las herramientas de desarrollo que usa con ReactJS. Chrome Dev Tools funciona a la perfección para inspeccionar las solicitudes de red (aunque debe agregar un pequeño truco para ver las solicitudes), mostrar los registros de la consola y detener el código en debugger declaraciones. Incluso puede usar las excelentes DevTools de Redux para inspeccionar el estado de su tienda Redux. Sin embargo, una característica que más extraño es la capacidad de inspeccionar el DOM como lo haría en la web, el Inspector nativo definitivamente no es tan bueno.

Publicación

Si desarrolla una aplicación para iOS y Android, deberá aprender cómo funcionan Xcode y Android Studio para asegurarse de que todo esté configurado correctamente antes de la primera implementación de su aplicación en la App Store o Google Play. Para iOS, funciona del mismo modo que implementaría una aplicación nativa normal, aunque para Android, deberá seguir la recomendación de React para firmar su APK antes de cargarlo en Google Play.
Si pierde la capacidad de simplemente escribir una sola línea de comando para publicar una actualización de su aplicación nativa como lo haría con una aplicación web y un VCS correctamente configurado, puede usar el increíble Code Push para implementar el código directamente al usuario, sin necesidad de archivar, enviar tu aplicación a la tienda y esperar a que esté lista. Code Push es excelente si desea realizar algunas mejoras o correcciones de errores, pero no se recomienda si desea agregar funciones completamente nuevas.

Terminando

Realmente disfruto usando React-Native hoy. ¡Lo he estado usando durante un poco menos de un año y es muy rápido tener una aplicación lista! Puede crear una interfaz de usuario compleja tan rápido como lo haría con ReactJS y, por lo general, funciona bastante bien tanto para iOS como para Android. Creo que la curva de aprendizaje de ReactJS a React-Native es bastante fácil, especialmente si te gusta aprender nuevos marcos de Javascript; es solo una forma diferente de usar React.
La comunidad alrededor de React-Native se vuelve muy grande y sigue creciendo, la tecnología no desaparecerá pronto y definitivamente recomendaría a cualquier desarrollador web que quiera crear una aplicación móvil que se olvide de Cordova y la pruebe.
¡Divertirse!

Más artículos míos

  • ¿Cómo organizar mejor sus aplicaciones React?
  • Sube de nivel tu carrera como desarrollador
  • El modelo básico para autenticar usuarios en su aplicación React-Native

Acerca de mí

¡Hola, soy Alexis! Soy un desarrollador de pila completa que ha estado programando durante más de 14 años. Estoy especializado en el desarrollo de Javascript y la arquitectura de soluciones para aplicaciones a gran escala y disfruto pasar innumerables horas aprendiendo y jugando con nuevas tecnologías para usar en mis próximos proyectos. Recientemente comencé a usar Twitter, puedes seguirme aquí: @alexmngn

Alexis Mangin

Este contenido se publicó originalmente aquí.