Serverless para Frontends

¡Hola a todos! Bienvenidos a mi sesión, Serverless para Front-ends. Mi nombre es Florian Rapper. Soy un arquitecto de soluciones en SmartPyat. Principalmente nos dedicamos a aplicaciones web distribuidas, lo que significa que también trabajamos mucho con microservicios.

Ahora, como saben, los microservicios vienen con un tiempo de ejecución integrado. Por lo tanto, necesitas tener eso para que funcione, ¿verdad? Eres responsable de todo el stack. También necesitas tener un lugar donde desplegarlos, ya sea una máquina virtual o una máquina real o simplemente dentro, por ejemplo, un clúster de Kubernetes. Pero necesitas asignarlo y potencialmente también necesitas administrarlo. Y lo más importante, requieren alguna orquestación. Entonces, cuando creas un nuevo microservicio, necesitas hacer espacio, necesitas hacer que los otros microservicios sean conscientes de eso.

Ahora, en contraste, existe este patrón de funciones sin servidor donde no hay tiempo de ejecución, ¿verdad? Todo ya está allí en un punto fijo de aprovisionamiento. Ahí es también donde publicas al final. Este es un punto que no necesitas mantener. Simplemente está ahí. Pero, por supuesto, necesitas ser consciente de ello. Al final, ese punto también se encarga de la orquestación por ti. Entonces, cada vez que publicas algo allí, ya está conectado con las otras funciones sin servidor que tienes.

Ahora, compara eso con el front-end. En resumen, lo que queremos es tener un patrón que reduzca el alcance para enfocarnos casi exclusivamente en la funcionalidad del dominio, ¿verdad? En el front-end, existe el patrón de microfrontends, muy similar a los microservicios. También necesitan tener un tiempo de ejecución. Por supuesto, si ejecutas microfrontends en un modo de orquestación del lado del servidor, entonces es bastante obvio. Pero también si los combinas en el front-end, necesitarías un tiempo de ejecución. Piensa en iframes, por ejemplo, u otros mecanismos. También necesitas tener una forma de cómo desplegarlos. Eso podría ser tan fácil como un CDN en algún lugar. Pero luego nuevamente requieres alguna orquestación. ¿Cómo haces que toda la aplicación sea consciente de este nuevo microfrontend?

Ahí es donde entran las UI sin lado. No requieren ningún tiempo de ejecución. Simplemente se pueden publicar en un punto fijo como hemos visto con sin servidor.

Y también se orquestan automáticamente. ¿Verdad? Entonces, cada vez que implementas algo nuevo, simplemente se aprovisiona automáticamente y es parte de tu aplicación.

Pero veamos la demostración para ver cómo se ve eso. Aquí tenemos un pequeño clon de Netflix. Es completamente interactivo. Por supuesto, no es el Netflix completo. Pero puedes ver que puedes navegar por él. Puedes tener tus favoritos allí y todo funciona.

Supongamos que un nuevo equipo debe integrarse para crear una funcionalidad. Podría comenzar en una línea de comandos, como puedes ver aquí. Simplemente ejecuta un comando inicializado por npm. Luego solo necesita decir dónde está la fuente de la aplicación. En este caso, estamos usando nuestra aplicación de demostración. Han elegido un bundler, ESBuilt. Y quieren tenerlo todo en un nuevo directorio, yendo allí, yendo a VS Code. Este equipo ahora comienza a codificar felizmente. Quieren agregar un botón Sorpréndeme en la barra de menú, con una página que simplemente muestra una selección aleatoria de películas. Agregan todo el código en React. Aquí no hay magia. Luego reúnen todo en la función de configuración. Allí, conectan todos los componentes que han escrito con partes de la aplicación. También utilizan una funcionalidad común llamada movie tile aquí. O si quieren ver la aplicación, simplemente la ejecutan. Esto funciona completamente localmente, por lo que también se puede hacer en un avión cuando estás sin conexión. Como puedes ver, la estructura de la aplicación está ahí, pero está vacía. Bueno, eso se debe a que solo hay uno de estos applets aquí que se llaman pilotos.

Ahora puedes agregar, por supuesto, toda la funcionalidad existente, que se hace a través de esta extensión del navegador. Y ¡ta-da!, la cosa simplemente funciona. La selección está ahí, también la aplicación ahora está completamente poblada. Tienes la página de navegación y nuestro botón sorpréndeme ya funciona. Ahora, la siguiente etapa para este equipo es, por supuesto, publicarla.

Y al igual que con una función sin servidor, lo que quieres hacer es hacerlo en tu canal de CI/CD, lo cual es genial para la automatización, o ahora aquí, con fines deductivos, simplemente puedes usar ese portal. Entonces construyes la aplicación y al final, simplemente la empaquetas, obtienes un archivo tar que debería ser muy familiar para todos los que han trabajado con AWS Lambda, por ejemplo. Ahora aquí lo tenemos. Y luego lo subimos aquí a través de la interfaz web. Así que lo seleccionamos, se carga y ¡voilà!, tenemos una nueva funcionalidad aquí, actualizamos la página y de repente está en vivo. Así que todo el proceso de principio a fin se realiza aquí en solo un par de minutos. Muy rápido.

Ahora recapitulemos lo que verías en esta aplicación, está compuesta por muchas de estas micro aplicaciones, y cada aplicación trae sus propios componentes. De esta manera, puedes integrar de manera coherente una aplicación, por ejemplo, un botón de menú de navegación y la página de navegación provienen del mismo micro frontend. Incluso los más importantes, como este título de película que hemos visto, que realmente muestra una instantánea de la película y, por supuesto, la capacidad de verla proviene del micro frontend. Al final, es desarrollado por equipos que utilizan PowerCLI, que es una herramienta de línea de comandos. Pueden usar esto para crear una nueva funcionalidad, depurarla, construirla y, por supuesto, enviarla al final.

Luego, los usuarios finales acceden a esta aplicación simplemente teniendo una URL que se conecta a esa funcionalidad sin servidor llamada servicio de feed en este caso. Ahora, para concluir, comparemos lo que hemos ganado aquí con las UI sin servidor. Del mismo modo, estamos desarrollando en un IDE estándar. Así que no hay sorpresas aquí, todo funciona como ya sabes, como en las funciones sin servidor. Luego depuras con un emulador. Obtienes tu aplicación completa que funciona sin conexión. Puedes combinarlo con aplicaciones que están en vivo. Por lo tanto, tienes un desacoplamiento real. No hay conexiones fijas aquí. Entonces, si algo falta, la aplicación sigue funcionando. Necesitas proporcionar esa autodefinición o manifiesto. Hemos visto la función de configuración donde realmente unes las diferentes partes y las implementas sin un tiempo de ejecución, lo que te brinda disponibilidad instantánea. Por lo tanto, no es necesario preocuparse por nada de eso.

Eso es todo de mi parte. Se nos acabó el tiempo. Me gustaría agradecerles a todos, les deseo a todos una gran conferencia. Si desean ver la demostración, obtener más información, visiten pyrit.io y que tengan un excelente día. Gracias a todos.