Frontend Nation 2024: Daniel Roe - 🚨 Live On the Edge 🚨

[Music] uh hello well thank you for that uh warm warm welcome uh and also by the way thank you very much for all the kind words uh in the previous talk I promise I I no money changed hands in the in the process um so my name is Daniel row I'm going to be talking uh I suppose probably less talking more live coding uh an app which I hope we'll showcase some interesting possibilities for for live apps um apps that uh make best use

of things like websockets um in order to to have uh interactivity and a feeling of immediacy for what we're coding um something which I hope is going to be relevant to all of us I'm going to be using n uh to do that um but hopefully what I what I demo should be usable for anyone uh in any framework so uh here's my screen uh and

I'm going to get started with n uh you can you can do that uh by clicking get started and and finding out how to how to get going you can also try uh no. new uh which will enable you to uh start with a set of templates I'm just going to grab the basic no template and start a new project like this and I'll use pnpm because I love it I love the offline mod by the way pmpm is really really useful on an airplane or something like that okay here we go we are up and running we have our uh basic

project and I'm going to run it in run the dev server in the background and let's just fire that up in a web browser um and off out of the box you'll see that um n has a a very simple welcome page uh and so we could we could type something else front end Nation I should say by the way that I have a vs code Autos saving so it will update quite quickly it will also uh throw some errors if I if I ever type any sent errors which you don't need to worry about

that okay so what I want to do um is have some kind of State uh that is shared that's basically the concept behind this I I didn't really uh I really struggled with with what what I wanted to to demo what I wanted to show um and I I decided maybe we will do some State um so if you're not familiar with with view by the way uh you have the single file component which has a script a template and even a style block where

you might put some CSS at the bottom and in this particular case next well view would probably do something like this you you'd have some State uh and You' display it a little bit like this um and that that is going to be in for multiple locations so that's going to be on your server this will be initialized and then on the client when it hydrates it will be initialized again uh so it's not not shared uh we want to reduce that as much as possible um so in next we have a use State composable um which lets us have a

single um a single state which is initialized on the server and then passed over to the client so it's not reinitialized there it's shared between the server and the client but ideally I would like to do one better I would like not just to have a sort of shared State between the server and the client I want a state that's shared between every user of this app and so uh I'm going to create a composable to enable me to do that composes I love in view because they like you extract uh logic um and

and move them out of places where they they shouldn't be I mean in practice I'd probably develop it in app. viw until I was pretty sure what I was going to build and then copy it out but for now I'll just pull it out here uh and we'll create a new uh shared State composable and we'll export use uh shared uh State as as a function and just uh out of the box we're going to return that so we just return that what we were doing before and we'll just swap