Get best of the week

React Native: nuevo hito en el desarrollo móvil de Shopify

O por qué Shopify está cambiando a React Native.

Después de muchos años de desarrollo móvil nativo, decidimos avanzar a toda máquina hacia el desarrollo de aplicaciones móviles en React Native. A continuación quedará claro que esta decisión no fue fácil para nosotros.

Al final de cada trimestre, vemos la misma imagen: la mayoría de nuestros clientes realizan compras a través de dispositivos móviles (en el tercer trimestre del año pasado su participación era del 71%). El viernes negro y el lunes cibernético es el momento más caluroso para nuestros vendedores, y la actividad de los clientes en estos días está fuera de las listas. Este año, durante el período de descuento, los socios de Shopify registraron un aumento del 3 por ciento en los pedidos desde dispositivos móviles, y la participación promedio de dichas compras ascendió al 69% del número total de transacciones .

Entonces, ¿por qué decidimos cambiar a React Native? ¿Y por qué ahora? ¿Qué pasará con nuestro desarrollo móvil nativo ahora? No podrá responder rápida y brevemente estas preguntas. Comencemos con el fondo.

Desarrollo móvil de Shopify - 2019


Hemos desarrollado una práctica especial en Shopify: confiar en tecnologías relativamente jóvenes que se encuentran en una etapa temprana de desarrollo o que simplemente están ganando popularidad. Nos ayuda a crecer más rápido.

Por lo general, nos centramos en varias tecnologías y confiamos principalmente en ellas en el desarrollo. Esto le da varios puntos de crecimiento:

  • formamos una experiencia única en un pequeño conjunto de tecnologías (y a menudo hacemos una contribución significativa o incluso importante para su desarrollo);
  • cada solución tecnológica tiene sus cuellos de botella, sutilezas, y profundizamos en ellos;
  • , , ;.
  • .

Al mismo tiempo, constantemente aparecen nuevas tecnologías que nos brindan oportunidades para aumentar gradualmente la eficiencia de los ingenieros o la productividad de nuestros productos. Estamos experimentando mucho para abrir nuevas posibilidades y traducir mejoras cuantitativas en cualitativas, pero, en última instancia, no estamos introduciendo todos nuestros logros en el proceso técnico principal.

Cuando presentamos tecnologías, lenguajes o marcos jóvenes, intentamos calcular la probabilidad de éxito o fracaso. En lugar de evitar riesgos, estudiamos, investigamos y evaluamos varios riesgos en detalle, en función de las características individuales de nuestros proyectos. Como sucede a menudo, se pueden encontrar oportunidades ocultas en la zona de riesgo. Y pensamos principalmente en cómo neutralizar los aspectos negativos del riesgo:

  • , ?
  • , , ?
  • , () ?

Ruby on Rails se encontraba en la etapa inicial de desarrollo y aún no se había configurado como un marco completo, cuando en 2004 Toby (nuestro CEO) se convirtió en el principal participante en el proyecto de código abierto. Durante muchos años, Ruby on Rails se ha considerado una solución frívola e ineficiente . Pero la selección y el estudio de esta tecnología en una etapa tan temprana de desarrollo como resultado le dio a Shopify una ventaja competitiva, aunque fue una elección impopular. Usando Ruby on Rails, el equipo pudo crear rápidamente productos y atraer recursos. Después de todo, era una tecnología moderna, con un mayor nivel de abstracción que los lenguajes y marcos de programación tradicionales que existían en ese momento. Del mismo modo, Paul Graham dijo una vezsobre cómo decidió usar Lisp para crear Viaweb. 6 de las 10 compañías más caras de Y Combinator hoy usan Ruby on Rails (aunque, una vez más, el marco todavía no es muy popular). Por otro lado, ninguna de las 10 empresas más caras de Y Combinator utiliza Java, que se considera una solución corporativa probada y bastante confiable.

