Unpack the Stack with Marc Backes

[Music] thank you [Music] [Music] thank you all right we are live welcome Mark how are you I'm excellent thank you Tim nice how are you good to hear um it's good because it's really warm where I am I'm actually in shorts and flip-flops imagine that because my colleagues in San Francisco were looking at snow this morning this is ridiculous well how's it for you you're quite close to me right uh relatively close we have now actually like 10 degrees which is sort of warm but it was like minus three like a few days ago so who knows I'm sitting at like 25 now oh nice a bit more South I guess um anyway so this is unpack the stack a live stream where we kind of just unpack any sort of stack and we dive in we go into the nitty-gritty of the code and today is really awesome and so because we have Mark and we're going to basically just unravel the DNA of modern Frameworks by actually just building one or using some tools from others and then figuring it out a little bit and I might have made that way too big but anyways uh Mark tell the audience something about yourself who you are what you do stuff like that sure yeah um I'm Deborah Elite and we are developers where I I'm not the traditional devra Elite where I advocate for a product or anything but I help out a lot uh creating very cool events for developers uh actually next big one coming up in July it's called the we are developers World Congress if you if you want to look it up so I do a lot of that I I'm still working on a secret project which is part of the Congress but it's not uh Out official yet so that's it's a very cool thing you think we do there uh yeah I am I am aware well I still am a full stack developer um mostly I work with next View node.js and and so on mongodb uh not so much anymore but yeah pgs next I I dabbled around in Astra I really like it oh yeah still we had a stream last week it was so much fun oh yes I jumped in a little bit too late and I had to go but I I saw earliest talk on in business Amsterdam yeah so yeah yeah that was good fun anyway so today we're going to be talking about as initially let's we're starting with virtual Dom right because yes and then later if we have the time we might dabble into a little bit of reactivity as well and how that kind of is set up I'm pretty excited about this because when I came up I think we were relatively similar in age and how we worked and so we didn't have all the fancy Frameworks you know I even well jQuery come up and then we had mood tools and prototype and then slowly it became I think angular was first but that was not my preference when few game that was different for me anyway they were they were so yeah there were so many like at some point I was so overwhelmed by the choice I had I just stuck with jQuery for a very long time yeah which is which nowadays basically you can all do it with Native JavaScript well you could for a long time but A and G what's up um essentially I think you could but you had all these browser differences and that was just jQuery was just Safari and ie6 differences essentially right yeah it's sort of making it easier also I think the syntax a little bit cleaner yeah yeah I actually worked for a company for quite a while where I I use jQuery a lot okay and also when when view went uh came out and angular and so on I still was using that until I left the company and I was like I want to learn something new and I was like looking at Futures why it's the first thing that I was sort of exposed to when I went to a conference in Amsterdam I'm not really Amsterdam but I don't remember which one and there was a workshop of BJs and I was like this is so elegant I I have to learn it so I got a little bit more and more into it uh worked uh with it yeah you know what for me I didn't think it at all like angular came in I tried it I was like nope this is not for me this data focused thing nope I'm a dumb dude and then react one came out I tried that it was better but it it required so many hacks so I went back to completely vanilla JavaScript for like a few years and then I joined an agency and we were building my first project with few was immediately the biggest few project in the world for L'Oreal so while we were building the biggest project with like 800 websites on view and then I loved it it was a completely different story it was cool crazy yeah I think I I got into view when it was already version two okay me too I think we transferred from one to two in that project I think yeah yeah I got into it at two and then yeah later transitioned to three well nothing not that long ago it's not that old so no no maybe uh two years ago so let's talk for virtual Dom maybe let's start yes so what should we do do you want to just kick it off and talk a bit you want to share your screen let's um yeah so let me just talk a little bit about it and then when there's something more where we have to visualize something uh we can take the screen just to uh professional a few things so yeah let's do that okay okay cool yeah so to learn about the virtual Dom we first need to know about the Dom what is what is Dom and Dom is basically it's nodes that have other nodes and what do I mean with that is like imagine like a tree um that has a branch which can have another branch which can have have an which can have another branch and so on until at some point it doesn't have any more branches it has like an end point this end point for the three would be a leaf this is uh basically what a what a Dom is and in our case this is in the browser in order to structure a website um and yeah it can be manipulated with JavaScript to me that sounds like SVN from back in the day remember that with all the trees and the Trunks and the whatever yeah branches didn't work a lot with SVN but oh I had to uh I I remember it from University when we did algorithms with traversing uh binary trees and whatever red black trees whatever you got it's basically the same thing you go through it until you find like it's a recursive thing we will see it in a bit when we code yeah sure um and yeah oh you can probably hear the dog barking right yeah but we like that because we all work from home so we have dogs this time I decided my dogs are actually up in the house rather than here with me but quite often I'm streaming with a dog in the background they're just sleeping yeah she's also usually just sleeping uh okay so let me see what can show you in order to um yeah um yeah yeah we we can we can see this okay here we go so let me just um oh now we see you just like take this away now I'm just not looking at the camera anymore which is here I'm looking at here when I talk to you but okay so yeah now you see the screen right yeah here we go what is this virtual Dome there we go yeah so this is a very short explanation uh virtual representation of what is the actual Dom what we now talked about well actually let's go back this is um what we what I mean when I talk about the actual Dom this is actually the part of the actual Dome of vgs.org of yeah or official website so we have we can see here we have a body which has a bunch of different um nodes this is how we call it uh yeah nodes right and there are some that don't have that need to be rendered out because it has it has a text right for example the the anchor tag like in the line approximately 10 a href and then VP content right so we have their skip at the very right we see skip to content and then it's when we start rendering out and if we have something like like the body and the divs above we just iterate through them until we find something we can actually render right so that's uh this is yeah the done right so let's get back to this so the virtual Dom is as the name suggests a virtual representation of of this term right it lives in the in the browser so in the memory of the browser and we can manipulate it with uh yeah also with JavaScript and it's synced to the real Dom so when something in the virtual Dom changes we change it in the in the actual Dom and so is it the idea that you change stuff virtually and then when a few things have changed you just update the normal Dom or can you also directly just update the normal Dom but what is preferred well in systems that use the virtual Dom you update something in the virtual Dom and then you render it out to the to the regular Dom but there are also Frameworks that don't even use a virtual Dome yeah exactly uh for example petite View uh doesn't use a virtual Dom or just uses uh direct um direct manipulation of the dump which is something you can do I think as well right uh again please I think alpine.js does something similar it's just attached to the normal Dom and does some changes when needed I'm not sure but I think I saw something like that Alpine also uh like they draw the comparison petite View and Alpine that they are very recent okay one of one of which is uh not using a virtual Dom uh as far as I know using a virtual Dom has uh some performance um let's say advantages but I think it's more about and I think this is I I have it also somewhere here it's to re reuse outside of the browser this is the third point gsox for example if you if we want to create something that's not in our browser where we don't render uh divs and spends and uh anchor attacks and so on but maybe something from uh like in for Android in Java right or in uh Swift we can we can use the same virtual Dom uh but we render it out to somewhere else I think this is where it becomes interesting I and I remember Avenue talking about some experiments where they use the view3 virtual Dom to render um webgl components something this sounds interesting a little crazy it's a bit like trash.js but then different I guess I don't know about that but yeah so the idea is basically to decouple the logic uh when we decouple the logic we have this benefit right that we can reuse it somewhere else yeah and yeah it's easier to programmatically just manipulate and inspect so it's easier to just go your virtual down we will see a bit how how it's structured in view three at least it's it's very easy so you just have a node and then you have children then you have other nodes which can have children and this goes on and it's very easy to iterate when when you do this in uh you're playing JavaScript it's a little bit more yeah let's see let's say not so maintainable if you want to look at that that way um this now is something that becomes important when we look at the code you will write them in a second so this is a very simple um Dom right and let's see what we have here right we have three different things so we have this is other tags right the div the H1 the uh ordered list and then the list item these are tags right yeah then we have these things uh which are attributes uh they are called properties in view three this can be a class this can be um probably a value for an input field this can be the disabled tag for uh input fields or buttons uh whatnot and then we have the content uh and here we see this will become a little bit important later when we code it it can be a text but it can also be a list of other uh nodes so here we have to distinguish later on in the code is this a text if it's a text we can render it right away if it's not we have to do something more and yeah yeah I imagine something recursive right this is going to be recursive yeah cool which for beginners sounds very scary but like the example is pretty simple so uh also by the way the example that we code out it's not that close to the actual view three reactivity there's a lot of stuff missing for Simplicity you know yeah but that's fine let's get the basics right we're talking about the DNA right it's the basics yeah exactly so you see this is called children in the second example where we list out a list of uh of three different fruits it makes sense to call it children but there's all it's also called children when it's just a text this is something we need to keep in mind when we code with it later and yeah uh this is fancy animations okay yeah so we have we have three different ways uh at least for for this for this example what we can do can you just show them all so this is how it looks like right this is H which is hypertext and it has this tag this problem with children and we have three examples here and the only thing that changes in these examples is or that really changes is the third parameter so in the first one is just the text in the second one it is another virtual node and the third one it's actually an array of virtual nodes which is what we had before the the list of different fruits right and the more realistic example actually but all of these we will code out today oh awesome so we will be actually coding this H function right we will code the H function and yeah a few others actually this is you're just uh mentioning the writing at the right time this is what we what we're going to build today or what we need to do this uh to build this basic functionality this is a simplistic version of of the uh of the virtual Dom right so we need something to create our nodes which is the a the H function or the the hypertext we will just call it h from now on this is just to create now this is like the simplest thing ever and we will see in a second why um so that's not like document.createelement because that's not virtual Dom so there's it's another type of function I imagine yes it's okay different this is just to create like the virtual Dom which is just it just has information about what's going to be in the Dom but there's nothing with document.createelement here this is actually happening in the second function in the mount where we want to mount like our virtual node onto um onto some element in the real Dom yeah uh it could be at the beginning or the easiest example is just the um the div with the ID app and we just render it out in there and we just have one element this will be the first example we see and then it becomes more complex but basically just taking one virtual node and mounting it onto the Dom this is like the mount function which is a little bit simple at first and becomes more elaborate then removing stuff from the Dom we also need that um it's not so crucial for our um examples here but I just want to show it because it's rubber simple and also that we can see a little bit what type of dominant relations are are being used and then there's the the big boss the the patch function it's when something updates in the virtual Dom that we actually updated also in the in the real Dom because that's what it's there for right it's that it's synced and so I can imagine if you are a very smart developer like Evan you or the people behind react this batch function is where the magic happens because you don't want to re-render everything you just re-render a little bit and then update little bits I imagine based on reactivity right yes and this is where the most uh when I said this is a very uh simplified version of the virtual Dom this is where it's most simplified because in in the real version it's like I don't know how many lines of code it has but it has like uh what's the um the length is the length of the parameters is it different is the length of the children Is this different is that different what we will do is just we just render from the new Dom everything over the old Dom yeah okay yeah sure and then later we can take a look at the other code like what are other things we can add and even that is not complete if that is missing things but yeah to keep it short and simple and yeah this uh I will show this later again this is uh the repo of everything that I will be coding now it's marked on dev slash vdom and yeah that's that's it for and let's have a look at this so are we just gonna open vs code or you're going to just put a browser there I guess oh yeah you have it I have it here let me just guide you in a little bit uh zooming in maybe yeah oh yeah here we go okay nice let me yeah I can close yeah you can probably close the command B better okay so let me just guide me guide you through a little bit through the the structure I have here so this looks like a lot but it's just a basic uh HTML5 document which has a bunch of stuff we probably don't need for this let's say anyways because this is snippet for it yeah and this is uh like oh yeah maybe important um I will be using Tailwind classes for those of the audience that don't know about potato wind it's you you just instead of writing CSS code you write classes to a certain um container or a certain element and those are um yeah those are like Atomic CSS classes yes more like utilitarian stuff what quick easy online stuff it's nice for these examples right yeah it's like changing text color size yeah settings margins that sort of stuff so it's not going to be very um like you can follow this even if you don't know much about Tailwind yeah that's all so yeah that's so here we just have something that it's going to be centered and not someone yeah right here and here on line 12 this is where it's going to be mounted right everything that we create that we Mount is going to be here and here we already have our first um this you can ignore it for now uh no don't ignore it uh yeah so here we create our virtual Dom right which for now it's going to be a uh a paragraph with no properties and just a text hello like a very the very basic thing then we get uh our element where we want to to mount it and then we mount it there so we have the eight function the mount function here both of which are not implemented nothing yeah we still have to code yes we still have to code it and that is what we are going to do now cool so um let's just start with uh writing what we need we need the H function right and then what else do we need did I say we need the uh we need an unmount as well which is removing stuff from the Dom and then we have the patch yes so I can't believe that you're actually starting this from scratch without actually like copy pasting some example you're a real boss man I love it I mean this is this is how how it's How we can show people that it's not some sort of black magic that is no exactly this is okay so let me just fill out the parameters here so we can sort of have an idea of what we are going to do yeah so here we already installed in the H function it's going to be attack which is H1 div span yeah or whatever then we have the crops oops props ah yeah I have this relatively new keyboard and it's like it sounds like it sounds good though what is it can you show it to the camera like oh wow it's like a it's called an ultimate hacking keyboard and it's a split keyboard to be more like so I it has two halves and it's to be more ergonomic and so on and yeah I got it and I still get used to it I do um I think yeah typing classes I would say like touch typing to type without looking and so it's still I'm still not 100 on this but that's why if I if I type something wrong here you have an actual um real reason because for me I just have a normal very nice keyboard and if I make mistakes it's just because of me you at least have like a new fancy style so we're good yeah but but you know what I like when I practice this uh earlier today I was like yeah I miss type things and um let me just take my other keyboard it will be faster but I already got used to most of my new keyboards things that hey I'm like okay yeah just let's just go for it man jump off the cliff that's fine this is easy the tag the props uh which is could be a class could be a value but could also be an event handler like on click on input whatever and then we have our content which we said is called children okay okay here on the mount we can read it as it's going to happen so we mount a virtual node onto a container so we take actually let me just comment something here for people that look at this this is to create a virtual node okay the the H function so when this is created we want to mount so everything went in the code it says V node we this is just what this will return right so we Mount our virtual node onto a real container here is an element in the real term right then we unmount um this is just a v node we don't need a container because we can get it from the v-node oh really I thought it was always like phenote.parent Dot remove or like this well that's yeah yeah dot remove but we have access to the parent node from here so we've just this is true remove this and it it's it's accurate pretty event um so and Patch this is rep it's basically replace oops yeah there we are okay replace the V node V node one with the V node two so okay V node one is the old uh version the v-node two is the new version okay so let's get back again to our example here let's take a look at it we have our tag which is a paragraph tag here we don't have to worry about it about props which is good and we just have the text here so let's see our virtual node we saw a little bit in from the presentation it's nothing else than something like this like there's a tag and let's like uh H1 for example and then there's crops which has classes or something and then here we have a text which is uh children which could be an array of things but could also just be a text but so yeah we already passed these things over to the H function right so we can just return this and just go ahead and remove this film you know and this already is this is our virtual node it's wrong easy it's the easiest part it's yeah it's just a very flat hierarchy object that just has attacked the properties and then yeah the children and the most let's say customizability will be in the props here or yeah all the attributes we can yeah because I can imagine if a prop is like an on click you might have to do an if else kind of thing here yeah yeah we we need to do something else so yeah here we can see it still nothing happens because it's nothing is mounted yet so let's go back to our code here this this is what we call so we have our app element here which is just a div that has an ID app and we want to mount our virtual node which is here called vdom onto the app and we have this also here just uh vdom is called now V node and the app is called container because we will reuse this uh so let's see so here first we need to create an element with a document dot create element and this would be something like H1 uh yeah so something like this and we already have this in the in the v-node right because we already have the tag here so we can already put this replace this with B note Dot tag and then so now we created one an element this is the element the actual Dom element that we will Mount onto our container so to mount it it's just adding it as a charge so so to say this is also how it's called is uh container depend child and we attend the element here yeah so let's see is it maybe a 10 children I think it's a band child it's all right okay yeah it's not container yeah you know although already failing at my yeah yeah this actually makes sense to me because you're offending the child of the container and the container just let me see what's the issue here okay okay yeah okay I know what the issue is we already did now what oh my God I'm happy this didn't happen on when I gave this as a live conference talk yeah there you go super close yeah so now we see already something happened something is mounted also the paragraph elements so that from here so if we put here H1 for example uh we can see if we open this that is an H1 so this is actually being taken into account it's created and it's mounted it just doesn't have a Content yet why because we didn't set it so here in this case we have a text the text was hello right uh so we just go ahead and the element dot text content because it text is and then it's not in our HTML now because it's actually just text content yeah so here like see ah there we go this works and what do we want to render here well our children which we saw in the presentation can be attacked and in this case it is a text this is what makes the code a little bit weird you say children is just one element or just a text but let's just see and then now this works there it is nice the simplest version of our virtual Dom it renders something and this is pretty cool okay so now what we can do is I can remove this vdom because it was just to show how it's written and I import one another one here from the file that I have a vdom examples so this is the video one and that's Freedom so we can just keep it here and let's just take a look I have a bunch of different vdoms here that I want to show and for every vdom or version of vdom here I have we need to add some more code to our uh our virtual Dom engine yeah yeah again yeah to the Mount we have to add some stuff I guess to the mount to the unmount to the patch later on so it's in total it's six and now we are at the first one so let's just take a look at what's important now here this is an H1 which is already true here this is an H1 tag and it has a class text blue 500 which is not applied here we will see the second why but the text is rendered as expected uh what now we need to do is we need to go ahead and see how we can at this as an attribute so our prop right so this is in our uh our prop so let's see so our v-note uh let me just put this as a comment so our V node dot props this is something like this uh class and then we have here our text right this is what it looks like so but it could have more more than just class but yeah let's just say like we go four and we have a key in our Vino dot props and then let's just uh log it out so let's log out the key and also look let's look out the value so uh this autocomplete isn't as great it's autocomplete into typescript for you even though you're not in typescript that's interesting yeah don't ask okay so let's just see what happens here already in error p is not defined okay yeah oh I have to do the ponds yeah exactly yeah okay so here we have the class and then we have whatever goes into the class so how do we Define a an attribute in uh JavaScript it's just we have our element here so we're still working with the same element we just need to make some changes and this is called set attribute and then we set the attribute here it would be class right but we can already say this is key the key because this is good plus and uh what goes in there well the value that we have there so we can also copy that from there so here yeah we just go over all the props in in our examples it will be just one or two props so how it works it goes over all of them and then it applies it just sets the attribute and that's it so let's just remove the console log okay so this works the text is bigger it's bold and and yeah I think that's that was it okay so this is our example one works now let's move on to our example two uh this also has a class it has a gray background it's rounded and it's it has an uh a click Handler this is actually also how in view three the vdom looks uh of course defined with right and let's just see uh how this looks like let's go back to my file here I just replaced if we don't want to feed them to so yeah we have our button here so we see the classes are applied as we expect but when we click it I'm clicking now nothing happens let's let's just take a look at this so we have something weird here we have on click is and then our function here as text which is not what we want this is not how it works uh we need to we need to set an event listener and uh what's so how can we detect if this is an event or not let's just say for there are no uh like let's say all the attributes that are supposed to be events start with on on input on change on click and so on so we can do something like if if the key starts with with on then we have an event and not how is there a function called starts with I've never used that that's cool me neither before this I I always use like includes for example yeah this is better yeah you could probably also write a regex for this but I don't know yeah it's not very maintainable so yeah this makes sense for this for sure yeah so okay when it starts with with on and we let's see again we have on click something like this here but we actually want to do is Click because what are we going to do with we add an event listener so to the element add event to listener and then here would be something like click and then we have here our function right yeah uh what we get on click and we want click so we need to do some string manipulation here in order to have to transform this so let's just call this event name there's our key and then we slice it we slice off the two first the two first uh characters in this case and then we have it we have just click but still with a capital letter and let's just say to lowercase you have to be sure and then it should be from on click like this to just click like this and let's just do this and what is our value is the same is it's the same as this it's just not the yeah it's just our it's just whatever the value is but whatever whatever is in there here it was a text here it's it's a function right so we save it let's try again there we go and cool it's I can't zoom this thing but it works yeah but let's just see uh can we uh inspect this I'm not sure if you can see the oh yeah yeah there it is so we have our event listener click so if I comment this out yeah well it's not there you know event listener so we added the event listener and what what's what's in there so we have the correct item here the correct element and here's our Handler which uh which sets an alert which is exactly what we wanted yeah and we can also see the on click here is gone because it doesn't even enter there to set the string it just says an event listener instead so I would say this is successful uh video number two let's go to the third one so here the thing that changes is so it's it's a div so this is just attack we have some props we already have this working but uh instead of a text it's now a virtual node so this is going to be an object oh yeah so you're literally just adding yet another one inside another header one yes exactly yeah cool so and here this is what happens in object why because exactly because of this because it is an object yeah because yeah yeah you see here it's uh it's just instead of text it's another uh H function right okay so we need to differentiate here a little bit so let's just see say if the uh the type of our children because this is the the issue right the children are not what we expect so if this is a string we can render it out as a string let's just put this there yeah but this makes sense not if not we have our um you can already see something happens in the object so we are now in this else so what are we going to do here uh we actually this is where the recursion uh comes a little bit in let me just write the code first we Mount our element our children children exactly to our elements so what does this do now it calls itself which can be mined bending when you when you're not like that into recursive but this is like it enters again but at some point it's going to be a string it cannot be endless and when it's string it uh it just renders it out or it changes the text right and then it's over so it goes into this as long as yeah so it goes into this so if there would be another um virtual node as as children it would do the same the same the same until it's actually a text again and then it comes out so this is this is what it does let's save it and see and it works nice so now we have this so I can also demonstrate this we have an H1 here and let's just say we have another h of span uh let's have not oh let's just say you give it another uh oh it has to be an object yeah yeah we have to give it another uh let's see text color text Red 500 this makes it takes red and then we set you know ABC yes another thing so we can see that it still works and it does render out the separate uh span here so this would go on and on and on until at some point it's a text because it's recursive yeah so this is pretty cool let's just put it back yeah because we want to see Pizza I'm hungry now everyone loves pizza yeah yes okay so our next example so we are already pretty far right yeah we have attributes we have uh event handlers we can render virtual nodes instead only text and now comes a little bit more complicated we render instead of a virtual node an array of virtual nodes and in this case there's also one virtual node that has again an array of virtual nodes so this is also something recursive again the only thing we have to see is when we get our children what is it is it the text is it a virtual node which is an array yeah and this is what we're going to do now so what I like to do is just uh else if and then we just check oops we just check if the children is an array so we use the array is array oh yeah exactly awesome so this returns true if it's an array if not it goes to mounting just the virtual note but now we have in an array of virtual nodes so we go now it actually it's the first time it actually makes sense right the Vino dot children because I actually have children finally children not just the child children right and what do we do we iterate and so we have to be a child and when we want to do the same as here we just want to mount it but several times so the several times we have it we iterate through it and then we just let's just copy this here and well instead of uh children well we have this child who iterate over yeah and this should already be it so it goes in it sees this is an array it iterates and then for each of these children it mounts it onto the uh the element which then goes back again in and in some cases it's like oh it's a virtual node oh it's just a text or oh it's another array and all of these cases are handled so let's just oh I didn't yeah you need to save the few down also yeah oh so yeah nice so this is already pretty neat for our a noun function it does almost everything we need right it renders text attributes uh event handlers Etc uh children now actual children you see I'm into junk food yeah I'm hungry now okay so let's let's take the next one we're almost there wow this is a reference to a famous singer you know who I don't know I should know I'm a musician why don't I know this I don't have no time for no monkey business deodorated no Freddie Mercury oh no how can I not know this after the stream I'm gonna listen to some Queen uh it's called it's not called note uh living on my own or living on my living on my own yeah that's how it's called we can live yeah I'm gonna check that out okay so okay so what happened here so what happened here is it's a little bit a silly example but the idea behind it is we have a Dom with few elements and we just want to remove one of the elements so we have dogs monkeys and goats which are all rendered out here so we have here our text in on the top and then here we have our div with the dogs the monkeys and then we have also rendered our button which then unmounts and what is so it should remove from the Dom completely not just height or anything but remove completely from the Dom this monkey so as if we would just delete this this should be the result right yeah Okay so so this is already we saw a lot of How It's rendered so I'm not going to go more into that but the unmount function is still empty that's why when we click the button nothing happens yet so we have this here so what what you're supposed to do is like power node and then there is a removed child and then just because we want to remove right exactly okay so now let's actually before we do this we first need to find the parent node I guess we need to find the parent node and to do this that you just log out the V node to look at something yeah so we need the console I think if you click escape this whole event listeners thing goes away okay here we go yeah you did it already cool okay okay so let's click okay now we click and let's see what's in there we only have the children the props and the span so we don't actually have access to the parent node so we need to code that in to our Mount function okay so here we have our element and we can just say the virtual node let's just add it to the virtual node element we just set an element to well our actual element okay because V node is just an object doesn't mean it's just an object yeah it can put whatever you want yeah you can put whatever this in there and in this case I decide to save an element of the actual dominant because why not because we can so let's create that not a little bit slow or is it in this case fine because it's just one thing yeah I think I think it's almost coded like this in the in the actual view three okay if they do it we should be able to do it yeah I I hope this is correct because if not and have a new series it is like oh my okay uh so let's see so now we actually have access to something called L which is our element there we go this one and then when we scroll down all the way down we see oh here we do have access to parent node which then is this one so yeah now we can do actually the so we can go back to our code here so parent node is just our B node email dot l dot parent node and the child well is actually the V node dot element because yeah it's kind of funny it used itself to find its parent and then remove itself again yeah email for you it's pretty Macabre yes it feels French pretty dark okay did it work so never see it uh we click the button and it's actually removed nice nice and when we take a look at this you can see that it's actually removed from the Dominator or anything it's really gone okay so this is done this was the fifth one uh let's go to the sixth again that's the sixth the sixth one I don't know why it says seven here this oh but here it says correct okay so let's let's see what this is okay so it's not a bug it's what is it and then we click patch nothing happens but let's see what it's supposed to do in the example so we have a Dom here yeah which is uh let's just remove for one second this button because it makes it more complicated so the only thing that changes is actually the text here so it's not a bug it's a feature that's the only way it works in this life everything is just meant as is exactly and then here uh we have an uh well the button that is supposed to patch division six with the freedom 6 patch so as and the patch is literally it's a feature sentence literally right it's what do you mean with feature sentences yeah so when you click it actually changes the header to say it's a feature rather than it's a bug we're changing the the text in the Dom note yeah we we update the Dom and we will see now it's a pretty easy uh or simple implementation of it because it just what we will do in order to keep it short is just we take everything from the new V node and reiterate through it and we replace everything from the first uh V node and that's it so we replace all the texts and that's it so yeah after we're done I can go a little bit more into what would be there but let's just uh let's just see okay so we update the v-node one with the v-node two so how does this work we first need to create an element and this is from the uh V node one dot elements because the V node 2 doesn't have an element yet no because it hasn't been created yet it hasn't been uh it hasn't been mounted yet so so we can we can just to already this so we have access to it later when we need it okay so what do we do here let's just say we said we will replace the text so let's just say let's do again our our type check uh if our v-node uh uh two children if this is a string then do something if not do something okay so if it's a string we'll replace it if not we iterate through it until oh yeah exactly so yeah it's again a recursive thing here on the bottom but first let's do this so here we have our text content and we just replace so the L it's from the node P node one right so it's what we want to have replace it with the new one the V node two dot children okay this makes out yeah now nothing happens yet because it's not uh iterated over it yet so if it's not a text then we need just to patch it again or to enter again in the patch function until we arrive at the point where we will be able to replace or to render something new so we patch uh what do we patch so let's just write our function our a good old-fashioned four function something you don't we like those nowadays so we iterate through we could go either through all the children in the first or in the last let's just say from you know to uh iterate over all of those length and yeah uh enemies yeah exactly yes okay and here yeah we patch and we patch the B node one children come on there we go of position I with the one of final two position I okay I think this is by far the most complicated function even though it's not that complex once you see it work yeah yeah it will bring to this one it's it's harder yeah this is uh also because it's again recursive yeah so it has to go so it requires a lot a little bit of thinking through that's why I published this on on a GitHub repo so people can take the time look at it and then exactly so let's see the magic let's see the measurement let's see if it works uh patch so so this worked a little error I think you don't see anything oh uh is well something is undefined somehow yeah I I wonder why this works because it should be something like I smaller than oh you right maybe you're lucky because it's just one and therefore the I just goes through it one time and it's fine no but it's two elements right it's this and this okay like blissfully ignore and try again try again yeah where this makes sense I guess we're we're writing code so often with reactor view or Astro that we don't need real for Loops anymore apparently yeah yeah so um what I am wondering is for the people watching but also for us for you and me I wonder how many people actually know all this kind of basic JavaScript because if you have the meta Frameworks you don't need to think about this stuff like I have the privilege of being old so I had only right but then imagine I mean you're graduating CS college now you don't need this yeah you don't need it but I mean you should you don't obviously obviously you don't have to know all the document dots whatever functions but it's great to know that there are there are things that do something in the browser for you it would be not which would be nice like the basic things create uh at event listeners something that is still like very diffused it's still used also like in View and stuff but like all the things you showed me today this is just like my neighborhood to write code so to me this is quite normal but I really wonder what other people think when they see this stuff so if you're watching this chat that maybe can tell us if they work with this kind of function yeah I'd love to create yeah exactly if not I can go very quickly into why this is very simplistic because we look we just go like if it's not a string yeah you just we just iterate through all the things and uh just replace it blindly and let's just take a look at here the extended version of this oh you have some more fancy stuff here we go so yeah this is some more stuff uh yeah this is also a little bit written differently this is actually from a workshop I did with Avenue once oh cool so yet it's hard to keep up with that guy when he's typing because he types incredibly fast but some people have a certain amount of brain power that others don't I don't yeah it's awesome sometimes we had Daniel Rowe on the stream same thing it's just yeah also to come up with this right I analyze this a little bit I had to work with Avenue and then I'm like okay this is how it works I can teach people this but to come up with it yeah yeah you need to be some next uh Next Level uh sort of developer I think so yeah for example here we we would have a case where the tag name is not the same so let's say we had we had an uh an H1 and now we have a div what do we do yeah just Mount one and unlock the other oh yeah this then then it's different because then it's not actually patching it's actually unmounting and mounting yeah and then yeah this we have it uh yeah just replace when it's a string replace it and then we have something here uh the old v-node has a string children we just uh oh yeah okay when it has string children and oh my lights went out here okay because it's 6 p.m okay uh never mind uh what is this okay so if the old node has text and the new node has children so we just set the text to nothing and we Mount the new ones yeah yeah these are still relatively normal cases yeah yeah still normal cases then we have if the length of the children doesn't match for example here in the second one we didn't actually have a button we just have uh two texts and the buttons that's actually still from the first Dom we didn't touch it so this would probably be somewhere here so we have to search for the common length and then we have to patch it just until the common length so if we if we would use this then uh the patch would disappear in our case exactly what else what else do we have here I don't even remember what this is remove the children that are not there anymore so that have been removed the last one all children was shorter at the newly added children okay so yeah keep keep the old amount of children but add if there are more at the new ones so and this is also still simplified so this is can be there's also attributes uh to patch those in an efficient way and this is a little bit where the magic also comes in for VJs where it's effective right we're not just updating everything we just updated the things we need yeah exactly that's cool that all happens in this patch function but this is good for us yeah and we're we're already over the hour point and I think we we covered as much as we can on the on the virtual Dom here and this is super cool so I do have one question to me this kind of I'm not sure what makes it virtual Dom this is maybe where you can help me because to me this looks like normal Dom manipulation what makes this virtual Dom yeah it makes it virtual don't because because we have this abstract abstraction layer right okay of this malfunction of this H function and so on so we can create a virtual Dom that is not necessarily um like browser like bound to the browser so this Mount function and so on the patch functions one can be replaced with let's say webgl with something on mobile so this is where I get it it becomes more so this is if you look at this it's just a fancier way of doing things right we could just copy paste this basically and into our code and it would still work because you could essentially make the unmanned to unmount something from webgl or you know Swift or iOS or something and then it still works yeah that's cool exactly the same uh we don't yeah so you can make a feed on and we can write a flash application maybe we should try no I'm not sure browsers will still do that I'm out I'm out with that oh man that was fun no but this is actually cool so it's still just Dom manipulation but it's virtualized so you can optimize and do things here okay that's cool thanks yeah and and I mean if you have like for example the patch function if you would do this like hard coded somewhere and you would have it on certain on different places and then when you try to oh you you find an improvement right you make it faster you would have to change this everywhere so this is a nice attraction for that as well um so this is just one engine essentially that you can use anywhere yeah this is one engine that you can just reuse and I I think in in reality in in vgs you don't really deal with this kind of stuff maybe with the age tag so you can yeah put it in a render function but with all the mount unmount you can but you usually don't touch it that much what you might touch is maybe the age function that you pass into just a render function if you don't want to have a template that you can do but yeah uh you said we are over time but one last thing I wanted to show you yours I already prepared it this uh how does this tie into reactivity yeah let's let's talk about that for a sec because that's super cool yeah so here I wrote a small demo which does exactly that it takes our uh where is it ah here that we just now wrote and it takes the age the amount function yeah and it does a few things with it and we used a few reactivity engine to do our reactivity for us so we have a ref here which is a counter and then we have a render function which uses the counters value right so far so good yeah so this is just uh you can actually navigate there newer activity okay uh so yeah we have our counter and then we have a button that's it okay yeah yeah and so this is literally the same feed on thing that we did before yeah with so far with the only uh difference that here it has the counter value right and then yeah we render it once yeah so so now it's just here the render is just uh created the video so yeah and all of this is the same as well and here's where the reactivity comes in you have our Watcher right and if something changes within our our what our vdom so in our render here if somewhere something there changes then we patch the V Dom with the uh new video and then it it updates within the within the well yeah it touches it in our patch function so yeah it's literally just changing the HTML because that's how it wrote the patch that's cool exactly and let's see if it yeah it actually works there you go nice noise and this is yeah this is how we we could tie it into a reactivity but it's actually so easy luckily we didn't have to write our own reactivity but you do have a talk out there where you do this same thing about reactivity right yes yes I do I gave it a few times and the last recording of this is uh from October last year in bgs Germany so I can I can send you the link because it's a pretty good recording I can send you the link so you can put it down here if you want to see this yeah put it in your chat step by step with your activity awesome uh reactivity is a little bit more complex to understand than the the freedom but I think it's it's nice so so you could write those two by yourself and then you have your own mini view.js which is pretty exactly I think it's this one I just Googled it and I you came up at fujs Berlin oh yeah yeah let me see if it's actually correct yeah it is four months ago yeah perfect yeah yeah then it's if anybody is Keen to see how that works try to follow this but you're gonna have to take a quick picture of or type it somehow yeah or I actually have um go for it just put uh mark.dev Slash reactivity oh yeah that's easier no I think just reactivity now I'm not sure let's just see mark.dev Slash any activity yeah yeah awesome there we go that's easier so if you guys go there you can actually see all that reactivity stuff because if it's a similar talk to this like for me it was always the black magic right this vitam thing I kind of got because I have this old school stuff I always used it with a reactivity one when I saw that is magical and so there's so much coolness going on there yeah so thank you man that was super super interesting yeah thanks for having me uh the reactivity the cool thing there is um I go into how practice work and once you get that you get how all the reactivity Works behind it and you can build your own cool things with just proxies and you can play around with it if that's something you're interested in yeah super cool um we might do another installment of this stream where we do that when we have another hour awesome so um where can people find you people can't find me mostly on Twitter with uh prepared look yeah yeah and for you at with the mark ba uh mostly I'm there if not just go to mark.dev there I have uh a bunch of I'm on Instagram and Macedon yeah I follow your airplane stuff there actually yeah I guess I I saw you following me yeah so that's foreign so if you want to reach out to me if you have more questions Twitter is always the safest bet because that's where I'm most active yeah awesome man thank you so much for your time I was looking out for this this one to do this stream because I thought you were one of the better talks at most conferences where I see this kind of stuff so I'm very happy I'm very flattering thank you it's just if it's good it's good I cannot like I wish I did at all let's be honest super cool anyways and thank you so much and for all the Watchers um see you again soon and cheers thanks everyone for tuning in