Log in
JavaScript Conferences
DevOps.js Conf 2022DevOps.js Conf 2022
ES

Serverless para Frontends

Florian Rappl
Florian Rappl
Solution Architect @ smapiot
Video thumbnail
Recording is available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Bookmark
Rate this content

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.

This talk has been presented at DevOps.js Conf 2022, check out the latest edition of this JavaScript Conference.

FAQ

Serverless para Front-ends es un patrón de diseño que permite desarrollar interfaces de usuario sin necesidad de gestionar un tiempo de ejecución, simplificando la publicación y la orquestación de componentes de la aplicación.

Los microservicios son un enfoque de arquitectura de software que consiste en desarrollar una aplicación como un conjunto de pequeños servicios, cada uno ejecutándose de manera autónoma y comunicándose entre sí. Se utilizan comúnmente en aplicaciones web distribuidas para mejorar la modularidad y la escalabilidad.

Los microfrontends se pueden desplegar utilizando diversos métodos, siendo uno de los más comunes el uso de CDN (Red de Distribución de Contenidos). Esto facilita la gestión y orquestación de los componentes de la interfaz de usuario.

Las UI sin lado no requieren tiempo de ejecución, lo que reduce la complejidad de gestión y mantenimiento. Además, se orquestan automáticamente y se integran fácilmente con otras funciones serverless, proporcionando una alta disponibilidad y escalabilidad.

La integración de nuevas funcionalidades en un proyecto con microfrontends involucra desarrollar un nuevo componente y desplegarlo en el entorno existente, donde se orquesta automáticamente con los otros componentes, manteniendo la coherencia y funcionalidad de la aplicación.

Para desarrollar y desplegar nuevas funcionalidades en microfrontends se utilizan herramientas como npm para inicializar proyectos, IDEs estándar para el desarrollo, y sistemas de CI/CD para la automatización del despliegue, como se vio en la demostración.

Una UI sin lado en aplicaciones serverless actúa como un componente que se despliega en un punto fijo de aprovisionamiento, sin necesidad de gestión del tiempo de ejecución, y se orquesta automáticamente con otras funcionalidades serverless para formar parte integral de la aplicación.

devopsfrontendserverless
Florian Rappl
Florian Rappl
8 min
25 Mar, 2022

Comments

Sign in or register to post your comment.
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: Serverless for Frontends
Video transcription and chapters available for users with access.
Available in other languages:

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

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Ruy Adorno
Ruy Adorno
Open-source maintainer, Node.js contributor, npm cli team member at GitHub
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
devopsmonoreposnpm
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
Evan You
Evan You
Vue.js & Vite Creator
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
vuevue 3frontend
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
Colby Fayock
Colby Fayock
Helping others learn about Javascript, React, and the static web.
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
devopsgithub actions
Ajustando DevOps para las Personas sobre la Perfección
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Ajustando DevOps para las Personas sobre la Perfección
Top Content
Julie Ng
Julie Ng
Engineer at Microsoft
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.
best practicesdevops
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
Emanuele Stoppa
Emanuele Stoppa
Active contributor to the Biome project
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
next.jsserverlessastro
¿Por qué es tan lento el CI?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
¿Por qué es tan lento el CI?
Nicholas Yang
Nicholas Yang
Vercel
Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
devopsci cd

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
serverlessarchitectureartificial intelligence
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
react nativeclouddevopscypress react nativereact native cicdreact native deploymentreact native xcode
Despliegue de Aplicación MERN Stack en Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
Despliegue de Aplicación MERN Stack en Kubernetes
Workshop
Joel Lord
Joel Lord
Desplegar y gestionar aplicaciones JavaScript en Kubernetes puede volverse complicado. Especialmente cuando una base de datos también debe formar parte del despliegue. MongoDB Atlas ha facilitado mucho la vida de los desarrolladores, sin embargo, ¿cómo se integra un producto SaaS con su clúster de Kubernetes existente? Aquí es donde entra en juego el Operador de MongoDB Atlas. En este masterclass, los asistentes aprenderán cómo crear una aplicación MERN (MongoDB, Express, React, Node.js) localmente y cómo desplegar todo en un clúster de Kubernetes con el Operador de Atlas.
devopskubernetesmongodb
Azure Static Web Apps (SWA) con Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) con Azure DevOps
Workshop
Juarez Barbosa Junior
Juarez Barbosa Junior
Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.
devopsazure
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
Node Congress 2022Node Congress 2022
53 min
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
Workshop
Neil Manvar
Neil Manvar
Repasaremos la configuración de Sentry paso a paso para obtener visibilidad en nuestro frontend y backend. Una vez integrado, rastrearemos y solucionaremos errores y transacciones que se muestren en Sentry desde nuestros servicios para comprender por qué/dónde/cómo ocurrieron errores y ralentizaciones en nuestro código de aplicación.
node.jsfrontenderror monitoring