Del mismo modo, hace 2 años Shopify decidió cambiar a Google Cloud.. Una vez más, esta es una empresa bastante arriesgada para el segundo servicio de comercio electrónico más grande de los Estados Unidos (a partir de 2019): llevar a cabo la migración a la nube fuera de sus propios centros de datos en aras de un producto bastante nuevo, Google Kubernetes Engine. Vimos que la curva de valor agregado nos empujó a centrarnos en aquello en lo que somos realmente buenos (esto está ayudando a los negocios), permitiendo que otros (en este caso Google Cloud) asuman el arduo trabajo de mantener el equipo en producción condición, con garantizar la capacidad, la seguridad, con la actualización del sistema operativo, etc.

Reaccionar nativo: ¿qué es?


En 2015, Facebook anunció y lanzó el marco de código abierto React Native . Anteriormente, ya se usaba internamente para el desarrollo de sus aplicaciones móviles. React Native es un marco para el desarrollo multiplataforma de aplicaciones móviles que se muestran de forma nativa utilizando la biblioteca React js . Por lo tanto, permite utilizar la biblioteca js superior para crear la interfaz de usuario de las aplicaciones móviles nativas.

En Shopify, esta idea (entonces, en cierto sentido, ahora también) era escéptica, pero muchos la consideraron prometedora. Entonces, el próximo evento de Shopify Hackdaysestaba completamente dedicado a React Native. Aunque el equipo luego apreció los beneficios del marco, decidimos que en 2015 no podríamos implementar la aplicación React Native, de lo cual podríamos estar orgullosos más adelante. Esto se debió principalmente a problemas de rendimiento y la falta de soporte completo para el sistema operativo Android. Pero nos dimos cuenta claramente de que nos gustaba el paradigma de programación reactiva y GraphQL . Además, después de reunirnos con React Native, desarrollamos y presentamos un procesador para iOS. En 2015, implementamos estas tecnologías en nuestra pila, pero no utilizamos React Native para el desarrollo móvil masivo. Nuestros primeros experimentos están escritos en detalle aquí .

Hasta el día de hoy, Shopify ha tenido el desarrollo móvil nativo como estándar. Creamos dos equipos, herramientas móviles y bases , que se centraron en iOS y Android, y también nos ayudaron a acelerar el proceso de desarrollo. A pesar de que mostraron buenos resultados, nos parece que el desarrollo será más efectivo si:

  • Utilizamos el poder de JavaScript y otras tecnologías web en el desarrollo móvil;
  • introducir el paradigma de programación reactiva en el desarrollo de aplicaciones cliente;
  • combinaremos el desarrollo para iOS y Android en React Native en una pila tecnológica.

¿Cómo funciona React Native?


React Native le permite crear aplicaciones móviles multiplataforma que se muestran de forma nativa utilizando JavaScript. React Native es similar a React: también creamos declarativamente una interfaz de usuario en JS con un árbol de elementos de la interfaz de usuario, o con un DOM virtual (VDOM), en términos de ReactJS. Si ReactJS muestra elementos de la interfaz en un navegador, React Native convierte los objetos VDOM en elementos visuales nativos específicos de la plataforma para mostrarlos en dispositivos móviles usando carpetas: los componentes nativos se envuelven en React. Solo estamos interesados ​​en las plataformas Android e iOS, pero hay entusiastas que están interesados ​​en desarrollar React Native para Windows, macOS y Apple tvOS.


ReactJS interactúa con el navegador y React Native interactúa con las API móviles.

¿Cuándo no usamos React Native?


Hay situaciones en las que el equipo de Shopify no usa React Native para desarrollar aplicaciones móviles. En particular, si estamos obligados a:

  • iniciar la aplicación en el hardware anterior (CPU <1.5 GHz);
  • procesamiento sofisticado;
  • ultra alto rendimiento;
  • muchos hilos que se ejecutan en segundo plano.

Tenga en cuenta que las bibliotecas de bajo nivel, incluidos varios SDK de código abierto, siguen siendo completamente nativas. Podemos crear nuestros propios módulos nativos si queremos estar en contacto más cercano con el hardware.

¿Por qué estamos cambiando a React Native ahora?


