 Michael, you don't have to start recording now, but when I go to the speakers, I guess you could start whenever you like. Okay, sure. Thank you. No worry, I'll edit it as well. Yeah, great. Edit me out. That's the most important thing. Right. Okay. Hi, everybody, and welcome to the first Talk.js of the year of 2021. Yeah, okay. Here's our timeline. We've had a little bit of a chat. I'm going to talk to you for a while, not too long. And then we're going to have the talks. Then at the end, we'll have an open mic and we can all have another chat. We have a code of conduct to try and make the meetup very welcoming and a nice place for people. You can find it on our GitHub. But the basics is just be respectful to each other. And if you have any concerns, if you have any problems, you're welcome to talk to any of the organizers in confidence. I don't have a lot of JavaScript news. There's probably been some interesting things happening, but I haven't really followed them. So the only thing I want to share is that there's this extension, the Great Suspender, and if you use it, you might want to have a look at what's going on there. But basically it has a new owner and he added in some dodgy code and then took it out again. But none of it was on GitHub. It was just on the Chrome Store. So yeah, you might want to take a look at that. And there's a couple of alternatives. Yeah, okay. So I'm going to talk about some of the local community things if you don't know them, you probably do. But if there's any newcomers here. So you should know about engineers.sg. They have... Oh, dear. Oh, yeah, it's up there. Right. Okay, there's code of conduct. Engineers.sg has this website where they record all the meetups, or as many as they can, like they're recording this one this evening. Thank you very much, Michael. And they upload the videos. So if you've missed any of the meetups, you can hopefully catch up with them here. If you are a speaker, then you will be featured on here. And then you can share your video with the world. They also have a very nice events aggregator, which I think is pulling from meetup.com. And it tells you all the events coming up in the near future. You can even import it into your phone. I'm not sure if that's still working. Here we are. Here's our talk today. Okay, so that's engineers.sg. And if you want to help them, they're looking for volunteers. I'm sure they would welcome you and they'd love to train you up. So this meetup is done by the SingaporeJS Group. We have a Telegram channel, which we would like to invite you to join. If you're looking for a job, there is this useful Telegram channel. But it's a funny URL, so I will share it in the chat. That's okay. And we have a bunch of links on this page. If you would like to give a talk at one of our future meetups, you can just pop over to our GitHub repository. So the organization is SingaporeJS. The repository is TalkJS. And over there we have issues. Under issues, we have an issue for each month. So this is our current meetup. If you want to submit a talk, you can comment on this issue for February. We're also looking for a volunteer, a little bit casually. But if anybody wants, if you want to help us out, you can. Eric had some ideas about what to improve with the repository. Okay, some local meetups you might want to know about. Junior Dev SG is for juniors and newbies in the tech industry. Pretty good. ReactJS, not sure they haven't got anything coming up, but they might do. The Google does a meetup as well. They have something coming up on the start of February, but we don't know what yet. Oh, and we have a new meetup in town, a workshop. I went to a couple of weekends ago. I went to the first one and Michael gave us a great introduction to GraphQL, and we got to do it ourselves. So he was presenting to us, and then we were copying what he was doing and making our own little GraphQL server and GraphQL client on this web app. Anyway, that was great, and if you're interested in this meetup, you can follow the organizer, Julia Tong, on eventbrite, not on meetup.com. And the next event is going to be on Elm, which is a functional programming language, but in the JavaScript ecosystem, runs in the browser. And that meeting will show you the basic syntax of Elm, but it will also, I think you'll get to code some and perhaps see or perhaps make some demos with some graphics and some data visualization. Should be fun, right? Okay, I can hand over to the speakers in a moment, but I'll just say if you, while the speaker is talking, you think of a question, you can either drop it in straight in the chat, you can leave a little message in the Zoom chat, or you can scribble it down and wait till the end when we have the Q and A. Yeah, let's see if your question hasn't been answered, because I always forget if I think of the question I always forget. So I have to scribble them down. Okay, that's enough from me. Thank goodness. So we're going to go over to Truong Vo. He's going to talk about building Tetris in Angular 10. And the later on we're going to, for Li Hao Tan, he's going to talk about Svelte. Okay, I will stop sharing and I will give it to you, Truong. Sure. Thanks, Jo for the introduction. Let me share my screen quickly. Nice, she is. Let me know when you guys can see the screen, because yeah, I think he just said, I think it is too small. I wanted to do it a bit bigger. So there's the full screen option. Okay, I think it's better now. Yeah, it looks good. Hello, everyone. My name is Truong. I'm a front-end engineer in Singapore. And today I'll talk about a small Tetris game that I built with Angular, like maybe six months ago, during the circuit breaker. I am not a circuit breaker. It's just a time I spent. I stayed at home and I think it was a cool thing to do. So before we just, can I hide this one? Hi. Floating? Okay. Okay, thanks. So just a bit about me before we continue. So I'm currently a front-end engineer at KDeFi platform that let you earn cash flow through your crypto currency. And we also are looking for JavaScript engineer at the moment. So you are interested in and just take a look at our Twitter. Take a look at our Twitter. Also, I'm an organizer of Angular Vietnam. And we have the Twitter also at the moment, NgVnOfficial. You can follow us to get less detail about Angular and our upcoming event. One of the focusing we are doing is like the 100-day of Angular that we wrote in Vietnamese to try to advocate the Angular community in Vietnam. And so for today's agenda, I will go through Tetris and why I built the Tetris game with Angular. What is the tech stack behind? And there's some development challenges that I faced when I was working with the game itself. So yeah, let's get started. So the Tetris game, I hope that all of us are familiar with it. It's like a game that invented by Alexei, a Russian, in 1984. So the rule is very simple. You just rotate it and move the pieces so that you try to fill out the horizontal row of the blockchain without any empty cell. You can fill in a solid row, which means that you can clear that and you got the score. And that's basically that Tetris. And the version that I built with Angular looks like that. You can go to tetris.chungk18.com and let me slide it here. So that is the game. Basically, it follows the same rule of Tetris. You can take the pieces, it generates the pieces for you. You can move it down and try to fill in the block. Something like that. Yeah, so when this one row is filled with all of the blocks, it will just clear it. So yeah, basically that is the game. It has some options. You can turn off and turn on the cell and you can put the pieces faster by pressing the space like that. And that is the Angular Tetris that I built. Oh, sorry. So why I decided to build Angular Tetris is like, I think Tetris was one of the first game consoles that I ever had in my life, like when I was like five years old. And at that time, the money, like the Tetris game cost about like a $2,000 act. We can feed the family for about one or two weeks. So I think when my dad gave me the Tetris, he really like hoped that I utilize the game and really enjoy it. And actually I will really enjoy it. The one that I have is like the yellow thing here. I think yeah, it's still there. Now they're still selling it, but the quality is not like the one that I have before. Maybe, I don't know, just the feeling is different. And the Angular Tetris does, were not like originally or originated coming from my mind. I saw the similar version, which is written in Vue.js. And also my wife saw it. And I thought that why not I do the same with Angular. And also my wife encouraged me to do the same thing. So, you know, that is the thing in life. You have to accept it. And I think that was the time when I received the Tetris. So it's like 1996 or 97. I was born in the rural area. It's like the mountain side of Vietnam. So at the background, you can see there's just a mountain. And the how was like really 20 years ago, I guess. Yeah, so because there's a viewer Tetris already, so the approach was, I think it's much simple for me. I don't have to decide the game. I don't have to write all of this. Hey, tell me how it is. So the thing I did first is like I looked at the Vue.js. Source code. And I built a small to-do list because I work by my own. But I still need something to like keep track of the task. So it is just the simple to-do list. Oh, yeah. Okay, I have it here. Yeah. So basically it is going to look like that. Very simple. It just has some checklists. And I'll just keep track of what I'm going to do. We cannot see. I think we can only see your slides at the moment. If we switch to another app, we cannot see. If you really want to do that, then you might have to unshare and reshare. I see. Just a sec. Maybe I just do it in the same screen like that. Yeah. Yeah, okay, sure. Just give me a sec. I will bring back the thing here. Oh, no. Okay, have a try. But I think we're still looking at your browser. I think when you shared your screen, you only shared your browser. Yeah, I think I get what you mean. So just now, there's a few things that you I didn't see. Yeah, I think you were playing the game maybe. Yeah, but it's fine. Can you see it now? Sorry. So I want to check. Can you still see the slide? No, I can only see you now. Okay. If you go share screen, and then that's all, I think. Let's stop. But it's just that's all one. Maybe I tried. Can you see it now? I can see your browser still. Yeah, you can see the slide. Yeah, correct. Sure. Yeah, okay. So the game is basically looked like that. Just now I showed it, but I think you added and see. So yeah, yeah, just hide this one. So this is a game. Basically, you can go into the address here. Tetris. You can play it around. And basically, it's just very simple. You can use keyboard to navigate the thing around. And yeah, basically, you're just trying to clear, like fill in the business. And it's going to be clear for you. And you can enable sound. I think it's going to be loud. Yeah. Not sure you can hear it, but you play it on your own browser. It's going to be a bit louder. So yeah, so I just talking about this simple checklist for myself to keep track of all the tasks that I'm working on. It is not too like a proper Kanban board or something. It's just something for me to know where I am and where it's going to be ready for publishing. And I just started with the HTML that you are seeing here. So the HTML is like just the skeleton with the game boys and stuff. And the core thing is just the one in the central of the screen where everything is moving. And you can use a keyboard or small to control it. And I'll end up using another library for the core of the game because writing the whole thing like from scratch is not something that I like to do. And it's going to take a lot of time. And I also replace the set timeout and set interval uses with the IHS, which is the reactive way of doing program. And it's just like well known in the Angular community. And after that, I'm just handling the keyboard and something. So when I look at the view of JS code, it was, I think it was well written. It is just like because it was written in JavaScript. So there's a few parts that it could be like easy error prone because when you view it, it doesn't tell you like which part might go wrong. It is like it's a natural JavaScript, which is a dynamic language. So we cannot blame it. But when I start to migrate the code over to TypeScript, I start to realize there's a few bugs that we can catch earlier. And the viewer version was using set timeout and set interval like a lot of time. And there were a few parts that were difficult to understand. And I will show you right now, I think. So this is the, like I said, is the most important part of the game. And because the screen is a bit smaller. So the left side is basically what I was like rewrote with TypeScript. It is just a service. And the right side was the viewer chess. So I try to break it into a smaller function and give it a like meaningful name so that when you read the code after six months, you can understand it a bit. The viewer, I think there's a few bits that I don't understand. Like all of these four things and just their own of the manipulation plus thing here, like X, Y, the zero, one. And I don't really understand it. So that's why I decided to use another library and also really rewrite the brain of the game. I don't reuse the viewer chess logic for that. So I use this NGA Tetris game. So it is just a call. Like basically there's an array which fill in like 200 object. And when you want to render it on the UI, you need to do your own path. It just provided you the call, which is the data structure. And I added a bit more functionality, like navigating between the pieces like library and clearing and stuff. But the core thing was like still inside the library and Tetris. Give the guy a shower. It's very good job here. So the game loop, when you think about it, it's very simple. You see it like when you start the game, always there's every time like after a fixed like time, there will be the pieces going down. And when it's rigged to the bottom, another pieces will be like, like, like will be rendered on the screen and it's keep going down. And it just keep going down. And for every movement, you will try to check when the thing is like colliding with other pieces. You wanted to know, is it like filling one solid row so that you can clear it or it is the game over state. That's it. Very simple. So the, it is just inside in one simple function called auto. And it takes a delay, which is the number in millisecond. And I'll just run the timer. Every this delay life could be 300 milliseconds. The, the speed is going to be faster along the way when you like, like, uh, getting like higher score. So the level here now is one, but it could go up to six. When the level is going up, it means the time for you to, um, the time when the pieces is falling is faster. Like, I can start the level five and you see the, the, the pieces is moving really fast. That is the delay that I put in. And if you look at the code, the, the auto function is calling just one function, which is the update function. And just a sec. Uh, can you still see the code now? Joe, do we? Yes, can see. Sure. Thanks. So the, the function to, um, to the, the function inside the, the game loop was pretty simple. That is the update function. And the update function is just do a few things like can mention above. So even, oh, that there's a few parts. I will not explain because it's just the way I, I do it. So basically you wanted to try to move the current pieces now, like just plus one on the screen. And then it is colliding with the bottom. You, you mark the current pieces as solid, which means that there's a, even it had been filled on the screen. It's not going anywhere. It's, it's fixed the position. And then you try to check if the thing is like making a full line or making the full two line or making a full, uh, three or four line. And then after that, just trying to set the next pieces available. And then, uh, if it is like, get out of this function, it will draw the next pieces. And then the update will call it again. And you will get the, the thing. So yeah, basically that's the roughly is the idea. And you can always take a look at my code. So go back to the slide. So now, uh, get back to the, to the data structure that I store the pieces. So basically the pieces that render on the screen is just the geometric shape that composing a four square. You can see that all of that is four square. And it's just in a different, uh, arrangement. Like the F and the G here is like the reflection of each other or the L energy here is just the reflection of each other. And to store it, I have the base class, which I call pieces. And then at a certain point of time, that's always H and Y to know that widely on the screen. And I have the shape thing, the shape property to store the current shape at the moment, because the pieces could like rotate like something like that. Yeah. So you need to know exactly the, the current shape of the pieces. Like if I not change to this one, it's like, it has four direction, uh, movement. So the shape, it just like to store the, the current, uh, shape of a pieces at a certain point of time. And let me open the code for you. So that you can see it easier. So that is the base class, just H and Y and the current rotation. Always even start with, uh, degree zero. And, uh, if you take a look in the rotation, you can see that there's, um, just zero, 90 degree, 180 and 270. So always like maximum four direction. And the shape, if you look into, there's a, there's a array of shape, which is just an array of something else. If I look into the Z, maybe the T thing. So I just set the, the shape of the T by default, which is an empty array. And then I put in the corresponding of the degree to the shape. So if you look into the, the array here, so one is meaning even going to be rendered on the screen. And zero is like nothing. I put it like four, four times four because the, the, the I think is going to take the whole row and the whole thing. So I need to put it at least four by four. That's the reason if I will have the question. And, um, if you define all of the movement, like degree, you can see that there's also the property called next, which to display it on the, on the right side. Basically that the, the one, the next shape. So I, I, I not using the same because the next here is like going to be the smaller, like two times eight, two times four. Yeah. It's just the array is smaller. So I, I don't use the, the same data structure that I put for the shape, but basically that's the idea. And because I put the shape in this like very like verbose way, so that if you want to do a customized pieces, it's going to be simple. I will say so because I, I tried it before with, uh, simple pieces, which is not existing on the dashes game ever, like this is the F thing. So you can put in the F and if you look at the code, it's going to be quite interesting to see because it's going to be very simple. You just define the pieces F, which extend from the piece class. And then in the, the, the shape array, you put in what you want is going to look. So you will put the degree like 90. You can just copy and paste it and you change the thing here. So it will be in like update corresponding on the UI for you. I think it's, it's quite easy to extend. And the piece is going to be generated through one factory. Actually, I forgot what it's called. Is it like this? Oh yeah, it's a piece factory. So when I tried to get a pieces to display on the screen, it tried to generate a new bag, which always has a maximum of, I think, seven dashes pieces. And it is to evenly distribute the piece, like you will see at least the Z or at least the T. If you are, if you just do it like a random movement without putting it into the bag, which means you could see the T like five times and then you see the T then it's not going to make sense. So I put things into the current bag. And if the bag is empty, I will generate the new bag, which has all of the, all of the pieces that I put in. So that I make sure that the pieces will be like evenly distributed. You might see this in one, but you see the other thing twice. For example, it's the maximum. You will not see something 10 times and you see another piece for like just one time. Yeah, that is the idea behind this back thing. Yeah. And I think it's just basically about the data structure of the piece. And each shot is quite verbal, but it is easier to extend. So I think I will still stick with that approach in the future if I need to build something. I would rather do it verbal and easier to understand and maintain rather than to do it a bit short and then later on will be struggling. Animation Y is, I didn't like, I'm not an expert of P-Frame and stuff. So I using IHS also to rewrote the animation. And on the viewer JS version, they was using set timeout and set interval a lot, which creating this callback that we own new about. So I don't want to repeat that decision. So I just try to do it with the IHS. So the animation wise, I was utilizing one of the CLS transform thing to just flip the image over so that I don't have to stop to image. And what does it mean is like when you put the scale with negative one, it will just flip the thing over. Like you put things into the mirror. And that is how I do to get the reflection of the dinosaur. When you first open the app, this one, this dinosaur. So by default, I only has the photo to store it facing to the right side. But when I do the transform with scale negative one, I has exactly the same person, but the dinosaur now is looking to the left side. And why do I need this? Because it's just to make some animation. Yeah, basically. So the first animation we need to look at is the eye. The eye is very simple. It's just like changing between the first two photos, the one and the two. If you look at, this is the first one and the second one. So it just, I close and eyes open. And here is like I close as I open. I also do a very simple IHS. The timer here is working exactly like set interval. So it will go into this tab like every 500 millisecond. And I will take why the thing is less than six. And if it's even, I will just set it to one. If not, it's set it to two. So basically it just to toggle between the two steps every 500 milliseconds so that you have this animation, which is the dragon is opening the eye. The next thing is like the running animation, which is you still do the same. But because the running is requiring faster movement, that's why I put the timer, it's just 100 millisecond. And every like after the lag is moving for eight or 10 times, it will change the direction. So inside the tab function, I also check whenever it's moved like enough for every like it's divided by 10, which is it's moved for 10 movement on one side. Then I just flip the side by doing this left and right. So the left and right here is using the transform negative one that you saw before. That's why I can flip between the two sides. And then the same thing, it will just toggle between the three and the four sprite, which you see the three and the four. So just the lag is moving up and down. And if you just toggle it fast, it will look like it is moving. That's it. But I think it's going to be simple. And at the end, I need to combine the things together. And by combining, I mean, the dragon will open the line and then it will start to run. Run, run, run, please run. Yeah, and start to run. And then after a while, it will open the line and just keep repeating this thing. So I was combining the two things together using this content operator, which means that you just finished the first one and then you run the second one. I put the delay for five seconds because when I first load the touches, usually it's going to take five seconds for the first animation, which is this one, the one go down and go up. And then I start to load the dinosaur. And after it's finished one time, it's going to stop for another five seconds. And it will restart it again. So could you wrap up in about five minutes? Is that okay? Sure, yeah, I think it should be okay. Okay, yeah, probably fine. And yeah, it is at the end, it's the animation on the left is that what I did and the right is the original version. Basically, it's not very identical, but yeah, for me, it's good enough. So the keyboard handling was simple because in Angular, they have this hot listener, so you just define a function. You put the hot listener and you put the key with the, like, you separate it with the dot and then like you do key down and the arrow left. So when you press the left on the keyboard, it will go inside it function, like automatically. And what you need to do is just to handling it. And for the web audio is a bit tricky because different browser get different implementation for the web audio so that I receive a lot of feedback after I published it on GitHub. And the guy was saying that sound would not, like, working properly. That's why I'm using this audio context monkey patch. You might want to consider to use it. So basically just like streamline some of the API between Chrome, Opera, Firefox, and stuff. And you don't have to worry about the rest. Yeah, and I think it's somewhere here. Should be, I forgot. And with that, you know, the town spending was like, I was spent about 30 hours. I think it was still a bit long because I don't have to write all of the HTML and CSS and also the core of the game. But still it took 30 hours, which is like a week of work. But yeah, pretty enjoying it. Like it's a cool game anyways, and I can play it later on. Got some community support and people were sharing it over and over. And I was really like exciting to see it is growing. Yeah, it will even get to the top training on GitHub for that one day, for TypeScript. And with that, thank you. And I hope you enjoy playing the game. Yeah, I think that's it from my top. And you have any questions? Just put it on the chat or you can unmute and we can have some discussion now. Thank you. And I forgot, happy new year. Everyone, finish. Thank you very much, Trun. Thanks. And I'll just take a screenshot. I did have a couple of questions, but you answered both of them. Oh, yeah? Oh, thanks. Is anyone else have a question? Yeah, I know, because I always talk about Angular. But I think because I did it for a long time, so that is the only thing that I very understand. I just started with React recently. And I think React was, yeah, I would not to the level that I can talk or something. But I think Lihong, he has been very interesting on, how to call it, like, Stel. I cannot pronounce it, Stel. Svelte. Svelte, Svelte. I guess. Yes. So, yeah. Looking forward to the Svelte. Okay, no questions. I will have a little look at the code later, because Angular is, or actually it was the React, RxJS was, it's a little bit alien to me, but I guess we'll see what's going on. But it's quite a different way to do things. Yeah, I think usually when I also, when I started with Angular, I didn't really understand what is going on with IHS. But once you get into it, yeah, you start to realize there's few, you can implement differently with IHS. It's just the indirect way of putting things, because usually we click a button and then you perform, like, code a method on the class. But with IHS, like, you click a button, and the button will fire an event. And somewhere on the code, there's an event listener who listen to this click thing. And what you need to do, you need to base on the stream of event that's coming in, and you handle it differently. So it's just a different way to think about a problem. Okay, thank you very much. Yeah, thanks for having me. And yeah, I hope you enjoy it. I did. So let's go on to Li Hao Tan. He's going to talk about Svelte Actions. Oh, it might be at the top, if it's, actually, you'll find it. Okay, okay, can everyone see my screen right now? I can see it. Okay, cool. Let me take a seat. Hello, everyone. Welcome. Nice to meet you all. Although I can't, I'm staring at my screen right now, which is just my slides. But 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 Li 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 like how COVID changed us, where thinking of maybe trying out multiple stuff, different things. And one of the things that I'm trying is like making YouTube videos. And having fun doing it. Well, if you want to support me, probably subscribe to my channel, 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 a bit different with React, where most of the stuff that is 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 dance 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 run time, which is while you're executing the code. Whereas figuring out all the stuff mostly happens in the build time for Svelte's. So this would be, so I guess just to let make you guys have a sense of like how Svelte looks like. This is a component written in React. You have a function called components. 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's 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 use states to get that state variable. Right here, you just declare a variable and it will hit like a state. 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 only applied 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++. I can modify the variable directly. Somehow when it compiles to JavaScript code, it handles that nicely and make sure that the counts variable is reactive, right? Whereas in React, you are calling a set count. Yeah, basically besides this, it looks pretty much the same. It's just happening, different things happening under the hood. 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, kind of 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 and directives 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 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 of the action matches with this, then you will use this function action, right? Yeah, I haven't covered like how it is used, but you will use this function as an action. And this function itself is like some sort of contractual between, that there's like this function, it's 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? So we'll 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 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've 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 a function, which is, which is taking two parameters, element and a 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, be moved to, if 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 gonna now go step into a spelt's ripple, which we can, which I'll do some like coding, like coding kind of thing where I can show you like how it works, right? So all of this example I'm gonna show you now and later will all actually, I've actually done them, did them on my YouTube channel is I'm not that clear, you can always watch them on my YouTube channel. Sorry with the plug, 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 will need to import like flat picker and then do it, right? So I'm gonna come here over here and we're gonna 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 flat 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 Vue, then they'll tell you that this is a component and use your component, right? But if you are like a just very large script, then probably you'll say that if you want to make some elements like a dead picker, then you'll pass in that element, right? So I'm gonna 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 mean 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 gonna share today. So I can have an action, I'm gonna call any name I want dead 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 views 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 param should be called undefined. Then I will call flat picker over here. So this is the element that I have a flat picker. Then you will see that something happens. This button has become a dead 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 gonna 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 true. 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 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, or change, let's see, what can we do? Current month, okay. So for example, if you change set date, 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 would 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 kinds of things depends on like what you want to design as a parameters for your action. So here, I'm going to have like a check box, bind check equals to open. So if I uncheck, check, you open and uncheck, this variable will change to false and they will close it. So that is it's integrating. You can use actions to integrate with other libraries. 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 listeners. 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 downs. And as you type something, you probably record the keys and then if the keys matches with this combo, then you will say unlocked your set, like your set available unlocked to be true, something like that. So in this case, it's called, let me think it's up, down, up, down, left, right, left, right. And then the secret will unlocked. So you can use event listeners to do this. Then probably you would have to define this event listeners 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 secrets. 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 secret, right. And this way, basically you encapsulate like the event listener kind of logic in one action, right. 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 your 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 listeners. 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, you, 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 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 event like on secret combo achieve, right. Doing it this way means that it's, I don't know, probably it feels more stylistically, it 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 one, two, three, 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 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 actual events, your actions is just a normal function that takes in the elements and probably a parameter that you can pass in. And yeah, this function will be called when your element is mounted. And if you will return an object, it can contain two methods, which is update and destroy. And the update will be called when the parameters change and destroy. It's called when that element is removed from the DOM. And that is swell action in essence. So any questions? Yeah, I think questions if you have any. Oh, thanks, Lee. How that was amazing. I actually understood some snout. Thank you. Is there a question or chat? I see chat. Oh, okay. Yeah, I just stuck your slides up. You answered my question already. Yeah. I was wondering if it was possible to pass in options from the element into the action function that is passing in parameters. And it takes them at the beginning. Yeah, it 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 salt, maybe some salt 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. Okay. I believe both of them have rather official kind of plugins. So if you look for VS Code, I believe that's a VS Code style plugin that is official. Let me see. It should be like when I said, yeah, you will see that it's like the publisher is spelt. Yeah. Not too hidden. Yeah. Okay. I see that one. And do you use anything special for ESLint or you just use this plugin for VS Code? You could use ESLint plugin for spelt as well, which is also within the spelt organization. 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 on click instead of on colon click and things like that. Yeah. So if you use spelt of VS Code, it 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 example, 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. All 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. Anyone else have any questions? Bye. Seems like everyone is rather shy. I guess I can show my screen right now. Okay. Well, 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 Ni Hao, you can I'm sure you can find him on Telegram or on Twitter. 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. I have a taste for two months. That's great. Thank you. We have a question for Ni Hao or for anyone. How extensively is Svelte used? I'm curious about 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 Svelte being used? Or probably I can answer either both questions I guess. I mean in terms of companies, I don't really keep track of like all the companies is being used using Svelte. There's this like meet with Svelte or Svelte Society Twitter channel they always they have like showcases of what other projects or companies is using Svelte. 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 it. I guess like Google, I remember like there was like a few demos of them using Svelte right. So yeah, I mean I don't promote like changing your code base overnight through from React or Angular or whatever to Svelte right. I mean yeah. So most likely people would do is probably with new projects they want to try out then 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 they are more more kind of use cases are being showed. 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 new 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 also see people doing like games stuff like or maybe like a full blown dashboards and stuff. So it's 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 it's like that there's no like limit on things that you can't or couldn't do right. So yeah so that that's about like how extensive Svelte is used. Hope that answers that question. And I see you another question. So I guess it's Amos Ang is asking whether Svelte interoperate 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 ViewView within React. It's possible right. You can write a wrapper components and that can be done right. Whatever it's inside is handled by Svelte whether in the 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 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 know 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 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 compared 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 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 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'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 a several team. 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 big enterprise maybe they have reason for doing so. 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 late. Yeah I guess sir. Thanks very much for your talk today. Welcome. It's very quiet over here but yeah I will see you all next meet up hopefully. Bye bye. Bye bye. Thank you. Bye bye. Um thank you. Yeah thanks for coming. Bye. See you next time. Bye. Thank you Chung. Enjoy our host thing 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.