 Okay, hello everyone. Hi. Hi. Okay, yes, that's one, that's one. Okay, so today I'll be talking about compile spelt. So we're talking about spelt, right? So I'm not sure whether everyone knows about spelt. It's like a fairly new-ish framework. So yeah, so I think last year it's the first year that spelt was in, first year that spelt was part of the state of JS survey. So you can know that it's like relatively new compared to other frameworks out there like React or View Angular, right? So one thing that is very cool about spelt is that the initial bundle size, if you are using a spelt framework, your application initial bundle size will be much smaller compared to say React. 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 spelt skills. So if you look at the chart, right? Like if, like the initial, like this is like the initial, the horizontal axis is the size of the code that view, right? And the vertical axis is the size of the code that is being output, right? So if you see over here in the zero mark where you don't really have much code near to zero, you the, so the blue line is for like the React bundle size and the orange line is for spelt, right? So over here if you look at it, when you have a very small code base, right? For React, you already have like a certain side bundle size that is being included. That's the React runtime library, right? So it's like once you import React and maybe you just do a hello world application, your app is like this big in terms of bundle size. But for spelt, it's the initial one, like the initial size is very small and yeah, and it grows linearly like with, along with your application, right? So more to this chart, but I'm just gonna state like this point over here for now, right? So today I'll be talking about compile spelt in your head. So why is that compile spelt in your head, right? I'll be covered, like I will explain why later on. So yeah, so my name is, so a bit myself, so my name is Li Hao. So that's my Twitter link, you can follow me on Twitter. So I'm a front-end engineer at Shopee and also currently a maintainer of spelt. So let's start with, let's just start with like building an application, like web application without any JavaScript framework, right? So let's just do a recap on, let's do a recap on like how do you create elements on, like when you're building a website. So back in, like so if you're just using, if you are using only JavaScript, then you would use something like a JavaScript API to create elements, right? So here is how you create like a H1 element. You use document create element and then you set like text content to say hello world and then you open it to the body of the browser like DOM, right? So you will have, you have created like a H1 tag with a text in it, right? And when you want to update, say the H1, like the header one, what you do is you can, you can like set the text content and then the text will change to say by world. To remove it, you use it, so document body.removeChild and lastly, if you want to add styles, what you can do is you can over here, think probably you can see the mouse cursor, over here you can create a element, like style element and then you append like whatever your CSS as a content and then you append that at your head that will create like a, that will create a style dynamically via JavaScript and to style it, yeah, you set attribute like class to the element and yeah, you will have like add the ABC class to this header and then you style it via the CSS. Lastly is for, for example, if you want interactive interactivity in your application, probably you would, sorry, probably you would add event listeners over here to say on click listeners and you will listen to click events. Yeah, so this is the basic of, the basis of building a dynamic application on the front end via JavaScript API. So you may be using say view or react or other frameworks, but it boils down to like all these operations at the very low level, right, you can write JXX, but when react interprets it, you will create an element and how does it create element, it will still goes down to creating an element using like this browser's API, right, so next I will talk about Svelte. So Svelte is a web framework that is a little bit different in terms of the approach of how it works. So Svelte is like a compiler where it tries to, when you have a Svelte component, it will tries to compile it into JavaScript and it will tries to come out with like all these operations as just a JavaScript output. So I'll cover that even more later. So that's like a rough introduction of Svelte. So let's look at, take a look at how you would write the Svelte component. So here is how you write like hello world. So over here probably, I think, or benefit probably we can go to the Svelte website. Here you have a ripple so you can play around like a playground to play around like writing a Svelte component. So here is how you write. Okay, so let me start with the first one. So you can, so Svelte syntax is like HTML syntax. So you can copy like HTML code in it and you, like the syntax itself feels very familiar with HTML, right? It's purposely so. And a Svelte component, you have, you use a file that ends with a dot throughout, right? So here, if you want to create a H1 element with a hello world, you just do it, like you just write it this way. So if you want like some styles, you can add a style tag and then you can target H1 to the element that you want to target thing, right? So one thing that's cool about this one is that the styles, when you're writing H1, like the styles over here is only scope within this component. So what does it mean is that if say you have component two over here, and it also has a H1 tag, and if you try to include that component, sorry, then the style only applies to like the H1 within this component, not any other components, right? You only see one H1 over here, then only this one H1 is being styled, right? Next thing is, I think we've seen just now, if you want to have like JavaScript code or data inside in your application, then you add a script tag, right? So here you create a script tag, and then if you want to use the, like you can just, you can declare a variable, like say name, and to use it, you use like a curly brackets around it in the templates. So here I use curly brackets name. So this refers to world, so you have hello world. So next thing is that to add event list list, there's a directive called on directive, I think space it up a bit. So you can add on colon, click, and then you pass in a function. So again, with like JavaScript code or expressions, you wrap it around with a curly brackets, and then updates is this function. So when you click on hello world, you'll start to see like console, right? Because yeah, this is how you add event listener. Then next thing you have, you can change the data, like just now I use name, now I change it to spelt. So I can just set it, like assign the new value to the variable, right? So when I click, it will change to spelt, right? So there's no, like, set state or like any API to do it, you just assign it like how you would assign a variable. And how does that work? I will talk about it later on. All right, so I think we covered all the examples over here. So the next thing is we're going to talk about compile spelt in your head, right? So how does, so if you look at all these examples, right, if you look at this is a result and you click on the JS output, you'll see that when you write this, it compiles to like this code in JavaScript. So what I'm going to do now from now onwards is to explain like bits by bits how each of them works. I will try to build from a very small like a hello world to like adding event listeners and adding styles and we will observe how it changes. So, and then we will see like how each pieces piece together in like a final JavaScript output of a spelt compiler. All right, so let's get back here. Let's go. So the first one is hello world, hello world in a H1 tag. So if you write this, if you take a look just now, right, I think I showed you just now, you will see something like this. So there's two functions over here, or one function and one class, right, two sections. So the first one is a function called a create fragment, and it returns object with like three methods. So each of these methods represent something, right? So the first one, the C represents create. So how you create, like how to create elements, and M is to mount. So how do you mount the elements that you created onto the DOM? And the last one D, it means destroy. So it's to remove when you say announce your component. Right, so here I have like H1 equals element, record H1. This, if you click into, if you look in the source code on how this implements the element will be will be like document dot create element. Because it's repeated a lot of times. So that's why we use a function is to have a better minification. The next part is the class, right, the class app. So each spell component has a default export. And that default export is exporting the component itself. And you can use the component like so where you instantiate it and pass in a target, say, where you want to mount this component, and then you can pass in some props like data, right? Yeah. So, and next thing is that if you can see here, there's an init function in the constructor. And here is where I pass in the create fragment, right? So this is how the top part and the bottom part links together. So you pass in a create fragment function in the init function. And it will initialize the component and create this element hello world. So if you try to remove everything, right? One spell component is still a component, you can still use it. It just don't have a, it's just an empty component, right? So spell will always tries to optimize its JavaScript output. So in this case, you still have a, it still exports some code, like export default class, export that component. But because there's nothing in the template, it will pass a noun to the create, instead of create fragment. So this, this just shows that your output code grows or shrinks like linearly or like proportional with the code that you've written for application. So if you look, take a look into the init function, there's a lot of things, right? One thing probably I can quickly point out is say like the dollar dollar thing. That is like the, like the instance property 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 there's update and yeah. So there's a lot of things. I'll probably cover them later on. And yeah, more of it. So next thing is that we want, when you add data, like when you have a variable, like a insider curly brackets, what happens? So now you, instead of, so now you have to like dynamically add like the name in the text content, right? So one thing you can see is that whatever you write in the script tag, most of the things will be also part of the output code. So here you write that name because you will be copied verbatim over here. But if you add, if you add one more function to update the name, you will see that the code will change quite drastically from what we see over here. Here you see that we have another new function, a new function called instance. So instance returns. Okay, so yeah. So let's go from top to bottom first. So we, right now we broke down the text into two parts, right? So here you don't pass in name anymore. You pass in a context, the first item of context, right? What's that? We'll cover that later also. Then next thing is that because the text over here can be changed, right? Can be wool and then changed as well. So there's a new method over here, P, which stands for updates. And whenever it's dirty, which means like something has changed in the name, then you will set data, which is to set the text content of the text node to the updated value, right? So I think from now you can roughly guess that context, the first item in context is the value of name, right? It's being passed here and here. So how does the name comes from? Now you take a look at the instance, right? So instance returns an array, array of variables. The first item is name, right? So probably this will be strings into like here. So forget that instance is also passed into the init function. So previously if you can recall, here is now because there's no like internal state of a component, there's no variables. So it's now, but once you add something, then starts to turn into like a function, right? So previously there's no need for this function, then this function will not exist. Now you need it, then you have this function. So inside instance function, you copy also, copy the code in a script tag with a term inside the body of the function. 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? That's because spelt's tracks variable. So all the variables that you declare in the script tag, whether it's mutated, like you plus plus like increment, decremented, or you reassign it the new value, say you assign it to a spelt, then or you reference it in the template, say you use a curly bracket, so you reference that variable, whether it's writable or not writable, whether you export this variable or not exporting this variable, like all of these behaviors are being tracked by spelt. And it knows whether the name is being updated or not. That's why there's a change in the output code. So let's come back to here. So here we, we returned an array of variables that is being used within, there's being referenced within a template. And the first variable that is being referenced is the name. That's why you see context zero over here. And also it's referencing here. So this, this is like a bit mass, I wouldn't drop it much, but can just assume that when it's one, it means the name is has changed, right? Then you also see like a function called doll, doll invalidate. So what is that? Let's come back later. But so, so we, we see like the three parts of fragments instance and app and how they string together inside, they are string together inside in it, right? So how does that work? So conceptually instance is a function that returns like a list of variables. So that we call it a context. And that context over here is passed in into the create fragment function. So to create fragment, so fragment is this object. So I call it like a recipe of how to create mounts, update and delete. So like a recipe of how you control something of a component. And then you call like fragment dot C, which is to create elements and then mount it to the target. So now we cover what is doll, doll invalidate. So whenever you write something like a name equals to something, when you assign it a value, you update it like increment, decrement it or you update a property of it like full dot a equals to something. Svelt notices that and it will add, it will add one more statement called invalidate, right? For each of them. So you will know that, okay, name has changed in this statement. After this name has changed after this count plus plus count has changed after this full has changed, right? So conceptually invalidated function takes in like what variable has changed and the value. So it updates the context and then mark that value as dirty. And what it does next is that in a mug dirty, it just said that variable is dirty, right? And it will schedule update, right? So not the update doesn't happen immediately. For example, if you have three statements of name equals something, count equals something, they are scheduled in one batch and then it's being flushed to the DOM at once, right? So yeah, so it's being flushed once and then once after that it clears the dirty check. So now let's look at what happens when you add event listeners, right? Over here you add onclick listeners, right? So how does that reflect is that, okay, so firstly we have the whatever the code is written in the script tag copied over verbatim in the instance function. Then when you have event listeners in the mounting and you will add, you listen to the click event and you pass in the update function. So you take a look, update is now the second variable, a second item of the context. So yeah, and then it returns a dispose function, which is like a remove event listeners, right? So it's being cleaned up after when you destroy the component. So let's take a look what if you add multiple event listeners to the same component, to the same element or multiple elements within the same component. What's interesting is that dispose now becomes an array of all the un-listen functions. And then when it destroys it, we just run a run all to dispose all of them, right? This like this is like instead of writing dispose one, it goes to the first listener, first listen and dispose two and dispose three and then you call one by one. This the output that Svelte gives is more optimized in terms of like the code size, right? Maybe you create an array, but it's much smaller in code size, it's much compact, right? So on and on, I guess I've 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, right? So the last thing we look at is the style. So what happens when you have a style tag over here? What happens is that if you spell for each component, it will generate like a hash value and then add that hash value as a class for elements that's being targeted with all the selectors in the style tag, right? So in this case, H1 is being targeted because you write H1 and right? So this H1 will have a class called Svelte with the hash and then in the CSS, right, you will also add this one hash class to the H1 selector. So yes, the part, the specificity has increased by one as class, but then it's more specific and it's coped within each component, right? So each component generates a different hash, so the class is different, so you won't target them, you only target all the elements that within this component. So a summary, I think we covered like how, how like Svelte creates a component and how you add a style and how you add data and how you update data, and also lastly how update event lists, right? We also covered like what the separate fragment function do, right? It returns like an object of like, I would call recipe of like how you create, mount, update and destroy. And then the instance function where it returns like a list of internal variables and you use $ invalidate when you change something. So this function will be called so that you know that something has changed. And lastly you have like an app where each component will have export default of the app class, which you can instantiate, right? So what's next is, so here are some links. If you're interested in Svelte, you can always check out the tutorial, like the ripple. This is the link that we're showing just now. And then we have like community sites. Also we have a very active like discord discussion where everyone, if you have any question about Svelte, you can go in, join in the discord. Lastly, you have Twitter, right? So that's all from me. There's actually like a virtual clap button. Oh, sorry. Okay. So thanks a lot. Any questions? Please unmute your mic and then speak. Should I unmute everyone? I hear you, but it needs to be a bit louder, please. Okay, a little bit better. Yes. Just one question like most of the existing components have UI teams and guides like to start with, right? So it's easier to build any frontend components. So what about Svelte? Does it offer any UI components? You showed us about how to fetch the data and all the stuff. But basically the component, if there are any out of box UI components to build with, that could be a great help, right? Yeah, definitely. So that's, so that's like a, that's more like a, like the community has like build, like a bootstrap version for Svelte. That's like, I can't remember all the names, but there's like Bulma version of Svelte. So there's like all the different frameworks they do, like there's people in the community that builds Svelte version of that, those UI components. Is that what you're referring to? Yeah. So, and also I guess Svelte is, is like very closely to JavaScript, right? So if you're using things like Tailwind CSS or other CSS frameworks, right, those that, that requires just like adding HTML or adding some CSS, I think that will just work perfectly fine with Svelte as well. Okay. And I have other questions. So when you start, you just showed about the bundle size, right? But compared to react components and stuff. Is that the only problem that it tries to resolve the bundle size? Because if we are already using a react or next few days, just close to each other, right? And they have more complex, why would someone want it to move to a new framework? Like Svelte, which is completely new, right? So it's, firstly, it's, it's, I might be biased, but if you talk about like the developer experience, Svelte is much more friendlier in terms of it's, it's closer to HTML, right? So for example, for any web framework, web developer or designers that start out with learning HTML and CSS and JavaScript, when you start using react or view, you have to learn like those, the syntax is much more different. But for Svelte, it's, it's closer to HTML. So you write, you still write HTML, but we add some curly brackets for data, right? So that's my personal bias that you, it's easier to learn from my standpoint. But of course, if you talk about like the performance itself and the bundle size, so, so from, from very, from the very beginning, the code size is much smaller, right? So you, you have, firstly, you already have less code to pass, less code to execute, right? Secondly, for some of the frameworks, you use something like a virtual DOM or like div comparison of like a, you create like an object tree and then you compare whether it changes and then you apply the changes div to the DOM. But what Svelte does is that no, it just call like document create element or like all the DOM API immediately, right? So it's much closer to the web API. So that's it's much more performance and much more memory 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. Yeah, if it's something you're looking to explore, if you've already worked with it, you can also type the question if you much prefer to. But definitely asking will be clear. There's a question on chat now. Does Svelte still allow us to manipulate the DOM directly? Yes. So probably I can share back my screen. Maybe I can share something over here. So Svelte has something called an action. So what this means is that you, for example, you have a library called say foo where you, like some of those libraries in the early days where you finish like jQuery 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 have a function called foo that takes in an element. You can in Svelte, there's this thing called action which starts with a use and a colon. So when you do it like this, the element is being passed into this function. It's being called for every instance of each one. So you can do things like element dot text content equals to one. And yeah, so you can directly access to the element of the DOM. You can manipulate directly. And maybe, yeah, that's hopefully that's answer your question or so long call. Hi, yeah, I want to speak but I'm not sure if you guys can hear me well. Okay, great. Yeah, because I feel like I'm working with red right now and sometimes working with like external libraries like I have no other choice but to try to manipulate some of the DOM directly because of the lack of some APIs. I think another question that I have is that for example, if you're looking at React, I guess the main code reuse pattern is using like React books and stuff. So in Svelte, what do you see as the main way to like for code sharing and code with this? Code sharing and I don't, okay, so I think I don't really have a very good answer for this one for now. Yeah, so we don't really have a very, I think it's still in the early days where yes, there are some like 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 an action, the function itself can be shared around, right? So the function that manipulates the DOM can be shared around and things like that, right? So I think it's still early to say like there's a like patterns around and yeah and probably and maybe maybe I'm biased a bit where maybe it's it's simple enough that you don't really have to come out with like patterns to yeah. Okay, because from what I see, it's really like super flexible, right? Like I just write functions and import functions and elsewhere and use it. I just thought like maybe there's some patterns that I already know among the community that you'd like to share. Thanks for that. Yeah, sure, welcome. So CK asked that the sphere require a build tool like Webpack, right? So when you write spell code, you need to compile it to JavaScript code. So you can either use, so it's something like a Babel where you write, I guess everyone uses knows what is Babel, right? So it's like when you write a next generation of JavaScript, ES 2020 or 2021, you compile it down to a code like a browser compatible code, right? So it's similar in that sense, right? So when you want to use Babel with your build tool, then you use a Babel loader. So for spell, you use a spell loader for Webpack, right? So if you are using rollup, you have like a Babel plugin for rollup, then in spell you use a spell rollup plugin, right? But if you just want to say build like a simple component and you want to use your own build tool, like you don't want to bundle anything, that's fine as well. You can use the API itself to compile the code and then it will give you like JavaScript and the source map and all the things. I have a question. So in your experience, what use cases have you seen that it works best and like people use it over like say React? Okay, use cases. So yeah, I would say like, I wouldn't say like better but like this is more of my personal preference for personal opinions, right? So cases where you have a much say you have you have a higher need or in terms of performance or memory, right? Or say you are using like embedded devices, right now IoT devices that is running like browsers in it, those kinds of things. You have a very high requirements on the like very small memory footprint then still is definitely much better than React in terms of memory footprint and performance. Then of course, like for example, if you don't care about those kind of things, like maybe a web developer, then one thing that's better would be for say like static sites, right? You mostly need like the HTML and adds a little bit of interaction. Probably you don't need like a so spell has a SSR story about it. What it does is also a compilation and it outputs, it generates like a function that returns a string. So it does stream concatenation much like U3 stream concatenation on all the things and then returns it as string. React on the other hand from what I know is that you return like you use JSX, right? So it's like an object and then serialize into a string and then return, right? This is much more performance. It's a different order of performance in this sense. So just now I was saying the static site, so generating static sites is much performance. Generating server side rendering is also much performance. Yeah. So I think these are the things that people are starting to do it, but it doesn't limit like what spell can do. You can definitely go for like a building like a full-slash web application. I think that it's doable as well. And in fact, like the creator of spell itself is like the one of the engineers from New York Times. So if you go to New York Times, you see like a lot of those kind of data visualizations, interactive articles, those are those are powered by spells, right? Those arises actually spell arises with a need that they want to do those kinds of visualizations and they find it hard to integrate with, like do it with React. That's why they come up with spell. Yeah. So hopefully that answers your question. Yeah. Cool. Thank you. Any other questions? We have time today for questions if you're like... I have one more question about the scoping of the variable. So let's say like just now when you have the variable name in one of the swap files, then let's say you compose your different components together, like can the children of that component still access name or you must pass down like props? Yeah, you pass down like props. Oh, okay. So is that a mechanism that like to avoid like prop drilling and all those kinds of things? Yeah, there is context similar. And also there's also like a star, like in React, you solve it with either using a star like external star data store or you use like a context. So both exist in spell. Oh, okay. Nice. Okay. So Arul has a question where I just think CSS frameworks, does it work with existing CSS frameworks? From what I know, it works with tailwind bootstrap. I think unless you're seeing frameworks like CSS in JS, those I haven't really tried out, but any CSS frameworks that you import CSS and you add class names, those definitely will work. Any other questions? Does that answer your question? Okay, yeah. Does anyone else have a question? Okay. If no one else has a question, you can reach. Oh, another question. Yeah. How do I assign a star and CSS to H1, for example? A star less in like style? Okay. Probably can do a quick screen share again. Yeah, so I want your first place. Wait, I can't see that chat. And I might, I'm just going to guess. Okay, so if you have a H1 over here, I'm guessing, are you referring to say doing like a style color? Great. Is that what you are trying to ask? Okay, we've got take a copy and stop share. I think specifically for, you know, assigning CSS classes with like tailwind and something. Yeah, so it, yeah, you can just assign the class names. You, so you have like, so it depends on how you import or use tailwind, right? If you are like importing as a CSS files at your, like in at a head of the HTML document, like import, import it, like using a link and a history, then the classes are available and you can straight, you can directly use it here, use it in the spell component. Right. So, yeah, the, all the class names that written in the class in the element is can be like, it can be a global CSS class names or could be like defined, declared locally. I guess that's no question. Yeah, welcome. I guess is there's no question then. Okay, you can reach him on Twitter. If you have any other questions, you can just like maybe private chat if it's cool with you or reach him on Twitter as well. Okay, so thanks a lot for giving this talk today. Thank you.