Una introducción a la componibilidad de pila completa

 

 

 


Índice
  1. Arquitectura componible
  2. Partes de una arquitectura componible
    1. Componentes modulares
    2. API
  3. Beneficios de una arquitectura componible
  4. La arquitectura MACH
  5. Componibilidad con React
  6. Haciendo pila completa
  7. Composibilidad de pila completa con Next.js: componentes del servidor React
  8. Composibilidad de pila completa con Remix: componentes de pila completa
  9. Alinearse con el contenido
  10. Storyblok: CMS sin cabeza con un enfoque componible
  11. Conclusión

Un sistema componible bien diseñado no solo debe considerar los aspectos técnicos sino también la naturaleza del contenido que maneja. Para ayudarnos con eso, podemos utilizar un sistema de gestión de contenido sin cabeza como Storyblok .

 

Este artículo ha contado con el amable apoyo de nuestros queridos amigos de Storyblok , un CMS sin cabeza amigable con un editor visual, componentes anidados y bloques de contenido personalizables para sitios web y aplicaciones. ¡Gracias!

La componibilidad no se trata solo de construir un sistema de diseño. Debemos crear y gestionar componentes reutilizables en el frontend y la UX de nuestro sitio web, así como coordinarnos con el backend y el contenido en sí.

En este artículo, discutiremos cómo revisar tanto el lado del servidor como el del cliente de nuestros proyectos y cómo alinearnos con el contenido que administraremos. También compararemos cómo implementar lógica componible en nuestro código utilizando diferentes enfoques proporcionados por marcos basados ​​en React como Remix y Next.js.

Arquitectura componible

En el panorama dinámico del desarrollo web, el concepto de componibilidad ha surgido como un actor clave en la creación de sistemas escalables, mantenibles y eficientes. Va más allá de la mera construcción de sistemas de diseño; abarca la creación y gestión de componentes reutilizables en todo el espectro del desarrollo web, desde frontend UX hasta coordinación backend y gestión de contenido.

 

La componibilidad es el arte de construir sistemas de forma modular y flexible . Hace hincapié en la creación de componentes que no sólo sean reutilizables sino que puedan encajar perfectamente entre sí, formando una arquitectura cohesiva y adaptable. Este enfoque no sólo mejora el proceso de desarrollo sino que también promueve la coherencia y la escalabilidad entre proyectos.

Arquitectura componible ( vista previa grande )

Definimos "arquitectura componible" como la idea de construir sistemas de software a partir de componentes pequeños e independientes que se pueden combinar para formar un sistema completo. Piense en un sistema como un conjunto de piezas de LEGO . Al unirlos, puedes construir estructuras, figuras y otras creaciones geniales. Pero lo bueno de esos bloques es que puedes intercambiarlos, reutilizarlos para otras creaciones y agregar nuevas piezas a tus modelos existentes.

Partes de una arquitectura componible

Para gestionar una arquitectura componible para nuestros proyectos, tenemos que conectar dos partes:

Componentes modulares

Divida el sistema en módulos o componentes independientes y autónomos. Los componentes modulares se pueden desarrollar, probar y actualizar de forma independiente, lo que promueve la reutilización y un mantenimiento más sencillo.

Cuando hablamos de componentes modulares nos referimos a unidades como:

  • Microservicios
    El estilo arquitectónico para desarrollar aplicaciones de software como un conjunto de servicios pequeños e independientes que se comunican entre sí a través de API bien definidas. La aplicación se divide en una colección de servicios que se pueden implementar de forma independiente y poco acoplados, cada uno de los cuales es responsable de una capacidad empresarial específica.
  • Aplicaciones sin cabeza
    En una arquitectura sin cabeza, la lógica y la funcionalidad de la aplicación están desacopladas de la capa de presentación, lo que le permite funcionar independientemente de una interfaz de usuario específica.
  • Capacidades empresariales empaquetadas (PBC)
    Un conjunto de actividades, productos y servicios agrupados y ofrecidos como una solución completa. Es un concepto muy común en el entorno del comercio electrónico.

API

Como los componentes de nuestra arquitectura pueden gestionar diferentes tipos de datos, procesos y tareas de diferente naturaleza, necesitan un lenguaje común para comunicarse entre ellos. Los componentes deben exponer API (interfaces de programación de aplicaciones) consistentes y bien documentadas. Una API es un conjunto de reglas y protocolos que permite que una aplicación de software interactúe con otra. Las API definen los métodos y formatos de datos que las aplicaciones pueden utilizar para comunicarse entre sí.

Beneficios de una arquitectura componible

