UNIVERSIDAD MAYOR DE SAN SIMÓN 

FACULTAD DE CIENCIAS Y TECNOLOGÍA 

DIRECCIÓN DE POSGRADO

“MICRO FRONTEND
ARQUITECTURA DE MICROSERVICIOS DEL
LADO DEL CLIENTE”

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
VERSIÓN I
.

POSTULANTE : CHRISTIAN MARCELO TOLA PACHECO

TUTOR : MSC. RICHARD FELIX LOPEZ FULGUERA

Cochabamba – Bolivia
2018
2
Introducción 5

1. Generalidades 6

1.1. Objetivo General 7

1.2 Objetivos Específicos 7

2 Metodología 7

3. Introducción a Microservicios 7

3.1 Construcción de aplicaciones monolíticas 8

3.2 Ventajas de construir aplicaciones monolíticas 9

3.3 Desventajas de construir aplicaciones monolíticas 10

3.4 Arquitectura de microservicios 10

3.5 Ventajas de aplicar microservicios 11

3.6 Desventajas de aplicar microservicios 12

4. SPA - Aplicaciones Web de una sola página. 12

5. Frameworks para el desarrollo de aplicaciones web del lado del cliente 16

5.1 Angular 16

5.2 Vue.js 19

5.3 React 20

6. Micro Frontend 22

6.1 Frontend dentro de las aplicaciones monolíticas 24

6.2 Qué son los Micro Frontends? 24

7. Principales características de los Micro Frontend. 25

7.1 Ser tecnológicamente agnóstico. 25

7.2 Aislar código de cada equipo. 26

7.3 Establecer buenas prácticas de código compartido 26

3
 7.4 API Nativas del Navegador 26

8. Técnicas de Implementación 27

8.1. Aplicación Modular 27

8.2. Iframes and PostMessage 27

8.3 Web Component Layer 27

9. Estrategias para desplegar micro frontends 28

10. Herramientas de Integración Continua. 29

10.1 Jenkins 29

10.2 Travis CI 29

11. Despliegue de micro frontends 30

11.1 Docker 30

11.2 Docker compose 31

11.3 Configuración docker para aplicaciones frontend 32

12. Conclusiones 35

13. Diccionario de referencias 36

14. Bibliografía. 36

4
Introducción

Desde sus inicios el desarrollo de aplicaciones web pasó de ser etiquetas HTML renderizadas

desde un servidor, a un conjunto de aplicaciones que corren independientemente dentro de sus

propios entornos conocidos como microservicios, junto con los beneficios que conllevan estas

técnicas, también se agregó más complejidad al proceso del desarrollo de software, de ahí que

fueron surgiendo varias especialidades dentro del ámbito del software: Base de datos, Frontend,

Backend, Control de Calidad, Devops, etc;

Dentro de esas áreas se encuentra el desarrollo Frontend o que se encarga de crear las interfaces

de usuario para los sistemas o aplicaciones que interactúan con los usuarios, esta área durante

mucho tiempo fue relegada a un segundo plano ya que dependen en su gran mayoría del

servidor, con la llegada de las aplicaciones cliente, se empezó a requerir una arquitectura

separada para toda la interfaz de usuario, se agregó más complejidad al desarrollo Frontend así

como el despliegue.

Las aplicaciones orientadas a microservicios, iniciaron un boom en las aplicaciones web, todas

las aplicaciones comenzaron a migrar a microservicios, pero las interfaces de usuario aún eran

desplegadas dentro de un monolito, con los micro-frontends la arquitectura de microservicios es

posible aplicar microservicios a las aplicaciones del lado del cliente.

En la primera parte de esta investigación veremos lo que son los microservicios, su arquitectura,

las ventajas y desventajas que tienen frente a los sistemas monolíticos.

5
En la segunda parte veremos las aplicaciones de una sola página, su concepto, arquitectura, y

algunos Frameworks con los que podemos desarrollar nuestras aplicaciones web.

En una tercera parte veremos el concepto de los micro-frontend, aplicaciones de una sola página,

que son, sus fundamentos y cómo podemos aplicarlos en nuestro desarrollo.

En la cuarta parte veremos los métodos de despliegue de los micro-frontend, herramientas de

despliegue y contenedorización.

