Channel
Interviewed Person
Daniel Roe
Experience the thrill of live coding as Daniel Roe takes you on a journey to build a web app from scratch, pushing the boundaries of modern web development. Watch as he leverages the power of Cloudflare as the tech platform, integrates websockets for real-time communication, and explores innovative approaches to application architecture. Get ready to participate and contribute as Daniel codes live on stage, sharing his insights and decision-making process along the way. Don't miss this exciting opportunity to witness the creation of a cutting-edge web app in real-time! #WebAppDevelopment #Cloudflare #Websockets #InnovativeArchitecture #RealTimeWebApps #FrontendDevelopment #FrontendNation --- The world of frontend development is brimming with exciting possibilities š Don't miss out on the chance to learn from the best courtesy of Frontend Nation: š» Read our blog: https://frontendnation.com/blog ā¶ļø Watch the rest of the videos (talks, Q&As, mighty bites and more): https://www.youtube.com/playlist?list=PLxddmVXxb3HuuKuxT-RdgBRxDNPRpem95 šļø Sign up for Frontend Nation 2025 so you can stay up to date with what we have planned. https://frontendnation.com/ --- š Special thanks to all our event sponsors for 2024: Diamond Sponsors Sentry: https://sentry.io/ TinyMCE: https://www.tiny.cloud/ Convex: https://www.convex.dev/ Vue School: https://vueschool.io/ Certificates.dev: https://certificates.dev/ Platinum Sponsors Cypress: https://www.cypress.io/ JSWorld Conference: https://jsworldconference.com/ StackBlitz: https://stackblitz.com/ Vue.js Certifcation: https://certificates.dev/vuejs/ Angular Certification: https://certificates.dev/angular Gold Sponsors Smashing Magazine: https://www.smashingmagazine.com/ WeAreDevelopers: https://www.wearedevelopers.com/ Techtonica: https://techtonica.org/ OfferZen: https://www.offerzen.com/ vFairs: https://www.vfairs.com/ Mastering Nuxt: https://masteringnuxt.com/ Mastering Pinia: https://masteringpinia.com/
Vue School
Interviewed: Daniel Roe
[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