loading...
Cover image for REACT NATIVE, UNA OPCIÓN QUE SE CONVIERTE EN NECESIDAD.

REACT NATIVE, UNA OPCIÓN QUE SE CONVIERTE EN NECESIDAD.

alexgomez88 profile image Alejandro Augusto Gomez Rodriguez Originally published at alexgomez.dev ・5 min read

Desarrollar aplicaciones móviles ahora un «must» de muchos programadores, existen muchas tecnologías hoy presentes que hacen esta tarea más llevadera, siendo la más destacada desde su nacimiento las PWA, sin embargo existe un pobre empuje por parte de las empresas comercializadoras de software por esta tecnología. Lo que nos obliga a seguir desarrollando nativo o usar Cordova o TWA para comercializar nuestras PWA. Es por ello que era necesario soluciones que nos permita tener o movilizarnos tanto en Web como en Nativo y multiplataforma, solución que la gran casa de Facebook nos trajo, React Native.

Previo a la lectura de este post te invito a leer el artículo Rodrigo Pombo: Como crear tu propio React y/o la presentación de Sophie Alpert sobre lo que como crear un render de React. Ninguna de las dos es un desperdicio, los recomiendo altamente.

Bien, React Native, es una especie de derivación de React JS que implementa su núcleo pero renderiza la vista en lenguaje nativo, en lugar de HTML. Entiendo el primer catch del día, la aplicación corre realmente en un núcleo JS la cual se comunica con nuestra interfaz nativa, por ende no es como Flutter donde el producto final es enteramente nativo. Sin embargo con este cambio React se acerca a un gran número de propósitos no disponibles previamente con las web app, y hablo de aspectos más allá del rendimiento. Dejando talvez las Apps puramente nativas exclusivamente para videojuegos.

Lo primero que se tiene que hablar de React Native es el desarrollo de los build, quienes han tenido que hacer un build en Android Studio entenderan que esto es un tema bastante fuerte. Se requiere de un potente o al menos bien decente ordenador con capacidades buenas de virtualización para el desarrollo de aplicaciones nativas. Con React Native tienes diferentes canales de trabajo en el desarrollo de tu app:

  • Por defecto, tienes el canal web, es decir puedes visualizar la armadura de tu web como si fuera una página web, ojo no es 100% compatible, pero mucho más ligero que usar el emulador de Android.
  • La App de Expo te permite probar tu app como si estuviese instalada con la enorme ventaja que ni siquiera requieres conectarlo a la PC.
  • Y por el mismo canal usar el tradicional simulador de Android desde la Expo App instalada en ella.

Cuando tu proyecto está listo, con expo (y solo con expo) puedes producir tu build en la nube, esto es algo similar PhoneGap. Esto se realiza mediante comando por lo que puedes perfectamente manejarte con dos branchs y al hacer push a máster automáticamente generara un Apk utilizando GitHub Actions o su equivalente en otras plataformas.

Ten presente que no todo lo que brilla es oro.

En la última app que he desarrollado en esta plataforma, he observado detalles que requieren consolidación entre las exportaciones web y nativa de tus proyectos que te recomiendo que tomes muy en cuenta, pero de nuestro lado implica saber trabajar en cada escenario:

  • Evade los iconos SVG: Aunque de buenas a primeras nada te lo indica, no se puede implementar SVG directamente como imágenes en tus proyectos nativos (aunque si aparecen en el web), esto puede ser un tanto frustrante pero hay varias soluciones:
    • Para iconos monocromáticos, usa la versión png de tus iconos y cámbialos de color usando la propiedad «tintColor». Con esta solución toma en consideración que todo el icono cambiara de color por lo que procura que lo «blanco» sea realmente transparente (habla bien con tu diseñador gráfico).
    • Usar la librería «react-native-svg» es lo óptimo para casos celulares aparte ofrece gran flexibilidad para trabajar con el icono en SVG. Puedes usar tanto el archivo como reescribir tu SVG manualmente, o tratarlo como objeto si fuese necesario. En lo personal si vas a recurrir a este caso te recomiendo ENORMEMENTE que trabajes con la interfaz de emulador y no la versión web.
  • El tratamiento de imágenes entre la versión web y la versión apk son bien distintas, así que procura probar tu app desde el emulador antes de entrar a producción.
  • En lo que respecta al debugging la versión web ofrece más «transparencia» para detectar errores, pero la versión nativa puede ser un infierno para interpretarlos.
  • Si tu PC no tiene al menos 16 Gb ram y no tiene disco duro SSD, te recomiendo usar un emulado de Android LO MÁS BÁSICO posible, me fue bien con genérico cuya pantalla es pequeña además te ayudará a evaluar aspectos de UX.

Olvídate de los plugins complejos de PhoneGap/Cordova pero tampoco te confíes

Uno de los problemas que he tenido con PhoneGap son sus plugins, recuerdo bien trabajar con fotos y algunas veces existía como limitaciones entre las capacidades nativas de la Cordova y la aplicación web, lo cual es gracioso porque estas no están presentes en la interfaz puramente web.

En react-native puedes descargar estas compatibilidades fácilmente como librerías de node y responden bastante bien, expo por ejemplo incluye una cantidad considerable y bien actualizada de recursos en este ámbito que te recomiendo enormemente. Sin embargo, como el título dice no te confíes, pues entre una plataforma y otra la repuesta de estos recursos puede ser distinta y deberás evaluar la mejor respuesta para cada plataforma.

iOS será tu pesadilla

Pues Apple fans, lo diré ahorita sin anestesia… Señores sus celulares vienen con errores de fábrica. Seguramente preguntarás ¿Ale, pero si iPhone es lo que abrió nuestras mentes al desarrollo? … blah…blah…blah… pero está claro que la empresa introdujo estrategias claras para que compremos Apple más por necesidad que por calidad y verás porque:

  • Si vas a desarrollar una App para iOs y NO tienes la licencia de desarrollador solo puedes exportar para simulador, es decir que necesitas Xcode y es decir que necesitas una Mac… y ojo no cualquier Mac, hablamos de gastarte 1300 $ en un equipo como mínimo.
  • Aun si tuvieras la licencia probarías la app en un celular, lo cual son 400 $ si lo trabajas desde un iPhone SE 2020 pero si quieres debuggear, pues… ve ahorrando 1300 $ + 400 $.
  • La licencia de desarrollador de iOs tiene un valor de: 100$ 99 $ y dura un año.
  • Y si pensantes hacer todo este desde 0 este año, debes comprar un cargador de iPhone, entre unos 50 $ extras.

Salvo que tengas acceso a estos recursos por un buen sistema de crédito, no te lo recomiendo arriesgarte salvo que se trate de una empresa. Ya que adicional a los puntos anteriores, la revisión de la App puede demorar bastante lo cual implica que tu producto debe ser perfecto.

¡Visita mi sitio web: https://alexgomez.dev/librerias/react-native-una-opcion-que-se-convierte-en-necesidad/ y déjame tu opinión o compártela por esta vía!

Discussion

pic
Editor guide