Ngborolin Svelte feat. @lihautan - Ngobrolin WEB

1:22Senuari?

1:25Yang jernas Kamis ini di Wali.

1:28Di Wali?

1:30Gak ngikutin saya, maaf.

1:32Di Wali?

1:33Di Wali hari Kamis 31 ini.

1:35Pasti tau gara-gara selama berapa.

1:37Tanggal Merah ya?

1:39Tanggal Merah di Singapura.

1:42Apa sih?

1:43Malaysia Singapura punya komunitas keturunan indianya tuh ngerayain di Pavali kan ya?

1:51Di Wali.

1:53Nah tanya aja sama Kresna nih, tuh.

1:55Kresna lebih mengerti sepertinya nih.

1:57Kayaknya di Bali nggak ngerayain di Wali?

2:00Nggak, beda.

2:01Oh beda ya?

2:02Itu kayak kultur.

2:04Kultur.

2:06Seperti ini mirip view.

2:09Nggak, ada miripnya.

2:11Agak beda, agak beda.

2:13Ya beda.

2:14Agak beda.

2:16Mirip dalam arti, kayak apa tag-tagnya itu bentuknya.

2:20Elementnya, menyerupai, deket sama HTML.

2:24Nggak JSX.

2:26Tapi cara kerjanya beda.

2:28Oh berarti temen-temen di sini jelasin cara kerjanya.

2:31Ini di mana ini?

2:32Oh nanti kita tanya.

2:34Berarti beberapa teman di sini ada yang belum familiar dengan Svelte ya berarti ya?

2:38Kecuali Kresna ya?

2:39Coba di chat pada tui siapa yang pakai Svelte, siapa yang...

2:44Hindu di Bali tidak ngerayain.

2:46Oh iya, sorry, sorry, salah.

2:47Iya, makanya kultur India.

2:50Saya suka kebalik-balik.

2:52Kapan saat terakhir, kapan saatnya tepat mempelajari Svel?

2:57Saat yang tepat sebenarnya kemarin.

3:01Saat yang kedua saatnya paling tepat adalah sekarang.

3:05Ini mengumpung Svelte 5 nih, mengumpung Svelte 5.

3:07Jadi, ajarannya jadi lebih enak kan ya.

3:11Kenapa sih sebenarnya?

3:13Gimbal paling besarnya apa Svelte 5?

3:15Svelte 5 di rewrite ulang semuanya.

3:18Wow.

3:20Ya, tapi bentar tadi siapa yang udah pakai Svelte, siapa yang belum bentar?

3:26Svelte itu dikembangkan kurang lebih 18 bulan, 1 setengah tahun ya.

3:32Ya, jadi yang bikin itu si Mas Rich Harris itu ya.

3:36Pas dulu beliau masih kerja sebagai developer di New York Times ya, di online media.

3:44Terus abis itu, ya dari awal Svelte sampai Svelte versi 3 atau 4 ya.

3:56Abis itu dia dipekerjakan oleh Versel untuk kerjain Svelte secara full time.

4:05Memaintain hal full time.

4:07Jadi Svelte sebenarnya sampai versi 3 itu masih kayak side project ya hitungannya.

4:13Project sambilnya karena si Mas Rich Harris itu masih nyambi kerja sebagai developer.

4:20Cuma di sana maksudnya kerja di media, terus karena ada kebutuhan buat kerjaan,

4:29bisa difasilitasi, maksudnya dikasih waktu buat bikin framework,

4:34sebenarnya compiler library sih, cuma kan suka disebut framework, bikin framework sendiri.

4:40Maksudnya di sana ada kultur, ya udah, di sana boleh bikin apa yang terserah.

4:45Kalau di kita tuh ada nggak sih, misalnya yang terjadi kompas online atau di-pick atau apalah gitu,

4:52buat kebutuhan itu, terus ya saya mau bikin framework aja Pak.

4:56Paling internal, ada, paling internal mungkin ya, nggak dipublish.

5:02Oh iya ya, kalau internal sih umum sih, cuma ini yang bikin oleh Carmen di open source.

5:07Dan memang dijarin generic bukan cuma buat kebutuhan dia bikin artikel, bikin website in your control.

5:16Iya, ini ada info juga nih, katanya dia itu bekerjanya sebagai designer bukan developer.

5:23Si Mas Rich Harris.

5:28Cuma kelihatannya kalau, ada beberapa cerita.

5:32Bukan, ada divisi desain, maksudnya kayak department.

5:37Oh dia developernya.

5:40Cuma maksudnya skillsetnya bisa aja dicampur.

5:44Jadi maksudnya department desain, cuma nggak tahu job titlenya exactly gimana.

5:49Cuma maksudnya kalau di beberapa tempat di luar tuh, desainnya tuh nggak selalu berarti harus UI atau visual design.

5:58Seingat saya sih dia tugasnya adalah membuat visualisasi-visualisasi di...

6:04Data face.

6:05Data visualisasi kan, makanya dia selain bikin spread juga bikin ada library.

6:10Library, apa itu namanya yang bisa chart, charting tapi bisa tanpa jelas.

6:16Css doang, css doang.

6:18Orangnya gila, orangnya gila.

6:21Cuma karena itu balik ke kebutuhan itu kan media online kan.

6:26Selain harus bisa nampilin visualisasi data yang kompleks, harus ditampilin dengan enak dicerna.

6:34Tapi harus cepet juga kan, orang baca berita buru-buru.

6:38Harus bisa diakses dalam, mungkin ada versi AMP-nya, EMP-nya yang JavaScript-nya juga terbatas.

6:46Jadi harus bisa.

6:48Dan pas banget malam ini karena kita kedatangan tamu spesial dan karena tamunya spesial terpaksa kita mulai dari detik ini kita harus berbahasa Inggris.