Al final llegamos a una conclusión sobre los micro-frontend y su uso actual dentro de las

aplicaciones empresariales.

1. Generalidades

La finalidad de los micro-frontend es proveer de una arquitectura escalable, mantenible y robusta

a las aplicaciones cliente, mediante la modularización, separación, contenedorización, de

pequeñas partes de la aplicación, lo que conlleva a tener equipos completamente independientes

que trabajan en secciones o módulos propios de la aplicación, sin afectar la funcionalidad de las

otras secciones.

Dicha división es posible con los microservicios pero orientados al desarrollo Frontend

utilizando técnicas ya conocidas por los desarrolladores, o nuevos estándares que se están

aplicando dia a dia en los navegadores web modernos.

6
1.1. Objetivo General

La finalidad de esta investigación es conocer la arquitectura de microservicios orientada a las

aplicaciones del lado del cliente, y sus ventajas sobre las aplicaciones monolíticas.

1.2 Objetivos Específicos

El estudio de los micro-frontend nos permitirá conocer la arquitectura orientada a microservicios

orientadas al desarrollo frontend, entender cómo trabajan las nuevas tecnologías web y las

aplicaciones web de una sola página. también se revisará las configuraciones de despliegue de

contenedores de los Frameworks más populares dentro del ámbito de las aplicaciones Frontend

2 Metodología

Para el presente trabajo se utilizan los siguientes métodos de investigación:

● Método Bibliográfico, debido a que se realiza la lectura y compilación de libros

relacionados al tema de estudio.

● Método Analítico, debido a que se procede a revisar y analizar ordenadamente

documentos relacionados al tema de estudio, para la redacción del Plan de Emergencia.

3. Introducción a Microservicios

Para el desarrollo de software empresarial es muy importante crear una base sólida de código de

tal manera que se pueda alargar la vida del software y mejorar la calidad de su implementación,

para ello, se utilizan técnicas que nos ayudan en la codificación, como los patrones de diseño y la

arquitectura del software.

7
Existen diferentes tipos de arquitecturas, desde una arquitectura monolítica, pasando a una

arquitectura cliente - servidor, hasta una arquitectura orientada a microservicios.

3.1 Construcción de aplicaciones monolíticas

Las aplicaciones monolíticas agrupan la funcionalidad y sus servicios en una sola base de código

unica, es decir, toda la aplicación se encuentra fuertemente acoplada, integrando el acceso a los

datos, la lógica del negocio y la interfaz de usuario todo dentro de la misma aplicación, todos los

componentes de la aplicación son compilados al mismo tiempo.

Figura 1. Arquitectura de aplicaciones monolíticas.

Fuente: ​https://laurmolina7821.wordpress.com/1-1-1-aplicaciones-monoliticas

Como se puede ver en la figura número uno, las aplicaciones monolíticas tienen una separación

entre la capa de datos, la capa de persistencia, la capa de lógica, y la interfaz de usuario, pero si

8
se desea realizar alguna actualización sobre alguna de las capas, la aplicación entera deberá ser

actualizada.

Figura 2. Diagrama de la arquitectura monolítica.

Fuente: ​https://techkrowd.wordpress.com/2017/10/25/microservicios

3.2 Ventajas de construir aplicaciones monolíticas

- Facilidad en el desarrollo. (Todo la aplicación es escrita en un solo lenguaje de

programación)

- Facilidad de despliegue.

9
3.3 Desventajas de construir aplicaciones monolíticas

- Actualización es más costosa, si bien el desarrollo es sencillo.

- Actualizaciones dentro la aplicación se debe detener por completo la aplicación agregar

la actualización y volver a levantar la aplicación.

- Cuando la aplicación es demasiado grande el desarrollo se vuelve más lento y complejo.

- Tratándose de un código único, no es posible trabajar en diferentes ambientes

simultáneamente.

3.4 Arquitectura de microservicios

Las aplicaciones orientadas a microservicios buscan desacoplar los componentes individuales de

una aplicación, la aplicación pasa a ser un conjunto de pequeños servicios, los cuales se ejecutan

dentro de su propio proceso e interactúan entre sí mediante mensajes, o recursos HTTP para

enviar y recibir información de otros componentes.

