🪄 Lecciones aprendidas actualizando la versión de React Native

Miguel Cast — Tue, 15 Feb 2022 20:26:41 +0000

Hace poco vivimos en Ayenda el retador y agotador proceso de actualizar la versión de React Native de nuestra App por primera vez, pasamos de la versión 0.59 a la 0.63.4. En el proceso aprendimos algunas lecciones que nos sirvieron para llevar mucho más fácil esta actualización.

Contenido del post

🤷🏻‍♀️ Por qué actualizamos la versión de React Native
⏮️ Lección #1 - No actualices a la última versión
👣 Lección #2 - Dividir en diferentes hitos
⚙️ Lección #3 - La comunidad y herramientas
🏁 Conclusión

Por qué actualizamos la versión de React Native

Ayenda es una cadena de hoteles donde buscamos alojar millones de huéspedes usando tecnología, y para lograrlo empezamos a mejorar nuestros canales digitales. Para el caso de nuestra APP, donde cualquier persona puede descargarla, buscar un hotel en Colombia, Perú y México, realizar reservas y administrarlas, el objetivo es ofrecer la mejor experiencia y soportar una cantidad de usuarios. Nuestra app está desarrollada con React Native y antes de llevar a cabo la actualización teníamos instalada la versión 0.59 y varias librerías más. El problema con esto es que llevábamos un largo tiempo sin hacer grandes cambios o desarrollos y nos dimos cuenta de los problemas que teníamos al estar desactualizados. Para nombrar algunos:

Librerías desactualizadas, incluyendo React Native, por tal motivo teníamos bugs, problemas de seguridad y performance.
El ambiente de desarrollo no soportaba herramientas como Flipper para hacer debbug o Fast refresh para agilizar nuestros desarrollos.
Varias de las librerías que queríamos instalar para nuevos desarrollos no soportan versiones < 0.60 de React Native.
Acceder a nuevas características de versiones más actuales de React Native.

Estos problemas y algunos otros factores hacían que el proceso de desarrollo y la experiencia de usuario no fuera la mejor en el momento, donde empezar a crear nuevas características frecuentemente y tener un equipo de desarrollo más grande ejecutando diferentes cambios iba a convertirse en un caos.

Ahora te contaré algunas de las experiencias y lecciones que pasamos mientras actualizábamos la versión de React Native:

Lección #1 - No actualices a la última versión

Un error que se cometió al iniciar el desarrollo para actualizar la versión de React Native de la 0.59 a la 0.63.4, en su momento, fue tratar de actualizar directamente a esta última versión. Pero, ¿por qué esto fue una mala práctica? El hecho de querer subir 4 versiones al tiempo nos acumuló todos los cambios y errores de cada una de estas versiones, es decir, si al pasar a la versión 0.60 teníamos que hacer 20 cambios, estábamos sumando, además, los de cada versión. Todo esto junto en una actualización, sumaba demasiada complejidad y errores que resolver, por esta razón decidimos no pasar a la última versión inmediatamente, sino ir subiendo de versión gradualmente.

Empezamos a actualizar de la versión 0.59 a la 0.60 y fue mucho más fácil que hacerlo directamente a la 0.63.4. Esto nos ayudó a ver resultados más rápidos y a minimizar la cantidad de errores que resolvimos en cada actualización, sobre todo al pasar de la versión 0.59 a la 0.60 donde agregaron grandes cambios (puedes verlos aquí). Luego de esto fue mucho más fácil pasar a versiones como la 0.62 y después a la 0.63.4. En el medio de cada actualización nos encontramos otro reto, que nos llevó a la siguiente lección.

Lección #2 - Dividir en diferentes hitos

Nos encontramos que al actualizar la versión de React Native nos empezaron a salir una serie de errores y problemas que debíamos arreglar para que nuestra App quedara funcionando correctamente. Para dar solución a estos errores, fue necesario organizarnos y avanzar hacia el objetivo en partes más pequeñas, logrando un trabajo enfocado y que nos permitió ver el avance en todo momento; por eso decidimos ir por el siguiente camino:

Solucionar los conflictos de IOS y que compilara correctamente (varios cambios y errores en este paso).
Solucionar los conflictos de Android y que compilara correctamente (varios cambios y errores en este paso).
Actualizar librerías que no estuvieran funcionando correctamente o hacer cambios en implementaciones.
Arreglar errores de código.
Arreglar problemas de UI.
Solucionar las advertencias que nos reporta React Native.

Todo esto que hicimos con cada actualización nos ayudó a tener un objetivo claro sobre cada tarea y motivarnos a alcanzarla, ya que la cantidad de errores en total que pueden aparecer en la actualización puede ser algo frustrante, pero si lo dividimos y solucionamos los problemas por partes más pequeñas se hace más llevadero y menos abrumador.

Lección #3 - La comunidad y herramientas

En el camino nos dimos cuenta de que la comunidad de React Native es una comunidad donde podemos acceder y donde se están creando grandes herramientas que nos benefician a todos. No estamos solos con todos los problemas encima sino que nos soportamos de herramientas y soluciones desarrolladas por la comunidad.

Actualizar la versión de React Native es un poco más que actualizar el archivo package.json, también debemos modificar varios archivos de las carpetas ios y android. Para hacer esto mucho más fácil podemos usar Upgrade helper, este nos permite ver las diferencias entre dos versiones de archivos que fueron eliminados, agregados o actualizados de la base de código de React Native.

Esta no es la única herramienta que nos ayuda, existen otras como el comando upgrade para cambiar automáticamente la base del código, como nos muestra el Upgrade Helper pero aplicada directamente a nuestro proyecto.

Para ver más herramientas que nos facilitan el trabajo de actualizar nuestro proyecto puedes entrar a la documentación de React Native aquí.

En el momento que estuvimos resolviendo errores y conflictos un gran apoyo en la comunidad fueron los issues del repositorio de React Native y también de las dependencias que utilizamos, allí encontramos otras personas que han pasado por los mismos errores y encontramos muy buenas soluciones, lo cual nos ayudó a optimizar mejor el tiempo en cada problema que nos encontrábamos.

Aquí también fueron de gran ayuda Stack Overflow, Medium, Github, Dev.to y otros blogs creados por una gran comunidad.

Conclusión

Llevar a cabo esta actualización en Ayenda fue al comienzo un proceso agotador y un poco frustrante. Nos encontramos con muchos baches y errores, llegando al punto de pensar en que era imposible hacerlo, pero cuando trabajamos en equipo y todos pensamos en pro del mismo objetivo todo se vuelve más fácil.

Estas lecciones que compartimos nos ayudaron a que el camino fuera más ordenado, menos frustrante, a mantenernos motivados y poder llegar a la meta.

Nuestro proyecto y nuestra experiencia de desarrollo en el equipo mejoró increíblemente después de cambiar la versión de React Native y otras librerías más.

Ahora a seguir con el próximo upgrade 🤓