Al aplicar un enfoque componible a la arquitectura de nuestros proyectos, veremos algunos beneficios y ventajas:

 

  • Fácil de reutilizar.
    Los componentes están diseñados para ser modulares e independientes. Esto facilita su reutilización en diferentes partes del sistema o en sistemas completamente diferentes. La reutilización puede reducir significativamente el tiempo y el esfuerzo de desarrollo, así como mejorar la coherencia entre diferentes proyectos.
  • Fácil de escalar.
    Cuando aumenta la demanda de un servicio o funcionalidad en particular, puede escalar el sistema agregando más instancias de los componentes relevantes sin afectar toda la arquitectura. Esta escalabilidad es esencial para manejar cargas de trabajo crecientes y adaptarse a los requisitos comerciales cambiantes.
  • Facil de mantener.
    Cada componente es autónomo. Si es necesario actualizar o corregir una característica específica, se puede hacer sin afectar a todo el sistema. Esta modularidad hace que sea más fácil identificar, aislar y abordar problemas, reduciendo el impacto de las actividades de mantenimiento en el sistema general.
  • Independencia de los proveedores.
    Esto reduce la dependencia de proveedores específicos para los componentes, lo que facilita el cambio o la actualización de piezas individuales sin interrumpir todo el sistema.
  • Desarrollo e iteración más rápidos.
    Los equipos de desarrollo pueden trabajar en diferentes componentes al mismo tiempo. Este desarrollo paralelo acelera el proceso de desarrollo general. Además, las actualizaciones y mejoras se pueden implementar de forma independiente.

La arquitectura MACH

Un ejemplo de componibilidad es lo que se llama arquitectura MACH . El acrónimo MACH se divide en microservicios, API primero, nativo de la nube y sin cabeza. Este enfoque se centra en aplicar la componibilidad de una manera que le permita moldear todo el ecosistema de sus proyectos y organización para alinearlo con las necesidades comerciales.

Una de las ideas principales del enfoque MACH es permitir que los especialistas en marketing, diseñadores y desarrolladores front-end hagan lo suyo sin tener que preocuparse por el backend en el proceso. Pueden modificar la apariencia sobre la marcha, ejecutar pruebas y adaptarse a lo que quieren los clientes sin ralentizar toda la operación. Letras en Graffiti Gratis | Descubre Todos los Estilos

Con la arquitectura MACH, llegar a un MVP (producto mínimo viable) es como un viaje en cohete. Los desarrolladores pueden crear prototipos rápidos y las empresas pueden probar sus grandes ideas antes de lanzarse a por todas.

Un ejemplo de enfoque MACH: un CMS sin cabeza ( vista previa grande )” alt=” Un ejemplo de enfoque MACH: un CMS sin cabeza

MACH también ayuda a resolver el bajo rendimiento web, utilizando servicios y herramientas mejorados que se aplican específicamente a cada uno de los diferentes componentes del ecosistema de su organización. Por ejemplo, en el juego del comercio electrónico, el tiempo es dinero: los sitios de la vieja escuela que utilizan plataformas monolíticas pierden ventas frente a los rápidos y flexibles creados con un enfoque componible. MACH le permite crear una configuración de TI personalizada utilizando la última tecnología que existe.

 

Componibilidad con React

Podemos profundizar más y transferir el mismo concepto de componibilidad a la implementación de la interfaz de usuario y la experiencia de nuestra aplicación. React anima a los desarrolladores a dividir las interfaces de usuario en componentes pequeños y reutilizables que se pueden combinar para crear UI complejas . Cada componente de React está diseñado para encapsular una pieza específica de funcionalidad o elemento de interfaz de usuario, promoviendo una arquitectura modular y componible. Este enfoque facilita la reutilización del código, ya que los componentes se pueden compartir e integrar fácilmente en varias partes de una aplicación.

La arquitectura basada en componentes de React simplifica el proceso de desarrollo al permitir que los desarrolladores se concentren en construir unidades de funcionalidad pequeñas e independientes. Luego, estos componentes se pueden combinar para crear funciones más sofisticadas y crear nuevos componentes de "nivel superior". La reutilización de los componentes de React es un beneficio clave, ya que promueve una base de código más eficiente y fácil de mantener . Con esta idea en mente, podemos construir sistemas de diseño para nuestros proyectos, así como seguir enfoques como el principio de Diseño Atómico .

Haciendo pila completa

Pero podemos ir aún más lejos y aplicar el enfoque componible a nuestra lógica de backend y del lado del servidor también. Los marcos basados ​​en React, como Remix y Next.js, proporcionan herramientas poderosas para implementar la componibilidad en aplicaciones web mientras obtienen lo mejor de diferentes enfoques de renderizado, como el renderizado del lado del servidor y la generación estática . Veamos un par de conceptos aplicados tanto en Next.js como en Remix que pueden ayudarnos a implementar la lógica del servidor manteniendo la componibilidad de nuestro código.

Composibilidad de pila completa con Next.js: componentes del servidor React

