What the Heck Do "Declarative" and "Reactive" Actually Mean?

So that's what this workshop is about. You heard these words a lot, probably you read them a lot. Maybe you know more or less what they mean, but we want to really dive deep into what they mean with interactive exercises so that you can then really use these words with confidence, talk about other frameworks, about pros and cons, and yes, just be part of the discussions. Every one of you has been a kid at some point, and maybe you have kids, but there is a situation where you just need to have someone tidy up their room. And in such a situation, what could you do? How could you get someone to clean up this mess? So basically, you could do different things. You could say exactly what to do. Go pick up the toys, then empty the bin, then remove the dust, then do this and that and further and so on. Finally vacuum the floor and exactly telling the person what to do. Or what you could do, probably that's not what's done, but for the sake of my example of what we'll be talking about, you could say, hey, here's a picture of your room in the way if it looks clean, and here you have 30 minutes to get the room into this clean state. The left-hand side, or you can already guess which of these sides is the imperative approach, which of them is the declarative approach. What would you say? So you can just answer me here or in the chat. Perhaps here in the Zoom chat, right now I cannot see the Discord chat while I'm sharing this presentation. So what do you think is the left-hand side, imperative, or the right-hand side, the declarative, or is the other way around, is the right-hand side imperative and the left-hand side declarative approach? Without having defined the things yet, just to see what you already know, what do you think? So now we get some answers in. Here we see the first one left is imperative. The one on the left is imperative. Left imperative, right declarative. Yes, that's exactly the way. Imperative voice of exactly telling someone, giving exact instructions of what to do. That's like an imperative way to clean up the room. And the declarative one of describing the state in which we want the room to be, and then having the kid in this case, figure out how to get there themselves. So yes, imperative and declarative. So this is what we'll be talking about. Just a few words about me. So I'm a freelance software engineer. I built a mobile and web applications with react and react Native. And I began with these technologies in 2015, when react Native at that time just released the iOS version. And next to my engineering work, I also teach. I give company trainings, but I also sometimes teach people who want to change careers and I'm also active on Stack Overflow and sometimes do things like these workshops as part of conferences. Okay, yes. So also again, some motivation, why are we here? Yes, the term declarativeness, also reactiveness, they pop up in a lot of different places and documentation and we want to see like deep, understand it in a more deeper sense what it actually means. Okay. Because modern front-end frameworks, they all say they are declarative and reactive. That's how you want to build front-ends, but we want to also now investigate why. So we will have a look at the browser and the app state. So how does the browser and the state in the app we are coding interact? We want to then see how we can improve our web development experience, the developer experience with reactiveness. We want to then look more at the term of declarativeness and how user interfaces can be described in a declarative manner. And also more concretely, then moving away from vanilla javascript, which we'll be dealing with in the beginning, to frameworks, react and svelte. And so you will have some hands-on tasks in vanilla JS, react and svelte. And you don't have to already know svelte, it will be simple examples, but really just to bring home the knowledge of these terms. Okay. So let's begin with our very first task of just a vanilla JS counter. So what could this look like? Eventually we'll adjust the function here I created, called it update, which takes in a value and then just renders this value, really updates the document object model with the value given. And now it's really hard coded. It's kind of like always updating this one html header here. But basically this second step, this update step, that's a step we don't have to worry about anymore using modern UI frameworks. This is a part they want to kind of do for us. So let's have a look first a little bit of what the browser actually does here behind the curtains. I'll share. Okay. So you can now see the slides again. Yeah. Okay, cool. Yes. So I also try to not to miss the questions. So I have more an eye on the Zoom chat right now. Okay. So if you have any questions, please post them there, not in Discord. While sharing. So what we continually have to take care of in this imperative approach of directly kind of grabbing the document object model, getting an element and changing the value, we have to take care of this constant value synchronization. We have to make sure that the state always translates to the thing we also see on the screen, which is in the DOM. Yeah. So to keep hold of the app state and the UI state. And yes, that's already what we did to update function. So how does javascript actually interact with the browser? So here's a small thing I drew to look at it. So we have our app, yeah, which basically first has html for the structure, css styles, and then some javascript code. And as we see, the javascript can have like has hold off document object model via this document variable. And but before the javascript comes into play, the we are sending the html to send html to the browser. And inside the browser, we then have the html showing up inside the html code, we have probably some scripts attached, some javascript scripts, which are then read. And via these web APIs, which you see here in the middle, we have access to the document object model, we have access to events, things like set timeout, set interval, these are things the browser provides us as developers via web APIs. But when we now follow the path of document, yeah, the DOM document object model, we see that the DOM kind of which I drew here is kind of this, this tree like representation of our user interface, which is then translated into the pixels you then see on the screen. Sorry. What you see here on the right hand side, hidden also inside the browser is also the css on this kind of a tree like representation of all the css we have. And all of that is powered by the javascript engine, which is running in our browser. And that's, for example, V8, if you have Chrome. So yeah, that's basically the browser. And we see we have to constantly interact here. Yeah, between those two things. So that's what I just said, the javascript engine reads the html creates the document object model out of it. And this is basically then our html file and how it gets translated into the DOM into this javascript object. And engine then uses the DOM to render the user interface. And here again, with rendering, I mean, really the graphical rendering of something of a data structure to pixels on the screen. And our javascript code can then constantly update the document object model with these web api's where we specifically use document object. So yeah, this is this constant synchronization, which we have to take care of if we work imperatively. And the question is, why is this not optimal? Or like, yeah, what can you think like, what can you tell me like, why? Yeah, what are issues with working imperatively? Like in this small example, it worked out quite fine. Like we, okay, we grabbed the element, and we made an assertion. Oh, let's, let's maybe let's then find out. I prepared some exercises, where we will stumble upon these issues. So let's talk about reactivity. And a little bit. So what is reactive? Yeah, an Excel sheet is reactive. When I have some formula arranged, like here, I change the date, boom, I change one field, and then by the formula, another field changes. That's reactivity. I don't have to explicitly then say, yeah, okay, after this, if this field change, then please change the other. I just described the formula, and it will then make the changes as soon as it sees that some other field is changing. And we want to, for example, here's like a small illustration of what that actually means if something is reactive. I'm here in Visual Studio Code, and I am using a small, oh, am I sharing? Yes, you see, you see Visual Studio Code. Okay. And I'm using a small plugin here, which is called Quokka. Maybe you already know it. Like it's an extension, Quokka is the name. And that's really cool for such live demos. Because I run it here, and you see here in blue, it directly shows me the output in line. I don't have to run node.js separately, but it directly shows me output. So this is like I'm having here a value, which I declared and assigned. And now I want to create a reactive value. So I want to, let me just create a copy. So I have the count copy equal to count. And I want to also here put my count copy. But so what happens? So here I have my copy, then I reassign the value of count. Count copy still remains zero. Yeah, that's of course, here, that's what we expect. Because in javascript, of course, here, this count, sorry, the number is a primitive data type. And of course, if I copy a primitive data type is copied by value. And then of course, the count, although I changed the count, count copy is a separate value and won't change. But that's basically what we want when we want to have synchronization reactivity. So what I have to do now, I would have to manually again, keep that whole thing in sync. If I really want to have it reactive, that's not really reactive, I have to manually kind of sync. And that's basically what I have to do. That's basically what I have to do when I want to keep a value of my state in sync with the value in the DOM. Yeah, let me run Quokka here. So I have here again, these two values, the value in the DOM being a copy, a synchronized copy, and they both have the value of zero here in this line. But then I have to like when I update the value, I have to then again manually kind of copy it. Because so in order to really have value and value in DOM in sync. So this is kind of again, just as a simple example to show you what has to be done when you work imperatively, you have to always keep everything manually in sync. And another example one could look at is here. You could somehow think of a mother and a baby. And as young kids, they have like this, this bond, the mother, yeah, is always connected to the baby. Let me run the current file. Yeah, and mother and the baby are connected. But then at some point, the baby becomes independent. And if there is no, if this parental bond is not renewed, then the baby will remain independent. Sorry, if the baby gets independent, then yeah, you have to update this bond. And then the child is independent, if you don't do it, the child will remain innocent. Yeah, just as another stupid example. But just to bring home this connection, you constantly have to update. So this is what I just showed you. And so what we actually would love to have, which we don't have here somehow, is some reactive copy. Yeah, that would be lovely if we could have something like that. Yeah, like I just here, show you this dollar sign and the colon. When we create a reactive copy, and the count and when we then later change the count, when we reassign the count, if then the count copy also changes, that's basically what we want. To have a reactive user interface. So this is actually what modern front end frameworks try to achieve exactly this reactiveness. And this you can also describe as the UI being a function of state. You probably already heard that a lot, and that's the idea of state driven user interface. The UI is basically only a representation of the state, and then putting a function around it, the function would be any kind of way you change the state. That means the function f when it changes the state in any way, the UI directly represents it reactively. So we get, this brings us to your third task. And in this task, you start with the code pen in here. And I will, this is your task description, right? I will then post it into the mirror board in a second. I will post the hints also there in a second, but I want you to first try it yourself. So this is how you start this part of the code. And what I now want to do is let us try to just refactor the counter from before. Right now it doesn't do anything, but we have pretty much, we'll pretty much the same code in the end, but now we have a state object where you define a value, set value function, and an update function. The update function is the function which is updating the DOM. So here we have the, as before, yeah, the function which manipulates the DOM and the set value function will manipulate the value. And the on click is the handler for the button press to then call the set value function. So give it a shot. But now let's first have a look at what came out of it. Is there any brave volunteers to demonstrate us their solution? Okay. So this was the code before with the update function. And the way we can rewrite it is with the state object that we have our value and the set value function, then manipulating the value and we can access it with this. And for this case, it was important also that we use really the function keyword here that we write a function expression and not an arrow function expression because the arrow function expression inside of a field of an object has access to the outer scope. And it's like to have access on other fields inside of an object, we need to write it as a function expression. And then we can also do both things in the set value function. We can, we will set the value to the new incoming value, and we will update the value. Or maybe let me rather show you then I can highlight things showing it inside of code pen. Yes. So inside set value, we are setting the state value and a second thing, we update the user interface and using the update function, which takes care of all the DOM manipulations. And what we what we get is in our on click handler, we only we have a state dot set value function and can set a new value. So there's already one step in what such a framework maps does under the hood. It extracts away the process of manually, of manually having to update the DOM. We just call a set value function. And here, we don't have to care about actually manipulating or re rendering that's done for us. So we can imagine this being kind of very simplified code of a framework, a front end framework, which is implementing reactivity. Okay. And yes, exactly. So this is just we can focus on this part and don't have to think about the rest. And the update is taking care of the rendering. One point I want to discuss and then the exercise will come after the break derived values. So they want to show you something. And this will be inside of here. So um, so far, we talked about just values. So we will now ramp it up step by step. We'll talk about derived values. And then we'll talk about conditionals, see how complicated this whole thing of especially conditionals gets with an imperative approach to really, really see exactly why a declarative approach is helpful. But also now we continue talking about reactiveness first. So if I have such a situation, I have a count value. And I want to have a double value, which I which depends on the count value, yeah, then I describe it as wrong keyboard as count times two. And the thing here that count and double at this point. Good luck. Yes, have both of the value zero. So they are in sync. But now of course, I also have to keep my here my double value in sync at this point, sorry, I have to manually rerun the whole computation, just so it also works here. If I don't have it, then double is still zero. So that's again a point of reactivity. That's closer to the Excel example. I have to manually rerun the whole computation. And you see how and the imperative approach gets more and more cumbersome at this point. So maybe already begin to share your next task. So which you could already start if you want, but we will have a short break there. But if you want to play around with it, the next task is the task number four, which you find in the mirror board. And the task number four is it just give you an intro to it. You start with this code. So you can just continue with your code, which you already wrote about the way you edit the state. But you could also just begin with the link, which you find in Miro. And then I want you to add a double field here and also keep that in sync. But kind of I want you to also hide all of this functionality inside of this state object, which is kind of now a representation of our front end framework. Yeah, cool. So you now got the exercise of adding the derived value into this code. So as far as I understood, it's basically doubling the number that we've had before. Yes. So this is the approach. So now we have the new double variable. The only two additions that I've done is simply doubling the input value in the double and then putting it out in the new h1 that I've created here. Exactly. Yeah, exactly. Perfect. Thank you. See, isn't that hard to share? Well done. Thanks. So just as a comment here, yeah, as exactly as Omar did, yeah, he had to add two things to the set value function, like updating the value and also having to add again, a new entry here for manipulating the DOM. So for every new thing you change at the value, you would have to then think about, yeah, how do I actually update that in the document object model so that it can then be viewed by the user? But let's ramp this even more up and let's now go to the next task of conditional logic. We have some new code. Ah, and then we see Karin said her solution was with the getter of function for the double. And that's very interesting. We will get there. This will be later on, I will also use the get and set methods of the object. Yes, when I talk about real, like truly reactive as compared to kind of fake reactive with such a set value function. So Karin, yeah, that's cool. So we will look at your solution later. And so what task now you start with this code or with the code you just left off at, and now you want to add a conditional condition in it. Yeah, if the count is bigger equal five, you want to show a celebration. What was it? What did I say? A congratulations message. And so here I think I will also now copy the hints there quite early because this vanilla javascript stuff is something maybe you don't work with every day, being used to using react all the time. So here I also opened the hints for you of what you might have to do. Okay, so I get a few minutes. For this task, how can I actually in an imperative manner, get conditional into my code? Okay, now the microphone has been. I think I have to ask a few in Miro, I have to lock a few things. Julian, could you move away from this one message you're on? So it's like I think people cannot really get to it because you are kind of in editing and Vitor as well. You are on this hint and then it's hard for the, Vitor is not here yet. There you are. You somehow still add this one. Can you just click, Julian and Vitor, can you just click somewhere else on the Miro board? Actually, I just refreshed and I'm still on it. So yeah, Vitor managed to go away from it. That's good. But Julian, you're sticking there, not moving an inch. Okay, this is strange. Give me a second. Yeah. Ah, now I can tap open, that's it. So now I'm locking these things. I think then you can all still copy paste, I hope, but not edit it. Okay. So where are we? Now we added the conditional logic and what we get out of it should be something like this here where we also add some code groups to manipulate it or wait first, like does any one of you want to share? It's always exciting also to see some other solutions. And you saw Omar did a great job. You can do it too. I can just share if it works. Yeah, let's hope. You see the code panel? Yes, looks good. Yeah. I just declared the element here, put the inner html in and then inside the function I checked if the double is larger or equal five and then inserted the node. Exactly. Can you test it just so we see it really works? We already see it a little bit. Is it refreshed right now? Or when you just change? Ah, yeah, now it refreshed. We see. And then? Yeah, I wasn't sure if it should put more congratulations in. I just thought that one is enough. So you showed us when the double is bigger equal five. I thought the value but that's pretty much the same thing. If this double is bigger equal five. But it doesn't matter. It's pretty much the same. So that's why I put it. But this is some interesting code here. Or has someone of you directly something to add or some comment here? Maybe some inefficiency they see in the code. You could create the node in the start and just add the inner html in the if statement. The inner html. So what are you so on each update now? Exactly. Yeah, this is one thing. That yes, in line seven, like you mean line 15 and 16, you could probably get hold of the elements outside of the whole state object, right? Is that what you meant? No, I meant I wouldn't create, I wouldn't append the node in the update function. Because you just add stuff to the document every time you update and you could just create the P element, like in the start and then just change the inner html and the update function. Yes, yes, exactly. So you would kind of insert like an empty DOM element there at some point earlier, and then only update its contents. Exactly, that's one thing. That's what you could do, because what is actually happening here in the code now, which is shared, that we see that if this, like line 17, if this dot double bigger equals five document body insert before. So like when double has the value of five, we insert something. When the value is six, we also insert, and seven and so on. And it would also stay if you decrement, if you add something like decrement and you edit the node before and you decrement. I know we don't have the feature, but if you would do that, it would also stay there. Yes, exactly. It would stay there. You're not cleaning it up. So for example, just you know why I gave you this exercise to also really give you a feeling of how complex DOM updates are given the state value changes. So you have to really think about how to manipulate the DOM given every change. And for example, here you would like reinsert congrats, congrats, congrats, every time you press a button, and you would have to really think how can I optimize it in this way we now did like Lotte already now proposed another change to make it more efficient. Or what you could also do, you could say, because we only have increment here, not decrement, you could say if double equals five, only at this one point, you insert this, the congrats node, and then it remains there all the time. And not you not have it for bigger equal five, but for equal five. But these are all things you would have to now think about, which have nothing to do with your the logic of your application, basically. And you see like, when you build a UI imperatively, you have to think just a lot about this whole synchronization of state and browser. And Michael's also giving here comment, like, well, let me see what is what Vito wrote something validate if the node is already on the DOM before adding it again. Exactly. You could also add like another conditional and check. Yeah. Does this node already exist in the DOM? If yes, insert it. If no, don't. And you see have a lot of logic just involved about around DOM manipulation. And Michael says the double won't get to exactly five. Yeah. Another. So actually, my solution with my suggestion with equal equal five wouldn't even work. In this case, the double will never get to five. So then he would maybe calculate the double value, which is closest to five. So yeah, so yeah, or we have the double we have not integers we use, but floats, as Michael says. So yeah, this whole thing is super complicated, and we don't want to deal with it. That's why we have one of rather work with modern frameworks to do this work for us. So let me just also show you some slides. Now. Thank you very much for sharing, Julian. That was really great that we saw your code. So we could really have this discussion. Thanks a lot. And let me know. Yeah, this is the conditional logic. That's what I came up with. Like that's only if the value is equal equal five. Only then I go into this whole thing. And so, yes, as I said, you have to remember all these internals and do all of this stuff. But basically, what we kind of, and another downside of this whole thing. So when looking at the html, we cannot directly infer what our user interface will look like, because we are kind of having this complex DOM manipulation there. It's so hard to really look at this code and then see, okay, what will my code actually look like given a certain state? So yeah, the html will look very different, given this javascript manipulation. Yeah. And so logic is built around DOM manipulation and not around state updates. Instead of bigger equal five, I use like equal equal five or something else. But I want to like think about the state change and not about the DOM manipulations. So let's move from the imperative to a declarative manner. So we don't want to give exact instructions of how to tidy up the room, but only like declare, this is the state of a messy room. This is the state of a tidy room, and then let the kids do the work or let react or some other framework do the work for us. Yeah, not the how, but we want the what. So for example, the description, like on the left, yeah, says how to manipulate a user interface. And when we look at the language like svelte, which also uses templates, we see, yeah, what if we could just describe the thing, given the state, given the state of the count bigger equal five, please show me this paragraph. And a very similar fashion, we are all doing it in react as well. So let's look at react and svelte. And react is a declarative UI framework, and I didn't ask that before. So I see a message, the problem states value is bigger equal, so the validation should be against value, not against double. Yes, Victor, exactly. So in my head, I asked for the value, so the value can be five. So this would then work with equal equals five. With double, it gets more complex. So but just I didn't ask, like I just assumed every one of you is familiar with react and uses react, I guess, because it's part of a react Day Berlin and the react conference. So the next task will be super easy. But I want you to still kind of do the next building the same thing in react. Just so that we see, we'll be able to feel the difference. And the next thing after that will be to do the same thing in svelte and see how actually react is not reactive out of the box. But svelte is. And we will then see exactly what that means. But yes, so now we would go to task number six, the counter with react. And so the first task is to just create a reactive state value with react. I will publish the hint in a moment. And I think we will do it as a double exercise to also then already exercise number seven. So actually, the starting code of exercise number seven gives away the solution of task number six. So you can use that to just and then continue. So we have our default value set here. We have our derived value, the double. We have on click handler, which uses set value, which now comes built in into react. We don't have to code that ourselves with all the imperative commands. And yeah, what about this, about this here? Yes, so line 12, the conditional is just nice. Yeah, we don't have to think about how to manipulate the DOM. We just describe the user interface, given the state value bigger equal five, this will be shown, smaller equal five, this will be shown. And you probably have also some other solutions can done in different ways, and maybe more efficiently or what. But yeah, this kind of just the idea we there's no direct DOM manipulation anymore. And look at the chat. Yes, and there's a comment of lot I could use here to double the logic and pass and operator to get rid of this ternary operation, which I showed you. So this would be a little more efficient code. I just wanted to explicitly highlight the two different states, yeah, state value bigger equal five, and then the state where the value is lower than five. Okay, now, I want to talk with you about why is react like, okay, it's reactive, because we kind of thought so it's declarative, definitely, that's super nice. But is it really reactive out of the box? And actually, the answer is no, we have to like, use this construct, yeah, react use state, and all the variables, which are actually, like, stored in this reactive state are eventually reactive, we have to also then change the value with the set of function, and on these state changes will be reactive on these state changes will be translated into DOM updates. And here, I think who was that who had the comment before of using the getter and setter? Ah, Karin was that, I think. Karin also has another comment here. Yes, which is a bit, yeah, exactly, if we have value equals zero, there might be an issue with some solutions here, which when you use the double ampersand, and that's very good, but let's not go into that detail right now. I want to focus on a truly reactive user interface. And I just quickly go back to the vanilla JS implementation. Yeah, here, I also kind of, you know, fake a set value, function, set a function, like the one in react, yeah, like the set value here. But when I refactor this code, then here, I refactor the code, I didn't have a set value function anymore. But I here now made these values, internal variables, and only expose the value and the double here, the double with a get, with a get method, and the value with a set method. And by using this and like updating the internal values with the set, and then being able to retrieve the value with the get, I here can write it in a way that I just really assign a value, I can have a reactive value via assignment. And that is actually something truly reactive, like in Excel. We just assign a new value, and we don't have that in react. But let's look at the framework, which does have this reactiveness directly built in. And that is svelte. Does someone want to share their screen? So what did you do? Which changes did you make? So I just created count here, and then changed this to use count. And then on the on click, just added count plus plus. Yes. Yeah. And super simple. No need of any special set state something method. svelte really has this built in with count plus plus. Basically when you write it out, it's count equals count plus one, as we all know, which is a value assignment, and really having a reactive update of the DOM just via value assignment. Excellent. So what about derived values? This is your next task. Thanks for sharing, Laura. Oh, wait, I'll show you quickly. There's one slide. Just to have everything on one slide. Yes. So we saw that on the left hand side, yeah, we have a set of function, which we somehow were able to, yeah, like, mimic, yeah, with javascript, and the set value coming from react. And then on the right hand side, we have this direct reactive assignment, where we have a reactive value directly by assignment. And I can highly recommend to look at this talk of Rich Harris, he's the creator of svelte, talking about rethinking reactivity. This talk is really about this holiday, what is reactive, and how react actually isn't reactive out of the box. And how you, yeah, like how react was about rethinking best practices, and svelte then as well. svelte, rethinking the need of, for example, of a virtual DOM. And svelte doesn't work with a virtual DOM, but works as a compiler, compiling the code, so that then the DOM manipulations are hidden from you, but they can be then done efficiently for the different states. So Vicky already gives a reply, oh, okay, not really the same, react sucks. Now this is not, and now there's a lot that says maybe svelte is the cool one now. So it is kind of like really cool when you look at it this way. react really has also much happening and going on and being in the change, and the ecosystem of react is just still much bigger. But svelte is truly very exciting. And also, yeah, just thinking about like, do we need a virtual DOM or not? And really having, bringing some new things out, just like react did back in the days, and how react really influenced all the other frameworks. I think svelte will also probably have some influence on some frameworks out there. Exactly, yeah, and via variable assignment, which svelte kind of brings to the table, vanilla JS kind of becomes Reactive. Exactly, oops, did I already show too much? No, this is the code exactly, which we already saw. Oops, and this, no, this was already too much, but this is your task now. The next one is, let's have a look at the two other things we did, derived values and conditionals. What is that like in svelte, just to get an idea. So the next task is already task number nine. You perhaps already found it in the code, and I think task 10, I still have to update the link. So get your hands on task nine. Oops, did I also not update the link? I think maybe that's not the right one. Oh, it is the right one. Yes, it starts with that link. Task 10, I'm updating. Okay, so try to add the derived value. And if you don't know how it works, yes, please use Google to check how to do it. And it's really also not very hard to do. Okay, who would like to share with us there? I just created a double variable and then on click added assignment to double variable. And then I added paragraph with the text, congratulations, if the value is more or equal to five. And it works. I don't know how to reset it. No, nice, I haven't logged in. Yeah, thanks. Thanks a lot. I really like this. I really like this because I want to let's look at this together. So you as a you created in line three, a double value. Ah, now I can annotate now. Okay, you created this double value, just also as a normal javascript variable. But what you also additionally did, you updated the value in here manually. So that is not a truly derived value. Right? So what is a derived value? So because you updated the description for value. So you describe, you describe here, yeah, the relation of this value double to the value to value. So you just describe how they are linked together. And then later on in the code, you actually never have to do something like that if it's a truly derived value. And the thing is, this way, it isn't a derived value. This way, it's just storing. Yeah, value times two, at this point in time of execution in line three. Because you don't want every single value to be a derived value. You don't want every thing to be reactive, you know, like an Excel sheet, that when one thing changes the other one, some values you just want to store, like if you want to store the double at this point in time, you do it like you did right now. But if you want to have a value which changes whenever this one changes, then we have to do what Karin already posted in the chat. You use the dollar colon symbol. So instead of let, you use dollar colon. Let's maybe do it together here. Exactly. And this makes double a derived value. It is now depending. Like it's kind of, you know, like married to the value. Like this mother and the child, yeah, example, which I gave you before, they kind of belong together now. That's even easier. Yeah. And that's like this power, like in react also, maybe can I quickly share? Where's the react one? You probably know that. Like I did the mistake, I think in the beginning, and I see it a lot of react beginners do. I teach also react to beginners that people in react think, okay, every state which is somehow every value which is reactive, I have to put in a state. So what people would do often, then create like here in react code, double, set double. And then they would make like take a use effect, and somehow then set double and set this to value times two or something super complicated. And not necessary, because in react, derived values can just be made like that. So I derived value where I just described once the relation to a value which can change, which is reactive, and then this one is automatically also reactive. Yeah, in svelte, I then used like the dollar colon to describe such a relation. So there's something in the chat. The question was, is dollar colon like the prop of react? No, yeah, you saw it. You saw it here. It's maybe similar. Yeah, like a prop, of course. A change in props also triggers a rerender. But it's something different. So you also have props in svelte, which you can pass on. But it's really like this derived value. So in react, it's very simple to create a react value. Okay, and now the last thing, the conditional. Does someone want to, did someone already do that? Or like, that's maybe a quick exercise for you now. The last exercise, I saw it already a bit in the code. Yeah, Natalia already did some extra work. But let's take a look at the starting code here for the conditional. And here's also the hint, yeah, where you can check out how if blocks are created in svelte. So give you two, three minutes for that as the last part of, as the last exercise of today. And then I'll just wrap it up and give you a small quiz to look at some Flutter code, some very simple one. And after that, you can stay if you want and ask me anything. And we can have a small discussion if you want about declarative nurse reactiveness, react svelte, and so on. So what does wiki say here about the dollar column operator? I guess it's svelte specific, not sure react has same exact thing because of different ways both libraries work. Yes, that's true. They really work in different ways. So in react, you can actually just assign a value to something which contains state and it will be a derived value. And that's because whenever react updates the DOM, it will call the entire function component again. So it will run through and reinitialize this derived value. Because of this workings. It's very simple to create derived values without a special operator in react, but you need this whole react set state to even create a first reactive value. Yeah, does someone want to show us how they implemented the conditional? Because Natalia I saw it in your code, it worked, I think, but it was not kind of the svelte way of doing it. We have here our script not changed at all and here our markup. Sorry, I didn't really, you see, I just threw you into the exercises without giving you a real intro into svelte. But I think that's also just here to demonstrate a little bit of the basics of svelte and not a svelte introduction. But like here inside the script tags, you have your javascript code and below that you have your markup, which is like the description of your page. Like JSX describes the page and you like, and here you have this part of the code with where you describe an if block inside of your markup. And so here really, again, very declarative. So if the value bigger equals five, this part will be added to the DOM and will be part shown in the browser. And if it's not, it won't. So I have to say, I still also like, for example, react, I like react very much because I love that everything, oops, let me get rid of this code, that I have everything in one. I really enjoy working like that. I have my description of my user interface and then I can have my logic. Of course, I would have this logic kind of rather taken out into a custom hook to use it to really have a nice separation of logic of my app state and of my UI. But let me quickly do this small refactor like this. But then I like that I have everything here in javascript. So this is my logic and my UI below. Oops. Let's just update. Maybe I've messed up something somewhere. You need to move the onclick outside of the use count or return the onclick on the return. Thank you. Onclick is not defined. Yes, there you go. Thank you. Thanks. Yeah, missed to give that. But here I've got now all my logic nicely in a custom hook. But still, I love that everything is kind of javascript. And in svelte, I have like the separation of my template and my script, but I've got really this nice directly out of the box reactive values, which is super nice thing. OK, let me close with some final remarks. Let me see the comment in the chat. I think you wrote everything onclick. Yes, so we saw this conditional in svelte being solved like this. And when we put it next to each other, yeah, we have these some differences also in the way react and svelte declare the user interface. A last quiz I have for you. Now tell me, is the left or the right hand side here that the declarative way of describing user interface in Flutter? So both can be done in Flutter. And even if you don't know Flutter, just from looking at this code, what do you think is the left hand side declarative approach or the right hand side? So we get some answers in right, the right hand side. Ah, reactive. No, I meant, I meant declarative. Yeah, declarative or imperative. Which one is and you said the right hand side is the declarative one. And yes, that's the case. When you compare it to react, the right hand side, it's really describing, declaring what's there. And in Flutter, yeah, you have like this view B and inside it has a color and a child. And on the left hand side, that is very imperative. Because you are describing the actions. You set the color on something, you then clear the children, and then you create a new view and then you add something to it. So you really like the child, like you tell the child exactly what to do, how to clean up the room. And on the right hand side, you just show, yeah, that's it. That's the view. And that's what it looks like when it's tidy. So you already now learned how to see declarativeness also in other frameworks. So declarative and reactive code. Yeah, they often now come together. The new frameworks are like modern UI frameworks are declarative and reactive. So as you saw, it's a bit magical, because all of the intricate changes of the DOM, DOM manipulations are hidden from us, the frameworks take care of it, but it's much easier to reason about you just have, yeah, see what your UI will eventually look like. Okay, yes. So thanks a lot for your attention. And I really liked how you then did all the exercises joined and also shared screens and put up your cameras. So yeah, if you want to stay in touch, I'm on LinkedIn, also on Twitter, and Andrey Kovac is also my GitHub handle. So yeah, thanks a lot, everyone. So yeah, who still wants to discuss a little bit, stay in the call. The other ones I wish a nice evening. Bye.