Tenemos 3 razones principales:

  1. Después de adquirir el mercado Tictail (el servicio se desarrolló en React Native, de acuerdo con el principio del móvil primero) en 2018, vimos qué tipo de desarrollo recibió React Native y en 2019 invertimos en tres proyectos más.
  2. Shopify utiliza activamente React en el desarrollo web, ahora es el momento de aplicar nuestros conocimientos en el desarrollo de aplicaciones móviles.
  3. Notamos que la curva de rendimiento se arrastró (por ejemplo, lo que pudo antes, y ahora lo que Google Docs puede hacer en comparación con el escritorio de Microsoft Office) e hicimos una apuesta en React Native a largo plazo, tal como una vez creímos en Ruby en Rieles, Kubernetes y Rich Media.

Desarrollo móvil en Shopify en 2019


En Shopify, los vendedores y compradores pueden interactuar de varias maneras: a través de aplicaciones web y móviles. Todo el año pasado, nuestros tres equipos estaban experimentando con React Native y, como resultado, desarrollaron tres aplicaciones móviles: Arrive, Point of Sale y Compass.

Después de nuestros experimentos, llegamos a las siguientes conclusiones:

  • Al copiar la aplicación Arrive a React Native, el equipo descubrió que la productividad se ha duplicado en comparación con el desarrollo nativo, incluso si escribe solo para una plataforma;
  • Al probar la versión de Android de la aplicación Punto de venta a baja potencia, encontramos que la aplicación se ejecuta a una frecuencia de CPU más baja: 1.5GHz (escrito en React Native) versus 2GHz (desarrollo nativo);
  • Estimamos tentativamente que la proporción de código independiente de la plataforma sería ~ 80%; y nos sorprendió cuando en realidad resultó ser mucho más alto: 95% para Arrive y 99% para Compass.

Pero vale la pena hacer una reserva: aunque decidimos escribir nuevas aplicaciones en React Native, esto no significa que reescribiremos todas nuestras aplicaciones antiguas.

Llegar


A finales de 2018, decidimos reescribir una de nuestras aplicaciones cliente más populares para React Native, Arrive . Esta es una aplicación iOS de alto rendimiento y alta calificación con millones de descargas. Elegimos Arrive porque no teníamos su versión de Android. Entonces fuimos a conocer a los usuarios de dispositivos Android. Ahora, las versiones de iOS y Android están escritas en React Native con una participación del 95% del código multiplataforma total.

En el proceso de reescritura, hemos logrado los siguientes resultados:

  • cuando se ejecuta la versión multiplataforma para iOS, se producen menos bloqueos que en la versión nativa;
  • lanzamos la versión para el sistema operativo Android;
  • Tanto los desarrolladores móviles como los no móviles pudieron trabajar en el proyecto.

Además, el equipo pudo probar un método excelente para ejecutar rápidamente solicitudes de extracción "trabajo en progreso". Simplemente escanee el código QR del comentario de Github con su teléfono y se actualizará el paquete JS de su aplicación. Por lo tanto, cada vez puede actualizar instantáneamente la aplicación y usar su versión actual. Nuestra estación de servicio describió recientemente este proceso en Twitter .

Punto de venta


A principios de 2019, realizamos un experimento de 6 semanas en nuestra aplicación de punto de venta (POS) de producto insignia para ver si es un buen candidato para reescribir en React Native. Estudiamos mucho esta pregunta, ya que nuestros minoristas esperaban que pudiéramos reducir a la mitad el tiempo de respuesta de nuestra aplicación: el proceso de servicio al cliente que usa nuestra aplicación debe fijarse en la memoria muscular de los vendedores, y esto no debe distraerlos.

Para cumplir con los requisitos de nuestros minoristas y comprender el desarrollo de React Native para dispositivos POS al mismo tiempo, decidimos crear una nueva aplicación móvil nativa para iOS y escribir una versión para el sistema operativo Android en React Native.

