Serverless for Frontends

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.

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.

And like with a serverless function, what you want to do is you can either do it in your CICD pipeline, which is great for automation, or now here for deductive purposes, you can just use that portal. So you build the application and then at the end, you just pack it, you get a tar ball that should be very familiar for everyone who dealt with AWS Lambda, for instance. Now here we have it. And then we just upload it here via the web interface. So we select it, it gets uploaded, and voila, we got a new functionality here, refresh the page and suddenly it's live. So the full end to end pipeline done here in just a couple of minutes. Very fast.

Now let's recap what you would see in this application is that it's composed of a lot of these micro apps, and each app brings its own kind of components. So that way you consistently stitch together an application, for instance, a browse menu button and the browse page come from the same micro frontend. Even the more important ones like this movie title that we've seen that really carries let's say a snapshot of the movie plus of course the ability to watch it comes from micro frontend. In the end, it's just developed by teams that use the PowerCLI, which is a command line tooling. They can use this to scaffold a new piece of functionality, to debug it, build it and of course to ship it at the end.

The end users then access this application all by just having a URL going against that serverless functionality called the feed service in this instance. Now, let's compare for conclusion, what we gained here with societal UIs against serverless. Likewise, we're doing development in a standard IDE. So no surprises here, everything just works as you know, already from serverless functions. You debug then with an emulator. You get your full application working offline. You can combine it together with applications that are live out there. You have therefore true loose coupling. There's no hard wiring here. So if something's just missing, the application still works. You need to provide that self-definition or manifest. We've seen the setup function where you actually stitched together the various parts and you deployed it all without a run time, essentially giving you instant availability. So no need to take care of any of that.

That's it from my side. We are out of time. I would like to thank you, I wish you all a great conference. If you want to check out the demo, learn more, then check out pyrit.io and have a great day.