Web y Mobile

Esto facilita la implementaci´on de cambios en la forma de interactuar con Firebase, como pasar de acceder directamente a Firestore a utilizar funciones en su lugar, ya que solo se tendr´ıa que actualizar la capa de controladores y no el c´odigo de los componentes l´ogicos de la aplicaci´on. As´ı el equipo logr´o una mayor modularidad, reutilizaci´on y mantenimiento sobre el c´odigo frontend.

Redux

Redux es la librer´ıa por excelencia para el manejo de estados en aplicaciones React y React Native. Habiendo sido lanzada en 2015, hoy en d´ıa es la opci´on m´as utilizada por la comunidad, ampliamente por encima de cualquier otra alternativa [21].

Redux permite centralizar y gestionar el estado de toda la aplicaci´on en un ´unico lugar, lo que facilita la trazabilidad del estado, la depuraci´on de la aplicaci´on y por ende la comprensi´on y replicaci´on de escenarios complejos. La raz´on del ´exito de la librer´ıa es que se integra de manera ´optima con React al funcionar con el mismo paradigma “reactivo” unidireccional delframework, y manteniendo un estado inmu- table que s´olo se puede modificar mediante acciones disparadas desde la interfaz de usuario [22]. Esto evita que se produzcan modificaciones no deseadas en el estado, lo que a su vez impacta positivamente en la robustez de la aplicaci´on y la hace menos propensa a errores.

Otra ventaja de Redux es que es altamente escalable, lo que significa que se puede utilizar en aplicaciones grandes y complejas sin comprometer el rendimiento o la calidad del c´odigo.

El funcionamiento de Redux no es m´as que una implementaci´on del patr´on Observer [23], donde una fuente central de datos (“Redux Store” en el diagrama) notifica a sus subscriptores de las actualizaciones sucedidas. En las aplicaciones React, los suscriptores son los componentes (“React Components” en el diagrama), y a su vez son estos los que “despachan” acciones que indican al estado global como debe cambiar.

Figura 7.5: Flujo de datos de Redux

Theming

Figura 7.6: Definici´on y uso de colores con theming

La estilizaci´on de una aplicaci´on React o React Native se puede realizar directa- mente en los componentes, indicando para cada componente visual cual es el estilo deseado. React y React Native ofrecen APIs nativas para hacer esto, declarando style sheets. Sin embargo, esta pr´actica tiene como gran desventaja que se debe re- petir en cada definici´on de componente la declaraci´on de estilos que suelen ser muy similares (o incluso los mismos) para mantener una coherencia estil´ıstica transversal a la aplicaci´on. Por otro lado y de la mano con el punto anterior, existe el gran riesgo de que los estilos terminen por divergir entre un componente y otro, especialmente cuando m´as de un desarrollador est´a trabajando sobre el mismo c´odigo base. Por

´

ultimo, implementar cambios mayores en la paleta de colores o en cualquier otro aspecto del estilo global de la aplicaci´on puede volverse un proceso doloroso al tener que modificar c´odigo en distintos archivos.

Una soluci´on a esta problem´atica es la implementaci´on de temas, que son declara- ciones centralizadas de estilos a nivel global de la aplicaci´on. As´ı, los componentes pueden hacer referencia a estos temas sin quedar directamente vinculados a los valo- res finales de las propiedades. Un ejemplo de esto podr´ıa ser el color verde del logo de NMC. En lugar de declararlo una y otra vez en todos los componentes, bastar´ıa con declararlo una ´unica vez en el tema bajo el nombre primary. Como es de imaginar, realizar cambios en estas circunstancias es ampliamente m´as f´acil, ya que los estilos solo deben ser modificados en un ´unico lugar. Este concepto es denominadotheming.

El equipo decidi´o implementar theming para administrar centralizadamente la pa- leta de colores definida durante el proceso de dise˜no. En el proyecto mobile, esto se logr´o haciendo uso de las prestaciones de la librer´ıa de navegaci´on de la aplicaci´on, React Navigation, que ya incluye la posibilidad de declarar un objetotheme, y lue- go poder utilizarlo desde cualquier componente a trav´es de un hook que la librer´ıa expone llamado “useTheme”. En el caso del proyecto web el theming se configur´o con la librer´ıa de Material UI “@mui/material/styles”, de forma muy similar.

Otra gran ventaja adem´as de la facilidad de implementar cambios en los estilos glo- bales de forma sencilla, es que con este enfoque tambi´en es posible realizarlos de forma din´amica, en tiempo de ejecuci´on. Esto ser´ıa especialmente ´util si se quisiera implementar dark mode, o si se quisiera dar al usuario la opci´on de personalizar ciertos aspectos dellook and feel de la aplicaci´on.

Como contrapartida de las ventajas que aporta la implementaci´on de theming, el c´odigo final de los componentes visuales se volvi´o un poco m´as verboso al tener que

“unificar” los estilos est´aticos con las propiedades importadas din´amicamente del tema a trav´es del hook, como se puede ver en la imagen 7.6.