6:59Let's speak English.

7:01Kita orang berbahasa Indonesia dengan lancar.

7:04Kita orang berbahasa Malaysia saja.

7:07Eh bisa?

7:09Betul, betul, betul.

7:10Kita berbahasa Malaysia saja.

7:12Jadi, please welcome Lihau.

7:18Hello, hello.

7:22How are you Lihau?

7:24I'm good.

7:26Just got off from work and thanks for having me.

7:31Thanks for coming over here.

7:34Nice to meet you.

7:38Can you play the piano?

7:42I try.

7:46So, before we get started, we already started anyway, but before we ask you some question or you ask some questions,

7:57how about you tell us some introduction about yourself and what you do.

8:03Okay, hi everyone, I'm Lihau and I'm a front-end engineer at Shopee.

8:10I'm based in Shopee, Singapore.

8:14So, yeah, that's about myself.

8:18So, that's about myself at work.

8:21Outside of work, a few years ago I participated actively on the Svelte in open source

8:31and also Svelte.

8:34And these days I'm mostly busy with work, but I will go to maybe speak at conference once a year or twice.

8:44I'm just trying to get to know new people and maybe as an opportunity to just travel around to see people.

8:52You're based in Singapore, right?

8:55Yes.

8:57I watched you online when you gave a talk for Svelte Indonesia community during Covid.

9:06Oh, yes, yes, I think that was when I first started going to speak and just meet new people online.

9:14Yeah, before you get famous.

9:17No, I'm not famous.

9:19I'm not famous for watching your talk before you got popular.

9:28No, I'm not popular at all.

9:30I don't think I'm popular at all.

9:32I'm just, yeah, thanks for all this.

9:38So, how you get started to become a Svelte maintainer?

9:43Okay, I think I've shared with some of you before.

9:48But let me quickly go through the story.

9:51I think it's an interesting story.

9:53So, it was during, so first of all is at my work, I'm really interested in learning about build tools.

10:05And so I'm more on working towards like the help of my team to webpack.

10:13And I find it interesting, I find like upgrading like React, Webpack, ESLint, this kind of tools interesting and challenging.

10:22You know, like reading through the documentation and figuring things out.

10:25So, this is basically things that I've been doing at work.

10:32And that's how I got into like figuring out like how things like how open source library works.

10:39I think that is the first time I got into know about there's actually people, there's actually like open source libraries.

10:48What actually means is that there's actually code that is on GitHub that you can actually go and look at.

10:54And so that's where I get into and like trying to understand all these projects.

11:02And during COVID I was very, like everyone is stuck at home, nothing to do.

11:09And I was like scrolling through Twitter and I saw this new framework was released in 2019.

11:15I wouldn't say it's released, there's a new version 3 that was coming out, Svelte 3 during COVID.

11:21A lot of people, like some people around me that I follow was talking about it.

11:26And I was very curious and I realized that they also have their code.

11:29They also are open source projects, they have their code in GitHub.

11:32So I decided to like clone the code and take a read and like trying to figure out actually how does it work.

11:39Because it feels very magical to me.

11:42And to be honest, the first time I read it, I don't even know where to start.

11:45I don't even know how it works.

11:47But so I think like basically I know like okay this is the entry, like you know in the package JSON there's a main file and there's an entry file.

11:56So that's basically that's how it starts, right.

11:59And so basically I try to comment things out and see like oh where, which part is where.

12:06But it doesn't get me too far because it's quite boring and I don't even know what I'm trying to look for or try to figure out.

12:12But it just happens, I think I got lucky that I found like there's this file, there's this module that says like,

12:22there's some like comments that says to do like we need to have a better way of implementing it.

12:29And I can't remember exactly which one, maybe it's like a debug tag or something,

12:32which is like very obvious by the name, the function itself, it's related to something.

12:38But just so I try to like maybe figure out what the comment means and try to make that change.

12:50And so I remember that time I make some changes and then commit and then push and make a pull request and then I go to sleep.

13:01And then nothing happened, yeah, nothing happened.

13:07So it was a few after a few more days until like oh I saw someone like comment on it and like oh this looks good to me and then got merged.

13:17And then only like oh okay.

13:21I was like oh okay, but I think it's probably because the thing that I made was like not a big change,

13:27it's just changing a few lines of code that makes it like easy to review and merge.

13:33And so I got more motivated, I feel like oh I think this is something interesting.

13:40Maybe let me try and read more and try to find out like is there more to-dos or is there more issues that actually I can understand and I can try to do.

13:49And that's how I get started, like making more pull requests, yeah.

13:55And I have to say I got very lucky.

13:58During that time it was COVID, the main maintainer, Rich Harris, he was at that time he was at New York Times,

14:06which is very very busy with building the news reports about, you know, remember, I kind of remember like during COVID there's a lot of news.

14:17Interactive.

14:18Interactive.

14:19Interactive COVID.

14:21Information, yeah.

14:23Yes, yes, exactly.

14:25Yeah, all those things and it's, I think he's very busy building all those websites and he don't have time for Svelte.

14:32And I think I got very lucky because of that as well where no one is looking at it and I managed to like make a few more pull requests until they notice like oh how about do you want to join us, be part of the team.

14:47Basically means like add us, I will add you into this special group chat, you know, so that if you have any questions you can ask there, things like that.

14:56Yeah, and that's how I got involved into like Svelte.

15:01Oh wow.

15:04So you're just lucky.

15:06It's not lucky.

15:08It's a combination of luck and perseverance, like hard work, consistent hard work.

15:15And the moment, yeah.

15:17And the time and the time as well, right?

15:19Yeah, like I think like if I, at that time I don't, because of my work, I wouldn't know that oh actually you know open source means the code is in GitHub and those are just JavaScript where you can use it.