Cada servicio es desplegado de forma independiente y puede o no estar programado en diferentes

lenguajes, e incluso tener sus propias bases de datos.

10
 Figura 3. Arquitectura de Microservicios.
Fuente: ​https://techkrowd.wordpress.com/2017/10/25/microservicios

3.5 Ventajas de aplicar microservicios

- Arquitectura escalable, cada servicio es capaz de escalar individualmente.

- Facilidad de aplicar diferentes lenguajes de programación.

- Equipos de desarrollo independientes capaces de compilar, probar e implementar su

propio servicio.

- Equipos pequeños y centrados, en un solo servicio.

- Robustez y aislamiento de errores, si un servicio deja de funcionar no es necesario

paralizar toda la aplicación.

11
 - Individualmente cada microservicio se convierte en mas sencillo de entender, ya que su

funcionalidad es precisa y bastante independiente.

3.6 Desventajas de aplicar microservicios

- Mayor complejidad de operación, para realizar un despliegue de la aplicación se deben

desplegar todos los microservicios que la componen.

- Si no se define bien el alcance de cada microservicio es muy costoso arreglarlo.

- Es más difícil depurar errores dentro de una arquitectura de microservicios, un error en

un microservicio de la aplicación puede ser ocasionado por otro microservicio, es más

complicado encontrar la causa del error.

- Se incrementa complejidad en el proceso de despliegue.

- Es posible aplicar actualizaciones a un servicio sin afectar el resto de la funcionalidad de

la aplicación.

4. SPA - Aplicaciones Web de una sola página.

Durante mucho tiempo desarrolladores en todo el mundo persiguen el sueño de desarrollar

aplicaciones web con un ​una ​experiencia de usuario ​idéntico al d​ e las aplicaciones nativas de

escritorio o móvil. Se han escrito varias soluciones para darle una experiencia más nativa, como

ser IFrames, Java applets, Adobe Flash o Microsoft Silverlight, se han probado a lo largo del

tiempo con diferentes resultados, Todas las tecnologías tienen un objetivo en común: llevar el

poder de una aplicación de escritorio a un entorno ligero y multiplataforma como son los

navegadores web, Las aplicaciones de una sola página o Single-Page Application (SPA)

12
comparte este objetivo, pero sin un complemento para el navegador o un nuevo lenguaje, la

experiencia nativa se puede realizar utilizando solo Javascript, HTML, y CSS.

En el año 2000 se establecieron los cimientos de esta nueva forma de pensar sobre las páginas

web, el diseño surgió cuando Ajax(Asynchronous Javascript and XML) comenzó a ganar fuerza,

Inició con ActiveX Control para el navegador Internet Explorer de Microsoft, tal era utilizado

para enviar y recibir información de forma asincrónica. este comienzo condujo a una revolución

dentro de los navegadores, cuando dicha funcionalidad fue oficialmente adoptada por la mayoría

de los navegadores, muchos desarrolladores comenzaron a fusionar principalmente la API

XMLHttpRequest (XHR) con Javascript, HTML y CSS obteniendo buenos resultados. La

combinación de esta técnica se conoce como AJAX, Las peticiones asincronas y no bloqueantes

de Ajax, combinado con el poder de Javascript para actualizar dinámicamente el DOM

(Document Object Model), y el uso de CSS para cambiar los estilos de la página sobre la marcha

llevó a AJAX a la vanguardia del desarrollo web moderno.

El concepto de aplicaciones web de una página (Single-page application o SPA) toma el

desarrollo web a un nivel completamente nuevo mediante la expansión de las técnicas de

manipulación de ajax hacia toda la aplicación. Adicionalmente los patrones y prácticas comunes

usadas en la creación de un SPA puede conducir a mejoras generales en el diseño de la

aplicación, mantenimiento de código y tiempo de desarrollo. No obstante tener una buena

implementación de una SPA, está muy ligado a la comprensión de la arquitectura de la SPA, al

igual que con la mayoría de las soluciones emergentes, el diseño de las spa comprenden una

variedad de enfoques.

13
En un SPA, la aplicación entera corre en una sola página web, en este enfoque la capa de

presentación, se ha separado del servidor y es administrado desde el navegador, en la figura 4 se

puede ver como las aplicaciones tradicionales tienen la capa de presentación donde las vistas son

creadas y administradas en el servidor, cada vista es una página HTML que retorna al usuario

causando que la página entera se recargue.

Figura 4. En una web tradicional cada nueva vista es construida en el servidor.

Fuente. SPA Design and Architecture, Emmit A. Scott, Jr.

14
En la figura 5 tenemos la arquitectura de la aplicación que utiliza una SPA, El proceso para crear

y administrar vistas en la interfaz de usuario se desacopla de el servidor, esto es una gran ventaja

ya que el servidor no necesita involucrarse en cómo se presentan los datos al usuario.

Figura 5. En una SPA, la capa de presentación a sido movida hacia el cliente.

Fuente. SPA Design and Architecture, Emmit A. Scott, Jr.

Las principales características de este tipo de aplicaciones es que la capa de presentación reside

en el cliente, las transacciones con el servidor pueden solo ser transacciones de datos.

15
El formato de las Single-Page Application o Aplicaciones Web de una sola página se ha

popularizado enormemente por que mejora y unifica la experiencia de usuario,

Independientemente del dispositivo de acceso. Toda la interfaz de usuario, y la lógica de la

aplicación se procesa dentro de la misma página, al pasar entre las diferentes opciones de la

aplicación, no es necesario recargar el navegador.

Una aplicación que tiene múltiples vistas no necesariamente tiene varias páginas, todas las vistas

se renderizan dentro de una sola página, por ejemplo cuando utilizamos un servicio de correo

online como Gmail, se ingresa a la página principal de la aplicación y cuando se selecciona un

correo electrónico para ver la carga de este es casi instantáneo, no necesita volver a cargar todos

los recursos de la aplicación como ser HTML, CSS, solamente cargamos lo que se necesita bajo

demanda.

Esto influye directamente en una mejor experiencia del usuario, las transferencias de datos son

más rápidas y la comunicación entre el cliente y el servidor es más fluida, la experiencia del

usuario es más satisfactoria tanto en escritorio como en dispositivos móviles.

5. Frameworks para el desarrollo de aplicaciones web del lado del cliente

5.1 Angular

Angular es un proyecto open source mantenido por google y una comunidad de desarrolladores,

escrito completamente en Typescript, un lenguaje que facilita la codificación de javascript y le

agrega algunas mejoras desarrollado por microsoft.

16
Angular es una plataforma no solo para navegadores, sino también a Frameworks híbridos para

desarrollo móvil, de escritorio o vistas renderizadas del lado del servidor.

Se utiliza para desarrollar aplicaciones SPA que ofrecen una experiencia similar a las

aplicaciones nativas en comparación con las páginas web tradicionales, Angular no es una

librería, y no debe compararse con JQuery u otra biblioteca de utilidades. El Framework consiste

en módulos principales y opcionales que se integran para construir la aplicación, Angular viene

con una herramienta de línea de comandos (CLI) que permite la generación de código, y

simplifica el trabajo de desarrollo.

Angular tiene un modelo basado en componentes, puede dividir las secciones de una página o

interfaz de usuario en varios componentes.

Los módulos son la unidad básica dentro de la arquitectura de angular, proporcionan un contexto

de compilación para los componentes, NgModules recopila el código relacionado y organiza las

diferentes funcionalidades, una aplicación angular está definida por un conjunto de NgModules,

Una aplicación Angular siempre tendrá al menos un módulo raíz(RootModule) para el inicio de

la aplicación.

Los componentes definen vistas, que son conjuntos de elementos de pantalla que Angular puede

elegir y modificar según la lógica y los datos de su programa.

Los componentes usan servicios que proporcionan una funcionalidad específica que no está

directamente relacionada con las vistas. Los proveedores de servicios pueden inyectarse en

componentes como dependencias, haciendo que su código sea modular, reutilizable y eficiente.

17
La filosofia detras de Angular es equivocarse del lado de la configuración por encima de lo

convencional, los Frameworks basados en la convención aunque pueden parecer elegantes desde

el exterior hacen que sea muy difícil para los recién llegados utilizar el Framework, en cambio

los Frameworks basados en configuración pretenden exponer su funcionamiento interno a través

