- Shopify declaró hace 5 años que React Native (RN) era el futuro del desarrollo móvil y desde entonces migró con éxito todas sus apps a RN
- Motivos principales para adoptar React Native
- Escribir una vez para soportar dos plataformas: eliminar la ineficiencia de desarrollar la misma funcionalidad dos veces en iOS y Android
- Mayor movilidad del talento: permitir que los desarrolladores se muevan libremente entre iOS, Android y Web
- Entregar más valor: reducir el tiempo dedicado a lograr paridad funcional y entregar más valor a los usuarios
- Resultados exitosos de la transición
- La productividad mejoró mucho al no tener que desarrollar la misma funcionalidad dos veces
- Al lograr que los ingenieros trabajen tanto en web como en móvil, el mismo equipo puede hacer más trabajo y generar nuevas oportunidades de crecimiento
- Mantener la paridad funcional entre iOS y Android dejó de ser un problema, lo que permitió entregar más valor
- El tiempo de carga de pantallas en la app es rápido, por debajo de 500 ms, y más del 99.9% de las sesiones se mantienen estables
- Siguen usando código nativo cuando es la herramienta más adecuada para el trabajo, aprovechando lo mejor de ambos mundos
Aprendizajes principales
Las apps en React Native son rápidas
- Shopify considera el rendimiento como algo muy importante, y su CEO Tobi Lutke enfatiza que “no todo software rápido es excelente, pero todo software excelente es rápido”
- Antes de migrar a React Native (RN), la mayor pregunta era si RN podría cumplir sus objetivos de rendimiento
- Por eso, antes de tomar la decisión de migrar, validaron esa posibilidad mediante una amplia fase de prototipado
- Revisaron el trabajo que Meta ya venía realizando para eliminar cuellos de botella de rendimiento e identificaron áreas como listas donde podían contribuir
- Decidieron adoptarlo de lleno al considerar que RN pronto sería más rápido
- Cinco años después, las apps en RN funcionan rápido y en la app de Shopify logran tiempos de carga de pantalla por debajo de 500 ms (P75)
- También alcanzaron con éxito metas de rendimiento similares en todas sus demás apps
- Es fundamental aplicar buenos patrones y técnicas para eliminar cuellos de botella de rendimiento
- No hay garantía de que lo nativo siempre sea más rápido, ni tampoco de que RN siempre sea más lento
- RN ha avanzado mucho en los últimos años y se ha consolidado como una plataforma capaz de construir apps de clase mundial
- A medida que el framework de RN madura, esperan que desarrollar apps rápidas sea cada vez más sencillo
- Conforme aumenta la experiencia del equipo, también crece el margen para crear mejores apps
Ventajas del hot reloading
- El hot reloading de React Native (RN) revolucionó la experiencia de desarrollo al reflejar los cambios de inmediato
- Uno de los mayores problemas en el desarrollo nativo era que, dependiendo del tamaño de la base de código, incluso cambios menores podían tardar varios minutos en compilar y ejecutarse en el emulador o en un dispositivo real
- Esto desperdiciaba tiempo e interrumpía el flujo de trabajo de los desarrolladores
- El hot reloading de RN resolvió completamente este problema, mejorando mucho la productividad y la experiencia de desarrollo
TypeScript y la movilidad del talento
- Con la adopción generalizada de TypeScript, el movimiento de desarrolladores entre React web y React Native (RN) se volvió fluido
- Desarrolladores web: con RN pueden empezar a trabajar en móvil mucho más fácilmente que con desarrollo nativo en iOS y Android
- Desarrolladores móviles: con RN pueden participar fácilmente en trabajo web
- Ventajas de la movilidad del talento
- Ofrece más oportunidades de crecimiento a los ingenieros y aumenta la flexibilidad para asignar personal
- Refuerza la capacidad de hacer más trabajo con el mismo equipo de desarrollo
- Genera mayor eficiencia y productividad mediante el código compartido entre web y móvil
- Los desarrolladores capaces de trabajar en varias plataformas permiten lanzamientos más rápidos e intercambian ideas entre tecnologías para aplicarlas de nuevas maneras
- Esto fomenta una cultura donde la tecnología se considera una herramienta, amplía la perspectiva del equipo y anima a elegir la herramienta más adecuada para cada trabajo
Los desarrolladores nativos son esenciales
- Los ingenieros móviles especializados en iOS y Android son indispensables para construir grandes apps móviles
- La experiencia acumulada al desarrollar múltiples productos móviles, junto con una comprensión profunda de la usabilidad y las convenciones, no se puede reemplazar
- Tareas como acceder a la capa de plataforma, escribir bindings, dominar build y despliegue, y gestionar actualizaciones de versión de React Native requieren experiencia nativa
- Los desarrolladores nativos son clave para optimizar el rendimiento de la app en distintos modelos de dispositivo y ofrecer una experiencia consistente a todos los usuarios
- También son esenciales para responder a nuevas funciones, APIs y cambios en tooling de iOS y Android, y para gestionar actualizaciones de versión de React Native
- Desarrollo de un programa de capacitación en React Native para desarrolladores nativos móviles:
- Diseñado como aprendizaje autodirigido para ayudarles a escribir código listo para producción
- Soporte adicional mediante sesiones de preguntas y respuestas, pair programming y code reviews con desarrolladores expertos en React Native
- Incorporación adicional de desarrolladores web (expertos en JavaScript, TypeScript y React) a los equipos móviles:
- Manteniendo un equilibrio sólido entre experiencia en nativo y React Native
- Con el tiempo, el nivel técnico de todo el equipo mejoró
- Una composición de equipo bien equilibrada entre desarrolladores nativos y web es clave para crear excelentes apps móviles con React Native
El código nativo es esencial
- Debe evitarse usar React Native al 100%: RN es una herramienta eficiente porque permite desarrollar una funcionalidad una sola vez, pero no es la tecnología adecuada para todos los casos
- Casos donde se necesita código nativo
- Desarrollo de funciones avanzadas: capacidades que aprovechan hardware como escaneo 2D/3D y ejecución de modelos de IA on-device
- Funciones con restricciones de memoria: widgets de inicio y de pantalla de bloqueo, apps y complications de Apple Watch, App Intents, Siri Shortcuts, etc.
- Tareas en segundo plano de larga duración:
- Ejemplo: la app Point of Sale de Shopify descarga y sincroniza grandes volúmenes de datos en segundo plano para poder procesar transacciones incluso sin conexión
- Está diseñada para no afectar el rendimiento de la app descargando completamente esas tareas al código nativo
- RN es ideal para desarrollar la mayoría de las funciones una sola vez, pero en áreas donde lo nativo funciona mejor, lo ideal es usar código nativo
- La fuerte interoperabilidad con nativo que RN ofrece por defecto facilita combinar ambas tecnologías
- Es importante verlo no como RN “o” nativo, sino como RN “y” nativo
- Contar con un equipo con experiencia nativa es esencial para implementar bien esta combinación
Las dificultades del debugging
- El debugging en React Native (RN) tiene aspectos inestables y requiere trabajo adicional para configurarlo correctamente en VSCode
- iOS y Android ofrecen por defecto capacidades de debugging sólidas y estables
- Meta reescribió recientemente por completo el stack de debugging de RN y sigue mejorándolo; el nuevo debugger está mostrando resultados prometedores
- Shopify está colaborando con Meta para llevar la experiencia de debugging de RN a nivel de clase mundial
Las actualizaciones de React Native no son seamless
- Actualizar una app a una nueva versión de React Native (RN) requiere mucho trabajo y con frecuencia exige reorganizar la base de código
- Para resolverlo, Shopify formó un pequeño grupo rotativo de desarrolladores dedicado a las actualizaciones, mientras el resto del equipo se concentra en desarrollar funcionalidades
- Esperan que el proceso de actualización se vuelva cada vez más sencillo a medida que el framework de RN madure
- Confían en que, cuando New Architecture se adopte más ampliamente, disminuya la complejidad del trabajo relacionado con actualizaciones
Mayor dependencia de librerías de terceros
- El framework React Native (RN) no es tan integral como lo nativo, por lo que termina usándose una mayor cantidad de librerías de terceros
- Como el ecosistema ha madurado en los últimos años, hoy es fácil encontrar librerías bien mantenidas para casi cualquier función necesaria
- Sin embargo, sigue siendo necesario mantener actualizadas esas librerías de terceros, y también aumenta la superficie de ataque de la cadena de suministro
- Shopify introdujo actualizaciones automáticas de dependencias con Dependabot
- Además, mediante escaneo automático de código detecta y previene código malicioso
- Esperan que el framework de RN evolucione con una dirección más clara y ofreciendo más funcionalidades de forma nativa
Grandes beneficios de aprovechar una base compartida
- Cuando adoptaron React Native (RN) por primera vez, tenían poca experiencia construyendo apps móviles con RN y tampoco podían aprovechar la base compartida acumulada en el desarrollo nativo
- Al inicio, cada equipo resolvía sus problemas por cuenta propia mientras desarrollaba sus apps, lo que fue efectivo para empezar rápido y migrar las aplicaciones
- Sin embargo, eso generó trabajo duplicado e ineficiente, ya que distintos equipos resolvían los mismos problemas varias veces
- Invirtieron tiempo y esfuerzo en construir experiencia en RN, eligiendo de manera intencional el trade-off de priorizar la velocidad aun sacrificando consistencia
- A partir de 2023, con todas las apps ya maduras, comenzaron a reforzar la consistencia
- Extrajeron componentes comunes (por ejemplo: Identity, monitoreo en tiempo real, medición de rendimiento, etc.) a librerías compartidas para usarlas en todas las apps
- Esto permite que los equipos usen soluciones existentes sin tener que volver a resolver problemas ya resueltos
- En 2025 ampliarán aún más el código compartido para
- Difundir conocimiento y experiencia entre equipos
- Hacer que todas las apps se beneficien automáticamente de las mejoras en componentes compartidos
- Ahorrar recursos de ingeniería para enfocarlos en entregar valor a los usuarios
El futuro de React Native
- El futuro de React Native (RN) es prometedor, y Meta está ofreciendo mejoras constantes como un gran administrador del proyecto
- En cada release, el feedback de los desarrolladores se refleja fuertemente en la hoja de ruta, y esperan que crear apps rápidas sea cada vez más fácil
- Shopify planea seguir apoyando la evolución de RN mediante la adopción de New Architecture
- Varias grandes empresas como Microsoft, Amazon, Tesla, SpaceX y Coinbase usan RN, y siguen apareciendo librerías y frameworks de terceros de alta calidad
- Shopify contribuye al open web, open source y open standards con iniciativas como las siguientes
- Contribuciones de código a RN
- Participación como co-release captain en releases de RN
- Apoyo a proyectos open source de alto impacto como React Native Skia y Reanimated
- Publicación de proyectos open source como Flashlist, Restyle y Tophat
- Además, en 2025 reactivaron el React Native Working Group
- El objetivo es reunir a líderes clave de organizaciones que apoyan RN para identificar los principales retos del ecosistema, definir prioridades de inversión, promover la colaboración y reducir trabajo duplicado
- Empresas que participaron anteriormente: Meta, Twitter, Coinbase, Microsoft y otras
- Si deseas participar, consulta aquí
- RN ha avanzado muchísimo en los últimos 5 años, y muchas de las limitaciones que hacían dudar de su adopción ya desaparecieron
- Si hace tiempo que no pruebas RN, ahora es un buen momento para darle otra oportunidad
9 comentarios
Adoptamos RN por razones similares y más o menos en la misma época, y nos ha funcionado bien.
Me cuesta un poco coincidir con el tema de rendimiento, pero probablemente sea un problema que haya que resolver a nivel de
react-dom.Creo que la mayor ventaja es poder hacer mucho con un equipo pequeño.
Me pregunto qué funcionalidades nativas hay que no se pueden cubrir con la API nativa de RN.
Es una experiencia compartida muy interesante. Ahora estoy desarrollando una app de Android en el trabajo usando Kotlin, y a veces me pongo a pensar: ¿de verdad es necesario ir sí o sí por nativo...? (En mi caso, había cosas que necesitaban trabajar muy de cerca con la plataforma, así que no me quedó otra que ir por nativo). Si es posible, creo que también estaría bien ir en una dirección con soporte multiplataforma, como React Native o Flutter.
Shopify es genial @.@
"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"En lugar de pensar en nativo o React Native, piensa en nativo y React Native."
En ingeniería no existe el 100% (ojo con los títulos clickbait de "A siempre es mejor").
Cada opción tiene sus pros y sus contras, y hay herramientas adecuadas para cada situación.
También es un muy buen texto porque permite ver la filosofía de Shopify para construir equipos.
Aun así, yo voy a seguir alabando Flutter.
Pasar todas las apps a RN... está brutal, jaja.
@shopify/flash-listestá buenísimo. Gracias, Shopify.Shopify también está cumpliendo un papel clave dentro del ecosistema de Ruby on Rails,
y en el ecosistema de RN también está mostrando un recorrido sorprendente. Es una gran empresa.