15:30Those are just JavaScript where you can understand, because I, in my work I did something like we were trying to, when we're trying to upgrading some of the build tools we have to figure out like oh why this doesn't work and then make like issues, create issues and like actually maybe like show that oh this line of code doesn't work and then make questions and stuff like that.

15:51And it was then realized that oh actually you know it's not some magical things that happen behind, it's all JavaScript.

16:00Yeah, it's important to understand that.

16:03We can even fix it because we need it for work.

16:07Yeah, let me, let me do the full request.

16:10Did you get any t-shirt?

16:14Like swag.

16:17Yeah, is there a swag for being a maintainer of Svelte?

16:22I don't have, I don't have something with me right now.

16:26But I remember, I remember the first time I was, the first Svelte Summit, I was there.

16:34The first one after the, after COVID.

16:38The first physical one.

16:40In the UK? I think in Sweden?

16:43I was at Sweden a few years ago. Yeah, yeah.

16:47After COVID?

16:49Yeah, after COVID.

16:51Yeah, the first one.

16:54So I got the t-shirt from the conference and I got to meet the people in the first time.

17:01They pay you to go.

17:03And you can say, oh is that you who refued my PR?

17:07Yeah, exactly. I get to meet people, I get to see that, oh, oh, this is, this is how Rich Harris looks in real life.

17:16Oh, you met him in real life, yeah. Oh, nice, nice, nice.

17:21Yeah, yeah. It was, it was, it was very interesting.

17:24Like people that you, you heard about it online and you managed to see them in person.

17:31I think especially because in, yeah, I think especially because in Southeast Asia, even when we go to meetups and conference,

17:40usually you don't, I mean some of the packages or libraries that we use sometimes,

17:47I use, are created by people from say America or from Europe and they maybe don't come here often.

17:54So it was interesting to be there, to see them in person.

18:00Yeah. But I've heard, I've heard Evan Yu in Singapore right now, no?

18:08Yes, yes, yes. And so, so you guys should come to, I mean if anyone wants to meet Evan Yu,

18:15you should come to Singapore for conference.

18:17You met him at any meetups?

18:19Hockerhoods, no, no.

18:21Someplace, randoms.

18:23Not Hocker, I don't think we stay near each other. He probably stays somewhere like condominiums or like very rich place.

18:33But I think, I don't know, actually I have no idea where he's staying.

18:37But he's, he's, he's in, I think I've seen him in conferences, like there's like one conference.

18:45So he's active in the local developer community.

18:48I think he, he does show up in local community, conference or meetup.

18:53Yeah. But, yeah, yeah.

18:56So now we can go to DevFest Singapore. Let's see if Evan Yu is coming.

19:01Evan Yu speaks?

19:03Yeah, you should invite him to speak.

19:05Yes, meetup maybe.

19:07Invite him to speak and then, yeah, then he will, he will show up.

19:11That will be interesting topic now if Evan Yu come to any DevFest in Singapore and the topic is why you don't need Angular.

19:20And let's just use Vue or something like that.

19:22Vue.

19:24Yeah, I guess that will be interesting.

19:29So, so in your day-to-day life, day-to-day work, you don't use.

19:39Do you use Svelte?

19:41You use React, right?

19:43Oh, no.

19:45Oh, no, yeah.

19:47I think, I think there's a huge part of, the most part of Shopee is written in React.

19:55There is a bit of Vue.

19:57I think in the, in the very beginning of Shopee, people are more, Evan, like because we are like just starting, like start up and we are all very adventurous on choosing all different frameworks.

20:08And as team grows bigger and bigger, I think people are thinking more on like maintainability.

20:15Maintainability, yeah, how many developers use it.

20:20Yeah, and also like maybe on how easy to transfer people around on different projects, right?

20:28Maybe like, I think it's also part of maintainability where if someone is, maybe you have a team of people working on this project and maybe some of the members left, then can anyone help to maintain or do they need to learn something new to come in and maintain these projects?

20:44And, and I guess it's like organically slowly people choose like similar things or maybe we have new projects coming on and this person have been using React and setting up a new project with React is much easier than starting everything from new.

21:00And because you have to deliver features and deliver, yeah, features, right, fast. And so, so you use the same thing that you've been very familiar with or you already have a lot of libraries or utils that is like in-house that you can use with.

21:15Yeah.

21:16So, so I think most of the projects.

21:19As far as you know, there is no spell in Shopee.

21:25As far as I know, most projects are not written.

21:30Yeah, I think most, as far as I know, most projects are written in React.

21:35But I don't, I don't think that that will be, we will always stay with React forever, right? I mean, but I guess it just needs to.

21:50I think data, the data is the most important thing to like, I see the part of the question is also about how to convince.

21:59Have you tried to convince your, your like your supervisor or something like maybe for a microsite, something, something apart from the main core app?

22:11I actually have not really tried very hard to convince.

22:17Okay. Yeah, I've been focusing on other problems at work rather than, yeah, and rather than the frameworks and stuff.

22:27But I think recently, yeah, but recently we are also looking at performance.

22:32I think that would be one aspect that we can see or talk about when, when, when we reach the state where, you know,

22:42we reach bottlenecks of how much we can improve based on the current frameworks and stuff.

22:46So I think we are still very early on in performance improvement.

22:51I think we have been focusing a lot on delivering features and features.

22:55And basically before you optimize this code, maybe we already delete the code and, you know, build new features and rewrite and factor and stuff like that.

23:03But I think Shopee now has been more mature and it's time to like consolidate things and like look at like how to improve the performance of certain critical pages and stuff.

23:14Then maybe by the time when we do all our best to optimize and we still think we can do much better,

23:23then maybe we can like, you know, make some proof of concept or some data to demonstrate that.

