Video details

Compile Svelte in your head | Tan Li Hau


Tan Li Hau

Speaker: Tan Li Hau github: @tanhauhau twitter:
"Hi, I'm Li Hau. Frontend Engineer at Shopee. I like to create bugs and fix them. Recently I am trying to write down my learnings and thought processes in my blog Also, I am currently a maintainer of Svelte, hopefully it meant less bug for Svelte."
About the talk: How does Svelte work? How is Svelte different from other modern frameworks? Why compile? Don't worry, I'll explain what is Svelte, how it works, and I promise you can fit all of that into your head.
Event Page:
Produced by Engineers.SG Recorded by: Michael


OK. Hello, everyone. I might add you OK? Yes, just one last one. OK, so today I'll be talking about CONMEBOL Smeltz. So we're talking about sports, so I'm not sure whether everyone knows about sports. It's like a fairly new ish framework. So, yeah. So I think last year is telling is the first year that it was in it for the first year. The spell was part of the survey. So you can know that it's relatively new compared to other frameworks out there, like the rear view triangular. Right. So one thing that is very cool about spell is that the initial bundle size, if you are using a spell from your application, initial bundle size will be much smaller compared to say so in this. I probably will share the link later on. So on this article, so there's this article saying whether it's the spelling skills. So if you look at a track, right, like if like this is like the initial the horizontal axis is the the size of the code that you write and the vertical axis is to the size of the quote that is being output. So if you see over here in Azuma where you don't really have much to go near to zero, you saw the blue line is for the bandos size and orange line is what felt right. So over here, if you look at it when you have a very small cut base, right, Fauria, you would have like a certain size Bandoola size that is being included, that runtime library. So it's like once you imperia and maybe you just do a Hollowell application, your app is like this is big in terms of size, but Fosterville is the initial one. Initial size is very small and. Yeah, and it grows linearly like with along with your application. Right. So more to this. But I'm just going to stay on this point over here for now. So today I'll be talking about compiles felt in your head. So why is that compulsively in your head. I'll be like I will explain why later on. So yeah. So my name is so Abimael myself. So my name is Nihaal, so that might be the link. You can follow me on Twitter. So I'm an engineer. I shop and also kindly maintain our spell though. So let's start with let's just start with like building an application like Web application without any JavaScript framework. So let's just do a recap on let's do a recap on. How do you create elements on when you're building a website. So like so if you are just using if you are using only JavaScript, then you would use something like just click to create elements. So here is how you create like a hish one element. You use documentarist element and then you set text content with Hollowell and then you open it. The body of the browser like done right. So so you have you have created like a page one with a text in it. Right. And when you want to update, say, the one like the header one, what you do is you can you can send the text content and then the text will change to the world. To remove it, you use. So what is are emotional? And lastly, if you want to espouse what you can do as you can over here, overhear think probably you can see the mouse cursor over here, you can create a elliman like style animal, and then you append like one of those costs as a content and then your pen and your head that will create like a they will create a style dynamically via JavaScript. And to you attribute that class to the element and you will have like an ABC class to this header and then you start it via text. Lastly is for for example, if you want interactive interactivity in your application, probably you probably would add event listeners over here to say unclick listeners and you will listen to click event. Yeah, so this is the basic of the basis of building dynamic application on the front end via JavaScript API, so you may be using the View or REAC or other frameworks, but it boils down to all these operations and very low level. You can write checks. But when we interpret it, you will create an element. And how does it create element still goes down to creating an element using this process API. Right, so. Next, I will talk about spelled so spelled is Web framework that is a little bit different in terms of the approach of how it works. So spell is like a compiler where it tries to when you have a spell component, it tries to compile it into JavaScript and it will tries to come up with like. All these operations as just a Joska output, so I'll cover that even more later. So that's like a rough introduction also. So let's look at take a look at how you would write a skilled component. So here is how you write like hello world. So over here probably, I think or benefit probably. We can go to the website here. You have a ripple so you can play around like a playground to play around, like writing a svelte component. So. So here is how you write. OK, so let me start with the first one so you can so spell syntax is like syntax so you can copy like fishermen in it and the syntax itself feels very familiar with them. It is purposely so. And a spell component you have you use a file that Entropa knots. Not quite so. So here, if you want to create a hash, one element with a helliwell, you just do it like you just write it this way. So if you want, like some stouts, you can add a stop Alltech and then you can target hish one to the element that you want to targeting. So one thing that's cool about this one is that. The stalls, when you you're writing like the start of this year is only within this component. So what does it mean is that if you have component over here and it also have a hash tag. And if you tried to include that component, sorry. Then the test only applies to the one within this company not. And the other components you only see one is one over here, then it is one, which one is missile? My next thing is I think we see just now, if you want to have just called on data site in your application, then you get a script. So here you create a script tag. And then if you want to use the light, you can just you can declare a variable like, say, name and end to use it. You use like a curly brackets around it in a template. So here I use brackets name. So this is the world. So you have had a world. So next thing is that to add event listeners, there's a directive call on of you so you can add on Kolon click and then you put in a function. So again, with like JavaScript expressions, you wrap it around with your brackets and then update its dysfunction. So when you click on Hello World, you'll start to see, like, console, right. Because this is how your event is now. Then next year you have you can change the data like just now, use name now and change it to spell so I can just set it like, like assign the new value to the variable. Right. So when I click it would change to world. So there's no sense at all that any API to do it. You just you assign it like how you would assign a variable and how does that work out later on. So I think we covered all the examples of here, so the next thing is we're going to talk about Kompass felt in your head. So how does so if you look at all these examples, right. If you look at this is a result and you could click on the output, you'll see that when you write this, it compiles to this code in JavaScript. So so what are you going to do now from now on, what is to explain this by bit, how each of them works? I will try to build from a very small like a high level to like adding endlessness and adding styles. And we will observe how it changes. So and then we will see, like, how each piece is pieced together in like a final output of a svelte cabala. So let's get back here. Let's go. So the first one is Helliwell. How will this one take? So if you write this, if you take a look just now, I think actually just now you will see something like this. So there's two functions over here or one function and one class, two sections. So the first one is a function called a Franklin, and it returns object with three methods. So each of these methods represents something. Right. So the first one the C represents. So how how you create how to create the elements and M is to mount. So how do you mount the elements that you create that onto the dome and the last one to destroy so is to remove when you say announce your component. So here I have like one equals element recognition. This if you click into if you look in the source code on how this implements the element will be there will be like document or create element because it's repeated a lot of times. So that's why we use a function is to to have a better magnification on the next part is the class like the class. So each component has a default spot and that default spot is exporting the component itself. And you can do the component like so where you instantiate it and pass in a target set where you want to match this component and then you can put in some props like data, right? Yeah. So and next thing is that if you can see here, this init function in a contractor and yes, we are passing a fragment. So this is how the the top part and bottom part links together. So you're putting a a function in the unit function and it will initialize the component and create this element. Hello Will. So if you try to remove everything I once felt, component is still a component you can still use, it is just don't have it, just an empty component. So Spell will always tries to optimize its output. So in this case, you still have a Estela's export some code like export import export that component. But because there's nothing in the template, you will pass on now to the crate instead of create. So this this just shows that your output grows or shrinks linearly or proportional with the code that you've written for application. So if you look at take a look into the init function, that's a lot of things, right? One thing probably I can quickly point out is that the thing that is like the like in the instance propertied that contains all the internal API, so probably you shouldn't use it even if you are able to access it. And then there's like a context and then stopped update and. Yeah, so there's a lot of things I'll probably call them later on. Yeah, more of it. So next thing is that we want when you add data, when you have a variable like inside brackets, what happens? So now you instead of. So now you have to play dynamically at the name in a text content, right? So one thing you can see is that whatever you write in the script, most of the things will be also part of the output. So here you write, let me because. Well, you will be copy verbatim over here. But if you er if you had one more function to update the name, you will see that the would change drastically from what we see over here. Here you see that we have another new function, a new function called instance. So instanced returns. So yeah. So let's go from top to bottom. So we right now we wrote down the text into two parts. So here you do not putting them anymore. You put in a context. The first item of context was that we covered it also. Then next thing is that because the text over here can be. Change can be will end and change as well. So there's a new metaphor here which stands for update and whenever it's dirty, which means like something has changed in the name, then you set data, which is to set the text content of the of the text no. To the update of value. So I think from now you can roughly guess that context. The first item in context is the value of name is being placed here and here. So how does the name comes from now, you take a look at the instance, for instance, returns an array function array of variables. The first item is name. So probably this will be strings into here. So we'll get that instance is also passed into the init function. So privacy, if you can recall here, is now because there's no internal state of a component. There's no variables. So it's now but once you add something, then it starts to turn into like a function. So there's no need for this function and dysfunction will not exist. Now you need it. Then you have this function. So inside instance function, you copy also computer code in a script and work with them inside the body of the function. So so now it's like, why is there such a change just now? You, you see like there's no instant function but now you have like what's happening there because it's Trex variable. So all the variables that you declare in a script, whether it's Mutata, that you. Plus, lastly, equipment, equipment it. Are you reassign at the new value you assigned to us then? Are you reference in the template you use to calibrate as you reference that variable, whether it's writable or not writable, whether you exploit this variable or not exploiting this babble like all of these behaviors are being tracked by stealth and it knows whether the name is being. Updated or not, that's why there's a change in output could. So let's come back to here, so shall we, we returned an array of variables that is being used within days, being referenced within a template, and the first variable that is being reference is the name. That's why you see the context here, over here and also is referencing here. So this this is like a bit I won't drop it much, but I can just assume that when it's one, it means the name is change. Right. Then you also see like a function call or invalidate. So what? Is that let's come back later, but so so we see, like the three parts of fragment influence and and how they string together inside, desperate to gain insight into it. Right. So how does that work? So conceptually, instance is a function that returns a list of variables so that we call it the context. And that context over here is passed into the function. So to create Franklin, so Franklin is this object. So I call it like a recipe of how to create Mount's update and delete. So like a recipe of how you control something of the component and then you call like 21. C, which is to create elements and amounted to the target. So now we cover what is on invalided, so whenever you write something like Nimmy goes to something, when you assign a value, you update it like incremented equipment it or you update a property of it, like a equals or something. Spell notices that and it will add. It will add one more statement invalided right for each of them, so we will know that, OK, name has changed in this statement after this name has changed after this complex comments, change of the D for a change. Right. So conceptually invalided function in like one variable has changed and the value. So you update the context and then the value is that the. And what it does next is that in a mandatory just set of variables that you will schedule update. So not the update doesn't happen immediately resample you if you have true statement of Namik or something conkle something, they are scheduled in one batch and then it is being flushed to the them at once. So. Yeah, so it's being flush once and then once after that, it clears that that the check. So now let's look at what happens when you add event listeners right over here, you add on listeners. So how does that reflect? Is that OK? So firstly, we have to whatever the code is written in the script and copied over verbatim. And is the function then when you have an event is not in the mountain and you add you listen to the click event and you pass in the update function. So you take a look up. There is now the second variable, the second item of the context. So yeah. And then it returns to this position, which is like a remotely boundlessness. So it's been cleaned up after when you destroy the component. So let's take a look. What if you at multiple even listening to the same component to the same element or multiple elements within the same component? What's interesting is that this post now becomes an array of all the analysts and functions, and then when it destroys it, we just run a run all to dispose of them. Right. This like this is like instead of writing this post one, it goes to the first listener first listen and disposed to end this post and then you call one by one this the the output as felt gift's is more optimized in terms of like the Kosice. Right. Maybe you create an array, but it's much smaller in size. It's much compact. So on and on. I guess I given you enough of that hint of the flavor where svelte always looks at the template and tries to generate the most. Compact output, if possible, so the last thing we look at is the South. So what happens when you have a stall over here? What happens is that as you spell for each component, it will generate like a hash value and then and that hash value as a class for elements that is being targeted with others like this in the south. So in this case, this one is being targeted because you want it. Right. So this is why will have a class called Spelled with the Hash and then in the case. Yes, that's right. You will also at this one hash class to the hash one selector. So, yes, the the specificity has increased by one as class, but then it's more specific and is within each component. So each component generates a different hash. So classes different. So you wouldn't target that. You only target all the elements that within this component. So a summary I think we covered like how how like spelt with a component and how you add a style and how you add data and how you updated the last day of the event. Is this right? We also calculate what does a family function do irritants like object of like I would call recipe off, like are you create mounds of debt and destroy and then the instance function where it returns like a list of internal variables and you use model invalidate when you change something so dysfunctional. We call so that you know that something can change. And lastly, you have to look at where each component will have explained default, the class which you can instantiate. So what's next is so here are some links if you are interested in. So you can always check out the tutorial like the ripple. This is the link that was showing just now and then we have on the community side also we have a very active like this discussion where everyone you have any question about its value can go in joining the discussion. Lastly, you have Twitter, right? So that's all from me. It's actually like a virtual Clapperton. Oh, sorry. So thanks a lot. Any questions? These are your mekonnen speak. Hi. I mean, everyone. Hello, I hear you, but it needs to be a bit louder, please. OK, it's a bit a little bit better. Yes, just one question. Most of the existing companies have other themes, and I'd like to start with rights is easier to build any more component. So what does it offer? Any other components you showed us about how to fix the data on all the stuff? But basically, if there are any books you work on, that would be great, right? Yeah, definitely. So that's. So so that's like a that's more like a comment like the committee, like you like a bootstrappers and possible death. Like I can't remember all the names, but that's like Bulbul, my personal spell. So that's like all the different frameworks that they do like theirs. People in the community that use spell version of that, those components. Is that by referring to. Oh yeah. So and also I guess still this is very closely to JavaScript. So if you're using things like wheelchairs or other suggestions from works on those that they require is just like adding HTML. And in some cases I think that will just works perfectly fine as well. And I have other questions. So when you started this short amount of bumbles I stayed with. We had confidence and stuff. Is that the only problem that doesn't solve the burden size? Because if you're are already using of the act or next is a few days close to each other and they have more companies, why would someone want to move to a new framework which is completely new? So it's is it's. I may be biased, but if you talk about like the developed experience still is much more friendlier in terms of it's it's closer to Hashem outright, finally went from web developer designers that start out with learning access and JavaScript. When you start using all view, you have to learn like those. The syntax is much more different. Hospital is closer to Hashem. Also, you write you still write his email, but you add some Carlebach. As for that, right? So that's my personal bias, that it's easier to learn. Well, from my standpoint. But of course, if you talk about like the performance itself and the size so so from from the from the very beginning, the cut size is much smaller. So you you have firstly you really have less to pass, less code to execute. Right. Secondly, for some of the frameworks you use, something like a virtual def comparison off, like a you create like an object tree and then you compare whether it's Shinji's and then you apply the changes to the DOM. But what it does is that no, you just call like documentary element, not like other DOM API immediately. So it's much closer to the Web API so that it's much more performance and much more efficient. Hopefully that answers your question. Yeah. Thank you. Anyone else has any other questions, please feel free to take advantage of this moment to ask you if it's something you are looking to explore, if you've really worked with it. You can also take the question if you much prefer to. But definitely asking to be Pecorella. Yep, there's a question on chat now. That's still allow us to manipulate the dome, Dongarra. Yes, so probably I can share my screen. OK, so share something over here. See, so still has something call and action. So what this means is that you until you have a library, call the full where you like some of those libraries in the early days with your initial Jicarilla and those things like that, where you take in like an element and then you manipulate it. Right. So this is very similar. This works very well with those libraries. So, for example, you do a function call for that, an element you can like is this thing called action, which starts with a U.S. colon. So when you do it like this, that is being passed into the function is being called for every instance of each one. So you can do things like the element of text content equals to one, and so you can directly access to the elements that you can manipulate. Dagley and maybe. Yeah. That's hopefully that's answer your question or. So long come I want to speak, but I'm not sure you guys can hear me. Well, yeah, yeah, yeah, yeah, I think yeah, because I so I feel like I'm looking at right right now and sometimes working with my ex and all my breath like, hmm. I have no other choice but to try to manipulate someone, but don't stare at me because of the episode. I think another question I have is that like for example, if you're looking at reacting, I guess I mean, could we use Petten is using like we have kooks and stuff. Oh, so what do you see as like the mean way too like for sharing and. CarSharing and. I I don't think so. I think I have a very good answer for this and for now they see. Yeah, so we don't really have a very I think it's still in the early days where, yes, there are some people have like different people have different preferences and different ways of doing things. For example, in this like just now when you see I'm using action, the function itself can be shared around. So the person that manipulates it can be turned around and things like that. Right. So so I think it's still early to say like there's a pattern patterns and. Yeah, and probably and maybe maybe I'm bias a bit that maybe it's a simple enough that you don't really have to come up with patterns too, right. Yeah. Yeah. Because from what I see it really likes to be flexible. Right. Like it just like functions and input from elsewhere. And if I just thought like maybe different patterns that we didn't know among the community that we like to think of it, that's I'm so sick of that this will require a bill to like work. Right. So so when you write Felkel, you need to compulsively to just keep cool so you can either use. So it's something like a table where you write, I guess everyone knows us like knows what is right. So it's like when you write a next generation of jazz group. Yes. 2020 or 2021, you compile it down to a quote like a browser compatible code. So it's similar in that sense. So when you want to use Babul, which are built all, then you used to be below the surface values about the web. Right? So if you are using roll up, you have like a baby in roll up, then you use it. But if you just want to say like a simple component and you want to use your own build tool, you don't want to bundle anything. That's Finestra and you can use the API itself to compile the code and then you will give us your script and source and all the things. I have a question, so in your experience, have you seen what used cases, have you seen that it worked best and that people use the word, let's say, react? OK, use cases, so. Yeah, I will say that I wouldn't say like better, but like this is more of my personal preference for personal opinions. So cases where you have a much say you have you have a pioneer in terms of performance or memory. Right. Say you are using like embedded divisors right now, Iot devices that is running browsers in those kind of thing. Do you have a very high requirements on the like, very small memory footprint then? Still is definitely much better in terms of memory, footprint and performance than accosts. Like, for example, if you don't care about those kind of things that you are like maybe a web developer, then one thing that is better will be for, say, like that excites you. You mostly need, like the one that gets a little bit of interaction, probably you don't need like a slow spell has a story about it. What it does is also a compilation and it outputs it generates like a function that returns a string so that the string concatenation, much like beauty string concatenation on all the things and then returns in a string. On the other hand, from what I know is that you pretend like you use this x ray. So it's like an object and initializing to a string and everything. This is much, much more performance is a different order performance in the sense. So just now I think the static site, so generating static sites is much more common agenting. Seveso rendering is also Volman. Yeah. So I think these are the things that people are starting to do it, but it doesn't limits like what spell can do. You can definitely go for like a building, like a full fledged web application. I think that it's doable as well. And in fact, like the creator spell itself is like one of the engineers from New York Times. So if you go to New York Times, you see like a lot of those data visualizations, interactive articles, those are those are powered by skulks. Those arises actually still arises with anything that they want to do, those kind visualization. And they find it hard to integrate with doing it this way to come up with stuff. So. Hopefully the answers your question. Yeah, cool. Thank you. Any other questions we have time today for questions, if you like. Well, I have one more question about the scope of the very Ebola, so let's say like just now. Do you have the variable name in front of the cell phone? Then let's say you compose your different components together. Like can can the children of that component still exist? Name or you sound like you pass on approx. Oh, OK. Is that a mechanism that like a boy, like breathing and all those kind of things? It takes on various contexts. Similar. And also there's also like a star like you in your use of it, using a star like external or you use like a contextual existence. Oh, ok. OK. So I really had a question where I just think she has framework's will be assisting remarks. I know, I know it was Telvin Bouchareb. I think unless you're seeing framework's like success in G.S., those I haven't really tried out. But any suggestions from folks that that you imposture send your class names. Yeah, those definitely. Any other questions that answer your question? Year. Does anyone else have a question? If no one else has a question you can reach. Oh, another question addressed addressing the Stones access to a hedge one, for example. Style is in style, OK, probably change to a quick share gain. I this place and I can see that. No, I'm just going to guess, but OK, so if you have a hish one over here, I'm guessing, are you referring to, say, doing a style color? Great. Is that. Is that what you are trying to us? OK, we've got to go up in such a. I think specifically for, you know, assigning CS classes with like Tailwind and something, yeah, so it. Now you can just assign a class name you so you have like to so it depends on how you use tailwind if you are importing as ISIS falls at your like in the head of the huge HTML document, import import it like using a link and the history and then the classes are available and you can see that you can only use it here, use it in the spare component. So, yeah, that all the class name are written in the class, in the element is can be like it can be a global class, could be defined, declared locally. I guess that's no question. Yeah, well, my guess is there's no question that. OK, you can reach him on Twitter. Nothing. If you have any other questions, you can just like maybe private chat, if it's OK with you or reach on Twitter as well. OK, so thanks a lot for giving this talk today. You.