Los microservicios permiten equipos de desarrollo de aplicaciones independientes, actualizaciones de aplicaciones asincrónicas y resolución de problemas precisa. Si estos beneficios suenan bien para su interfaz de usuario, considere una interfaz micro.
por Matt Heusser
Las interfaces de las aplicaciones deben ser flexibles y fáciles de actualizar, lo que permite que la interfaz de usuario se adapte perfectamente al cliente objetivo. El último lugar para el trabajo de desarrollo difícil de cambiar y dominado por la dependencia son los componentes orientados al cliente.
Los micro front-end son una táctica de diseño de desarrollo emergente que descompone interfaces de usuario pesadas y monolíticas en colecciones de componentes pequeños que se pueden probar, implementar y actualizar por separado. Por ejemplo, los desarrolladores podrían dividir un servicio de búsqueda de base visual para que tanto las funciones de búsqueda como los componentes visuales puedan actualizarse independientemente entre sí. Este diseño también permite a los desarrolladores aislar cualquier cambio potencialmente importante para retrocesos rápidos.
Un micro front-end finalmente hará que las interfaces de aplicaciones sean más confiables, altamente modulares y más fáciles de probar. Como beneficio adicional, las funciones y servicios individuales, como un servicio de inicio de sesión, una función de búsqueda o un carrito de compras, pueden recibir atención adicional de equipos de desarrollo dedicados y evolucionar a su propio ritmo.
En este artículo, aprenda qué es el diseño de micro front-end y cómo se ve en la práctica. Luego, repase los pasos y las piezas técnicas involucradas en una migración a este estilo de desarrollo de la interfaz de la aplicación.
Micro front-ends definidos
El concepto de micro front-end, como lo describe Cam Jackson, consultor de ThoughtWorks, es similar al del diseño de microservicios: “Cortar cosas grandes y aterradoras en piezas más pequeñas y manejables, y luego ser explícito sobre las dependencias entre ellas”. Esta elección de arquitectura libera al equipo para tomar decisiones independientes para la tecnología, la base de código y los procesos de lanzamiento.
Si ha utilizado alguna tienda de comercio electrónico líder últimamente, es posible que haya notado que el formato visual de la página web a veces cambia después de iniciar sesión. En lugar de una sola página de inicio con texto y botones estáticos, es más probable que encuentre un serie de cuadros en los que se puede hacer clic que ajustan su tamaño en relación con el tamaño de la ventana del navegador. Todos estos cuadros están diseñados para guiarlo hacia una decisión de compra en particular, así como para alinearla con sus artículos vistos recientemente, pedidos anteriores, recomendaciones, descuentos, etc.
En el diseño del sitio web, un controlador es responsable de saber cuánta resolución de pantalla está disponible en un momento dado y cuánto espacio ocupará cada componente visual. Tiene que optimizar esos espacios y llamar a los servicios que los poblarán. Si un servicio no funciona, el controlador también deberá ajustar la pantalla en respuesta a la llamada fallida o llamar a un servicio diferente que pueda proporcionar la función necesaria.
Detrás de escena, cada uno de esos componentes puede ser administrado por un equipo de desarrollo diferente . Algunos requieren más pruebas antes de la implementación que otros. Algunos tienen estándares de confiabilidad más altos que otros. Una actualización deficiente de un componente se revierte fácilmente, sin ningún efecto sobre los demás.
Esto conduce a múltiples piezas de arquitectura: la navegación global, el encabezado del usuario, la barra de búsqueda, el código para administrar la visualización de los cuadros y cada componente individual que aparece. La arquitectura se compone del micro front-end que ejecuta la interfaz de usuario.
Adopte micro front-ends
La conversión de una interfaz monolítica a una micro interfaz es, en muchos sentidos, una aplicación sencilla del patrón estrangulador . Podemos recorrer un ejemplo usando esta captura de pantalla de QuickBooks.
Esta página está compuesta por componentes de página web HTML organizados en tablas, también llamadas etiquetas ‘div’ (división). Primero, cree un contenedor con un solo objeto, como la página web. Una vez que está en contenedores y aislado, los desarrolladores pueden comenzar a reformatear esos objetos en servicios que pueden actuar de forma independiente y responder dinámicamente a los cambios en la interfaz de usuario por sí mismos. Luego, repita el proceso, extrayendo lentamente otros componentes de la interfaz uno por uno y reemplazándolos con servicios.
El ejemplo anterior se compone de widgets que se pueden convertir en un servicio independiente:
- El logo y el botón “Nuevo”;
- La navegación global;
- Widget de accesos directos;
- Widget de configuración de perfil y cuenta;
- Widget giratorio de especiales;
- Widget de cuentas bancarias; y
- Widget de visualización de cuenta.
Si alguno de estos servicios está inactivo, la mayoría de la aplicación aún funciona, ya que la lógica del controlador debería poder intercambiarse en un widget diferente sin un impacto significativo en la interfaz de usuario. Esto es particularmente importante para los sitios de comercio electrónico que cambian el contenido de la página principal a diario o que permiten a los usuarios la opción de personalizar su página de inicio.
Las aplicaciones móviles también utilizan micro front-end, pero el enfoque es diferente al del software web. El código que va a Google Play o Apple App Store es esencialmente solo el controlador. Los widgets se procesan dinámicamente desde su servidor para los usuarios de la aplicación. Gracias a este diseño, las actualizaciones no requieren un período de evaluación de varios días ni pruebas de regresión de aplicación completa. El desarrollo móvil nativo se vuelve tan fácil como construir las aplicaciones como aplicaciones web o híbridas .
Por supuesto, ciertos widgets en la interfaz móvil aún necesitarán interactuar. Por ejemplo, el servicio de búsqueda deberá mostrar los resultados en la página web y, al hacer clic en los resultados de búsqueda, deberá generar una visualización del producto. Los equipos de desarrollo de estos componentes deben colaborar y probar el sistema juntos.
Hay varios métodos que permiten la integración de micro front-end. Básicamente, estos enfoques crean una única página web que consta de tablas sensibles al espacio, pobladas con los componentes uno al lado del otro. Aquí hay cuatro métodos comunes, todos los cuales crean algún tipo de subpágina que se puede ver, implementar y probar de forma aislada:
- Lado del servidor. Varias páginas HTML diferentes se compilan en una sola aplicación o programa. Estas subpáginas se pueden almacenar en un servidor como HTML estático.
- IFrames. Una técnica HTML de décadas de antigüedad, iFrames simplemente inserta una página web dentro de otra página web. Un componente de visualización de la aplicación puede representar la interfaz como una simple página web.
- JavaScript. En este caso, una página web HTML llama a una función de JavaScript, como RenderFunction (“Nombre de página”). El JavaScript está integrado con <Script src = “file.js”>, y los componentes se pueden implementar y probar de forma independiente.
- Componentes web. De manera similar a JavaScript, un componente de aplicación inyecta código renderizado directamente en el Modelo de objetos de documento de una página web , en lugar de forzar a la función llamada a renderizarse.
En conjunto, los micro front-end separan y aíslan el trabajo y la implementación, lo que puede reducir el costo de las pruebas y mejorar la velocidad de entrega. Hace diez años, dije que no hay soluciones mágicas para los desarrolladores de software , no hay magia para matar a la bestia del desarrollo. Los micro front-end todavía no son una solución milagrosa, porque no reducen el costo de análisis, diseño gráfico u operaciones. Pero ayudan a resolver los problemas de desarrollo, en programación y pruebas.
Fuente: https://searchapparchitecture.techtarget.com/tip/A-basic-overview-of-micro-front-ends
Aplicaciones receptivas de costo reducido desde la arquitectura micro front-end
El desarrollo de micro front-end ha ganado importancia, aunque aún no ha encontrado su base en la empresa. Obtenga más información sobre las micro interfaces y considere algunos pros y contras potenciales.
por George Lawton
Aunque los contenedores y los microservicios han transformado el desarrollo de back-end, todavía tienen que hacer avances significativos en los niveles de cliente o front-end. Pero los desarrolladores ahora han encontrado formas de aplicar las estrategias de desarrollo de software exitosas con microservicios de back-end también a las aplicaciones de nivel de cliente.
Las aplicaciones del lado del cliente que se desarrollan e implementan con las mismas estrategias de desarrollo e implementación que han hecho que los microservicios sean tan populares se denominan micro front-end. Recientemente, la industria del software se ha interesado mucho en ellos y en las micro arquitecturas front-end. Por ejemplo, la última versión de Red Hat Process Automation permite a los equipos tejer módulos dinámicos de IA en estas micro aplicaciones front-end que son más fáciles de descentralizar.
Arquitectura de micro front-end basada en contenedores
Los primeros proyectos de micro front-end se han centrado en cómo proporcionar una mejor separación de la lógica y los elementos de la interfaz de usuario en componentes más pequeños y dinámicos. Pero los micro front-end modernos se han movido mucho más allá de la idea de un código de acoplamiento flexible para una implementación basada en Kubernetes a gran escala. Incluso ha habido una tendencia reciente de micro front-end en contenedores como microservicios y entregados directamente al cliente.
Por ejemplo, la aplicación H2 de Glofox adoptó recientemente este enfoque para implementar una PaaS para aplicaciones de salud y fitness, que los gimnasios y clubes de salud luego personalizan y proporcionan a los clientes. La aplicación utiliza el edgeSDK de Mimik Technology Inc., para administrar la implementación de microservicios de micro front-end en contenedores para que se ejecuten de forma nativa en dispositivos iOS, Android y Windows.
Además, una implementación de micro front-end reduce la carga del servidor. Solo consume recursos del lado del cliente, lo que mejora los tiempos de respuesta en aplicaciones vulnerables a problemas de latencia. Los usuarios alguna vez tuvieron que conectarse a bases de datos o servidores remotos para la mayoría de las funciones, pero un micro front-end reduce en gran medida esa dependencia.
Pros y contras de la arquitectura micro front-end
ThoughtWorks, una empresa de consultoría de software global, ha cambiado recientemente su recomendación de las pruebas de micro front-end a la adopción. Este enfoque promete bases de código más pequeñas y cohesivas, un desarrollo más fácil entre equipos y actualizaciones de componentes más fáciles de una manera más incremental.
Todavía es temprano para el desarrollo de micro front-end. Pero Cam Jackson, un consultor y desarrollador web de pila completa en ThoughtWorks, advierte que los desarrolladores que trabajan con micro interfaces enfrentan una serie de desafíos, incluida la ingeniería. Los componentes de desarrollador independientes pueden duplicar funciones comunes, lo que a su vez conduce a aplicaciones más grandes. También puede haber diferencias ambientales entre dónde desarrollan e implementan componentes.
Los micro front-end también pueden llevar a una mayor complejidad operativa como resultado de más repositorios, compilar pipelines, servidores y dominios para administrar.
Los desarrolladores han invertido una gran cantidad de energía en la creación de marcos y estrategias de microservicios que han dado como resultado un desarrollo y una implementación de back-end revolucionados. Con las micro interfaces, ahora comenzamos a ver que la energía gastada también se compensa con el desarrollo del lado del cliente.
Fuente: https://www.theserverside.com/feature/Reduced-cost-responsive-apps-from-micro-front-end-architecture