Hemos asignado dos equipos separados para estas tareas, y he aquí por qué:

  1. Ya teníamos un equipo con gran experiencia en iOS, incluidos los desarrolladores de aplicaciones nativas de POS.
  2. Además del rendimiento directo de la aplicación, queríamos poder probar nuestra velocidad de desarrollo en React Native, comparando todo esto con nuestro estándar de oro, es decir, con el desarrollo nativo de iOS.
  3. Para cumplir con los requisitos de alto rendimiento de los vendedores, decidimos hacer que todas las actualizaciones de Facebook rediseñen las actualizaciones para React Native (sin embargo, resultó que esto no es crítico para el rendimiento). Al identificar equipos separados para trabajar en dos proyectos, redujimos los riesgos asociados con la interrupción del plan de lanzamiento.

Anunciamos el POS reescrito en Unite 2019 . Ambas versiones, iOS y Android en React Native, estarán disponibles en 2020.

Brújula


Spotify tiene un equipo de inicio que ayuda a los clientes a iniciar su propio negocio. Antes de que la compañía tomara una decisión fundamental para desarrollar aplicaciones móviles en React Native, este equipo estudió Flutter y React Native en detalle . La elección recayó en React Native, y ahora tienen versiones beta de iOS y aplicaciones Compass para Android . Además, ~ 99% del código que tienen en común.

Los primeros lanzamientos se lanzarán dentro de tres meses.

Desarrollo móvil en Shopify 2020 ++


Hemos preparado muchas cosas interesantes para 2020.
¿Reescribiremos nuestras aplicaciones móviles nativas? No. Aunque esta decisión la toma cada equipo de forma independiente.
¿Contrataremos desarrolladores nativos? Si mucho !
Queremos convertirnos en miembros líderes de la comunidad React Native, crear componentes específicos de la plataforma y continuar entendiendo las complejidades de cada plataforma. Y esto requiere una gran experiencia. Suena bien, ¿verdad?

Colaboración y Código Abierto


Creemos que el desarrollo de software es un juego de equipo. Estamos involucrados en el desarrollo de web abierta, código abierto y otros estándares abiertos.

Estamos contribuyendo a la financiación de los proyectos de Software Mansion y Krzysztof Magera (cofundador de React Native para Android) relacionados con React Native.
Estamos colaborando con William Candillon (líder Can It Be Done in React Native en el canal de YouTube) en mejoras de arquitectura y rendimiento.

Planeamos trabajar estrechamente con el equipo React Native de Facebook en automatización, crear bibliotecas de terceros y supervisar algunos de los módulos en el proyecto Lean Core.

Junto con Discord, estamos trabajando activamente para preparar rápidamente una versión de código abierto de la biblioteca FastList para React Native (le permite representar solo los elementos de la lista que están en el área visible) y optimizarlo para el sistema operativo Android.

Nuestros comandos de herramientas y fundamentos para React Native


Cuando confía en la tecnología y profundiza en ella, desea obtener el máximo efecto de ella. Para establecer metas rápidamente y lograr esta meta, hemos creado dos tipos de equipos que ayudan a otros empleados de Shopify a ser productivos. El primer tipo es el equipo de herramientas, que ayuda con la configuración, integración e implementación. El segundo tipo es el equipo de base, que se ocupa de SDK, reutilización de código y código abierto. En 2020, ambos equipos comenzaron a desarrollarse hacia React Native.

Nuestra popular aplicación Shopify Ping, que le permite chatear con cientos de miles de clientes, actualmente solo está disponible en la versión iOS. En 2020, trabajaremos en una versión para el sistema operativo Android con React Native en nuestra sucursal en San Francisco, donde estamos contratando empleados.

En 2019, Twitter lanzó aplicaciones web móviles y de escritorio utilizando una tecnología llamada React Native Web. El nombre puede ser un poco confuso, pero su principal diferencia es que esta tecnología le permite usar la misma pila React Native para desarrollar aplicaciones web. Como resultado, Facebook persiguió de inmediato a Nicholas Gallagher , el desarrollador principal del proyecto. En 2020, en Shopify también realizaremos algunos experimentos con React Native Web .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles