Академический Документы
Профессиональный Документы
Культура Документы
“MICRO FRONTEND
ARQUITECTURA DE MICROSERVICIOS DEL
LADO DEL CLIENTE”
Cochabamba – Bolivia
2018
2
Introducción 5
1. Generalidades 6
2 Metodología 7
3. Introducción a Microservicios 7
5.1 Angular 16
5.2 Vue.js 19
5.3 React 20
6. Micro Frontend 22
3
7.4 API Nativas del Navegador 26
8. Técnicas de Implementación 27
10.1 Jenkins 29
10.2 Travis CI 29
11.1 Docker 30
12. Conclusiones 35
14. Bibliografía. 36
4
Introducción
Desde sus inicios el desarrollo de aplicaciones web pasó de ser etiquetas HTML renderizadas
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,
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
En la primera parte de esta investigación veremos lo que son los microservicios, su arquitectura,
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,
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
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
6
1.1. Objetivo General
aplicaciones del lado del cliente, y sus ventajas sobre las aplicaciones monolíticas.
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
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
7
Existen diferentes tipos de arquitecturas, desde una arquitectura monolítica, pasando a una
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
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.
programación)
- Facilidad de despliegue.
9
3.3 Desventajas de construir aplicaciones monolíticas
simultáneamente.
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
10
Figura 3. Arquitectura de Microservicios.
Fuente: https://techkrowd.wordpress.com/2017/10/25/microservicios
propio servicio.
11
- Individualmente cada microservicio se convierte en mas sencillo de entender, ya que su
la aplicación.
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
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
combinación de esta técnica se conoce como AJAX, Las peticiones asincronas y no bloqueantes
(Document Object Model), y el uso de CSS para cambiar los estilos de la página sobre la marcha
manipulación de ajax hacia toda la aplicación. Adicionalmente los patrones y prácticas comunes
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
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
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
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
aplicación se procesa dentro de la misma página, al pasar entre las diferentes opciones de la
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
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
5.1 Angular
Angular es un proyecto open source mantenido por google y una comunidad de desarrolladores,
16
Angular es una plataforma no solo para navegadores, sino también a Frameworks híbridos para
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
Angular tiene un modelo basado en componentes, puede dividir las secciones de una página o
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
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
personalizado al Framework.
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,
frameworks monolíticos, Vue está diseñado para que desde el inicio sea fácilmente
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
componentes, con React es posible hacer todo tipo de aplicaciones web, Aplicaciones web de
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
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
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
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
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
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
Esta idea no es nueva, en el pasado era llamado con el nombre de Integración Frontend para
24
Figura 11. Diagrama de la division de equipos con los micro-frontend. Fuente:
https://micro-frontends.org
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
pero, aún se tiene código compartido como ser el sistema de rutas global de la aplicación o la
autenticación.
de clases, Routing, css, Eventos, Localstorage y Cookies, para evitar colisiones y aclarar la
propiedad
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
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.
entre los objetos de Window. por ejemplo entre la página y un pop-up o entre una página y un
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
iframe y comunicar cosas como el routing o la autenticación a través del API de PostMessages.
Esta técnica utiliza Web Components para modularizar todo, básicamente funciona muy parecido
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:
Los Micro Frontends se despliegan de la misma manera que cualquier otro microservicio, es
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.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
10.2 Travis CI
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
degradación del rendimiento debido a la naturaleza pesada de las máquinas virtuales, la falta de
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
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
aplicaciones separados unos de los otros para hacer un mejor uso de su infraestructura y
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
configuración, se basa en un fichero con extensión yml donde se indica las imágenes que se
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
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
- 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
- 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
35
13. Diccionario de referencias
CSS. Cascading Style Sheets (Hojas de estilo en Cascada) Es un lenguaje de marcado, para
AJAX. Asynchronous Javascript and Xml (Javascript asíncrono y XML), es una técnica de
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
Frontend Integration for Verticalised Systems. Integración Frontend para sistemas verticales.
14. Bibliografía.
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/
Fong, J. (n.d.). Docker Introduction to Docker Webinar Recap. Retrieved Agosto 14, 2018, from
Geers, M. (n.d.). Micro Frontends extending the microservice idea to frontend development.
Herman, M. (n.d.). Dockerizing a React App. Retrieved Agosto 25, 2018, from mherman:
https://mherman.org/blog/dockerizing-a-react-app
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
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.).
https://www.genbeta.com/desarrollo/travis-ci-sistema-distribuido-de-integracion-continua-libre-i
ntegrado-con-github
38