ADR. Styled Components

Título

Diseño y creación de componentes para el lado cliente de la aplicación, que se puedan integrar con el framework ReactJS.

Estado

Aceptado

Contexto

La interfaz de usuario (UI) está modularizada en componentes (reutilizables), funcionalidad que ya permite ReactJS. Al analizar los aspectos relativos al diseño de la interfaz, se proponen diferentes alternativas. El objetivo es crear componentes 100% usables y accesibles, respetando el contraste de colores, así como colores críticos para determinadas enfermedades de la vista (En inglés, color blinding accesibility). El contraste mínimo que se espera de todos los colores que conforman la paleta a utilizar en la aplicación es de WCAG 2.0 level AA. Además, los componentes han de tener un estilo moderno y minimalista.

Decisión

A la hora de crear componentes en React se comtemplan actualmente diversas opciones.

• Componentes puros de React. Creación de componentes de React personalizados con sus propios estilos cada uno, de forma independiente. Posibilidad de crear un tema para la aplicación de forma que a futuro el usuario pueda configurarlo (Por ejemplo, modo claro u oscuro, aunque para esta aplicación no se contempla por el momento).

• Styled components. Componentes "prefabricados" de terceros, altamente probados y validados por la comunidad y con un gran número de usuarios integrándolos en sus aplicaciones. Por un lado, facilitan enormente el trabajo al desarrollador, evitando crear diseños (quizás) no tan estandarizados. Sin embargo, al ser una biblioteca de terceros, se depende del mantenimiento de dicha librería y la licencia de uso de ésta. La librería que consideramos más destacada es Material Design, basada en Material UI (Perteneciente a Google) y usada por grandes empresas como Spotify, Netflix o la NASA.

• Combinación de componentes personalizados y styled components. Una opción bastante buena ya que ofrece la posibilidad de personalizar aquellos aspectos y detalles de la interfaz que puedan ser críticos y, por otro lado, el uso de styled components para elementos más genéricos como botones, badgets, cards, avatars... Consideramos esta opción como la mejor de todas, ya que permitirá un mayor rendimiento de acorde al tiempo establecido.

Consecuencias

En el apartado anterior, se han descrito ventajas e inconvenientes de cada una de las opciones planteadas. La elección de combinar componentes personalizados con styled components permite a los desarrolladores un ahorro de tiempo, al emplear componentes ya estandarizados, para centrarse más en la funcionalidad y pruebas de éstos, así como componentes personalizados, creados por los propios desarrolladores, para las funciones más críticas de la aplicación, que requiran un nivel de complejidad superior.