Limitaciones clave de React Native que todo desarrollador debe conocer
Este artículo aborda las limitaciones inherentes de React Native. Algunas de estas limitaciones están presentes tanto en iOS como en Android, mientras que otras pueden manifestarse de forma más específica en una de las plataformas (a veces, las versiones de una misma aplicación para iOS y Android son proyectos separados).
Queda un largo camino por recorrer para que React Native supere ciertos desafíos y limitaciones relacionadas con el rendimiento, como el multihilo, el procesamiento en paralelo, las animaciones, las listas de desplazamiento, etc.
Las limitaciones de React Native que deberías considerar
No es posible competir en el actual mundo de alta tecnología cuando te quedas atrás en la demanda global de una interfaz y experiencia de usuario (UI/UX) de alta calidad. Si deseas llevar tu negocio al siguiente nivel y lograr un crecimiento exponencial, debes reconsiderar seriamente el uso de React Native. Un ejemplo común en el mercado latinoamericano es el de las apps de e-commerce, donde la fluidez en listados con miles de productos es un factor crítico de retención de usuarios.
En lugar de adoptar un enfoque tradicional de desarrollo de aplicaciones que resulte en una aplicación mediocre afectada por limitaciones de rendimiento, considera que el lenguaje de programación y el framework de desarrollo que utilices deben ofrecer una alternativa sólida.
Limitaciones de rendimiento de React Native
La capacidad de respuesta de la UI es una métrica clave para el éxito de cualquier aplicación de panel de control (dashboard). Para garantizar una interfaz rápida y receptiva, es necesario que el dashboard parezca lo más simple posible, mostrando la menor cantidad de widgets.
Los usuarios tienen dificultades para leer las muchas columnas y filas de texto necesarias para mostrar toda la información que puede contener una app de dashboard.
Los widgets son una excelente manera de organizar la información y mostrarla de forma comprensible para el usuario, pero puede resultar abrumador cuando se muestran demasiados widgets en pantalla simultáneamente.
Hasta este punto, solo estamos exponiendo una única vista web. Y al hacerlo, no estamos intentando que esta vista se ejecute en múltiples hilos.
Por ejemplo, si estás construyendo una aplicación de dashboard, usar la Clase de Página de React Native renderizará esta parte de la página concurrentemente en múltiples hilos para mantener la UI receptiva.
Pero, ¿y si quisiéramos mostrar múltiples widgets y que estos también se visualizaran simultáneamente en múltiples hilos?
1. Multihilo (Multithreading)
Cuando un dispositivo móvil tiene múltiples núcleos, puedes poner de 4 a 8 núcleos en ese dispositivo y enviarlos todos a una sola pantalla para procesar un botón. Una aplicación multihilo es fácil de conceptualizar, pero no lo es tanto en aplicaciones móviles nativas; necesitarás usar librerías de tiempo real como Struts2 o Apache Thrift.
Para ser precisos, al usar React Native con dos o más hilos, React Native ocasionalmente y de forma impredecible se detendrá en un seguimiento de pila (stack trace) y se colgará durante un par de segundos para intentar obtener un mejor rendimiento.
Luego, tomará casi un minuto reconectarse nuevamente con la aplicación. Así que, si tienes unos diez hilos, podrías experimentar unas 20 colgadas. Esto significaría que estás fuera de la aplicación durante casi treinta segundos. Es una desventaja inevitable de React Native. No hay nada que puedas hacer ante esta limitación.
En iOS y Android, necesitas tratar los elementos de la UI como un búfer de memoria. Este puede mantener información temporal entre los hilos y obtener un nuevo estado activo intermedio. La vida de la batería tampoco se libra. Por lo tanto, React Native no es ideal para su uso en dispositivos de alto rendimiento, como un iPhone X. De hecho, pruebas de benchmark en dispositivos gama alta suelen revelar un consumo de RAM hasta un 20% mayor en apps complejas con React Native frente a sus equivalentes nativas.
2. Dependencia de librerías de terceros
React Native es un framework increíble, pero debido a su dependencia de librerías de terceros, puede causar problemas de rendimiento. Estos problemas de rendimiento hacen que muchos equipos cambien al desarrollo nativo o elijan otro framework como Flutter o Ionic. Y si tu negocio depende de React Native, la pérdida de clientes sin duda será un daño significativo para tus ingresos.
Para solucionar este problema, solo necesitas almacenar en caché las librerías ya instaladas con el módulo react-native-library-cache. ¡El resto de tu aplicación funcionará sin problemas porque aún podrás usar las librerías de terceros sin problemas de rendimiento!
No todos los desarrolladores pueden construir una aplicación por su cuenta. Por eso existen muchas librerías de terceros (llamadas ‘vistas’). Y este hecho tiende a destacar la principal limitación de React Native.
Aunque puedes usar estas librerías sin modificar el código original, esto causará la mayoría de los problemas de rendimiento.
Además de las limitaciones del framework, un desarrollador debe tener en cuenta los problemas de sincronización entre sus aplicaciones y el mundo exterior. La mayoría de las veces, los desarrolladores necesitarán mantener una o varias condiciones de red bajo control para obtener un mejor rendimiento.
3. Limitaciones de la capa de abstracción
Si bien la capa de abstracción de React Native está diseñada para mejorar el rendimiento, muchos desarrolladores la consideran de bajo desempeño, lo que a menudo conduce a aplicaciones con bugs.
Debido a los problemas comunes con este framework, la mayoría de las empresas son reacias a adoptar React Native en su portafolio. JavaScript puro es una opción mucho mejor para las necesidades de tu aplicación.
Es una plataforma de desarrollo multiplataforma rápida que proporciona alto rendimiento, velocidad, estabilidad y escalabilidad para el desarrollo de aplicaciones móviles. JS mejora la productividad del desarrollador al proporcionar código limpio y minimizar la complejidad.
Al hablar de problemas de rendimiento, creo que la «capa de abstracción» introducida por los desarrolladores de React Native ha sido un gran obstáculo para muchos. Proporciona un framework altamente simplista y transparente, pero con demasiadas complejidades internas con las que lidiar.
React Native oculta todo para ti y terminas con detalles de implementación que son muy difíciles de entender y depurar.
Lo que es peor, React Native va aún más lejos para enmascarar muchos problemas de rendimiento, sin ningún tipo de razón o racional aparente. Es un problema común que React Native tenga muchos factores ocultos que impactan en la fluidez final.
4. Animaciones
Uno de los mayores problemas con los inconvenientes de rendimiento de React Native (a veces) son las Animaciones. Al usar React Native, trabajamos con la animación de vistas, donde la vista se define como una función.
Pero lo que no podemos hacer es la animación en línea (in-line) de la manera que se hace con código JavaScript, definiendo una función que realizará la animación por nosotros. Con React Native, no podemos definir la vista que realizará la animación. Por lo tanto, debemos lidiar con muchas variantes de animaciones «en línea».
Esta es la limitación de la API de Animaciones de React Native. Tenemos muchas API de Vistas personalizadas. Una de ellas (React Native Animations Platform) no tiene buen rendimiento. Es lenta, aunque es fácil de manejar. Por ejemplo, cuando usamos un elemento de UI animado, estos son lentos. Pero aún los necesitamos, ya que nos ayudan a evitar lidiar directamente con las animaciones a bajo nivel.
5. Tiempos de inicialización
Cualquier código JS debe ser analizado y ejecutado en la Máquina Virtual de JavaScript. Esto tiene un costo, y la carga binaria y los programas compilados siempre ganarán en este aspecto. Puede haber algunas formas de mejorar esto, como el almacenamiento en caché de bytecode, pero parece que queda un largo camino por recorrer.
El uso de emuladores y tutoriales durante la configuración inicial era conocido por causar un rendimiento deficiente. Pero React Native lo mejora constantemente con cada día que pasa.
React ofrece un asistente de configuración inicial que genera la aplicación básica de React Native con un solo clic. Sin embargo, para tener éxito con React Native, debes familiarizarte con sus desafíos y limitaciones.
Por lo tanto, tan pronto como crees la aplicación React Native, asegúrate de realizar comprobaciones. El código se compila a bytecode por el motor Google V8 (o Hermes, el motor actual por defecto). Dado que fue compilado por el navegador/núcleo, no funcionará con entornos de ejecución JS regulares como Webpack o Browserify.
Así que esto no se puede usar para código JavaScript minimizado/optimizado de la manera tradicional. Debido a todas estas limitaciones, el framework React Native no parece prometedor para impulsar aún más la forma en que la gente tiene que codificar para iOS y Android.
6. Listas de desplazamiento (Scrolling Lists)
Es mejor evitar las listas de desplazamiento complejas en React Native. Sé que acabo de decir que hay que evitar el problema común, pero todavía veo a desarrolladores implementando soluciones alternativas en lugar de usar el sistema de navegación nativo.
La solución será hacer un desplazamiento a pantalla completa adecuado de todos los elementos y ver la lista como se muestra a continuación: (Ver versión grande) Nada malo con esa solución, pero aún así, es una solución temporal. Primero, comprendamos el concepto detrás de este sistema de navegación en particular.
Todos los elementos de la lista se desplazan en la dirección de su inicio. Por lo tanto, si un elemento de la lista tiene múltiples niveles (como una vista de panel de control), el sistema de navegación debe seguir desplazando la lista de elementos dentro de esos niveles. Y si eso no sucede, cada nivel se convierte en un elemento de lista separado.
7. El despliegue en Android no es fácil con React Native
A diferencia del despliegue en iOS, para Android, necesitamos probarlo antes de la implementación. Para iOS, solo necesitamos crear un proyecto nuevo y llenarlo con archivos desde Xcode.
El despliegue en Android siempre es un gran problema para todos: es complicado y está lleno de dificultades. Son muchos los problemas que podríamos encontrar al desplegar aplicaciones Android: la aplicación se cierra en el simulador o dispositivo, no hay sonido en algunos dispositivos, etc.
El problema con Android es que tienes una sola oportunidad de hacer bien tu aplicación, ¡o tus clientes desinstalarán tu aplicación en cuestión de segundos! Por eso deberías usar un emulador tanto para plataformas iOS como Android.
El despliegue en Android no es tan fácil como el despliegue en iOS, por lo que necesitas probar antes de la implementación. Para iOS, necesitamos crear un proyecto nuevo para iPhone, iPad y iPod Touch con iCloud, luego debemos llenarlo con archivos desde Xcode.
Después de eso, necesitamos conectar todos los dispositivos a la Mac y subirlos manualmente a los servidores de Apple. Si tienes una aplicación Android, tu aplicación difícilmente será popular si se limita a una sola familia de dispositivos. Tienes que desarrollar para todos los dispositivos. Si desarrollas aplicaciones en Windows, nunca serán populares si se limitan a una sola familia de plataformas.
Conclusión
React Native es un framework de JavaScript que proporciona la capacidad de crear aplicaciones móviles utilizando solo JavaScript. Es uno de los frameworks más populares para el desarrollo de aplicaciones móviles. El framework no requiere aprender nuevos lenguajes ni crear una aplicación completamente nueva para diferentes plataformas; por lo tanto, se ha vuelto popular entre los desarrolladores de iOS y Android.
A pesar de ello, React Native también tiene sus limitaciones. Por ejemplo, no admite componentes web (web components), que son cada vez más populares en el mundo del desarrollo JavaScript. Esa es una de las razones por las que reemplazar React Native con otros frameworks como Flutter o Vue.js podría ser una buena idea en un futuro donde los componentes web están tomando gradualmente el control de la propia plataforma web. La elección final debe basarse en una evaluación realista de los requisitos de rendimiento, el equipo de desarrollo y el tiempo de comercialización del proyecto.