En el proceso de desarrollo de software, los diagramas de arquitectura de software son documentos de software importantes. Los diagramas de arquitectura de software contienen múltiples niveles. Los más comunes incluyen la arquitectura general del software y diagramas de componentes, clases, etc.
- La arquitectura general se puede dibujar usando PPT o algunas herramientas de dibujo Visio.
- Existen estándares UML para diagramas de componentes y clases, y también puedes usar Visio para dibujarlos.
Sin embargo, en el desarrollo real, especialmente en el desarrollo ágil, las siguientes situaciones suelen ocurrir con los documentos de diagramas de arquitectura de software:
- El diagrama de arquitectura del software es confuso
- Los efectos secundarios del desarrollo ágil han provocado que muchos equipos detengan o reduzcan sus diagramas.
Parte de la razón de esto es que es problemático dibujar o ajustar diagramas de arquitectura de software. Para los desarrolladores, lo que más conocen es el código, por lo que gradualmente existen formas e implementaciones para generar diagramas a partir del código. Al mismo tiempo, alguien ha ordenado los diagramas de arquitectura del software que deben definirse, que son los antecedentes para la creación de C4.
Además, sobre la base del uso de IDE e IA para ayudar a generar código, usar código para generar diagramas de arquitectura también tiene grandes ventajas.
¿Qué es C4?
El modelo C4 (Contexto, Contenedor, Componente, Modelo de Código) es un marco para la representación gráfica de sistemas de software. El modelo C4 fue propuesto por Simon Brown y se utiliza principalmente para resolver diversos problemas en la documentación de arquitectura de software.
¿Cuál es el contenido de C4?
C4 son cuatro palabras que comienzan con C y representan cuatro tipos de imágenes:
- Diagrama de contexto: diagrama de fondo, cómo encaja el sistema en el entorno (incluidos los usuarios y otros sistemas)
- Diagrama de contenedores: diagrama de contenedores, cómo el sistema está compuesto por contenedores (no tecnología, aplicaciones o almacenamiento de contenedores)
- Diagrama de componentes: diagrama de componentes que muestra la implementación de un contenedor específico.
- Diagrama de código: diagrama de código, mostrado usando UML
Estos cuatro tipos de diagramas representan cuatro niveles de perspectivas:
-
Contexto : Muestra la interacción entre el sistema y su entorno, como usuarios, sistemas y servicios. En este nivel, el sistema se ve como una caja negra.
-
Contenedor : revela el estilo arquitectónico de alto nivel del sistema y describe las principales opciones tecnológicas. En esta capa, el sistema se descompone en algunos contenedores interactivos, como servidores web, aplicaciones de escritorio, bases de datos, aplicaciones móviles, microservicios, etc.
-
Componente : subdivida aún más el contenedor en una serie de componentes y describa las interacciones entre ellos. En esta capa, se entenderán claramente las responsabilidades de cada componente y se conocerá cómo se comunican e interactúan entre sí.
-
Código : esta es la perspectiva de nivel más bajo y la descripción más detallada del sistema. Generalmente se muestra a través de diagramas de clases UML u otras vistas a nivel de código.
Cada capa proporciona más detalles para un aspecto del sistema de software. En muchos casos, no es necesario utilizar los cuatro niveles; puede elegir el número de capas que más le convenga. El objetivo principal del modelo C4 es ayudar a los equipos de desarrollo de software a describir y comprender arquitecturas de software complejas y comunicarse de manera efectiva con las partes interesadas.
Capa 1.Diagrama de contexto del sistema de diagrama de contexto
Diagrama de contexto: muestra el sistema de software construido y la relación entre el sistema y los usuarios y otros sistemas de software.
Por ejemplo, tomando como ejemplo el contexto del sistema de banca por Internet, la relación en el entorno es:
blob:https://www.kancloud.cn/fa954884-1027-4679-8e12-ba2ead87143bEl
significado correspondiente de la leyenda:
- Cuadrado gris: representa un sistema existente
- Plaza Roja: sistema por construir
Capa 2. Diagrama de contenedor diagrama de contenedor
Haga zoom en un sistema de software para mostrar los contenedores (aplicaciones, almacenes de datos, microservicios, etc.) que componen el sistema de software.
Las decisiones tecnológicas también son una parte clave del diagrama.
Tomemos también como ejemplo el sistema de banca por Internet:
- El sistema de banca por Internet (cuadro discontinuo) consta de cinco contenedores: aplicación web del lado del servidor, aplicación de una sola página del lado del cliente, aplicación móvil, aplicación API del lado del servidor y base de datos.
- La aplicación web es una aplicación web Java/Spring MVC que solo ofrece contenido estático (HTML, CSS y JavaScript), incluido el contenido que conforma la aplicación de una sola página.
- La aplicación de una sola página es una aplicación Angular que se ejecuta en el navegador web del cliente y proporciona todas las funciones de banca en línea.
- Los clientes pueden acceder a funciones seleccionadas de la banca por Internet mediante la aplicación móvil multiplataforma de Xamarin.
- Tanto la aplicación de página única como la aplicación móvil llaman a la API JSON/HTTPS, que es proporcionada por otra aplicación Java/Spring MVC que se ejecuta en el lado del servidor.
- La aplicación API obtiene información del usuario de la base de datos (esquema de base de datos relacional). La aplicación API también utiliza una interfaz XML/HTTPS patentada para comunicarse con los sistemas bancarios mainframe existentes para obtener información sobre cuentas o transacciones bancarias.
- La aplicación API también llama al sistema de correo electrónico existente si necesita enviar un correo electrónico a un cliente.
leyenda:
Capa 3: Diagrama de componentes Diagrama de componentes
Diagrama de componentes, que amplía un único contenedor para mostrar los componentes que contiene. Estos componentes se asignan a abstracciones reales (como un conjunto de código) en la base del código. El
ejemplo del diagrama de componentes de un sistema de banca virtual en línea muestra algunos (pero no todos) de los componentes de la aplicación API.
- Los controladores Spring MVC REST proporcionan puntos de acceso a la API JSON/HTTPS, y luego cada controlador utiliza otros componentes para acceder a datos en bases de datos y sistemas bancarios mainframe.
Nivel 4: Diagrama de código Diagrama de código
Esta capa es fácil de entender, es UML.
Ejemplo de diagrama de clases UML (parte) de un sistema de banca virtual en línea, que muestra los elementos de código (interfaces y clases) que componen el componente MainframeBankingSystemFacade
símbolo C4
El modelo C4 no predefine ningún símbolo específico. Lo que ve en la imagen de ejemplo de arriba son símbolos simples que son adecuados para pizarras blancas, papel, notas adhesivas, fichas y diversas herramientas de gráficos.
Puede utilizar UML como notación y hacer un uso adecuado de paquetes, componentes y prototipos. Independientemente de la notación que se utilice, se recomienda que cada elemento incluya un nombre, el tipo de elemento (es decir, "persona", "sistema de software", "contenedor" o "componente"), la opción tecnológica (si corresponde) y algunos descripción Texto sexual. Puede parecer inusual incluir tanto texto en un diagrama, pero este texto adicional ayuda a eliminar la representación poco clara que a menudo se encuentra en los diagramas de arquitectura de software.
Cómo codificar la producción C4
Existen muchas herramientas para generar C4, aquí hay dos:
- Structurizr: C4 proporciona oficialmente una herramienta, que es una guerra de Java que se puede dibujar localmente después de la descarga. Hay una versión gratuita y una versión de pago. Pero actualmente no hay ningún IDE integrado con él.
- C4-PlantUML: basado en PlantUML, se proporciona el lenguaje de código de dibujo C4. VS Code y otros IDE tienen complementos relacionados. Puede ver gráficos en tiempo real escribiendo código directamente en el IDE.
Además, el código C4 también se puede generar directamente utilizando IA como ChatGPT.
Acerca de Estructurarizr
Structurizr es una herramienta gráfica de arquitectura de software dinámica, interactiva y basada en modelos. Esta herramienta está diseñada para crear, compartir y publicar diagramas de arquitectura de software.
Simon Brown, fundador de C4 Models, desarrolló Structurizr.
Structurizr proporciona una versión en línea y una versión implementada localmente (Structurizr Lite) que puede ejecutar en su máquina local. Esta herramienta puede crear diagramas de arquitectura de software interactivos y dinámicos, a diferencia de imágenes estáticas o dibujos dibujados a mano. Dirección en línea: https://structurizr.com/dsl
Algunas de las características clave de Structurizr incluyen:
-
Vistas dinámicas e interactivas: a diferencia de las herramientas que solo pueden mostrar imágenes estáticas, Structurizr permite a los usuarios ver una variedad de vistas y explorar la arquitectura del software haciendo clic y arrastrando elementos gráficos.
-
DSL y API: Structurizr proporciona un lenguaje específico de dominio (DSL) para definir y describir modelos de arquitectura de software. También se proporciona una API que le permite crear modelos utilizando su lenguaje de programación preferido.
-
Compatibilidad con el modelo C4: Structurizr admite el modelo C4, que es un método de visualización de arquitectura de software fácil de entender y de uso común.
-
Opciones de integración y exportación: Structurizr puede exportar a una variedad de formatos, incluidos PlantUML, Web Sequence Diagrams y DOT (Graphviz), y admite la integración con tecnologías y herramientas comunes como Git, PlantUML y Mermaid.
Acerca de Simon Brown, fundador de C4
Simon Brown es arquitecto de software y fundador y desarrollador de la herramienta de visualización de arquitectura de software Structurizr. Pone especial énfasis en la comprensión y comunicación de la arquitectura de software por parte del liderazgo técnico, basada en elementos de diseño estratégicos y tácticos, para implementar aún más la planificación de la arquitectura y aplicar los principios de la arquitectura de software en equipos y proyectos de desarrollo.
Simon Brown también creó el modelo C4 (Contexto, Contenedor, Componente, Código), un método para visualizar la arquitectura de software. El objetivo del modelo C4 es ayudar a los equipos de desarrollo a describir y comprender la arquitectura de software en diferentes niveles de detalle y comunicarse de manera más efectiva con otras partes interesadas, como líderes empresariales y gerentes de proyectos.
Además, Simon Brown es un orador público y profesor cuyo trabajo abarca muchos aspectos del ciclo de vida del desarrollo de software, incluidos temas como la calidad del código, el liderazgo técnico y la arquitectura de software.
Para más información puedes visitar su sitio web personal: http://www.simonbrown.je/