Serverless for Frontends

Rate this content
Bookmark

In this talk micro frontend expert Florian Rappl will introduce the pattern of creating a Siteless UI. This is a frontend composed of different pieces that can be developed independently and are deployed without having or managing any server. Florian will show you how to get started in that space, what decisions to take, and what pitfalls you should avoid.

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

FAQ

Microservices require an embedded runtime, a specific deployment location, and manual orchestration. In contrast, serverless functions do not require a runtime, are deployed to a fixed provisioning point, and have orchestration automatically managed.

Side-less UIs require no runtime, automatically orchestrate upon deployment, and can be published directly to a fixed point similar to serverless functions, simplifying the development process and integration into existing applications.

New functionality can be added by creating components or 'micro apps' and deploying them directly to a fixed point where they are automatically provisioned and integrated into the application without additional orchestration.

Development of microfrontends involves using command line tools like npm and IDEs like VS Code for coding and bundling, followed by deployment through a CICD pipeline or direct upload via a web interface for immediate integration.

The demo application is a Netflix clone that supports features like browsing movies and adding favorites. It demonstrates the integration of new functionality with existing components, showcasing real-time updates and full application functionality.

New front-end features, once developed and packaged, are uploaded to a service portal where they are automatically woven into the existing application structure, allowing for immediate live updates without downtime.

The main focus of Serverless for Front-ends is to reduce the scope of front-end development to focus almost exclusively on domain functionality, using patterns like microfrontends and serverless functions to streamline deployment and orchestration.

Florian Rappl
Florian Rappl
8 min
25 Mar, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome to my session on Serverless for Front-ends. Serverless functions eliminate the need for a runtime and handle orchestration for you. Microfrontends require a runtime and orchestration, but side-less UIs provide a runtime-free solution. In the demo, a new team adds functionality to an application and publishes it easily. Building and deploying applications is quick and easy with micro apps and PowerCLI, offering true loose coupling and instant availability without a runtime.
Available in Español: Serverless para Frontends

1. Introduction to Serverless for Front-ends

Short description:

Welcome to my session, Serverless for Front-ends. I'm a solution architect at SmartPyat, mainly dealing with distributed web applications and microservices. Microservices require an embedded runtime, orchestration, and deployment. In contrast, serverless functions eliminate the need for a runtime and handle orchestration for you. Microfrontends in the front-end also require a runtime and orchestration, but side-less UIs provide a runtime-free solution.

Hello, everyone. Welcome to my session, Serverless for Front-ends. My name is Florian Rapper. I'm a solution architect at SmartPyat. We are mainly doing distributed web applications, which means we are also dealing a lot with microservices.

Now, as you know, microservices come with an embedded runtime. So you need to have that in order to make it run, right? You are responsible for actually the whole stack. You also need to have a location where you deploy them, whether that is a virtual machine or a real machine or just inside, for instance, a Kubernetes cluster. But you need to allocate that, and you potentially also need to manage that. And most importantly, they require some orchestration. So when you just create a new microservice, you need to make the space, you need to make the other microservices aware of that.

Now, in contrast, there's this pattern of serverless functions where there is no runtime, right? Everything is already there at a fixed point of provisioning. That's also where you publish at the end. This is a point that you don't need to maintain. That's just there. But you need to be aware of it, of course. In the end, that point also takes care about the orchestration for you. So whenever you publish something there, it already gets wired up with the other serverless functions that you have.

Now, compare that with the front-end. In short, what we want is to have a pattern that reduces the scope to focus almost exclusively on the domain functionality, right? In the front-end, there is the pattern of microfrontends, very similar to the microservices. They also need to have a runtime. Of course, if you run microfrontends in a server-side orchestration mode, then it's pretty obvious. But also if you combine them in the front-end, you would need a runtime. Think of iframes, for instance, or other mechanisms. You also need to have a way on how to deploy them. That could be as easily as a CDN somewhere. But then you again require some orchestration. How do you make the whole application aware of this new microfrontend?

Now, this is where side-less UIs come in. They require no runtime. They can just be published to such a fixed point as we've seen with serverless.

2. Demo of Adding Functionality

Short description:

And they also orchestrate just automatically. Let's look at the demo to see how that looks. A new team is onboarded to create a functionality. They add a Surprise Me button in the menu bar with a page that shows a random selection of movies. They bring everything together in the setup function and run the application. Now you can add all the existing functionality via the browser extension. The next stage is to publish it.

And they also orchestrate just automatically. Right? So whenever you deploy something new, it just gets automatically provisioned and it's just part of your application.

But let's look at the demo to see how that looks. So here we have a little Netflix clone. It's fully interactive. Of course, it's not the full Netflix. But you can see you can browse it. You can have your favorites there, and it's all working.

Let's pretend that a new team has to be onboarded that creates a functionality. It could start in a command line, as you can see here. It just makes an npm initialized command. Then it just needs to say where is the application source? In this case, we're using our demo application. They've chosen a bundler, ESBuilt. And they want to have it all in a new directory, going in there, going in VS Code. This team starts now happily coding. They want to add a Surprise Me button in the menu bar, with a page that just shows a random selection of movies. They add all the code in React. There is pretty much no magic here. Then they bring everything together in the setup function. In there, they just wire up all the components that they've written with parts of the application. They also make use of a common functionality called the movie tile here. Or they want to see the application, they just run it. This works fully locally, so it can also be done on a plane when you're offline. As you can see, the application shell is there, but it's empty. Well, that's because there is just one of these applets here that are called pilots.

Now you can add, of course, all the existing functionality, which is done via this browser extension. And ta-da, the thing just works. The selection is there, also the application is now fully populated. You've got the browse page and our surprise me button already works. Now, the next stage for this team is, of course, to publish it.

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

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
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.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
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.
Automating All the Code & Testing Things with GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
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.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
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.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
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.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
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.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
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.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
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.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
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.