Estilos y Tematización con Restyle en React Native
From Author:
Haris está hablando sobre la recién liberada biblioteca Restyle (https://github.com/Shopify/restyle); cómo aborda muchos problemas y puntos de dolor que los desarrolladores experimentan al gestionar estilos en evolución y soporte de temas (¡debe tener modo oscuro!) en una aplicación React Native.
This talk has been presented at React Summit Remote Edition 2020, check out the latest edition of this React Conference.
FAQ
Arrive es una aplicación que ayuda a mantener un seguimiento de todos tus pedidos en línea, permitiendo organizar y actualizar el estado de los envíos de forma eficiente.
La aplicación Arrive está desarrollada utilizando 95% React Native, complementada con algunos módulos nativos para iOS y Android.
Los principales problemas incluyen la gestión de colores, que son difíciles de mantener y nombrar, así como la gestión de estilos de fuente, que originalmente causaban duplicación de código y complicaciones al introducir pequeñas variaciones en los estilos existentes.
Restyle proporciona un sistema de tipo forzado para componentes de UI, facilitando la tematización y personalización de estilos mediante un tema global. Esto permite una gestión más eficiente de colores y estilos, simplificando la implementación de nuevas características como el modo oscuro.
El espaciado se maneja mediante un sistema de multiplicación basado en un número específico, donde todos los espacios siguen múltiplos de ese número, utilizando convenciones de nombres similares a las tallas de ropa, como pequeño, mediano, grande, etc.
Para el modo oscuro se construye un nuevo tema basado en el tema por defecto, sobrescribiendo los colores necesarios. Se utiliza un gancho UState para alternar entre el tema oscuro y el tema normal, permitiendo a los componentes ajustarse automáticamente al tema seleccionado.
Puedes encontrar más información y contribuir al proyecto revisando Restyle en GitHub, donde está disponible como una biblioteca de código abierto.
Video Transcription
1. Introducción a los estilos y temas en React Native
Hoy hablaremos sobre estilos y temas en react native desde la perspectiva de la aplicación arrive. Enfrentamos problemas con la gestión de colores y estilos de fuente. Restyle resolvió estos problemas proporcionando un sistema de tipo forzado para construir componentes de UI con capacidad de tematización incorporada. Restyle espera un objeto de tema global definido.
Gracias por ver. Soy un ingeniero senior en Shopify con sede en Toronto, Canadá. Trabajo específicamente en el equipo de cliente en la aplicación arrive. Es una aplicación que ayuda a mantener un seguimiento de todos tus pedidos en línea. También dirijo una tienda en línea llamada rapid supply que vende pines de ropa, pegatinas y accesorios para desarrolladores y otros entusiastas de la tecnología.
Así que hoy hablaremos sobre estilos y temas en react native desde la perspectiva de la aplicación arrive y las experiencias que adquirí mientras trabajaba en la aplicación. React, lo siento, la aplicación arrive es 95% react native con el resto dependiendo de un par de módulos nativos para iOS y Android. Hablaré sobre algunos de los principales problemas que enfrentamos cuando se trataba de tematización y estilización para la aplicación y cómo nuestra biblioteca restyle ayuda a resolver esos problemas. El primer problema que encontramos giraba en torno a la gestión de colores. Los colores son notoriamente difíciles de nombrar, son difíciles de rastrear. Se volvieron súper difíciles de mantener a medida que se agregaban más y más colores o se necesitaba ajustar los colores antiguos para satisfacer las necesidades cambiantes de la aplicación. El segundo problema giraba en torno a la gestión de estilos de fuente. En primer lugar, como teníamos demasiada duplicación de code en toda la aplicación, necesitábamos escribir múltiples declaraciones de estilo diferentes para cada componente de texto que teníamos en nuestra aplicación. Esto requería demasiado code en todas partes y se volvió súper difícil de manejar. Una de las primeras cosas que hicimos fue intentar simplificar esto construyendo un objeto de estilos de fuente que define algunos de nuestros estilos de fuente predeterminados y luego implementarlos y usar esos según sea necesario para los diferentes componentes de texto en toda nuestra aplicación. Esto funcionó bien, pero comenzamos a tener problemas cuando, por ejemplo, teníamos un nuevo estilo de fuente que era exactamente igual a uno que existía, pero con un pequeño cambio. Así que no estábamos seguros de si necesitábamos introducir un nuevo estilo de fuente o usar el estilo de fuente que ya teníamos con una sobrescritura. Y el segundo problema que tuvimos fue tratar de averiguar cuán amplios o específicos necesitaban ser los estilos de fuente. ¿Era el cuerpo demasiado genérico? ¿Era la llamada a la acción demasiado específica? En el último escenario, si nos encontramos en una situación en la que necesitábamos usar el mismo estilo de fuente que ya implementaba la llamada a la acción, pero era para algo que no era una llamada a la acción, no sabíamos si necesitábamos refactorizar toda la base de code para acomodar un estilo de fuente de llamada a la acción renombrado o simplemente usar tal como está y lidiar con las consecuencias incómodas de perder algo de esa consistencia. El modo oscuro y la tematización es obviamente una gran parte de las mobile apps, y sabíamos que queríamos implementar y abordar el modo oscuro. Pero ya teníamos una serie de problemas con respecto a los temas, con respecto a los colores y estilos de fuente. Y la idea de agregar más colores y más alternativas de estilo de fuente simplemente no parecía el enfoque correcto cuando ya teníamos problemas que estábamos tratando de resolver. Así es como entra en juego Restyle. Restyle es una biblioteca de código abierto. Proporciona un sistema de tipo forzado para construir componentes de UI impulsados por TypeScript. Su capacidad de tematización está incorporada desde el principio, por lo que si y cuando decides implementar el modo oscuro o un tema, es extremadamente trivial y fácil de hacerlo. Te voy a guiar a través de algunas de las best practices o conceptos que surgen a través de Restyle y cómo resolvieron los problemas que tuvimos mientras trabajábamos en Arrive. Restyle espera que tengas un tema definido. Este es un objeto de tema global con un conjunto de valores para colores, espacios, puntos de interrupción y una serie de otras cosas. Este tema se utiliza luego pasándolo al proveedor de temas usando la propiedad de tema.
2. Paleta de Colores, Espaciado y Modo Oscuro
Todo sistema de diseño comúnmente tiene una paleta de colores con colores base y tonos. Implementamos y usamos esta paleta para definir los colores dentro de nuestro tema. Los nombres de colores orientados al contexto facilitaron la modificación y gestión de colores. El espaciado se simplificó utilizando un sistema de multiplicación. Restyle proporciona componentes predefinidos, Box y Text, que utilizan el tema y permiten estilos personalizados. La implementación del modo oscuro implica construir un nuevo tema y alternar el valor. Los componentos de Restyle se ajustan automáticamente al tema actual. La experiencia de desarrollo se ve mejorada por la autocompletación de TypeScript y otros beneficios. Consulta el proyecto en GitHub para más características. ¡Gracias por escuchar!
Entonces, ¿cómo funcionan ahora los colores? Lo primero que hicimos fue darnos cuenta de que, hey, cada sistema de diseño comúnmente tendrá una paleta de colores. Estas paletas incluirán un número de colores base con tonos más claros y oscuros. Así que lo primero que hicimos fue implementar esta paleta sin preocuparnos por el tema. Lo siguiente que hicimos fue entonces usar esta paleta para definir los colores dentro de nuestro tema. Y los nombres que le dimos a cada uno de nuestros colores eran muy orientados al contexto. Así, por ejemplo, teníamos CardPrimaryBackground y ButtonPrimaryBackground. Este escenario hizo que fuera muy fácil para nosotros agregar nuevos colores a la paleta, modificar colores en nuestra paleta y cambiar la implementación de esa paleta para un contexto muy específico sin preocuparnos por cualquier efecto dominó que pudiera tener en toda la aplicación. Esto facilitó la introducción de nuevos colores y mantener un estado general bien gestionado con respecto a los colores. El espaciado se volvió mucho más fácil cuando implementamos un sistema de multiplicación. Elegimos un número específico y todo nuestro espaciado esencialmente siguió múltiplos de ese número de espaciado. Con respecto a la nomenclatura, usamos una convención de nombres al estilo de las tallas de camisetas, así que teníamos pequeño, mediano, grande, XL. Esto es bastante bueno porque puedes extenderlo fácilmente para agregar números de espaciado más pequeños y más grandes usando la notación X. Así que podrías implementar doble XL o XS para una medida de espaciado más pequeña.
Restyle también proporciona dos componentes predefinidos llamados Box y Text. Nos dimos cuenta de que los componentes View y Text por defecto simplemente no eran los mejores puntos de partida, así que necesitamos sobrescribir estos con los componentes Text y Box. Estos utilizan el tema desde el principio. Puedes pasar propiedades de Estilo usando Props a los componentes Text y Box. Las propiedades de color y las propiedades de medida se mapean a los valores que has proporcionado en tu tema. También puedes pasar una variante de Texto para aplicar un estilo de Texto predefinido que habrás definido en tu tema. El Box proporciona una experiencia similar al componente de Texto pero añade un número de propiedades adicionales para el relleno, el margen, las alineaciones y los bordes.
¿Cómo abordamos ahora el Modo Oscuro? Es súper simple. Lo primero que necesitamos hacer es construir un nuevo tema basado en el tema por defecto. Lo único que estamos haciendo aquí es sobrescribir los colores que necesitamos cambiar para nuestro tema de Modo Oscuro. Lo siguiente que necesitamos hacer es encontrar una forma de poder almacenar ese valor en algún lugar y alternar el valor de ida y vuelta. En este caso estoy usando un gancho UState para establecer el valor del Modo Oscuro. Basándonos en ese valor pasamos DarkTheme o Theme al proveedor de temas. Y eso es literalmente todo. Tus componentes de restyle ahora se ajustan automáticamente para acomodar el tema actual.
La experiencia de desarrollo para todo este proceso también es súper impresionante ya que todo esto está respaldado por TypeScript. Mientras desarrollas tu aplicación, mientras estilizas las cosas, las cosas se autocompletan automáticamente y obtienes todos los otros beneficios que TypeScript proporciona. Hay una serie de otras características de las que no tuvimos la oportunidad de hablar hoy así que recomiendo encarecidamente que revises el proyecto en GitHub. Muchas gracias por tenerme hoy y por escuchar, revisa restyle en GitHub y la página de carreras de Shopify si estás buscando un nuevo trabajo. Muchas gracias. Saludos.
Available in other languages:
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript
Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
Comments