de elementos de configuración explícitos y ganchos, donde puede adjuntar su comportamiento

personalizado al Framework.

En la figura 6 se puede observar un diagrama de la arquitectura de una aplicación Angular,

donde el html template es extendido con directivas y la comunicación entre el componente y el

template se realiza utilizando el Metadata definido dentro del componente.

Figura 6. Arquitectura de una aplicación Angular.

Fuente: ​https://www.c-sharpcorner.com/article/basic-architecture-of-angular-2-applications

18
5.2 Vue.js

Vue fue escrito por Evan You, un desarrollador que trabajó en el core de angularjs, y que tomó

las lecciones aprendidas sobre el framework de google, y creó un framework robusto y escalable,

Vue es un framework progresivo para el desarrollo de interfaces de usuario, a diferencia de otros

frameworks monolíticos, Vue está diseñado para que desde el inicio sea fácilmente

incrementable. El core de la librería está enfocado solamente en la capa de vista, y es fácil

integrarlo es sencillo integrar con otras librerías o proyectos existentes.

Vue utiliza como arquitectura Vuex, Vuex es una arquitectura que maneja el patrón de cambio de

estado dentro de Vue.js, él maneja un store centralizado para todos sus componentes en una

aplicación, asegurando que un estado sólo puede ser mutado en una acción predecible.

En la figura 7 tenemos la arquitectura de Vue donde podemos ver cómo se maneja el estado de la

aplicación.

19
 Figura 7. Diagrama de Arquitectura de Vuex para Vue.js.
Fuente: ​https://vuex.vuejs.org

5.3 React

React es una librería enfocada en el desarrollo de interfaces de usuario, Esa es su principal área

de trabajo pero lo cierto es que con todo el ecosistema de aplicaciones y herramientas y

componentes, con React es posible hacer todo tipo de aplicaciones web, Aplicaciones web de

una página o aplicaciones para móviles.

20
React es una librería que proviene de Facebook. Es open source y a partir de su liberación se

convirtió en una herramienta muy popular en el desarrollo web, React optimiza la forma en la

que las vistas son renderizadas frente al cambio en los datos de la aplicación.

React está construido en torno a hacer funciones, que toman las actualizaciones de estado de la

página y que se traduzcan en una representación virtual de la página resultante. Siempre que

React es informado de un cambio de estado, vuelve a ejecutar esas funciones para determinar una

nueva representación virtual de la pagina, a continuacion, se traduce automáticamente ese

resultado en los cambios del DOM necesarios para reflejar la nueva presentación de la página.

React utiliza un concepto llamado el DOM virtual, que hace selectivamente sub-árboles de los

nodos sobre la base de cambios de estado, desarrollando esto con la menor cantidad de

manipulación DOM posible, con el fin de mantener los componentes actualizados, estructurando

sus datos. En la figura se puede ver cómo react utiliza este DOM virtual para verificar los

cambios y actualizar el estado.

21
 Figura 8. Diagrama del funcionamiento el DOM Virtual en React.
Fuente: ​https://auth0.com/blog/2015/11/20/face-off-virtual-dom-vs-incremental-dom-vs-glimmer

6. Micro Frontend

La Arquitectura orientada a microservicios es un gran avance en cuanto al despliegue de

aplicaciones, pero la forma que lo aplican la mayoría de las empresas es generar una estructura

de microservicios muy potente y robusta para los api rest y tener una sola aplicación cliente.

22
 Figura 9. Arquitectura de microservicios con una sola interfaz cliente.
Fuente: ​http://blog.auriboxtraining.com/desarrollo-web/microservicios

En términos generales se aplica microservicios en el lado del backend y una aplicación

monolítica en el lado del frontend.

El término Micro Frontends aparece por primera vez en la comunidad ThoughtWorks en su radar

de tecnología a finales del 2016. Se extiende del concepto de los microservicios pero enfocados

al frontend.

23
6.1 Frontend dentro de las aplicaciones monolíticas

A través del tiempo la capa de frontend es desarrollada por un equipo de desarrollo separado, que

crece y se convierte más difícil de mantener, esto es llamado como un Frontend Monolítico.

Figura 10. Diagrama que muestra el frontend monolítico y los microservicios en el backend.
Fuente: ​https://micro-frontends.org