El equipo de React presentó los componentes del servidor React para abordar los desafíos relacionados con el contenido renderizado por el servidor y mejorar la componibilidad de las aplicaciones React. La componibilidad, en el contexto de los componentes de React Server, se refiere a la capacidad de dividir una interfaz de usuario en unidades más pequeñas y reutilizables que se pueden administrar de manera eficiente en el lado del servidor. Los componentes de React Server llevan la idea de la componibilidad un paso más allá al permitir que ciertos componentes se representen y procesen en el servidor en lugar de en el cliente. Esto es particularmente útil para aplicaciones a gran escala donde renderizar todo en el lado del cliente puede provocar cuellos de botella en el rendimiento.

Next.js , un marco basado en React, incluye componentes de servidor React como enfoque predeterminado al crear y administrar componentes en un proyecto, desde su versión 13 . Algunos de los beneficios identificados al utilizar los componentes de React Server son:

  • Mueva las operaciones de obtención de datos al servidor, más cerca de la fuente de datos. Esto también reduce la cantidad de solicitudes que el cliente necesita realizar mientras utiliza la potencia de procesamiento que ofrecen los servidores web, en comparación con la capacidad de procesamiento de los dispositivos del cliente.
  • Mayor seguridad al administrar y renderizar contenido.
  • Mejores estrategias de almacenamiento en caché.
  • Carga de página inicial mejorada y primera pintura con contenido (FCP).
  • Reducir el tamaño de los paquetes.

Composibilidad de pila completa con Remix: componentes de pila completa

Uno de los principios clave de Remix es la capacidad de crear componentes de ruta componibles, lo que permite a los desarrolladores crear interfaces de usuario complejas combinando piezas más pequeñas e independientes.

 

Kent C. Dodds , un miembro muy valioso de la comunidad de desarrolladores, introdujo el concepto de componentes Full Stack para describir la forma en que el marco Remix permite a los desarrolladores crear componentes, encapsulando la obtención y el procesamiento de datos que requieren e involucran, en un solo archivo. o módulo que gestiona la lógica tanto del lado del cliente como del lado del servidor .

Con la ayuda de las funciones Loader y Action , además de Resource Routes , Remix permite a los desarrolladores agregar lógica del lado del servidor, como recuperación o mutaciones de datos, en el mismo archivo donde definimos la representación visual del componente.

Alinearse con el contenido

Finalmente, uno de los desafíos en el desarrollo web es alinear la componibilidad de nuestra arquitectura y capa de presentación con el contenido que administran. Un sistema componible bien diseñado no solo debe considerar los aspectos técnicos sino también la naturaleza del contenido que maneja. Para ayudarnos con eso, podemos utilizar un sistema de gestión de contenido sin cabeza como Storyblok.

Storyblok: CMS sin cabeza con un enfoque componible

Storyblok es un sistema de gestión de contenido sin cabeza con muchas características y capacidades que ayudan a los editores de contenido, especialistas en marketing y otros tipos de usuarios a crear y administrar contenido de manera eficiente. El contenido creado con Storyblok (o cualquier CMS Headless) se puede presentar de cualquier forma , ya que estas plataformas no obligan a los desarrolladores a utilizar una lógica de capa de presentación particular.

Storyblok te permite crear y reutilizar estructuras de contenido. Incluso puedes crear y anidar componentes sin límites, llenarlos con contenido y personalizarlos según tus necesidades. ( Vista previa grande )

La ventaja de Storyblok, hablando de componibilidad, es el enfoque de componentes que utiliza para gestionar las estructuras de contenido. Por su naturaleza Headless, Storyblok permite utilizar los componentes creados (o “bloques”, como se les llama en la plataforma) con cualquier tecnología o framework. Vinculando al tema anterior, puede crear estructuras de componentes para administrar el contenido en Storyblok mientras administra su representación visual con componentes de React en el lado del cliente (o del lado del servidor) de su aplicación.

Conclusión

La componibilidad es un paradigma poderoso que transforma la forma en que abordamos el desarrollo web. Al fomentar la modularidad, la reutilización y la adaptabilidad, una arquitectura componible sienta las bases para crear aplicaciones web sólidas y escalables. A medida que navegamos por el lado del servidor y del cliente, alineándonos con la gestión de contenido, los desarrolladores pueden aprovechar todo el potencial de la componibilidad para crear un ecosistema de desarrollo web cohesivo y eficiente.

(Illinois)Explora más en

  • Reaccionar
  • javascript
  • Herramientas
  • Sin cabeza





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Una introducción a la componibilidad de pila completa

Una introducción a la componibilidad de pila completa

Índice Arquitectura componible Partes de una a

programar

es

https://pseint.es/static/images/programar-una-introduccion-a-la-componibilidad-de-pila-completa-1178-0.jpg

2024-04-04

 

Una introducción a la componibilidad de pila completa
Una introducción a la componibilidad de pila completa

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20