About this talk
This talk explores the unconventional use of Vue.js for back-end development by creating an interactive light show controlled via smartphones. The speaker, Mark, emphasizes that using familiar front-end frameworks for back-end tasks can enhance understanding and drive creativity. He walks through the basics of Vue's reactivity system, including how JavaScript proxies enable efficient data updates. Mark discusses leveraging Vue's features like 'ref' and 'reactive' in a back-end context and demonstrates a live coding session where he builds a simple dice-rolling application using Vue's reactive paradigms. The talk culminates in a fun light show demo, engaging the audience in a collaborative experience powered by web sockets and Vue.
Full transcript
Good afternoon, everyone. So, it's one of the last talks, which is always I know everyone is tired and they are not very excited to have more knowledge crammed into their brain. So, this talk is by design um not that knowledge transfer, but just to have fun a little bit. So, uh we're going to look at how we could use Vue uh beyond the browser. Uh a little
bit about me. My name is Mark. If you want to uh ask me something, just show picture uh share picture you took at the conference or something like that. I'm very active on X. There you can find me at MarkBA. Uh I'm a senior software engineer at Directus, where I love working at a super secret project. Can't tell you yet. Ha. Got me almost. So, yeah, I'm
from Luxembourg. Anyone else from Luxembourg here? Last time there was someone. >> [laughter] >> He's not here today. Okay, maybe he's watching live. Okay, so uh in my free time, I'm a private pilot, which means I fly a lawnmower with wings. I'm not a private jet pilot or something like that, but it's still pretty fun and takes a ton of uh work. So, it's main hobby. But,
I also do coffee roasting. I still have a few uh bags of coffee of self-roasted coffee with me. If someone is is interested after the talk to get one, uh just approach me and you get one. And I make conference videos, as you saw earlier today. So, that's a little bit about me. Let's get into it. Okay, so what we are uh building today. So, by the
end of this talk, Vue will control a light show in this room. Ooh. So, if that's not a cool premise, so just stick around. It will If everything goes right, it will be very cool. Or at least it will be funny, as my teammates say. So, yeah, you might ask yourself, Mark, this is a front-end conference. Why are you talking about back-end stuff? Um yeah, but let's
get I'm on the wrong slide. Okay. Uh doesn't matter. So, uh yeah, we are going to build with the Bun back-end with Vue even with Vue use a few things and web socket. We're going to build this light show. And yeah, so why Vue in the back-end? You you might ask yourself, Mark, this is a front-end conference. What are you talking about back-end? Why should we uh
be doing that? So, um yeah. A great way to deeply understand how something works is to try to use it for something that's it's not designed to do. I don't know if I think this was last year or 2 years ago, there was a guy that got Doom running on TypeScript types. Not on types JavaScript, but TypeScript types. So, I'm sure I don't remember his name, but
I'm sure this guy learned a ton of stuff about TypeScript by trying to use it for something that it's not used for. So, maybe this is like already good enough. But, there's more. Uh yeah, you can just do things. Uh why not? Uh it's fun uh which is the purpose of this talk. So, we have a lot of AI this, AI that. You have to you If
you don't do this, you're left behind. Yeah, let's forget 26 more minutes about that and let's just have fun with a little bit of coding. Uh this should already be enough, but there's even more. So, um you can use your Vue.js paradigms that you are used to in the front-end. You can just use it in the back-end, because And ultimately, uh yeah, you're going to learn about
a little bit about Vue reactivity in the process. I actually had the idea for this exact talk uh 5 years ago, a little bit more than 5 years ago, and I asked Evan like on on Twitter back then, I asked Evan, hey, do you think there's a problem uh by doing that? And uh Evan answered, we get to that later, but also Sebastian Chopin, the creator of
Nuxt, uh answered and he said, glad I'm not the only one thinking of this. So, that's also confirmed my idea, so maybe this would be cool, but I didn't really make a talk out of it, because I thought it might be a little bit stupid, but I think it will be very cool if it all works out. Or very funny. So, let's talk about what is reactivity
actually. It's uh pretty easy. When something changes, we update everything that depends on it. Pretty straightforward. So, uh there's this concept track. So, when a value is read, we note down who is reading it, and then when uh when we trigger something, so when a value is written, we notify everyone that we noted down in the list that we wanted to track. So, that's basically it uh
about the reactivity. So, how does Vue implement reactivity? Well, uh Vue uses JavaScript proxies. And I could give an entire talk about how this works. There's actually one I I gave it a few times uh building Vue from scratch. So, if you're interested in doing that, uh it's still somewhere uh on YouTube. But, very basically, it's something like this. So, we have a proxy that if you
talk to the proxy, you can intercept the writing and reading of uh of an object, and you can add uh additional logic to it. So, for example, if we uh if we log out the color, what happens? So, it goes to this getter. So, this get and set is called traps, but so it goes to this trap getter trap, and then uh it writes this down. Okay,
so this function wants to be updated when uh or called when uh this object gets written. And then on the other side, when we have something like this, uh we set the color, uh we go to our clipboard. Okay, so did someone wanted to be notified about this? Oh, yeah, this function. So, we execute it and it's updated. So, this is the basis the basic premise of
how Vue implements reactivity. A few things we are going to use in the back-end here. This is all uh basic stuff. You all know this. Uh we are going to use ref, reactive, computed, watch, and also watch effect functions. Okay, how does something without reactivity look like? So, this is what it would look like, and there's already like an issue. So, if we have this color and
we have this function set color, and after we set the color, we have to do a bunch of uh maintenance. So, we want to broadcast this color, for example. We want to update a log, and then we also have actually have to calculate some derivative uh value out of it. So, this thing here in red, we have to do this every time we change the color. We
want to set the color. So, it might work, but uh you can't really be sure if if it's if in a bigger code base, it's like always going to be executed, because you you write another function that sort of updates the figure out very late that something didn't get executed. So, with reactivity, um how does this work? So, the the idea here is you describe what should
happen, and Vue figures out uh when. So, in practice, it looks something like So, we have the the ref here of the and then we have two watch effects. Actually, this could be in one watch effect. I don't know why I did two now that I'm looking at it, it's fine. And then uh when we execute the uh color value set, so maybe if you set the
change the color, then uh these two watch effects are being executed. So, my point is that you don't have to worry about when is going something going to be updated. Like just Vue takes care of it. And I find it super interesting, because yeah, it's you can do some cool stuff with it also in the back-end. Uh there are some uh back-end friendly adjustments we might want
to keep in mind if we work with Vue in the So, this is the answer that Evan You gave me when I asked him uh hey, is this something I should be careful about? And basically, he said, yeah, uh maybe just make sure that you use shallow ref and shallow shallow reactive. Uh if not, so if for example, you have a Bun object, a Node object that
has a bunch of stuff. For example, let's say a web socket connection that has a bunch of stuff. If something changes there, it's all going to be re-rendered, which makes the performance abysmal. So, yeah, we note that we use shallow ref and shallow reactive. And then another thing is sync watchers. the default pre and post flush flushes for a watcher, they are before or after the DOM
updates. But, yeah, we are in the back end. We don't have a DOM. So, we can do sync. If we set it to to flush sync, it's going to execute immediately because we don't need to to batch effects for DOM updates. Yeah, because as I said, we Okay, it's demo time. First demo. They are two-bit demos, but let's see some live coding to just bring you the
idea a little bit closer of what I want to do. So, here we have Is the code readable? Yeah. Probably in in the back. Is the code readable? Thumbs up. Yes, perfect. Okay, so here we have It's not a very useful example, but it's cool to to show. So, we have a dice roll here. And every time we click it, it generates us a new a new
number for the dice. And then we have the previous roll and we have the score. Why doesn't this work? Oh, yeah. Now, it does work. So, the game is not Yeah, the game is, but it's actually not a game that if you have two times in a row the same number, it deletes. And then your score is zero again, but your high score stays. So, if we
go through it, goes up, and then we we had twice the the number three, the score goes back to zero, and the high And this is all now without reactivity. And what we can do now is we can try to figure out how to do all of this. So, we have here a a variable last roll, second last roll, score, high score. And then we roll a
dice, we do some dubious assigning of things here. And it's already a little bit messy, but let's see. So, let's just throw away this entire roll dice thing. And from these, I just I actually just want to keep the name because so I can copy it fast and I don't forget anything. And I want to start with import the ref watch effect from view. It's already installed,
so I don't have issues with the with the connection. Then, so what do we have here? I want to have the rolls dice rolls, and this is just going to be an array ref. then we have like the last roll. So, this could be a computer property. So, the last roll is Actually, we forgot to import this. Okay, so the computer property and this is last roll
value at last roll value length minus one. Okay, and then we have the second last roll, which is very similar. It's just rolls. Oh, yes. Thank you. Rolls. That's why it didn't offer me the right thing. This should This This looks better. And then minus two. Uh so, we can get rid of these two. Then we have the score, which is also a Uh computed. Now, we
do use the rolls. And we reduce this accumulator and oh and current uh this is going to be What am I doing wrong here? Okay, so this should be fine. It adds all the values in the array. Does this look correct? Yeah, I think so. If not, we figure it out. And then the high score is just going to be another ref. I put it up here
with the others. is a ref of zero, and then we can delete And then we just are missing the function of roll dice. And what do we do here? So, we have a And let's see if I have this right in my So, we have the floor of Oh. Math random six and then plus one. So, a number between one and six. And then we can return
the roll. And also, we can add it to the rolls. We just push it. Uh roll. Okay. So, this should actually already work. Let's try. Oh, great. Oh, yes. I see. I uh I passed this. Okay, so let's do another one that is just stats, maybe. Stats is uh a computed again. We return No. Would be easier. So, yeah. So, we probably just want to do this.
value Does this Okay, so let's try it again. Oh, I don't use it. I don't use it. Thank you. Thank you. Thank you. Live coding is always fun. You should try sometime. Uh I don't use the stats. So, this we can delete. And then we just pass the stats value. Hey. >> [cheering] >> Thank you. So, this works as intended. I think. What's the The high score
doesn't work, we are getting close to the time, so we just ignore this uh because it's not really that part of the what I wanted to show you. What I wanted to show you is that we can just copy all of this We create a new file use dice.ts. Uh we export a function And then we just put all of that in there, and then we return
I think we just need the uh the roll, the dice, and the stats. And then we can do import dice from dice from use dice. And then we just need to up up up. What was it? Stats and uh roll dice. Yes, thank you. Use dice. And then we should have should still work. Yes, so it still works. And you see we have the same thing. We
just have a composable just as we would have in front end Vue.js, just in the back end. And it it works fine. So, yeah, this is the first demo. >> [applause] So, now comes a little bit more of a fun and accelerating part of the of the talk. we're going to do a light show. And for that, I can already tell you you will need all your
smartphones because the light show is going to be your smartphone. Which is a little bit crazy given the shaky internet or Wi-Fi situation, but we will try. So, the idea is we have an admin client, which is on my computer. It sends something to the back end, Vue reactive. We have there side effects. These side effects send a web socket broadcast. And it sends it back to
the client to the browser client, which is your phones, if everything goes well. light show demo. I When I pitched this idea to a couple of colleagues, friends, I got a ton of support. For example, something like this. Like you can see my team, they are really behind me. They did make a poly market of if the demo goes right or not. And but jokes on them,
I can make a ton of money today. As you can see, they don't have boundaries, but yeah. Let's let's see how all of this goes. So, the idea is you connect to the demo website. I will show you the the QR code in a in a minute. Then we chose the correct section. So, the the idea is there are sections, section 1 2 3. And when you
log in when you load the site, it gives you the section to to choose. So, let's make sure we are all on the on the correct page. So, where's more or less 1/3? Let's see until here. Everyone until here from your I guess from your right uh is section 1. So, here until And then from here to >> here, section 2. And then the rest, section 3.
So, let's try this. You guys are section 1. Section and section Perfect. Can't go It can't go anything wrong. So, now that we know which section we it's also helps if you put the brightness to 100%. So, the idea is you log into this website and then you hold your phone up and hopefully like you remember like I'm old enough to remember when you had like lighters
at concerts and then suddenly it changed to just the the the light the flashlight on the phone, which is not a pretty cool. But here I want to control all of this with uh a Vue.js powered backend, which I mean, I'd say that at the beginning, Here's the QR code. And while you try to log in there I will set up something where did I put it?
You probably wondered what You probably wondered what this is. Uh you will find out in a minute. Because the idea is you hold up the phones, but you still see what I see. So, this will be the mount for my camera. because my talk was not complicated enough, I needed to add some like spicy thing here. Cable. Let's see. So, this is my camera. It's me. Hello.
Probably going to be something like this. So, let's see. Did everyone have the code? If not, I show it in a second But let's see if we have already someone logged in. Not even Oh, yes, we have a bunch of Oh, this is >> I'm going to be rich today. Uh brightness to 800% please and then hold up your phone. Yes. [screaming] Awesome. And now you will
probably be able to also see yourselves here. Okay. This is pretty This is going a lot better than I than I planned than my Oh, no. Don't Don't zoom in. >> Thank you, Apple, but I don't know. I don't also don't want portrait. I don't want studio. Actually, studio looks pretty cool. So, let's try something. Red. Let's turn off the section number two. Uh hold on. Okay.
So, I see this This is working. So, please hold it up. And then we have Here I can set up a few um custom uh steps so custom pre- Yeah, custom steps. So, for example, now green and blue. And then I could uh for example, for the second one, just turn off the middle section. And then we play this. All of this is controlled from the backend.
So, off on off Actually, I can I can make it a little bit faster. Come on. It's a little bit not synchronized, but I'm not too worried about it. It should be fine. But now let's do rainbow. It's a preset of colors and let's play it. And if we set this to 76 uh BPM Cool. And then we we play a song that I know has 76
BPM. Now I need the the audio. Let's see. It works. This is by the way it's AI generated song, but we can turn it up. Turn it up. >> [music] >> Okay, thank you, sound. We can turn that turn down that. OKAY. >> THANK YOU. SO, THIS word Someone from my team owes me a next to a beer there. Right, yeah. Perfect. Okay. [snorts] So, we have
a few minutes left, so we can just take a look-see at I actually wanted to show this before, but I was too excited to see what happens. Okay, cool. So, we have the backend here. This is like the the index file. And then we have a bunch of like composables in the backend. For example, we have here something like use connections. And then here we have important
the shallow ref. It was assisted, yeah. The shallow ref in order because these are going to be sockets a bunch sockets, we don't want to observe all of that. We just like if something something's added there. Uh we have a few computed. I know this This could be all very like a lot easier, but just to demonstrate the computed here, I did it like this. We have
uh What is interesting? Maybe the light show is interesting for the last few minutes. So, we have uh ref here for the sequence at which step we are. We have uh beats per minute. We have an is playing or not, so I can pause it. And um we have at which current step it is. And then I can just uh pause and resume. So, we here we
have the uh use interval function from uh from VueUse. Uh so, yeah, we can we can import anything from VueUse that isn't using any DOM-related stuff, which is pretty So, yeah, here we Yeah, we just keep doing this. If it's playing, it sends something. If not, so it cycles through the steps. And yeah, what else do we have here? Yeah, we watch the colors and then we
send the appropriate light signal to the to the referencing section, so to say. So, yeah, I think this is it. Uh thank you for participating and I hope you liked the talk. >> Just one more minute. One more thing. So, this uh I have to go through the entire thing again. Hold on. Why did I put so many animations here? Okay. One last thing. Is Alvaro here?
Yes, Alvaro. If you can come down. Just 1 minute. Just I have 1 and 1/2 minute more. Alvaro, give it up for Alvaro. >> So, yeah, just this week Alvaro and I launched a podcast called Eff It, Ship It. So, if you want to subscribe, here's the PR code. It's now on Spotify. Uh Alvaro, want to say a word about Eff It, Ship It? Eff It, Ship
It. [snorts] Eff It, Ship It. So, it's it's it not so serious but also serious tech podcast. We talk a little bit about tech stuff and tech adjacent stuff. Not so not only AI stuff, not only very technical things, also things surrounding uh the tech industry. And um yeah, I I mean, who needs another tech podcast, but why why not? Today we learned why not. It worked
out fantastically. So,
