DEV Community

Cover image for 馃獎 Lecciones aprendidas actualizando la versi贸n de React Native
Miguel Cast for Ayenda

Posted on • Updated on

 

馃獎 Lecciones aprendidas actualizando la versi贸n de React Native

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

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.

Upgrade helper interface

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.

react native issues section

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 馃

Top comments (1)

Collapse
 
yuliannydev profile image
Yulianny Betancourt

Al leer este post s贸lo puedo pensar en los otros que pueden salir dando un poco m谩s de contexto de bugs encontrados al pasar de versi贸n, y c贸mo mejorarlos.

Muy bien resumida la experiencia. 馃憦馃徎

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What鈥檚 New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React