23:29So the data can be, of course, the data can be a lot of different dimensions, right?

23:34One is like the performance is better written in this way than the other.

23:38Maybe like bundle size, LCP, core vitals, and data can be also including like resource,

23:45like how much time you need to learn this thing and use it to implement this and yeah, all sorts of data.

23:52Then I guess that would be something that would be a more comprehensive proposal that you can bring up to someone who can make the decision.

24:03Okay, this is another question.

24:11Why do you think that people tend to use something like React compared to new framework like, yeah, like Spelt or even Astro or Quake or another new frameworks?

24:28I think people are just, if you ask me, I think it depends on what kind of projects you are on

24:38and what kind of experience you have been and what are the requirements that you need to deliver, right?

24:47Maybe you have a lot of experience with Mearn and MearnSnap and maybe right now your requirements is you need to deliver a new feature very fast, right?

24:56Then maybe you don't have time to learn a new thing to start from scratch or you have a lot of past experience to draw from.

25:03Then I think it's much, it makes a lot of sense that you just do something that you are very sure of the results and you have a lot of experience

25:12and you know that whatever problems that you face, you have already experienced know how to handle those.

25:18So it's a more controlled situation rather than a lot of unknown unknowns, right? Of course like, so it depends on situation.

25:26Maybe you have a lot of time and maybe this is not a very critical project, then maybe you can try and maybe it's okay, like projects that you are okay to fail, then yeah, right?

25:35You can be more adventurous.

25:38Yeah, so my question is related to what you just mentioned, like what types of projects, what types of web apps would you strongly recommend people to use Svelte for over other libraries or frameworks?

25:56And on the contrary, what types of projects that you really don't, you don't really recommend using Svelte, like maybe pick something else?

26:06Well, assume there is no external constraint like, I don't know, like team, your colleagues only write react, like disregard those factors.

26:19Yeah, so what types of projects would you recommend for Svelte?

26:24I don't think there's, I think if you ask the same question of what kind of projects that you would recommend people to use react and what kind of projects you would recommend people not to use react, I don't think there's a clear answer for those things.

26:47Like there's a lot of, even like there's all sorts of applications from simple like blog to even like things like very complicated like Figma or some like Photoshop, all those are very complex stuff that you still see people using react to build a lot of those things, right?

27:09Or even like the stream yard or like some video conferencing, calendar, all this that you still see people using react for those things and they work well in all sorts of situation, right?

27:21So I would say the same as Svelte. Of course, like comparing to react, like Svelte is, I would say it would be much easier to use and it's much more performance and it's smaller.

27:37And I think if it's just comparing side by side with Svelte and react, then there are certain situations, I find it so much easier to write it in Svelte than react would be things like you have to, when you're trying to do with like animation, transitions, those kind of thing, it's so much easier to work with using Svelte than work with using react.

27:59Okay. I remember one, sorry, I remember one. Sorry. Eka, eka, eka. Go ahead.

28:08No, no, no, just. There's a delay seems like. Yeah, there's a delay. I remember one article said that Svelte is for side, react for apps. Is this still relate?

28:22A case. Until now? True.

28:24This is four years ago. Yeah, this is 2020. Does it still hold true now? After react has so many new features, same with Svelte, so many new features. Does it still hold true?

28:37Okay. I can't remember what's the argument for this one right now, but I don't think it's, I don't think that's the intention of this article. I think the article is, how should I put this, I think the main, my understanding, deeper understanding of, okay, my, from what I remember, the goal of this article is actually trying to say that

29:04if, if you want to, like it's trying to build, bring like some ideas for people to say that, you know, instead of having react for everything, you know, maybe if you're building certain sites, you can think about using Svelte because it is really good.

29:23It's much better than react when using it, but it doesn't mean that Svelte cannot be used for apps and stuff like that. It's just because at that point of time, everyone is using react for everything, right? So, yeah.

29:37Like there's a world, there's, there's something else outside of react in the JavaScript web dev ecosystem. So the point is more like that rather than here, Svelte is for this and react is for that.

29:51Yeah. Yeah. Because I remember back then, 2020, we have things like, what's the blogging thing.

30:02Like the, there's a react framework that builds like static sites. Yeah. Yeah. And it's like, it's, it's, I remember like using Gatsby and like frameworks like this is, it's very heavy. Like it does a lot of things under the hood and like overcomplicate. I feel like very over complicated, right? It uses the graph QL and then like all sorts of things.

30:31And most likely, most people just use it to build blocks, which is a very static, relatively static sites with a little bit of interactions. And like having react is like over too, too, too heavy, right? So, yeah. So, so I think the article goal is that, you know, instead of thinking every react for everything about for sites like that's like lightweight and static. Maybe if you just need some interactions, maybe you can consider Svelte.

30:58Right. Yeah. And I think that's, that's the goal of the article rather than say that Svelte cannot use for applications and anything else.

31:07Okay. Yeah. And I think at that time Svelte felt very novel, like very innovative because react, you know, use the virtual DOM. And then you have to include the react bundle in the build, like your website, your webpage actually contains react. Whereas Svelte works more like a compiler. Is that correct? So it process the JavaScript, spit into regular vanilla JavaScript. And that's what you use on your webpage.

31:36So on your webpage does not actually contain any Svelte at all. So there's no overhead. And I think Svelte was the first to adopt that approach, I think. Is that right?

31:49Now I think Solid or something use the similar principle. I think a lot of frameworks now have realized that there's a lot of optimization. There's a lot of rooms for optimization that they can do if they move some of those things to compile time.

32:11Basically during build time, you can analyze the application and maybe do something to optimize the application that to the JavaScript that the user receives and save some of those time needed for the users when they have to run it on the browsers.

32:29And I think a lot, as Eka mentioned, frameworks like Solid, I think even Vue has some build time optimization and I think even Angular and all this, they all have some sort of optimization.