6.2 Qué son los Micro Frontends?

La idea detrás de los micro-frontend está pensar en una aplicación web o un sitio web como una

composición de características que son creadas por equipos independientes. Cada equipo tiene un

área específica dentro de la aplicación en la que está especializada. el equipo es multifuncional y

desarrolla las características desde la base de datos hasta la interfaz de usuario.

Esta idea no es nueva, en el pasado era llamado con el nombre de Integración Frontend para

Sistemas Verticales o Sistemas autocontenidos (Frontend Integration for Verticalised Systems).

24
 Figura 11. Diagrama de la division de equipos con los micro-frontend. Fuente:
https://micro-frontends.org

7. Principales características de los Micro Frontend.

7.1 Ser tecnológicamente agnóstico.

Cada equipo de desarrollo debe poder escoger sus propios ambientes de desarrollo sin necesidad

de coordinar con otros equipos. Custom Elements son una muy buena forma de ocultar los

detalles de la implementación mientras se provee una interface neutral para los otros equipos.

25
7.2 Aislar código de cada equipo.

No es necesario compartir el entorno, incluso si todos los equipos trabajan con las mismas

herramientas o Frameworks, Se debe realizar una creación de aplicaciones independientes que

son auto contenidas. evitar trabajar con variables globales o compartidas.

7.3 Establecer buenas prácticas de código compartido

Cada responsabilidad dentro de la aplicación se maneja independiente de las otras secciones,

pero, aún se tiene código compartido como ser el sistema de rutas global de la aplicación o la

autenticación.

Se debe acordar convenciones de nomenclatura donde el aislamiento aún no es posible, Nombres

de clases, Routing, css, Eventos, Localstorage y Cookies, para evitar colisiones y aclarar la

propiedad

7.4 API Nativas del Navegador

Favorecer el uso de las características nativas del navegador en lugar de API personalizadas. esto

permite que el código escrito se convierta en un estándar para los equipos de trabajo.

Use los eventos del navegador para la comunicación en lugar de crear un sistema global de

publicación y suscripción.

26
8. Técnicas de Implementación

8.1. Aplicación Modular

Single-SPA “meta framework”. Esta técnica es una de las más sencillas de utilizar básicamente

se crea un solo proyecto conteniendo cada pequeña App dentro del mismo repositorio, y con el

builder generamos los build para producción de cada módulo y los unimos.

8.2. Iframes and PostMessage

El método window.postMessage() permite de forma segura la comunicación de origen cruzado

entre los objetos de Window. por ejemplo entre la página y un pop-up o entre una página y un

Iframe embebido en ella.

Normalmente, los script en diferentes páginas son permitidos para acceder a otra página si y

solamente si las páginas que originan la petición comparten el mismo protocolo, número de

puerto, y host.

Esta técnica es excelente si ya tienes un proyecto iniciado y buscas unir varias pequeñas Apps en

unidades independientes. Básicamente la idea es insertar cada pequeña App o módulo en un

iframe y comunicar cosas como el routing o la autenticación a través del API de PostMessages.

8.3 Web Component Layer

Esta técnica utiliza Web Components para modularizar todo, básicamente funciona muy parecido

a la técnica de iframes pero en lugar de usar un iframe para independizar la responsabilidad se

utiliza un Web component es decir cada pequeña App deberá ser convertida a un Web

27
Component, es decir se podría tener una separación de los componentes como en el siguiente

cuadro:

Figura 12. Código de componentes web.

Fuente: Elaboración Propia.

9. Estrategias para desplegar micro frontends

Los Micro Frontends se despliegan de la misma manera que cualquier otro microservicio, es

posible desplegar manualmente el micro frontend dentro de un servidor privado, un servicio en

28
linea, o tambien es posible utilizar herramientas de Integración continua como ser: Jenkins,

Travis CI, Circle CI, etc, y herramientas de despliegue como ser docker.

10. Herramientas de Integración Continua.

10.1 Jenkins

Es un servidor de integración continua, gratuito y open source, actualmente uno de los más

empleados dentro de su área, puede trabajar con herramientas de control de versiones como

CVS, Subversion, Git, Mercurial, Perforce, Clearcase y es capaz de ejecutar proyectos basados

