 So hello everyone. Welcome. Nice to meet you all. Although I can't, I'm standing on my screen right now, which is just my slides. But I'll welcome everyone and it's very nice to be here. And yeah. So today I'll be talking about introduction to Svelte actions. So it's a feature of Svelte. It's like a, yeah, it's called the Svelte actions. And I, before we dive into the topic itself, let me share a bit more like who am I? Well, so once again, my name is Lee Hao. So I'm a software engineer at Shopee. And currently, I was like working on some open source projects. And currently I'm like a commentator of Svelte. It's just like making some fixes on Svelte. And then, yeah, suddenly I become like commentator. But recently, I have more of my focus on making content, educational content about Svelte or JavaScript front-end stuff. So I guess that's how COVID changed us, where thinking of maybe trying out multiple stuff, different things. And one of the things that I'm trying is making YouTube videos. And having fun doing it, well, if you want to support me, probably subscribe to my channel, maybe, or maybe propose any interesting things that you want to see me building and probably I will just make them. Because I was not really sure what other things that I can make. So still discovering. So first of all, what is Svelte? Yeah, so it's like, I would say it's another front-end framework. Like React or Angular, if you're familiar with them or Vue.js, Svelte is, I guess you can categorize it as like a front-end framework in those categories. And it's a little bit different from React and Vue and Angular in a sense that it's okay. It's a bit different with React, where most of the stuff that is happening, it's happening during the build time where it compounds your code into like plain JavaScript, right? So you write a code that looks like Svelte's code, which I'm going to show you later. And it will take that code and compile it to just JavaScript code that will get run on the browser. So most of the stuff like figuring out like reactivity, figuring out stuff, actually done during the compilation step. Whereas for React, you probably write JSX, which is just a sugar syntax for JavaScript, which it's like building like a Vue. Okay, I guess I'm very bad at describing this, but yeah, it's most of the heavy lifting of the reactivity for React happens on the runtime, which is while you're executing the code, whereas figuring out all the stuff mostly happens in the build time for Svelte. So this would be, so I guess just to let me you guys have a sense of how Svelte looks like, this is a component written in React, you have a function called component, you have states by using a hooks like use states, and then you return like a div with two buttons and accounts, right? The same thing can be written with Svelte like this, where as you can see here, it feels more like HTML, right? And you can declare states like this variable counts, just declare it like a variable. As compared to here, you would have to call like a new states to get that states variable, right? Here you just declare a variable and it will give like a states. And for stylings, you can have a style tag, which, for example, in this case, you add padding to the div and you will only apply to the div that is written within this file, right? So it is kind of like having like inline style, but it's not, it's actually adding styles to using selectors in CSS, but it will only apply to the div that you are, the div that's written within this file. Then I guess slightly different would be say for example, the on click listener, right? So now you use things like, it feels a bit like template where you have directives, which is like something, a colon and something, right? So you have like on colon click, which allows you to add like a click listener versus like on click as a property for that attribute or property for your buttons, right? And one thing you will notice different is that to update the counts, I use count plus plus, I can modify the variable directly. Somehow when it compiles to JavaScript code, it handles that nicely and makes sure that the counts variable is reactive, right? Whereas in React, you are calling a set count. Basically, besides this, it looks pretty much the same. It's just happening, different things happening under the hood, right? So if I believe that I've been mentioning that there's like compilation stuff happening under the hood, if you feel foreign to you, you have no idea what I'm trying to say. Actually, I did a talk about compiling scripts in your head in Tom's JS. I can remember a few months ago. So I'll probably find a link and all you can find that in engineering SG as they recorded everything, right? Oh, it's also on my YouTube channel. So you can find that there as well, right? So let's go to like one of the features of Svelte, which is Svelte Actions, which is what I'm going to share with you all today. So Svelte Actions is like an directive as well. So previously, we have a directive that looks like on and then colon and click, right? That allows you to do like event listener on that element. Right now, you have a new one, which is use colon and then action. And then you can pass parameters within it, right? So in Svelte syntax, when you want to pass in like expressions, so probably you would wrap it with like curly brackets, right? So this is like, this params is passing into this action. Yeah, I mean, synthetically, it's semantically means like this. But what actually does it mean is that you can define a function called action. So what it means is that action is actually a function. It's just a normal function. So one thing you notice here is that it has to be the same name, right? So when you use action here, you are referring to a variable, which is a function that is defined within your scope, right? It could be defining in your script tag over here, or it can be a global variable or anywhere you import from, as long as you import the name, the variable, the name of the action matches with this, then you will use this function action, right? Yeah, I haven't covered like how they use, but you will use this function as an action. And this function itself is like some sort of contractual between Svelte is that there's like this function is just a normal function, but you can have two parameters, which I'll be passing into you, right? I'll pass you when you, when this div is mounted onto the screen, right? Svelte will call this function with the element, which is this div, the div that is just mounted, and params will be whatever the parameters like it's written over here in your, in your elements, right? So it means that you can have multiple divs that use the same action, but passing the different params, then this action function will be called multiple times with different elements and different parameters. And if this function itself returns an object, then another interesting thing will happen is that whenever someone changes the params, for example, change the value of the params, then the updates method in this object will be called with a new param so that you know that whenever something is changed over here, you will get notified in your action function. And yeah, and then you can also provide a method called destroy in that object that you written, and that will be called when your div that element is being removed from the screen, right? So the main idea of this spell action is like this, right? So summarize updates, it's like you can write the function, which is which is taking two parameters, element and the param, and this function will be called every time when you have an element that use this action, it's mounted. And then when the params changes, your update method will be called. And if someone removes this div, for example, maybe due to if else, like some condition you remove it, or the whole component is being removed, then the destroy method will be called, right? So what can we do with actions? So one simple example over here is you can use it to integrate a UI library. So I'm going to now go step into a spelt's raffle, which we can, which I will do some like coding, like coding kind of thing, where I can show you what how it works, right? So all of this example, I'm going to show you now and later will all actually, I've actually done that, did them on my YouTube channel is, I'm not that clear, you can always watch them on my YouTube channel, right? Sorry with the plot, but let's go on, right? So we have over here, I choose like this library, no reason, no particular reason, it's just that it says that it is dead picker that is lightweight and powerful, and it has no dependencies, right? So that's why I'm just like, can we integrate this with spelt? So probably you would need to import like that picker and then do it, right? So I'm going to come here over here and we're going to have a button says dead picker, right? So what you do over here is that if you want to, if you read through, I've read through these dots, but if you skim it through, what happens is that if you want to create a dead picker out of your any elements, you just call a flat picker API from that picker and then you call it with that element, right? So this is usually how like a library without that is not tied to any like react or Angular would look like most of the case, because if you are using react or Angular or view, then they'll tell you that this is a component and use your component, right? But if you're like a just vanilla JavaScript, then probably you'll say that if you want to make some elements like a deep picker, then you're passing that element, right? So I'm going to copy, paste this in import flat picker. And I need to call flat picker function with the element which is this button, right? With like the button element, I'm going to zoom it up a bit, right? So one way I can do it is that I can use actions because this is what I'm going to share today. So I can have a action. I'm just call any name I want date picker, maybe, and it takes, so it's a function that takes in elements and a param, right? So to use this action, I'll just call use, and then the same name, just make sure the name is the same. And I can choose to pass in parameters or not, right? If I'm not then this parameter will be called undefined. Then I will call flat picker over here. So this is the element that I have the flat picker. Then you will see that something happens. This button has become a date picker, except that the style is not there, right? So one thing I can quickly do is that according to this, I need to import this at the styles for flat picker. So I'm going to paste this into the, over here, right? The style is in, and yeah, you integrate with a library like that, right? So it's pretty easy, right? Pretty straightforward, I would say. And if you look closely over here, right, one thing that flat picker instance, one thing that probably would need to take notes off is that it says that there's like a destroy method over here in this library, meaning it will clean up like event listeners and stuff, which means that you also should do that, right? So let me like time picker instance, instance, I need to return a destroy method, and I need to remember to call destroy, right? So when, so this will be called, this destroy function will be called when your elements, when your button is being removed. For example, if you have like, if this component is being unmounted, or maybe you have conditions like if show or something, right? Let's show equals to, if you have like something like this and show suddenly becomes false, this button is removed, then you need to clean up all the event listeners for this flat picker, right? So, so that's, that's why you need to add this destroy methods in your flat over here, right? And then probably let's take a look at some things. For example, change, let me see what, what can we do current month? Okay, so for example, if you change set dates. Okay, so for example, maybe you can do something like open and close over here, shows open and close of the calendar, you call the open or close method, right? So that is something that we can do over here. Let's say for example, open, true. And then maybe we can pass that open or close in this as a parameter, which means that if someone changes this variable, we would want to get notified. And the way we do it is we have a new params over here. And what we do here is that new params actually will be the value of open. So if we know that it is like open, then we call an instance not open. And if we know that it is false, then probably we just say instance.close over here. So you can basically do a lot of different kind of things depends on like what you want to design as a parameters for your action. So here, I'm going to have, I'm going to have like a checkbox bind check equals to open. So if I uncheck check, it will open and uncheck this variable will change to false and then we'll close it. So that is it's integrating like you can use actions to integrate with other libraries. Right, so I have other examples. Probably I may not have time to cover all of them. But I basically included links and the videos if you're interested. But I believe that they are just different use cases of actions. But using it is pretty much straightforward as we can see over here. So let's take a look at one more example, which is like reusing event listness. Right, what I mean reusing over here is that if you take a look at this, so I have multiple examples, but I'm going to take a look at a third example over here, which is this one. You can write, say, you can have an input and then you have a key down event listener where you listen to on key down. And as you type something, you probably record the keys and then, you know, if the keys matches with this combo, then you will say unlocked, you will set like you will set a variable unlocked to be true, something like that. Right, so in this case, it's called, I mean, I mean, it's up, down, up, down, left, right, left, right. And then the secret will unlocked. Right, so you can use event listeners to do this. Then basically, then probably you will have to define this event listeners different multiple times, maybe with a different unlock or maybe with a different secret or something like that. So one way you can try to reuse this event listener is to have something like this, where you can use an action, any name I can call. So I'm just calling secret combo action over here. And you can pass in like the secrets and the callbacks function, right, and you can change the secret value then basically this will be updated, the action will be updated and know that what is the new secret. And you can pass in a dynamic callback function. Right, so here unlocked is true. This is, okay, this can be something else be true. And you can also pass in different kinds of secrets, right. And this way, basically you encapsulate like the event listener kind of logic in one action. And the way of doing it is pretty much, I would say rather straightforward, but it's which is you would, you take the elements and then you call an event listener. And yeah, so this is actually the same event listeners that we've seen earlier in the previous code. Right, it's the same event listeners, except that previously you use on key down and now you have to manually kind of listen to that events by adding event listener. And every time when you add event listeners, you also need to remember to remove it on the destroying method. And now within a key down, yeah, I basically copy and paste the same code over here, except that this I replace it with a callback. Right, so this, this event listener adding event listeners thing is being encapsulated within like one action and you can use this action across different elements with different secret and with different callback. Right. And I guess I can still have time to go for the last, last example, which is, it's just actually I would say one trick that I want to share with you all is that in the previous example you've seen that I've created like a secret combo action, right. And I call a callback function over here where when something happens, but actually I if I want, I don't have to do it this way. I can actually do it like this where I can listen to a custom events, like on secret combo achieve, right. Doing it this way means that it's, I don't know, probably it feels more stylistically looks nicer. Right. But also kinds of decoupled between the action and events that you want to do something. Right. And to achieve this is pretty, it's, is that you dispatch and custom events over here. Right. You dispatch a custom events, which the same the name that you want to listen. Right. So let me show you some examples that this may be useful is that for example, you want to have a button that you can click three times and then do something like a triple click. Right. You click 123 and then you should see something on the console. Right. Instead of having like an on click listener and you have to implement that counting and then do your do it yourself. What you can do is you can add an action and that action itself will define a new custom event, which is the triple click. Right. So, uh, so it's like, you can tell people that, oh, I have written an action, you just use it. And then you can start to listen to a new event called a triple click. And the implementation of this triple click action is pretty much the same as what you have done using on click, except that you have to implement a listener yourself. And over here, you dispatch once it's click price, you dispatch a custom event called a triple click. Right. So yeah, this is, I'm like showing you examples of how you could use actions and the examples or the ideas is limitless. Right. So the, just a summary again, your events, your actions is just a normal function that takes in the elements and probably your parents that you can pass in. And yeah, this function will be called when your element is mounted. And if you will return them object, it can contain two methods, which is update and destroy. And the update will be called when the prompts change and destroy is called when that element is removed from the dog. And that is swell action in essence. So any questions? Yeah, I think questions if you have any. Thanks, Lihau. That was amazing. I actually understood some svelte. Thank you. Is there a question or chat? I see chat. Oh, okay. Yeah, I just stuck your slides up. You answered my question. Oh, already. Yeah. I was wondering if it was possible to pass in options from the element into the action function. But it's passing in parameters and it takes them at the beginning. Yeah, takes them at the beginning as well as in the update. Yes. That's great. I had a more general question. I was thinking of trying out some svelte, maybe some svelte native. Why not? And I was just wondering if you had any recommendations for ESLint plugins that I should know about, or maybe VS Code plugins that you recommend. Ah, okay. I believe both of them have rather like official kind of plugins. Right. So if you look for VS Code, I believe that's a VS Code svelte plugin that is official. Let me see. It should be like, when I say, yeah, you will see that it's like the publisher is svelte. Right. Yeah. Not too, not too hidden. Yeah. Okay. I see that one. And do you use anything special for ESLint or you just use, you just use this plugin for VS Code? You could use ESLint plugin for svelte as well, which is also within like the svelte organization. Right. So I believe this will give you like so-called official supports if you're worrying like not up to date and stuff. Okay. That's great. Thank you. And take a look at them. Hopefully help catch my typos when I type. Ah, when I type on click instead of on colon click and things like that. Yeah. So if you use svelte or VS Code, if you add something like, I can't remember like, okay. So in your script text, you can probably write something like a length equals to type script. It does not support in this rep. Oh, but if in your VS Code, if you do it this way, then you will run like the type script language server, then you will also knows more about like types. Right. For example, you know that this refers to like the variables and you are you passing in the right function and stuff. And probably with things like component props and stuff. Basically type checking. Yeah. That's great. I will try that. Thank you. Welcome. Come. Anyone else have any questions? Seems like everyone is, but let's try not, I guess I can't, I'm sharing my screen right now. Okay. Well, we can, we can jump into open mic now. And if anyone wants to talk about anything, they can do. And if you have a question for Lee Howe, you can, I'm sure you can find him on Telegram or on Twitter. So like I said, my company is looking for JavaScript engineer. And I'll put the link into the chat. So if anyone is interested in, so the company is like the setup is full remote. So you could technically do work from anywhere. As long as you're happy about it. So you can take a look and just more like JavaScript and C++ engineer. That's it from my side. That's great. Thank you. We have a question for Lee Howe or for anyone, how extensively is Svelte used? I'm curious about what, what do you mean by extensively? Like, is it like, what are the big companies that are using Svelte or like in what scenarios is not being used? Or probably I can answer either both questions, I guess. I mean, in terms of companies, I generally keep track of like all the companies is being used using Svelte. But I like, I, like there's this like meet with Svelte or Svelte Society Twitter channel, they always, they have like showcases of what other like projects or companies is using Svelte. Right. So on top of my head right now, I can think of is, I know like Apple is using like in some of their campaign sites. I guess someone found that they are hiring like Svelte engineers, that that's how they found that. I guess like Google, I remember that there was like a few demos of them using Svelte. Right. So yeah, I mean, I don't promote like changing your code based overnight to from React or Angular or whatever to Svelte. Right. I mean, yeah, so most likely people would do is probably real new projects they want to try out and they would try it out. And I guess it's just like slowly picking up popularity and yeah, more people are trying out. That's why more people are more, more kind of use cases are being shown. What I mean, use cases would be like probably at first, as also because of like Svelte was like created by Rich Harris, which was, which is a graphic designer in New York Times. So they do like the interactive news. Right. If you, if you visit like news sites like New York Times or maybe even like straight time, you will see some of like interactive charts and stuff. Right. So they do, they did it. So, so at the very first, a lot of examples are those kind of things where a lot of like interactions and visualization stuff. But recently I also see people doing like games stuff, like a, or maybe like a full blown dashboards and stuff. So it's, I like in terms of like you asked me whether technically it's possible. I think like technically it's kind of not much difference between React and Svelte. You can do basically anything about like, so it's like that there's no like limit on things that you, you can't or couldn't do. Right. So yeah. So that, that's about like how expensive Svelte is used. Hope that answers that question. And I see you another question. So I guess it's us, Amos Ang is asking whether Svelte operates well with the media frameworks like React. I guess if you really want, you can have Svelte application within React and React application within Svelte. Right. The same way of you could have like React within Angular and Angular within React or React within view view within React is possible. Right. You can write a wrapper components and that can be done. Right. Whatever it's inside is handled by Svelte, whether it's outside is handled by React. Right. That is entirely possible. Like if you really looking into something like that and you face problems or you don't know how to do it, then probably I can help you if you want. Right. But I mean, why are you trying to do that? I'm not really sure. Oh yeah. So there's also another way of so-called micro front ends about like mixing multiple frameworks in one application, which is to use web components. I think some people would like package up like your component in like a web component and whatever inside is whatever inside is like with like web encapsulated within a web component. So question is like React and view are libraries while Svelte Angular are frameworks. Right. I guess. I don't know. I mean, I don't answer this or say like to me it feels they are like technicalities of like what is your definition of libraries and frameworks. If you if you means that I mean if you use React the library, but you most likely would use other things together within a React ecosystem together with React, right. And Redux and stuff. And it's it's was okay. But anyway, you could you could use React view Svelte Angular within each other. I believe it's possible. It's just I believe there will be someone trying out and have a demo somewhere. Yeah, as long as you have like a wrapper that nicely translates like one frameworks appear to another, it is entirely possible. It's just that whether what's the purpose of doing so, right. Yeah, hope that I'm like not rambling over here. I think they they they can do some similar things. So you don't need to use one if you have the other because you can you could effectively do it in the one that you have already. But there might be a reason you want to use another one is if there's a very nice component published out there that somebody's already done a lot of work on and you want to use that in your app, but it's for a different framework. Yeah, but I but I find that most likely someone out there would go out and do the same component library using your framework of choice. I believe like using like react and Angular or view right now like popular frameworks out there right now. You run in like it's most likely you you wouldn't run in a chance of like having one library that does not support it does not have like a pot or wrapper in your framework that that's what I feel. For me I think these like micro finance like stuff is not for like small application it's like usually a big enterprise with several teams. So one team it might be very strong on Angular and when you click into a navigation it will load the Angular application and this team is always doing Angular and then you know another team might do react and it's difficult to find Angular engineer for example someone like me for example. So maybe this is a reason usually it's just for a big company for small I don't see a reason for like putting multiple framework into a single application but for a big enterprise maybe they have reason for I'm just going to drop some links which I didn't share earlier on make it easier for people to reach. I guess if it's nothing I'll be going off of my lid. Yeah I guess sir. Bye. Thanks very much for your talk today. Welcome. It's very quiet over here but yeah I will see you all next meetup hopefully. Bye bye. Bye bye. Thank you. Bye bye. Thank you. Yeah thanks for coming. Bye. Thanks now. Bye. Thank you Cheng. Thank you for hosting today. Yeah and thanks to Michael too for the our host from engineers SG. Okay let's wrap it up then and keep an eye on GitHub and meetup.com for next month and if you have a talk if you have something you want to share please do drop it on our GitHub issue. Okay bye bye everyone. Bye. Bye. Bye Joey. Have a good night. You too. Bye bye.