32:45Even React, right now there's like React forget, right? React compiler. So instead of you having to optimize your entire application with all the use memo, use callback, it actually analyzes everything.

33:00You don't have to write those. And actually the code in general is even more optimal than the one that you would ever have written using the use memo.

33:12Even the JSX that you return, all of them, they will try to optimize such that you don't have to recreate all those objects again.

33:22All those things. So I don't know about the full history, I don't know whether Svelte is the first one to do it, but I think comparing what amongst those current big famous frameworks, I think Svelte is probably definitely one of the earlier ones to do it.

33:51It's interesting though, you know React has compiler now, so React is in a way kind of turning into Svelte. And Svelte has like the rune, the new effect hooks, kind of like React hooks, so Svelte turning a bit like React, like they're just merging.

34:10Like this, like this one. Or Effect, right? Like they interact with each other. Yeah, I mean even like Svelte 3, I can't remember the exact thing, but I can't remember the full story about it, but I think I heard this anecdote that someone shared with me before.

34:37Like basically before Svelte 3, which is like Svelte 2, and then React hooks came out, and it was like, it was very new back then, right? 2018, yeah, and a lot of frameworks, like even Vue has composition APIs, was very heavily influenced by that, and I think Rich Harris also saw that, and the thing about how they can use it for Svelte.

35:03And that's how you, that's how Svelte 3 was. It was before the dollar sign. Before Svelte 3, Svelte was written in a very, it was written differently. It was not as, not the situation as you can see right now.

35:22The way like, for example, the use Effect, where like instead of using, like the reactive declarations, like the dollar, colon, something like that, in Svelte 3, those are all like, all setting like, like declare states and stuff, I think those are, they think about all these syntaxes when React introduced like hooks, and then they were like, okay.

35:49This idea of writing or declaring states and effects is interesting, but it's not a nice way to write, so how we can improve it or do something like that, and then therefore like born like the Svelte tree syntax that we see right now.

36:08And for Svelte 5, or the runes that we see right now, is actually born by the limitation of what we can do in Svelte 3.

36:20Because analyzing the entire, analyzing the code base and trying to figure out all these things by, during the compile time by the compiler to figure out where, what variables will change, what variables is used in by template will change.

36:39You have to track everything, and you use some heuristic to figure that out, to make sure that, to check whether which variables is reactive, and there is a lot of situation that, that logic will not, will break, or does not work.

36:54For example, when you move this variable or this statement into another function, then it will break, it will not work anymore, or you move it to a different file, it will not work anymore. You just change, maybe you have a reactive declaration, and you just move the statement into a function, and then you can't see that this variable is a dependency of that statement, and then it doesn't rerun anymore.

37:17A lot of this kind of things breaks when you just make some refactoring, right?

37:24So this is the limitation of the compiler at the moment, right? Because we are not, we don't have, we have no way to figure out what are the dependencies, exhaustively, and figure out everything that we figuring out.

37:44So that's why we introduced some runes to basically to mark, like to mark it, to tell the compiler these are the reactive statements.

38:00You have to pay attention to this, this part, yeah, and maybe to reduce a bit of time complexity, you know, because maybe if the project is very, very large, the compiler then has to work very hard to, you know, to find, to, to detect which parts will be changed and which parts are related, like if you have a function, which pages or which components use the function.

38:27Maybe this will improve performance.

38:32Yeah, I think it will, that's when Spell called it the universal reactivity, right? Basically it's when you have the code that you want it to be reactive, you already mark it with like runes, right? And when you move this code anywhere, whether you move it into a function, you move it to a different file, you move it like across many, many files and folders into a different packages and stuff like that, it will still work.

39:01Yeah, like even like you call a different function, you move into a function that inside another function, inside another function or move it anywhere, it will still work. And that's, that's why we call it's like a universal reactivity. It just works everywhere in your code.

39:17And, and basically it's, it's yeah, that's, that's like one of the things that is much better than in Spell file or before Spell file where you can only have reactivity in components and once you move out, you have to rewrite it into using like spell store or some other ways of writing it, right? Yeah.

39:41Which, which falls back to the clients, the runtime reactivity, which, which basically is, is what it is right now. Yeah.

39:51Yeah, it's related to Kresna's question there. Like it's a good question. Do you have info?

39:59Yeah. Especially how the internal team and ambassador reaction, like did it get a lot of backlash? Of course, as far as you are allowed to ethically disclose, like were many people happy like, yay, we finally have this or were they like, no, no, it makes it so complex or whatever. And what were the arguments? Like it's, I think it's interesting.

40:25Yeah. I have to, so I think sorry to disappoint here. I don't really know. I wasn't very, very much involved in the discussions about the entire thing. So I don't know like all the, all the, all the discussions and arguments for and against.

40:48But I do know like whenever we come up with something like when you first see it, you were like, oh, why, why we have to do this and things like that. And, and, and it's only when you start writing your code using it, right?

41:03You know, like try to use it to build some components, build some applications, just trying to play it for a while to say, for example, rewrite the existing code into this, into, into a code using like runes and play around with it.

41:18Only you start to realize that, Hey, actually it's not that bad. Then you first imagine, right? When you, when you just look at the docs, you're like, oh, wow, what's this thing? Right. But then when you use it and then use it a few more times, especially to reflect the old sort of code or reflect the existing red code or whatever to, to spell fives.

41:37Then you realize that actually it's, it's actually it's, it's actually not. Yeah. It makes sense. Right. Yeah. And, and I think it's been, I think almost a year since like we first like the, the alpha version to beta.

41:54And then until like now, right. And I think most people have come to realize that actually it's, it's, it's actually, it's actually makes sense. And it's a nice way of writing it.