en Apache Ant, Apache Maven, así como scripts de la línea de comandos y programas batch de

Windows.

Jenkins nació en febrero de 2011, pero su desarrollo comenzó con el nombre de Hudson en 2004

dentro de Sun Microsystems. Tras la reclamación de Oracle del nombre de Hudson, hubo una

división y ambos siguieron caminos separados.

10.2 Travis CI

Es un sistema distribuido de generación e integración continua libre, Travis CI permite conectar

un repositorio de github y probar después de cada subida de código, regenerando el proyecto.

Soporta multiples lenguajes como Clojure, Erlang, Node.js, PHP, Ruby, Scala, Python y Java

Una de las ventajas que ofrece Travis CI es que el entorno de integración continua está

compuesto de múltiples runtimes, de este modo es posible probar las aplicaciones o librerías en

29
diferentes configuraciones sin tener que instalarlas localmente. Trabaja en la nube con varias

máquinas virtuales preparadas para cada combinación.

11. Despliegue de micro frontends

La virtualización se ha establecido el objetivo de generar la optimización de la infraestructura de

TI y portabilidad, sin embargo la tecnología de virtualización tiene serios inconvenientes como la

degradación del rendimiento debido a la naturaleza pesada de las máquinas virtuales, la falta de

portabilidad de la aplicación, la lentitud en el aprovisionamiento de los recursos. Esta área ha

estado en busca de empaquetar todo dentro de un contenedor para evitar los problemas de la

virtualización. Docker ha sido diseñado para que el paradigma de la contenerización sea más

fácil de captar y usar.

11.1 Docker

La idea detrás de Docker es crear contenedores ligeros y portables para las aplicaciones de

software, la tecnología Docker usa el kernel de Linux y funciones de este como Cgroups y

namespaces, para segregar procesos y que puedan ejecutarse de manera independiente. Esta

independencia es la intención de los contenedores, la capacidad de ejecutar varios procesos y

aplicaciones separados unos de los otros para hacer un mejor uso de su infraestructura y

mantener la seguridad que tendría con sistemas separados.

Las herramientas de contenedores, como Docker, ofrecen un modelo de implementación basado

en imágenes. Esto permite compartir una aplicación o un conjunto de servicios.

30
 Figura 13. Diagrama de el funcionamiento de los contenedores docker.
Fuente: ​https://docs.docker.com/get-started/#containers-and-virtual-machines

En la figura podemos ver que bajo el mismo kernel se tienen 3 contenedores diferentes corriendo

servicios específicos para cada contenedor.

11.2 Docker compose

Docker-compose permite definir las aplicaciones multicontenedor en un solo archivo de

configuración, se basa en un fichero con extensión yml donde se indica las imágenes que se

quieren desplegar, como se va a configurar y de qué depende. Todas las dependencias se

ejecutan con anterioridad, para realizar una instalación correcta.

31
11.3 Configuración docker para aplicaciones frontend

Los archivos Dockerfile nos permiten automatizar el despliegue de las aplicaciones web,

utilizando docker para desplegar las aplicaciones dentro de contenedores. Abajo tenemos las

configuraciones para los Framework: Angular, Vue.Js, y React

Figura 14. Configuración Dockerfile para angular.

Fuente: Elaboración Propia

32
Figura 15. Configuración Dockerfile para Vue.js.
Fuente: Elaboración Propia

33
Figura 16. Configuración de Dockerfile para React.
Fuente: Elaboración Propia.

34
12. Conclusiones

En esta investigación se ha revisado los conceptos sobre los que están sustentados los

micro-frontend, los frameworks que se pueden utilizar del lado del cliente y su despliegue, dado

ello se han llegado a las siguientes conclusiones:

- Los micro-frontend proveen una arquitectura muy versátil y multifuncional dentro de las

aplicaciones web, se sustenta en tecnologías que no son nuevas, sino más bien en

estándares de la propia web que poco a poco se van implementando en los navegadores

modernos, con ellos se es capaz de permitir la completa separación entre los diferentes

equipos de trabajo y al mismo tiempo proveer aplicaciones robustas, escalables, que

pueden ser desarrolladas por equipos independientes.

- Las aplicaciones web han ido evolucionando, y han llegado hasta el punto de que es

