Usecases: Form Handling, Interactions & Parallel Processing

[00:00:00]
>> And so what I wanted to do now is just dig into a few things that are possible with serverless. Because we looked at one kinda practical use case, right this is like the content management system use case where you have data that you need to read and write from.

[00:00:16]
You need to control access to that data, and you maybe want to enhance that data using a third party API, which is what we are doing here, by pulling in these ratings from different services. So, to look at a few other things that we can do, let's start digging in and just look at some examples, we'll play with them and talk through how they work.

[00:00:39]
So one of the most common examples that you're gonna see is form submissions. They're a really default case for using serverless functions. And if we look at, for example, my site,-
>> Mmh.
>> And we go to the newsletter, and we put in like we can sign up, I think here,-

[00:01:01]
>> Me.
>> This is all managed through a serverless function, this is all set up in my site. If we look at the code here, the form submissions all come through a function and I use my ConvertKit form ID. I send it to their API endpoint with my form ID, I grab out the first name and email out of the form.

[00:01:26]
And then I send this off. And once it comes back, assuming things went well, I send a 301 to the success page, which is the one that we're looking at here that says, please check your email. If something goes wrong, then I send a 500. And we try to figure out what happened.

[00:01:45]
But unless the ConvertKit API is down, we should never end up here. So this is one kinda standard use, another very standard use that you'll see Is to do some kind of interaction or things. So this would be a Like button or a star or some kind of favorite.

[00:02:06]
Josh Comeau has a really good implementation of this that just makes me smile, where he has this heart. And he's done a very good job of making his site very interactive as well. [SOUND] So as we save this, you can see,- [SOUND] Each one of those incremented this event and I'm almost positive that this one is done through a serverless function.

[00:02:37]
And we can see here that that persisted, it got saved back somewhere. And so every time we click, that click event gets handled and sent off to an endpoint and that endpoint is a serverless function. That is a really really nice use case, it's super fun. I think his site is just charming in general, I don't know if you've had a chance to ever look at Josh Comeau's site but it is very fun.

[00:03:00]
And it's a good time, go play with that one for sure. Another thing that you'll see serverless functions used, this is where you start looking away from UI and interaction and toward performance. Why does serverless function provide an advantage? It's easy for me to build as a front end developer.

[00:03:28]
How's it gonna benefit me? How's it gonna give me performance enhancements? How's it gonna give me more power? And a good example of that is processing. So if you look at something like a gatsby build, when gatsby builds, it's gonna put together all the data, all the images, all the files on your site, and then it needs to process those.

[00:03:48]
And by default, this is done on a single machine, which means that they have to happen not entirely synchronously but pretty close to it. Where each thing needs to get processed and it has to wait for all of that work to get done. But if you use serverless functions, you can instead of having to do that work on a single machine in a stack, you can flip that work sideways and have one function do one bit of work.

[00:04:12]
And just fire up hundreds or potentially thousands of these, to do all of that work at the same time across multiple machines and then send those results back. So that you can decrease your processing time to almost nothing as long as the server execution takes or that function execution takes for the slowest execution.

[00:04:34]
But all of the data happens at the exact same time, all the work happens at exactly the same time. And that means that you can take something that, if one processor could have done all that work in an hour but it's 10,000 jobs, you can just run 10,000 serverless functions.

[00:04:51]
And it happens in a second or a few seconds as opposed to that full hour of work being done. An example of this is the gatsby-parallel-runner. Gatsby worked out a way to do external jobs, which means that they take work, I think by default, all they support is images.

[00:05:11]
And the image processing instead of being done in the gatsby build, can be handed off to an external process. And if you set up a whole bunch of serverless functions to handle those external processes, gatsby can take the images and say one image gets processed by one serverless function.

[00:05:29]
And do all of them at once, or huge batches of them at once to significantly decrease the time. And you can see what this actually takes, if we look at some examples here. I think there's, it looks like they pulled the comparison down. But so, what's happening here is you've got a queue that's running.

[00:05:51]
And the example of getting this thing actually built, it takes like 40% of the time, 30% of the time of what it would take to build on the same machine. And that's by taking those gatsby image processing jobs. And instead of putting them in one big stack, you flip it sideways and you run across a bunch of serverless functions at once.

[00:06:12]
And that gives you a huge amount of power, a huge processing speed boost. And you can apply this to a lot of things, you can do this if you had to refactor a database and you needed to process every entry in that database. If you were gonna do that sequentially, you'd have potentially millions of jobs, right.

[00:06:31]
That would take a long time. But if you took each entry and ran it through a serverless function, then you could parallelize that and run all of the entries at once. And get all that data back and then drop it into your migrated database. And that gives you a huge performance boost and the cost is pretty low, right?

[00:06:49]
You'll spend a few dollars for a million function executions. And that gives you a whole bunch of power in your ability to do things. Well, this one's more of a fun example and then I'll show you another practical one. But if you look at the learn with Jason website or if you've ever watched my my live stream, you might recognize this screen here.

[00:07:14]
This is a screen that you would see if you were looking at me talking my videos, not on right now. So it's just a blank box. But one thing that you can do with my show is when you're watching, you can fire up the chat and you can participate.

[00:07:32]
So if I say something like hello, it shows up down here, right? And it's like a vendor, it's IRC. But what I can also do is I can trigger serverless functions. So when I run this command here, the exclamation point grow. What I'm doing is I'm actually running a serverless function.

[00:07:57]
And that is causing this interaction to happen on the page. And that's all through serverless function. So if I take a peek at the learn with Jason.dev we can see this grow function here. And this grow function is part of the Stream Blitz, Stream Blitz is an app that I built, that's for Twitch streaming.

[00:08:23]
But it just sends back what should happen when you do this thing and it handles a command. And then my scene over here is listening for the result of that serverless function, and it will do something with it. So I can also do something like trigger a sound [COUGH].

[00:08:41]
And that is if I'm trying to do something and I'm doing it wrong, and the chat has posted the answer and I'm not paying attention. They can run that sound effect to alert me and draw my attention back to the chat. So that I see that they've given me the solution and I'm burning minutes on the stream.

[00:08:59]
So that's all run out of a serverless function as well. So we can see here that the ahem function is the same thing. It's a serverless handler that uses the Stream Blitz framework and then sends back the sound that should be played and the image that should be played.

[00:09:14]
And how long it should stay on screen. And that gives me the ability to interact with a live audience without having to write a whole bunch of code. Instead, I can just define the sound effects and people can participate on the stream. It's a whole lot of fun and gives us a whole lot of flexibility on the stream.

[00:09:33]
And it lowers the barrier to entry for someone to build these types of interactions because they can just set up. If they use something like Stream Blitz, they just write this serverless functions and then they have listeners that will, by default this kind of play with the audio and image that just works.

[00:09:52]
They don't have to write any code, they don't have to do anything. It'll just happen, it just plays.