42:08I just wondering about when Svel is now is growing and more and more features. I think Svel 4 to Svel 5 in the architectural level is like changed drastically, I can say.

42:26The way, the way when we, when Svel 5 introduced runes and this effect. So, well, that's a foundational, foundational, sorry, how can I, foundationally changed the way of compiler fundamentally changed, fundamentally changed that detecting those state.

42:53I'm more interested about how to keep this backward compatibility and are there any like unit testing, how, how, how, how much is the unit testing in, in, in Svel framework. In the library.

43:07Oh, okay. So actually if you go, if you go to the, if you go to the Svel report, you, you can see all the tests that's written for Svel. And whenever there's like a issue that's being raised, yeah, you can go to the packages Svel folder and then you can.

43:33Sorry, which one.

43:37And then you can look for the test, test folder.

43:41And then you can see like all these are all the tests. Maybe you just open one maybe like runtime runes or anything.

43:50Maybe like runtime runes, look at open one of the samples.

43:56Maybe like, yeah, any one of it will do.

44:01Yeah, you can, you can just open any.

44:04Open any, okay.

44:05Yeah, I think you can open any.

44:07And then you look at the main.svel. So this is the component, right?

44:12Okay, so this is a component. And then if you go, you go to the config.js file, maybe on the left you see that there's an underscore config.js.

44:22Yeah, so basically this is like, okay, when I render this component, what it should behave, what it should do, what I should see on the HTML and stuff like that.

44:34So you have a lot of test case like this. If you scroll all the way down, these are all the tests.

44:39On the left side, you can keep scrolling and see all the different tests.

44:44Yeah, maybe this one. It's such a nice way to understand how it works, right? Like if you're wondering, like, you know, if you just see the syntax, like it's alien.

44:57Like, oh, what is that? It's strange. But like if you see each test case, like it demystifies the whole thing. Oh, yeah, that's how it works.

45:08Okay, it's all normal.

45:10Yeah, so for the one that you just see right now, it says like await account, right? And then the count is just a state.

45:17Or yeah, anything, right? Yeah, maybe this one you look at, you pass a, you create a state using a state runes and then pass it await.

45:25And then what should you see on the screen, right? And then the config.js, if you look at, click on the, it basically says that you shouldn't throw an error.

45:36Yeah, I think the test isn't assert anything, but at least it says like you shouldn't throw an error during a runtime.

45:42So things like that.

45:45Yeah, correct.

45:47Yeah, so we have a lot of these kind of tests in Svelte 4.

45:54And every time when there's someone making an issue and we fix certain bugs, usually we'll create more new test cases. When we make a pull request for the fix, we also add the new test cases, right?

46:09So we build, that's why you see there's so many test cases because we have built out so many test cases over the years.

46:14And when we do this over, when we are rebuilding for Svelte 5, basically the entire code base is rewritten from scratch.

46:24And yeah, it was a totally new project. Everything was written from scratch.

46:31And the components were written from scratch. A lot of things was, back then I think we were using some CSS parser, some JavaScript parser and some like tree libraries and like AST walking libraries, traversal libraries and stuff.

46:53And some of those things are rewritten or create a new library out of it.

46:58So when we implement, when we start creating the, we rewrite the compiler, a lot of those tests fail.

47:06So we reuse all the existing test cases to run with the new compiler and a lot of those things fail.

47:12And basically we slowly fix the compiler from there until we make sure most of the test cases pass or until all the test cases pass.

47:23Or some of the test cases have to rewrite. Sometimes the way you use the component is no longer the way that you write it.

47:29So that's why you see that's the runtime dash legacy, which are some of those tests are for the legacy mode and yeah, all that new tests.

47:38So that's how we ensure that it works for when there's a new, it works, how to make sure that it works, that these are the unit tests for the Svelte.

47:52So you have runtimes, you test for CSS, you test for server surrendering, even transitions, animations.

48:02So I think this is interesting.

48:09Yeah, you can click on one of them. For example, this is what you write and then you expect the CSS to look like.

48:17With arbitrary names. For those who don't know, in Svelte components, we can just co-locate the CSS directly so we don't have to think about installing any CSS library.

48:34CSS in JS, CSS in Svelte. Yeah, just use regular style tag. It will be compiled with arbitrary class name like that.

48:47You can use tailwind and whatever, CSS. That's one of the reasons I like Svelte.

48:56So you're going to Rust soon? I don't know. We'll use Rust as a compiler. Everything Rust at the end.

49:09I don't know, but I do know that there are definitely people are looking into it. I mean like it's open source, everyone can know the source code out there.

49:19I think you also have the test cases here, right? So probably you can use them to write your own compiler in Rust and you just test against all the test cases that you have in Svelte.

49:32It's possible. I believe the world is so huge, there's definitely someone in some part of the world thinking about it and maybe someone actually does it as well.

49:47Isn't Svelte using roll up? Roll up, right? Roll up, fit now? You mean for Svelte kit or you mean for Svelte? No, for Svelte proper, the compiler.

50:07No, the compiler is all written in JavaScript. So for Svelte, it's written on its own. It doesn't use any library.

50:24So how the compiler in Svelte build? So you don't have to build anything? It's just like you can run the runtime without build it? We compile it first.

50:38We build first. Compile into regular vanilla JavaScript. No, no, if you open the GitHub repo again, it's a source like the compiler is the source and how it's built.

50:57How to run it? It's written in, it's actually written entirely in JavaScript with some type script. So it's not using any, yeah.

51:16There are some build steps to optimize it, but you can use it out of the box if I remember correctly.

51:37Yeah, let me check quickly on this one.

51:45Okay, meanwhile, do you know that any web or web apps, popular one that use Svelte, for example, like linear app using React?

