Uno con React, Tailwind y separación de preocupaciones
Cuando comencé a aprender desarrollo web, aprendí HTML limpio, JavaScript básico y CSS puro, que son tres formas diferentes de usar “frameless”.
Así es como la mayoría de los desarrolladores aprendieron a codificar, al menos a mi edad, porque en ese momento no teníamos ningún marco más que jQuery, y los asistentes de codificación de inteligencia artificial aún no existían.
Unos años más tarde, aprendí React (un marco de JavaScript) y también tuve que aprender Tailwind (un marco de CSS) para proyectos de trabajo para que todos en el equipo de desarrollo estuvieran en la misma página.
Durante años no pude entender por qué React o Tailwind funcionaban como lo hacían, y me frustraba porque cada pequeña cosa parecía requerir más trabajo que JavaScript o CSS puro.
No creo que estos marcos me ahorren mucho tiempo o trabajo a largo plazo, y me molesta tener que usarlos todos los días.
Cuando pregunto a otros desarrolladores sobre esto, a menudo citan el concepto de “separación de preocupaciones” como una razón para hacer que React sea más fácil de usar o más adecuado para proyectos de equipo.
No lo entendí en ese momento. Pero ahora, después de años de usar React y Tailwind, creo que finalmente lo entiendo. Si eres como yo y estás confundido o frustrado por esto, sigue leyendo.
¿Qué es la separación de preocupaciones?
La separación de preocupaciones es un término de programación que significa que cualquier “problema” se puede dividir en “preocupaciones” más pequeñas y manejables.
En nuestro caso, la “preocupación” es sólo un fragmento de código largo y es difícil comprenderlo todo a la vez. HTML tiene varias formas de lidiar con código demasiado complejo integrado en la tecnología.
Una forma de lidiar con el código que es demasiado largo es dividirlo en diferentes archivos: HTML para contenido, CSS para estilos y JavaScript (archivos js) para funciones.
De esta manera, puedes separar más fácilmente las diferentes áreas en las que estás trabajando: HTML para estructura, CSS para diseño y JavaScript para programación básica.
Por supuesto, en un proyecto real, habrá múltiples archivos de cada archivo, múltiples archivos HTML para diferentes páginas (o partes de páginas), múltiples archivos CSS para diferentes aspectos del diseño, múltiples archivos JavaScript para diferentes tipos de funcionalidad.
A medida que aumenta la complejidad del proyecto, la pila de archivos se hace cada vez más grande y, en el mejor de los casos, no está claro dónde están las líneas que dividen el archivo.
Si tomamos el ejemplo de un archivo CSS, dado que es el más cercano al aspecto de diseño y más fácil de explicar, tenemos múltiples opciones sobre cómo dividirlo:
- Quizás solo para procesar un archivo grande
- Divídalo en archivos más pequeños por plataforma: Desktop.css, Mobile.css, etc.
- División por componente: Header.css, Footer.css, Button.css, etc.
- Cortado por página: Index.css, About.css, Contact.css… General.css
- Dividido por función: Common.css, Breakpoints.css, Vars.css, etc.
No está del todo claro dónde trazar la línea, y he visto a muchos equipos hacerlo de maneras muy diferentes, a veces incluso combinando múltiples opciones sin querer.
Entonces, ¿cómo nos ayudan React y Tailwind a tomar esa decisión?
enfoque basado en componentes
Permítanme comenzar lo que voy a decir diciendo que, al igual que HTML, hay muchas formas de crear una aplicación React.
El enfoque más común es separar cada componente en su propio archivo, por lo que terminamos con archivos llamados Button.jsx, Checkbox.jsx, Avatar.jsx, Card.jsx, etc.
Estos componentes se importan a diferentes pantallas con diferentes configuraciones (a través de accesorios), por lo que el código dentro de los componentes se puede copiar infinitamente.
A diferencia de HTML, no necesitamos copiar manualmente el código en diferentes ubicaciones y archivos, simplemente podemos importar el componente y React intercambiará su código en cada lugar donde lo llamemos.
Si pensamos en la separación de preocupaciones, React hace algo muy diferente a HTML, CSS y JavaScript puro.
HTML, CSS y JavaScript dividen nuestro enfoque en múltiples áreas de responsabilidad, pero React adopta un enfoque diferente.
React separa nuestras preocupaciones según la estructura de los componentes, por lo que diferentes desarrolladores pueden trabajar en diferentes componentes sin entrar en conflicto entre sí.
Pero todos son desarrolladores de React, ya no son expertos en CSS o arquitectos de HTML, todos hacen el mismo tipo de trabajo pero en diferentes bloques de construcción.
La distinción aquí es importante porque divide el trabajo en optimización en lugar de especialización, que es casi el enfoque opuesto.
Ingrese CSS de viento de cola
Tailwind es un marco CSS muy popular que funciona como un marco de utilidad, lo que significa que todo el estilo se realiza a través de clases en línea en lugar de enormes hojas de estilo.
De esta manera, puede copiar y pegar componentes de diferentes diseños y asegurarse de que se vean exactamente iguales, pero, por supuesto, cuando se trabaja con componentes de React, los componentes se importan en muchos diseños, páginas o pantallas, por lo que la coherencia es clave, y Tailwind logra precisamente eso.
Si es la primera vez que ve el código de Tailwind, le insto a que lo pruebe, no es tan extraño de usar como podría parecer a primera vista y es mucho mejor que crear estilos en línea.
No puedo enfatizar lo suficiente que cada código base en estos días está escrito con IA hasta cierto punto: Tailwind es mucho mejor que los estilos en línea normales, lo cual es excelente si eres un purista de CSS y usas uno o más archivos de hojas de estilo, e incluso los estilos en línea simples están en su mayoría bien.
Pero nunca permita que la IA cree toneladas de estilos en línea para todo, siempre exigiendo que se conviertan a otro archivo o simplemente para usarlos con Tailwind, los estilos en línea no se pueden mantener a largo plazo.
Sé lo que debes estar pensando cuando te encuentres con Tailwind, y ese es el título de la siguiente sección.
¿Qué pasó con la separación de preocupaciones?
Lo sé, al principio parece que nuestra separación de preocupaciones ha desaparecido, React ha implementado todo HTML (a través de JSX) y JavaScript en el mismo archivo.
Tailwind CSS va un paso más allá y también incorpora clases de utilidades CSS a JSX, en lugar de colocarlas en archivos separados.
De esta manera ya no estamos divididos por áreas, la funcionalidad, el diseño y la estructura están todos juntos.
Sin embargo, lo que obtenemos es una separación por componentes, lo cual es más útil para equipos grandes que trabajan juntos en el mismo sistema o en el mismo proyecto.
La separación por componente significa que, aunque un desarrollador pueda estar trabajando en todas las diferentes áreas del componente Avatar, el mismo desarrollador no necesita preocuparse por el componente Botón mientras lo hace.
Tailwind CSS garantiza que todos los componentes estén diseñados según lo planeado, incluso si están diseñados independientemente del sistema en sí, porque sus clases de utilidad son deterministas en diseño y ningún estilo debe filtrarse fuera de su alcance previsto.
en conclusión
La separación de preocupaciones es subjetiva y se realiza de manera diferente en diferentes sistemas, React y Tailwind se basan en componentes, mientras que HTML y CSS puros se basan más en áreas.
No existe una respuesta correcta sobre lo que debe hacer, pero la coherencia es clave, especialmente cuando se trabaja en equipo.
Las pautas y las mejores prácticas son excelentes, pero la separación de la tecnología en sí siempre es mejor porque todos los miembros del equipo pueden estar en sintonía.
Por ejemplo, cuando pensamos en la separación de inquietudes según áreas de especialización, también podríamos considerar contratar a un experto en CSS, pero experto en botones no es un título de trabajo actualmente, y tal vez a medida que React y Tailwind se vuelvan más populares, debería convertirse en uno.
No cubrí todas las formas de separar CSS en múltiples archivos y lograr algo así como una separación de preocupaciones basada en componentes en HTML y CSS puro porque no creo que sea el enfoque correcto cuando se trabaja en un equipo grande.
Hay un millón de técnicas y un millón de formas de resolver este problema, pero elegí React y Tailwind como ejemplos porque es una solución muy popular.
Este artículo sólo roza la superficie.
Espero que lo hayas disfrutado y gracias por leer.
fuente
Página de Wikipedia sobre separación de preocupaciones
Tailwind CSS: estilo con clases de utilidad
Separación de preocupaciones en React
Separación de preocupaciones: una guía para el programador
¿La separación de preocupaciones es un objetivo o una mentira? Publicado originalmente en Colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
