Estilos y Tematización con Restyle en React Native

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.

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.