Serverless para Frontends

Rate this content
Bookmark

En esta charla, el experto en micro frontends Florian Rappl presentará el patrón de creación de una interfaz de usuario sin servidor. Esta es una interfaz de usuario compuesta por diferentes piezas que pueden desarrollarse de forma independiente y desplegarse sin necesidad de tener o gestionar ningún servidor. Florian te mostrará cómo empezar en este espacio, qué decisiones tomar y qué obstáculos debes evitar.

8 min
25 Mar, 2022

Video Summary and Transcription

Bienvenidos a mi sesión sobre Serverless para Frontends. Las funciones sin servidor eliminan la necesidad de un tiempo de ejecución y se encargan de la orquestación por ti. Los micro frontends requieren un tiempo de ejecución y orquestación, pero las interfaces de usuario sin servidor proporcionan una solución sin tiempo de ejecución. En la demostración, un nuevo equipo agrega funcionalidad a una aplicación y la publica fácilmente. Construir y desplegar aplicaciones es rápido y sencillo con micro aplicaciones y PowerCLI, ofreciendo un acoplamiento flexible real y disponibilidad instantánea sin un tiempo de ejecución.

Available in English

1. Introducción a Serverless para Front-ends

Short description:

Bienvenidos a mi sesión, Serverless para Front-ends. Soy un arquitecto de soluciones en SmartPyat, principalmente trabajando con aplicaciones web distribuidas y microservicios. Los microservicios requieren un tiempo de ejecución integrado, orquestación y despliegue. En cambio, las funciones sin servidor eliminan la necesidad de un tiempo de ejecución y se encargan de la orquestación por ti. Los microfrontends en el front-end también requieren un tiempo de ejecución y orquestación, pero las UI sin lado proporcionan una solución sin tiempo de ejecución.

¡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.

2. Demo de Agregar Funcionalidad

Short description:

Y también se orquestan automáticamente. Veamos la demostración para ver cómo se ve eso. Un nuevo equipo se integra para crear una funcionalidad. Agregan un botón Sorpréndeme en la barra de menú con una página que muestra una selección aleatoria de películas. Reúnen todo en la función de configuración y ejecutan la aplicación. Ahora puedes agregar toda la funcionalidad existente a través de la extensión del navegador. La siguiente etapa es publicarla.

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.

3. Construcción e Implementación de Aplicaciones

Short description:

Puedes construir y empaquetar la aplicación, subirla a través de la interfaz web y ver la nueva funcionalidad en vivo en solo unos minutos. La aplicación está compuesta por micro aplicaciones que traen sus propios componentes, lo que permite una integración coherente de la aplicación. Los equipos utilizan PowerCLI para desarrollar, depurar, construir y enviar nuevas funcionalidades. Los usuarios finales acceden a la aplicación a través de una URL y el proceso de desarrollo ofrece un desacoplamiento real y disponibilidad instantánea sin la necesidad de un tiempo de ejecución.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html