Construida con React Native - La aplicación de Build.com

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Build.com, con sede en Chico, California, es uno de los minoristas en línea más grandes de artículos para mejoras del hogar. El equipo ha mantenido un sólido negocio centrado en la web durante 18 años y comenzó a considerar una aplicación móvil en 2015. Desarrollar aplicaciones nativas separadas para Android e iOS no era práctico debido a nuestro equipo reducido y experiencia limitada en desarrollo nativo. En su lugar, decidimos arriesgarnos con el entonces muy nuevo framework React Native. ¡Nuestro commit inicial fue el 12 de agosto de 2015 usando React Native v0.8.0! Lanzamos la aplicación en ambas tiendas de aplicaciones el 15 de octubre de 2016. Durante los últimos dos años, hemos seguido actualizando y expandiendo la aplicación. Actualmente estamos en la versión 0.53.0 de React Native.

Puedes ver la aplicación en https://www.build.com/app.

Características

Nuestra aplicación es completa e incluye todo lo que esperarías de una app de comercio electrónico: listados de productos, búsqueda y ordenación, capacidad para configurar productos complejos, favoritos, etc. Aceptamos métodos de pago estándar con tarjeta de crédito, así como PayPal y Apple Pay para nuestros usuarios de iOS.

Algunas características destacadas que quizás no esperes incluyen:

1. Modelos 3D disponibles para alrededor de 40 productos con 90 acabados

2. Realidad Aumentada (AR) para que el usuario pueda ver cómo se verán las luces y griferías en su hogar con una precisión de tamaño del 98%. ¡La aplicación Build.com con React Native está destacada en la Apple App Store en la categoría de compras con AR! ¡La AR ya está disponible para Android e iOS!

3. Funciones de gestión colaborativa de proyectos que permiten crear listas de compras para las diferentes fases de un proyecto y colaborar en la selección

Estamos trabajando en muchas características nuevas y emocionantes que seguirán mejorando nuestra experiencia de aplicación, incluida la siguiente fase de Compras Inmersivas con AR.

Nuestro flujo de desarrollo

Build.com permite a cada desarrollador elegir las herramientas que mejor se adapten a ellos.

• Los IDEs incluyen Atom, IntelliJ, VS Code, Sublime, Eclipse, etc.

• Para las pruebas unitarias, los desarrolladores son responsables de crear tests unitarios de Jest para cualquier componente nuevo y estamos trabajando para aumentar la cobertura de las partes más antiguas de la aplicación usando jest-coverage-ratchet.

• Usamos Jenkins para construir nuestras versiones beta y candidatas a lanzamiento. Este proceso funciona bien para nosotros, pero aún requiere trabajo significativo para crear las notas de la versión y otros artefactos.

• Las pruebas de integración incluyen un grupo compartido de testers que trabajan en escritorio, móvil y web. Nuestro ingeniero de automatización está desarrollando nuestra suite de pruebas de integración automatizadas usando Java y Appium.

• Otras partes del flujo de trabajo incluyen una configuración detallada de eslint, reglas personalizadas que refuerzan propiedades necesarias para pruebas, y hooks de pre-push que bloquean cambios problemáticos.

Bibliotecas utilizadas en la aplicación

La aplicación de Build.com depende de varias bibliotecas open source comunes, incluyendo: Redux, Moment, Numeral, Enzyme y numerosos módulos puente de React Native. También usamos varias bibliotecas open source bifurcadas; bifurcadas porque estaban abandonadas o porque necesitábamos características personalizadas. Un conteo rápido muestra alrededor de 115 dependencias de JavaScript y nativas. Nos gustaría explorar herramientas que eliminen bibliotecas no utilizadas.

Estamos en proceso de añadir tipado estático mediante TypeScript e investigando el optional chaining. Estas características podrían ayudarnos a resolver un par de tipos de errores que aún vemos:

• Datos que son de un tipo incorrecto

• Datos que son undefined porque un objeto no contenía lo que esperábamos

Contribuciones de código abierto

Dado que dependemos tanto del código abierto, nuestro equipo está comprometido a contribuir a la comunidad. Build.com permite que el equipo libere como open source las bibliotecas que hemos creado y nos anima a contribuir en las bibliotecas que utilizamos.

Hemos publicado y mantenido varias bibliotecas de React Native:

• react-native-polyfill

• react-native-simple-store

• react-native-contact-picker

También hemos contribuido a una larga lista de bibliotecas incluyendo: React y React Native, react-native-schemes-manager, react-native-swipeable, react-native-gallery, react-native-view-transformer, react-native-navigation.

Nuestro recorrido

Hemos visto un gran crecimiento en React Native y su ecosistema en los últimos años. Al principio, parecía que cada versión de React Native arreglaba algunos errores pero introducía varios nuevos. Por ejemplo, la depuración remota de JS estuvo rota en Android durante varios meses. Afortunadamente, las cosas se volvieron mucho más estables en 2017.

Bibliotecas de navegación

Uno de nuestros grandes desafíos recurrentes han sido las bibliotecas de navegación. Durante mucho tiempo usamos la biblioteca ex-nav de Expo. Funcionaba bien para nosotros pero finalmente quedó obsoleta. Sin embargo, estábamos en pleno desarrollo de funciones en ese momento, así que tomarnos tiempo para cambiar la biblioteca de navegación no era factible. Eso significó que tuvimos que bifurcar la biblioteca y parchearla para admitir React 16 y el iPhone X. Finalmente, pudimos migrar a react-native-navigation y esperamos que siga recibiendo soporte.

Módulos de puente

Otro gran desafío han sido los módulos de puente. Cuando comenzamos, faltaban muchos puentes críticos. Uno de mis compañeros escribió react-native-contact-picker porque necesitábamos acceso al selector de contactos de Android en nuestra aplicación. También hemos visto muchos puentes que se rompieron con cambios en React Native. Por ejemplo, hubo un cambio importante en React Native v40 y cuando actualizamos nuestra aplicación, tuve que enviar PRs para arreglar 3 o 4 bibliotecas que aún no se habían actualizado.

Mirando hacia adelante

A medida que React Native sigue creciendo, nuestra lista de deseos para la comunidad incluye:

• Estabilizar y mejorar las bibliotecas de navegación

• Mantener el soporte para bibliotecas en el ecosistema de React Native

• Mejorar la experiencia para añadir bibliotecas nativas y módulos de puente a un proyecto

Las empresas e individuos en la comunidad de React Native han sido excelentes al ofrecer su tiempo y esfuerzo para mejorar las herramientas que todos usamos. Si aún no te has involucrado en el código abierto, espero que consideres mejorar el código o la documentación de algunas bibliotecas que utilizas. Hay muchos artículos que te ayudarán a comenzar y puede ser mucho más fácil de lo que piensas.