52:04I know, for example, recently I was using Apple Music. Oh, yeah, Apple Music create with Svelte, right? I think I saw Svelte inside Apple Music.

52:22This one. This one is using Svelte. Yeah, I don't know whether entirely or like the thing, but I do see like there's some, you see there's like Svelte class.

52:36Yeah, in the element I just highlight. This one. Yeah, this one, yeah. This is using Svelte and then also the podcast syntax.fm also build with Svelte.

52:53Oh, yeah, Scott is a Svelte guy. And one more that I know is PocketBase. You know, it's like SuperBase or Firebase, but you can deploy it manually using Skillite

53:14and the user interface is using Svelte as well for the backend or the admin side.

53:24Is the website open source? The website? Yeah, the PocketBase is open source. Yes. Yeah, the website, the Svelte website, so you can clone and learn.

53:38The syntax website is open source, I think you can try. You can see how things work.

53:47Side, yeah, that it goes.

53:53Svelte. Yeah, Svelte.config, yeah. Yeah, like what version? SvelteKit, yeah. Svelte 3. They're on Svelte 3.

54:05Yeah, now we've touched on SvelteKit. I've got one remaining question. Maybe we're going to have to wrap it up in a bit.

54:12But important question, meta frameworks, like, you know, with all the routing and stuff, Svelte has an official one, right? SvelteKit.

54:21So, do you know of any other major Svelte meta frameworks, like the outside of SvelteKit, or do you just recommend, okay, just go with SvelteKit, like what do Svelte developers usually use?

54:39I think there's definitely a lot. There's definitely other Svelte meta frameworks. I just suddenly can't think of one right now.

54:48A few years ago, I discovered like jungle.js, elder.js, but I don't think there's really game traction. But then again, now I don't really explore Svelte meta framework ecosystem.

55:04Before SvelteKit, I think, before SvelteKit.

55:07When SvelteKit was called Sapper, like Sapper kind of beta, like it's not really polished, then SvelteKit came out. It's the official meta framework.

55:18Now I rarely see about, you know, Svelte-based meta framework. What do you think? Would you recommend SvelteKit or something else?

55:28Yeah, I think definitely. I think like if you are new and you're not sure which one to choose and you don't know what you need or you want, then I would say like just start with SvelteKit, right?

55:44It's the official meta framework that's built by the same team that's building Svelte, right?

55:50And I think the team has put a lot of effort thinking and figuring out like what's to do. It's by the same group of people coming out, figuring out the best syntax or best way of expressing our writing application for Svelte, right?

56:08So you will feel like it's very natural. It makes a lot of things that make sense. Yeah, and it doesn't really matter whether you are building a simple application like a blog where it's purely static or you have some pages that you need to make it very like dynamic, like server-side rendering or you do some pre-rendering.

56:34And I think also different kind of rendering modes, they can work all together inside SvelteKit and whether you want to connect with database and do some sort of form actions, like submit data, like basic CRUD kind of application.

56:59All this has like SvelteKit has all the solutions included, like all the opinionated way of like how you can build a Svelte application that has all these features for you.

57:09So I would say like if you want to build an application, that's like you don't have like very specific requirements. I think most situations, SvelteKit just works. Yeah, it's the most, it makes sense and it just works, I would say.

57:30Okay, so what's next for you? Is there any plan to make another tutorial, especially for new Svelte and Svelte next version in the future?

57:48Yeah, definitely. I think I've been saying I will definitely make more video contents and stuff like that in the future, but I have always been procrastinating. But I think now it's really like somewhat like maybe someone like a wake-up call for me because I realized that most of my content will slowly go out of date, become useless after Svelte 5.

58:12If I don't make new content, then I think no one will ever, that I will not have new subscribers and no one will watch my content anymore. So I think it's time for me to come back, I guess.

58:26Hopefully it will stay and I think, yeah, I think maybe that's something that my resolution for next year maybe.

58:42Nice. Yes, because your content is so good. For example, like build your own Svelte that we saw at JavaScript Bank weeks ago. We need that kind of content because we just not learn how to use the framework, but we know how it works behind the scenes.

59:11Go ahead, what do you think?

59:20No, I think I know what you are saying and yeah, I also hope, I also wish that I got, I able to see this kind of contents when I first started out and like trying to learn things and you know, especially you want to learn something and you like trying to figure out how Svelte works and you are stuck.

59:47And if there's like a content that actually will tell you how you can go about, I think that will be very useful, right? Yeah, but I mean that kind of content is also very niche, like not everyone actually wants to know how it works.

1:00:02So I can understand why you don't see that often in YouTube, but yeah, that's one of the things that I was, that was one of my motivation of creating content was to basically create some of the things that I hope that it was there when I tried to first starting out to learn things, not just basic things. I think basic things there's a lot of that out there already.

1:00:29Hello everyone, hello world.

1:00:33How to make a blog with just one post.

1:00:36Yeah, exactly.

1:00:38So, then then like, when I went to like, like advance and I realized, oh, I actually, where do I find, like what kind of, where are those things. And I don't know, maybe I'm not even sure, actually, to be honest, I don't know whether those kind of people will actually be watching YouTube videos, or what maybe they are more of a blog kind of person, or maybe this kind of person will be preferring more on like, building like, get their hands dirty and like do it on their own.

1:01:07Yeah, but I don't know, but at least like, yeah, I enjoy creating those things as well.

1:01:15If it's out there, people will, well, let the algorithm find the people, you don't have to do that.

1:01:26So you just put it out there, let YouTube find those people.

1:01:32Yeah, I think that's a good suggestion.

1:01:35But is that, is that why you guys are creating this podcast as well?

1:01:40Not really, because otherwise, otherwise we wouldn't be catching up with, you know, in web dev, especially JavaScript ecosystem.