posible crear aplicaciones web de una sola página, este tipo de aplicaciones proveen una

arquitectura que es compatible con los microservicios, también con el surgimiento de los

Componentes Web, es mucho más sencillo agregar la modularización de las aplicaciones

que requiere las aplicaciones web.

- Docker es una tecnología eficaz y robusta, capaz de facilitar el despliegue de los

micro-frontends, es recomendado su uso para optimizar el despliegue de aplicaciones

dentro de la arquitectura de microservicios.

35
13. Diccionario de referencias

Javascript. Lenguaje de programación interpretado, dialecto estándar ECMAScript. Se define

como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico

HTML. HyperText Markup Language ( Lenguaje de Marcas de Hipertexto) es un lenguaje de

marcado para la elaboración de páginas web.

CSS. Cascading Style Sheets (Hojas de estilo en Cascada) Es un lenguaje de marcado, para

definir y crear la presentación de un documento estructurado en páginas web.

AJAX. Asynchronous Javascript and Xml (Javascript asíncrono y XML), es una técnica de

desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el

navegador.

SPA. Single-Page Application (Aplicaciones de una sola página), es un sitio o aplicación web

que cabe en una sola página con el propósito de dar una experiencia más fluida a los usuarios

como una aplicación de escritorio.

Frontend Integration for Verticalised Systems.​​ Integración Frontend para sistemas verticales.

14. Bibliografía.

Alex Kyriakidis, K. M. (2017). ​The Majesty of Vue.js 2.

Architecture Overview​. (n.d.). Retrieved Agosto 9, 2018, from Angular:

https://angular.io/guide/architecture

Containers vs virtual machines.​ (n.d.). Retrieved Agosto 24, 2018, from docker.com:

https://docs.docker.com/v17.09/get-started/#containers-vs-virtual-machines

36
Delgado, D. O. (n.d.). ​Qué es Jenkins. Introducción​. Retrieved Agosto 18, 2018, from

OpenWebinars: https://openwebinars.net/blog/que-es-jenkins-introduccion/

Desarrollo de aplicaciones para ambientes distribuidos​. (n.d.). Retrieved Agosto 05, 2018, from

https://laurmolina7821.wordpress.com/1-1-1-aplicaciones-monoliticas/

Emmit A. Scott, J. (2015). ​SPA Design and Architecture.​ Manning.

Fong, J. (n.d.). ​Docker Introduction to Docker Webinar Recap.​ Retrieved Agosto 14, 2018, from

Docker Blog: https://blog.docker.com/2017/08/docker-101-introduction-docker-webinar-recap/

Geers, M. (n.d.). ​Micro Frontends extending the microservice idea to frontend development​.

Retrieved Agosto 3, 2018, from Micro-frontends.org: https://micro-frontends.org/

Herman, M. (n.d.). ​Dockerizing a React App​. Retrieved Agosto 25, 2018, from mherman:

https://mherman.org/blog/dockerizing-a-react-app

Microservicios.​ (n.d.). Retrieved Agosto 3, 2018, from Tech Krowd:

https://techkrowd.wordpress.com/2017/10/25/microservicios/

Qué son los Microservicios.​ (n.d.). Retrieved Agosto 6, 2018, from Auribox Training:

http://blog.auriboxtraining.com/desarrollo-web/microservicios/

React Virtual DOM vs Incremental DOM​. (n.d.). Retrieved Agosto 3, 2018, from auth0.com:

https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/

37
Schmitt, N. (n.d.). ​Beneficios y costos de la arquitectura de microservicios y en qué casos

usarla​. Retrieved Agosto 4, 2018, from NicolasWebDev:

http://blog.nicolaswebdev.com/2017/11/07/when-to-use-microservices.html

The Vue Instance​. (n.d.). Retrieved Agosto 14, 2018, from vuejs.org:

https://vuejs.org/v2/guide/instance.html

Travis CI, sistema distribuido de integración continua libre integrado con Github.​ (n.d.).

Retrieved Agosto 20, 2018, from Genbeta:

https://www.genbeta.com/desarrollo/travis-ci-sistema-distribuido-de-integracion-continua-libre-i

ntegrado-con-github

Vinod Singh, J. S. (2015). ​Learning Docker.

38