1:01:50We just blink of an eye, boom, new meta framework, boom, new compiler, and you know, of course, in our job, we can't just chase everything, but we need balance between, you know, like maintaining like the real world stuff and exploring in their existing technologies or new technologies.

1:02:13So that's why we just commit to talk every week. Sometimes we don't really have a lot to talk, so we just ask the chat.

1:02:23Or read together, read some article together in our documentation.

1:02:29And try the demo.

1:02:31Additionally, on top of that, right, so we as a web, well, our profession is like web dev, and most of the time we are isolated in our own world.

1:02:44During the work day, working day, we just solve tickets to tickets, tickets to tickets, nothing else. Maybe you can relate that.

1:03:01We don't really talk with other developers outside our own team.

1:03:06But why not?

1:03:09We met during the events, but after that, well, it's just one day during the events, like after that, nothing else.

1:03:18And by having this podcast weekly, we can keep talking about whatever for the web.

1:03:28What's new?

1:03:29One or two things will catch up with our brain, and somehow when we need that in our future thing, we know it.

1:03:39Plus, why don't we just also have this podcast so others also learn together with us.

1:03:48We learn from others, others learn from us.

1:03:51And also, you know that graphic about like someone has strong knowledge in this part, the other have strong knowledge in this part.

1:04:00Like no one has the same exact same set of skills, you know, but kind of overlapping.

1:04:07And it's a nice way to kind of merge all the skills and knowledge.

1:04:11I've actually found like a couple of useful things for my own work based on what we talked about in the weekly podcast.

1:04:20Oh, yeah, I haven't mentioned about this, or Rizna mentioned about that.

1:04:24Oh, yeah, I know that one.

1:04:26I just go to the Google Docs with the links.

1:04:28Oh, yeah, that's it. Nice.

1:04:31Oh, yeah, that's very helpful.

1:04:34Yeah, you're welcome anytime if you want to join us.

1:04:38Just ping us.

1:04:41Or maybe if you have any side project or fun open source project or whatever that you want to promote as long as it's web and open source.

1:04:53And also about Microphone N.

1:04:55We haven't talked about Microphone N, so we keep that slot in the future.

1:05:01Next time we can talk about Microphone N.

1:05:03Our audience here is excited.

1:05:06Well, they've been asking about Microphone N multiple times in the past.

1:05:10They're curious about it, yeah.

1:05:12But none of us actually use it.

1:05:14None of us actually have the experience of Microphone N, so we cannot have the talk.

1:05:18I've done Hello World Turbo repo, but that's not a legitimate experience to give a talk.

1:05:26The production use case is always so different from the tutorial and sample.

1:05:34Yeah, that's true, that's true.

1:05:38So we will have another session, is it?

1:05:42Oh, of course.

1:05:44If you want and when you are free.

1:05:48Yeah, anytime.

1:05:50Last question before we are going too far.

1:05:53Do you have a wish to work as a programmer for building tools for developers like Spelt in the future?

1:06:04Would you like to work on tooling one day?

1:06:12That's a very good question that I've been asking myself.

1:06:19To be honest, I don't really know the answer.

1:06:25The reason is because I think if I'm going to say this, you'll find it funny or maybe you'll think it's very realistic.

1:06:40At least right now I think that what Shopee can pay is a stable good income than something that I don't really know.

1:06:57Maybe I'll earn much more or maybe I'll get more fun and other things that I can get in return on working on toolings.

1:07:06But I think right now one of the big reasons why I'm staying at Shopee is it's a good company that pays well.

1:07:17And there's a lot of interesting problems that I'm working on right now.

1:07:25There are times when I was thinking about something else, but it's always unknown.

1:07:36Who knows, maybe one day when I really get bored and maybe Shopee pays not as good anymore, then maybe I will consider something different.

1:07:48I don't know. Maybe it's not a very grand vision kind of answer.

1:08:06You've got to be realistic like balancing lofty ambitions or ideas with real life stuff.

1:08:16And also basically most of them are working in Europe or America.

1:08:23So it's either I have to work at their time zone or maybe I have to be there physically.

1:08:31But I think me and my wife, we like where we are staying right now.

1:08:38So that's also another consideration. I don't think we want to move ourselves to somewhere totally different and experience a different life.

1:08:48I see. Not even back to Penang.

1:08:54I mean like back in hometown maybe that's a totally different story.

1:08:58I mean like what I mean is the comfort food of Southeast Asia, like warm food, hot weather, durian.

1:09:15Okay, so if people want to get to know you more, like want to discuss or ping you, where should they go?

1:09:27That's a very good question. The reason is because I am a bit lazy.

1:09:34I've tried to tell people that you can find me on Twitter, you can find me on YouTube and stuff like that.

1:09:42But I realized that I'm too lazy to reply all of them.

1:09:48Maybe, I think if you have questions, you can ask Riza and then maybe if a lot of people are asking the same question, then we will come, then maybe we will have another podcast.

1:10:03Or join Telegram Svelte ID, there is Lihau there, mention him, maybe he read or not, doesn't matter.

1:10:16If you want to open Telegram, then you're not in luck.

1:10:23If you want to know more about Svelte, you can ask in the Telegram, people probably will answer your question.

1:10:34If you're in luck, Lihau will answer that.

1:10:40Read and answer.

1:10:43Do you have any plans to come to Indonesia next year?

1:10:48Is there an event? I don't know. Maybe, if there's an event, there's a meetup or something.

1:10:55Let's find GDG to invite Lihau.

1:11:02We will contact you very soon.

1:11:06Thank you for coming to our weekly podcast.

1:11:11Thank you very much for the chat.

1:11:14Thank you for your knowledge, good luck and see you in the next podcast episode.

1:11:28See you everyone, thank you and bye bye.

1:11:41Sampai jumpa di video selanjutnya.