Build Full Featured Frontend App with Svelte

Rate this content
Bookmark

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. 

We will be building an app that mimics the famous Q&A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.

Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte. 

192 min
15 Jul, 2021

Video Summary and Transcription

Svelte is a compiler-based framework that eliminates complexity and improves efficiency in web development. It combines HTML, styling, and JavaScript in one file and does not require additional build tools or state management packages. Svelte's syntax is concise and handles reactivity effectively. It supports component-based architecture, event handling, conditional rendering, and stores for state management. Svelte offers additional features like routing, dynamic importing, and built-in animation capabilities.

1. Introduction and Announcements

Short description:

Hello, everyone. Thanks for joining today's workshop on building web applications with Svelte. I will guide you through this three-hour workshop, covering the details of how Svelte works, its syntax and features, and building components connected to APIs. I'm Mikael, a developer with 10 years of experience, currently holding a chapter lead role in ING Bank. Check out Svelte Society for upcoming events and join the active community. Also, subscribe for more information on the upcoming frontend event and the reinvented Node.js.

Hello, everyone. Thanks for joining today's workshop. I hope you can hear me and see me well. Yeah, I see. I see feedback already. Max, thank you. Very nice. Yes. Great that you guys joined. So, I'm going to start. Also, it was a couple of minutes late. Hopefully, everybody who, everyone who wanted to join at the moment to do that.

So, today we're running the workshop on building web applications with Svelte. and I will guide you through this three-hour workshop... we'll see the details about how Svelte works, the motivation behind building Svelte, most of the syntax and the features that you can use as a developer And of course, we'll build some working components and connect them to the APIs.

Let me start with a short introduction. I'm Mikael, once again. I've been a developer for about 10 years. I was doing mostly front end. Currently holding a chapter lead role in ING Bank here in Amsterdam. I've been active in various front-end communities. You can find me on Twitter. I'm not updated that often, but if you subscribe, I'll be here.

Some announcements, of course. We used to do offline Svelte meetup back in Amsterdam. I think the last one was somewhere before the pandemic. So nowadays, the Svelte community keeps growing fully online. And if you're interested, you should Google for Svelte Society. These guys connect Svelte developers and enthusiasts from all around the globe. And the upcoming event is just in four days. is a full day of content related to how to build apps with svelte what are the new plugins and features that you may want to use uh best practices pitfalls stories and stuff uh from the community so i'll share the link in the end of the workshop once again so So please subscribe to know more about Svelte and get into the really active community for this new framework. And the second announcement, I'm also running tech meetups within ING, trying to build and advertise engineering culture, high level. And upcoming event, we actually do more events than this one, but upcoming event, frontend related is also in about three weeks or so and the guy from Denno team who was involved into building this new way of doing node.js. Node.js is reinvented. So feel free to subscribe. It will be a YouTube stream with two speakers. I'll share more links at the end of the event. But feel free to ask in ..

2. Introduction to Svelte and Front-end Evolution

Short description:

So a couple of words about how we're going to proceed. We'll have an introduction about the Svelte. We'll go through the basics Svelte syntax and key concepts. Then we'll switch to a practical part where I'll create basic components and add business logic. We'll also cover more in-depth concepts like state management and routing. We'll build a chat app and wrap up with Q&A and sharing useful links. Feel free to ping me in chat for any ongoing comments or questions. We also have a Discord channel for post-workshop communication. The web used to be powered by back-end MVC frameworks, but JavaScript's role was limited. jQuery made things easier, but as apps grew in size and complexity, a more modular approach was needed. Angular and React emerged as revolutionary frameworks. Angular is still valuable and React's ecosystem is amazing. In 2016, Svelte introduced a compiler that converts code into low-level DOM instructions.

So a couple of words about how we're going to proceed. I see there is some problems with the audio. I'll try to stop the video let me know if it gets better because I got those comments a couple of days ago it might be zoom on my side I'm not sure so if it gets better please okay slightly better okay well let's see then let's keep it these for now and yeah, not much to see on my video actually.

So okay so how are we gonna proceed? We'll have an introduction about the Svelte. When it started, what it what it has under the hood, how it approaches building and running UI components of why front-end apps are different when they're built with Svelte and what benefits you get as a developer and as user. We'll go through the basics Svelte syntax you'll see it's really easy to start using and some of the key concepts as well switch to a practical part where i'll create some of the basic components connect them with each other and add some business logic to do typical tasks that we as front-end developers do like loading data displaying lists validating forms and stuff like that and then we'll switch back to the theory again and go through more in-depth concepts such as state management routing and things about how you can build and deploy your apps and if we have time we'll also implement all that in the sample app and we'll wrap it up with Q&A and sharing the links that could be useful if you want to continue with it.

Of course, we have a Q&A button here in Zoom. My personal preference is using chat because it's, I think, much easier. but sometimes it may be that if there are too many questions then it's easy to lose track of what you've answered and what not so you can choose either but with the Q&A I'll make sure I answer them one by one so feel free to ping me in chat for any ongoing comments or slight questions and yeah We also have a Discord channel, which we prefer to use for the post-workshop communication, because usually it has like a long tail of questions and discussions and sharing opinions and stuff. So I think we will share it later in the chat.

So what we're actually going to build, we'll go through building some simplified version of a chat app which will contain all the typical parts that a chat UI has in a modern messenger, such as a form to login, the messages, the form to send messages and listing of the user that you can chat with. Again, we'll start with the basics, then we'll add a bit more of styling and stuff. So bear with me, and we're moving to the actual content. So when did Svelte come to stage, and why? What was the previous iterations that the at the modern front at hand. Let me quickly guide you through that. Also, I actually missed one step. I gave a bit of introduction about myself, but I'm also really interested to know a bit more about you guys. So what's your expertise? What are you working with usually? If you have a moment to add in the chat a short comment, like what framework or programming language, if it's not JavaScript you're using and what's your, for how long time you've been in the industry. So it can be also neighboring fields like UX, or testing or backend development, just a bit of this kind of intro will help us also, to I think understand the audience a bit better. It's like a like a shortcut networking, the way we do it nowadays with online events. Yeah, I see, I see some some comments already. Great. Matthias, Marcos, thanks. Very nice. I see React. React is a lot in the comments. Seven years is also a lot. Eight years. Cool. Great, great. for details, guys I think it's interesting. 20 years, man, that's great Mark. Thank you. XJS, yes, I know this is a beast, man, it's easy to start but then you try to customize it and then you're like oh, probably I should have written everything myself. That was my impression back in the days. Yeah, cool, thanks for the introduction guys that's it's really nice. Yeah, this is what the audio, if i'm pronouncing it correctly, this partly reminds what is in my slide, right? jQuery made a lot of things possible, but then when the size of the apps grows and the complexity grows, frontend community needed something more modular and something more uh enforcing the some architectural principles so that's uh that's exactly the path we a lot of us had yeah i see patricia julie very nice so uh i'll get back to uh brief history uh the way uh i try to uh articulate it here so um yeah when the web was uh mostly uh powered by uh back-end MVC frameworks, such as Django and Ruby on Rails. They are actually still popular and a lot of projects choose them. However, that moment around beginning of the thousands JavaScript was mostly used for some small tweaks and fancy stuff like animating the mouse pointer or a bit of form validation, Or maybe I think that the paramount was a gallery of images with a scroll. So those days, most of the things were in terms of data collection and building UIs was done on the backend, with the frameworks like those. It was also partly because of the browser engine that was powering the most popular browsers of those days had a lot of variety in the behavior. And again, to be a professional who can create a website that is equally visible and usable in most of the browsers, you were supposed to know a lot of hacks in CSS and JavaScript. So thanks to jQuery, which came around the mid-2010, 2006, sorry, which showed actually how you can write code once, and it will run almost similarly in modern browsers. Just a moment, I will check the comments I see. Oh, yeah. PASCAL JOHNSTON PASQUALEC- Yeah. For Zul, I completely agree with you. It's just then we will need much more logos there. I just wanted to keep it short, because I know what you mean. I spent years writing AngularJS. And then, also, like hours trying to switch to Angular2. And that was also quite an experience, I think, for some of us. And yeah, version two was, I think, also quite a complete failure. Something after four was usable, and nowadays it's a way to go if you're an enterprise TypeScript guy. But yeah, it's more about a brief overview. OK. So as I said, jQuery gave us a possibility to write more or less code once and do a lot of new functionality such as dynamically load data, validate it and do it in a unified way, giving us another level of abstraction. But of course, the industry went further and further with increasing speed and we needed more architectural approach to how you should build bigger apps, build apps where dozens of developers collaborate for months and build something really complex. So that's how Angular came on stage and it still holds a lot of value. Basically, the ones who are involved, you probably know that the Angular team had a deadline for the end of the support for AngularJS was around, I think, June next year. But thanks to the, well, because of pandemic and stuff, they said we increase it for another half a year. So, basically, it will stay with us for longer. Then another really revolutionary framework or library was React, obviously, with a really slim and different way of tackling the UI complexity. When the guys from Facebook said, we're not going to do everything for you. We just ensure that the model and the view are properly synced, and we do it in the most efficient and performant way, and we give you, again, a great developer experience. So that's became a big trend. And it's still, if you look at the comparison by amount of users and developers, even in our chat, you can see that React holds top positions and it really deserves it. The ecosystem is amazing. Of course, the effort and the complexity of things React tackles in the modern version. above expectations and last two years I was really impressed by the hooks thing which was also nowadays becoming a common thing in Vu world for example so there are more details how the front-end was evolving but somewhere around 2016 the guy who had an idea that we can try to tackle it from another angle, and actually the idea was to have a compiler, not even the framework that will do stuff for you, but a tool that will take your code and convert it into a set of low-level DOM instructions that will have almost nothing to do in runtime, but will be only like a build pipeline for your components code.

3. Svelte's Approach and Benefits

Short description:

Svelte eliminates complexity and workload in the runtime, making it more efficient than popular tools like React and Vue. The motivation behind Svelte was to address inefficiency and corner cases in browsers, considering device diversity and the need for small bundles. Svelte achieves this by converting code into a low-level, efficient form through its compiler. The compiler ensures backward compatibility and can fix issues as the language evolves. Svelte is not a one-size-fits-all solution but excels in scenarios with performance and code size constraints. Tools for static analysis optimization will be discussed in the Discord channel.

And that will completely eliminate a lot of complexity and the workload in a runtime, which again, in case of other popular tools like React and Vue, still exists. So, in that experiment, I started quite some time and ended up in the current version of Svelte which is already a third major release. And one of the previous slogans, the mottos of the library was magical disappearing framework. and I really liked that term because it was actually stressing that there is almost no framework code in the bundle. That's actually what Compiler gives us. It just takes your code, spits out something else, probably more efficient and low-level, which is just prepared to run. yeah I see a comment of Max yeah but I think it's yeah there's quite some events which start from being focused on one topic one technology but while they grow and the audience grow they have a space and audience to acknowledge the upcoming trends. So I think that's what we're doing here at React Summit. So hopefully, yeah, you'll learn new stuff and something that you want to play around besides React. But since you are here, you're probably already doing that. Great. Okay. So, as I said, it started as an experiment, as an idea how we can actually do that, this kind of a front end compiler. but there was also a practical motivation behind that. And we can say it's also about inefficiency or the corner cases that we have for the of our browsers. The guy who actually introduced Svelte, Rich Harris, he works for one of the leading online medias And they had to deal also a lot with variety of browsers and platforms where their interactive content runs. And they know it really close that there are differences in how performant those devices and the networks that people use are. And it's not always possible to really ship the whole piece of megabytes to a user who is just switching from one subway station to the other. It will never start on that smartphone. So those kind of corner cases. And we used to say that, yeah, we all, mostly as a developer, we run quite performant machines. I'm currently on the latest MacBook, the 15-inch screen. But you know how that happens. You just need to go far away outside the city for holidays or just to work remotely, or you're in the subway, or you're somewhere outside Europe or America and stuff like that. So it's easy to get into this segment of users who really seek small bundles and performant updates. And I'm not even talking about the majority of the world who are not web developers, who really can use old browsers, old machines, and stuff like that. So yeah, I think that this slide needs to be really on the first page of any web developer book because that should give you a hint for whom you're actually working. It's not your fellow colleagues in the fast speed internet. It's those people. Cool. So motivation, as what I tried to stress here, is that the less work you do in a runtime, the faster your app is for broad categories of users. And device diversity is really something that goes way beyond just iPhone X and iPhone 11. It goes way down to the previous models, which really require attention when you do a lot of DOM updates and inefficient reflows, repaints. So how actually Svelte tries to tackle that. Here I'm using a schema from a really nice talk by Tan Li Hao. And it was from the previous Svelte Society Day, which was, I think, back four or five months ago. something similar will happen just in four days but please check this link for more details later I will share it so this guy really investigated step by step build process that Svelte follows how it takes the lines of JavaScript that are part of your component your business logic and then works the way other compilers do. So it converts it basically to abstract pieces of code which are called basically abstract syntax tree. And then like re-return to a unified instructions to update certain parts of the DOM. And we will later look at the simple examples on Svelte website, you'll see how, how actually the output code looks like. So it's really goes down to this low level changes in the DOM structure. Svelte, itself written TypeScript. And yeah, what is really cool about pro when you build everything before running is that even if later the core team or the community decides to add more features or the for example that the standards evolve then for you for your code which was written let's say in 2018 or 2020 nothing changes because the compiler upgraded version of a compiler that can fix those things for you. So that basically completely eliminates the problem of backwards compatibility. The more modern your compiler is, the more, let's say, wise it is and it can clean up more stuff than the older version. So that's something you cannot get with the runtime approach. So there is a question from Zul about Svelte differential loading. We will use the starter app which is using rollup and there's also there are more starters that also use Webpack so my feeling is that it's not on the framework side rather than on the build pipeline side and so that should be possible. But again, in our case, we will just have one the modern browsers that the build that targets, I think, modern browsers. So if you go more into what's the result of such approach? Again, this is more like average number, but this is what you get in additional code that the framework adds to your bundle. Of course, you can say that it's on a bigger app, that's negligible. And yeah, the amount of your business logic is probably way beyond three kilobytes. That's completely true, But again, think of the initial use case that motivated creation of Svelte when it's a, let's say, one-page widget with some infographics or some interactive UI, maybe some user input and stuff. And if you pay the fee of 100 kilobytes using other libraries just for that widget, besides other pieces on the page. Other things that this page has. That was the motivation. I will also repeat that in the discussion section in the results. But to keep it short, Svelte is not like a silver bullet to build all kinds of apps. It really shines in case when you have constraints. constraints with the performance of a device, with the amount of code, amount of business logic that you're shipping, those kinds of corner cases. So I see a question from Mikhail. What tools will use for static analysis optimization? I don't have an answer from top of my head. and I'll keep that question and try to get back to you in the Discord, okay? With those kind of things.

4. Code Examples and Svelte Syntax

Short description:

Let's start looking at the code with a basic example. We'll explore how Svelte eliminates boilerplate code and handles reactivity. Svelte's syntax combines HTML, styling, and JavaScript in one file. It uses built-in directives for conditional rendering and iterating lists. Svelte supports all main DOM event bindings and provides modifiers to handle repetitive logic. With Svelte, you don't need additional build tools or state management packages.

Okay, now let's start looking in the code. So here's a really basic example. I don't know if it's well visible, but here we have a simple kind of one component component implemented in three frameworks and what it does, it has just two user inputs and then the code that outputs the, the sum of those two inputs to two numbers basically. For React it uses the hooks API with the state management using use state hook for view it uses the built-in capability of this reactive behavior. Again, this is a bit outdated now since Vue is now in version three, which kind of has something similar to react, but let's leave it aside. And here we see the self-implementation. I think what is striking that there is no like boilerplate JavaScript here. So you just declare a variable and it becomes reactive. That's, I think, quite an achievement. And again, this can only be done if you just leave making it reactive to the compiler. So of course it's not every component will have that difference in lines of code. But for certain cases that will be something like this. So me, myself, sometimes diving into React projects, I quite often see these kinds of cases when you create this boilerplate to activate reactivity. And then you have to reuse it. You put it into some commonly reused like custom hooks and stuff. So, but again, here you can see there's nothing like this is even needed because everything is reactive from the beginning. Of course, we'll look into more code samples throughout the way. So that's actually our next step. So let's finally learn how to write svelte syntax and see what are the template directives that you can use to build and do the usual work that wizard developers do. So for starting a project basically we may look into that later when we're done with the introduction, but to make sure that there are, as I said, several starters available for Svelte, We're going to use the most basic one from a core team that is also advertised on their website. What it does, it just takes this repository and removes the Git folder. So, it becomes just plain files that have simple Hello World app. And then, of course, typical steps. Just install the dependencies and go. So if you want to give it a shot while we're going through the template syntax, you can just easily go to the svelte.dev, and the same code is presented on their front page. It should not take you then one slide that I'm explaining to have it up and running, and then we can experiment together with the things that are there. So, okay, we have it running. So what are the building blocks? It's well, the same component approach, which is commonly adopted by all the modern tools like React, Angular, WhatWillU. The interesting part here, so, or it's, but the most, the closest analog could be view when you have one single file components in Vue terminology. Here, it's just files with a .svelte extension, and they can combine all three pieces of a component in one file. The interesting difference is that the HTML does not need extra boundaries, like with a template or something. It's just the HTML is kind of of a glue which pulls together the styling and the JavaScript, which again, according to the creators of Svelte, makes total sense. So they say that basically HTML is the main language of the web. It's an additional. So what do we see here? We see the way we can declare variables, and the way we can use them in the template. As always, quite often, questions about, can we do local styles and avoid leaking the styles? The short answer, yes. And will yeah, I see what you mean. I think I can do that. If I just maybe stop moving my mouse in that area, it will be fine. OK. So, here we just declared one variable and not doing much with it. So let's move on and see more complex scenarios. For DOM manipulations like conditional rendering and iterating the lists, we have built in directives. They are written with those as a prefix as a prefix and a suffix to start the built-in directive. We use a hash. And then there are pretty much understandable functionality with if or each to display a specific piece of a template depending on a flag value or display a list. Okay, with that, maybe I'll just increase the size. Or display a list for some iterable value. So I think this index should be pretty familiar to if you've been using, for example, Vue.js or Angular. With React, guys, it's a bit different, but I guess you know the idea. So, event, here we can see how connect, create a binding for the native DOM events. So Vue supports, sorry, Vue Svelte supports all the main DOM events bindings. So not just clicks and mouse over, but the rest like resize and input and drag up and stuff. So it's done with this built in on directive, which connects it to callback. And the callback is just a plain function in your JavaScript part of code. What's interesting here again is that this native, I mentioned before also kicks in here. You don't need to do anything to kind of notify framework that the model value is changed, you just change it and it works. And it will instantly update the value in the template if the value changes. So that's again some simplicity as for developer and the output result is exactly the same as if you were doing set state in React for example. There's also a shortcut. You can also do in-line things for simple use cases. A bit more on the events. There are also ways to, since Svelte also heavily relies on directive style of coding in the DOM, There are also modifiers to the event where you can cut a bit of repetitive logic like prevent default or once into the modifier. So you don't need to, for example, if you want something to happen only once, you can just put a modifier here. And then you can avoid creating all the logic that will be checking if the callback fired one time or more. So the modifiers is a handy way to handle certain use cases with Svelte. And of course, depending on what event are you listening for, again, the prevent default or stop propagation can be a common pattern to work with the events. So we have all know where those things come from and why they're needed. So, Svelte supports them out of the box. What is interesting about Svelte that it goes as a one package so you don't need to install a separate like build tool or a state management tool.

5. Component Abstraction and Lifecycle Hooks

Short description:

Svelte components encapsulate business logic, data handling, transformations, and state management. Communication between components follows a single data flow model, similar to React. Reactive statements allow variables to be recalculated when their dependencies change. Svelte provides lifecycle hooks for component creation and cleanup. The return statement in a lifecycle hook is optional and is executed when the component is removed from the DOM. Svelte also offers a lightweight solution for handling asynchronous tasks using stores and a standalone directive.

It's all in one go. We will look into state management later but just as a side note. So again, I think it's quite handy. Talking about the components, we all got used to building modern front ends with the components in mind. And Svelte also gives us this abstraction. Component is again the same thing that encapsulates business logic, data handling and transformations, state management side of it. styles if there is any. And the way Svelte handles communication between components is really really similar to the single data flow model like the one that is common for React. So you have props or attributes that look like. Similarly here to pass down the data. And it can be simple types like strings and numbers, but also be the objects. And you to signify that the certain, certain variable is actually a property that can be said from outside, you need to export it in the in the child component. That's, that's why we will have export here because that's the way to show the compiler that please make sure that this property can be set up from the outside. If you just put a let or a const, then it will be just local for that component. So that's how we show, that's how we stress that the property is for the parent component to set up. With the events inside of the components, it's It's pretty similar to the way it is done in React, but we'll look into the practical examples of it later. I'll show it there. Another interesting thing is the reactive statements or reactive declarations. It's something that, again, didn't have much tension in other frameworks or frontend tools However, it's a fully valid JavaScript syntax, it's just one of those not very often used things. So you can, and again, keep in mind that it is just a in our case, it's not evaluated directly in the browser, but it's a pointer to the compiler that you must make this variable reactive to something that is, that is on the right side of this expression. So here you can see that we just create one, let's say, state variable and create couple of variables that the value of those two needs to be recalculated every time the value changes. In a React world, again, you have not the use state but the I forgot the name of similar thing in React, but in modern view, it's something close to React. React, if you, somebody, yeah, yeah, yeah, I think it's more like, it's definitely a hook, that's what I wanted to say, but I think it's more like a use ref. So, all the items that are, all the variables that are mentioned in the right side of the expression will be, if they change the value of the expression will be re-evaluated. That's the idea. So here you can, by changing value of one, increase several other items at the same time. And of course it doesn't matter if it's a number or a string or some other object. Yeah. In this case, yeah, Daniel, very good point. And of course there are differences in the rendering part. In my case I was more specifically focusing on the changing of, let's say model value. But indeed Svelte takes the reactivity all the way from the declaration to the template. So it will cause, it will re-render it indeed. So, next common piece of functionality that we might need in the component-based development is the lifecycle hooks. We have building blocks of the app as components and those components appear and then updated by the values they contain. They may be updated as a result of some external activities. And then if we have a switch of content, we're navigating to a new page, we're opening another tab, or we're just closing some certain piece of UI, this component will be removed from the DOM. So all those typical steps of lifecycle also exist for Svelte. And the naming is a bit different, but here is an example of one of them where you can subscribe to initial creation of a component. And this will be a mount method that will be fired at the moment the component appears on the page. And then in case if you want to also do some clean up in the end, that return part is completely optional, but useful in case if you, again, if you're connecting to the, creating listeners to some DOM events or creating some new variables that you want to clean up like this interval in this example. So you can hook to those lifecycle methods and reuse them. Again, I think it's really conceptually may remind you the lifecycle hooks for the class-based components in React, but you don't have any of the class structure here, which makes it really easy to read if you're new to this. And also it eliminates the overhead of class-based structures. In this I see a question. So the return callback fires before rendering. Give me a moment. So we have an onMount method and what happens next is that the component is mounted on the page. we execute the callback that is passed to this lifecycle method. And then, if you have a return statement, then, when the component is removed from the DOM, then it will be fired. So, it's not for re-rendering, it's for removing from the DOM. That's maybe a bit ambiguous here. So moving on, next thing is just the very simple version of the way we're going to use later, the state, the stores. So stores is the structure in Svelte API, which kind of represents the state management utilities in Svelte. But here there is also a standalone directive for the most common use case when you have some asynchronous tasks, some asynchronous activity, which returns a promise and you want to display something while the promise is being resolved. So like a cheap version of a suspense, let's say. And I must say it looks much more lightweight to me. Again, that's the benefits that we get with the compiler. You can write less code, just sign it with one instruction and the compiler will generate all the boilerplate around it for you. So that's the idea.

QnA

Creating Components and Exploring Svelte Syntax

Short description:

This section provides a basic overview of Svelte syntax and then switches to creating components in the Visual Studio Code Editor. The speaker also answers questions from the audience regarding video recording, entry points, and node versions. The section explains the structure of the root component and demonstrates how to declare variables and methods. It also covers rendering variables in the template and mutating them with a button. The section concludes with an overview of the rollup configuration and its plugins.

Okay. So this is a basic overview of Svelte syntax. I think now we'll be switching to the actual Visual Studio Code Editor and start creating some of the components with the logic. Also, we'll do some of the examples to show things that I've just enlisted from the way Svelte works. Let me switch to the editor. Switching and setting up everything locally if you have a special any questions please feel free to use a Q&A or the chat box I think it's with the chat and going going pretty well thanks for for extra comments guys it was it's really I think helpful for everyone.

So what I'm going to do next, we're going to do the start with a basic example app, which only contains one component. and I'll create some of the components that our future chat app may need. Again, just to reframe, we will have in mind some simplified chat UI which has all this and most important, I guess, is the chat page where we will have a form with a list of messages and all the needed infrastructure. I see the question from Markus in the Q&A, yes, the video is being recorded, that's absolutely positive. absolutely positive. And my assumption that yes, it will be part of your ticket bundle attendee, stuff like that. So it will be available, yes.

So what do we have here, I have the app that was generated using the the recommended Svelte starter repository. What do we have here? Maybe I'll zoom in a bit. Until it still fits the screen. Here we have the main JS, which actually instantiates the app. I think the syntax is pretty familiar to everybody who used a react or view. So the idea is that you need to point to the specific DOM node in the document where the app will be instantiated and here the difference is that you are creating a new instance of the root component and that instance becomes a root node which will be rendered. What is also added here is just for demo purposes, you can also set some global properties. Again, there are similarities for that. You can have something like a context for react apps, right, or like a root instance properties in view apps. So again, bear in mind that a lot of those concepts that become important for big apps, for large apps, might not be out-of-the-box available in the case of Svelte. Again, because our target here is to start fast and build fast, not build huge applications. However, Svelte is capable of that. Okay. Mark the question as answered. Okay. I see now a question from Facundo. Yeah. If I pronounce your name incorrectly, I ask sorry for everyone before and for the rest of the workshop. So does it make a difference in entry point? Well, the difference makes only for the build tool you're using. Here we used this recommended starter page uses the rollup out of the box. And by default, it does not have the capability to use TypeScript out of the box. But if you want to use Svelte with TypeScript, there is a certain set of configs that you may want to apply and to make it work. Yeah, I see a question for the node version. Oh, yeah. Good point. the node version, I think I'm on 12. Let me see. Yeah, so something about, well, I'm pretty sure it works on 10. But, yeah, it would be good to check your local setup. Yeah, for six. Let me see. It doesn't have those. as a as a limitations indeed or or use a something like n favorite node version manager in my case Great, I'm ready to hear that indeed works for you. So back to self code. So what do we have here? We have the root component, and this component is, again, as simple as it can be. It has a bit of a bit of styling. The only variable that declared in the JavaScript part and the template block where we output that variable. So, I suggestion, first, we can just go through some of the options that are available for the API of components that I mentioned during the theoretical part. And then we'll really start to build something that will later eventually become the chat app. So, for example, we can start with explaining how the, looking through how the declaring variables and methods work for the component. Again, if we just want to create a variable, we can do it with just by declaring a variable in the JavaScript scope. And if we want to create a method, we can just do it here. for example. So no class instances or some special methods needed to create items, for example. So we've created one variable and now we can also display it in our template with no problems. I will just do that quickly here. And so now this name variable will be displayed, and to mutate it, let's create a button. It's out of complete, probably installed too many plugins. Like this, and then I put a listener. so what what do we have here we have the wait the button that will trigger this callback that will actually change your name and we'll have also update here so to run this we can start out of the box the basic template contains three tasks including the dev server version which does the same thing as well basically since again Svelte is about small and fast setup we kind of use we use a separate small package which will just serve the the public folder and the that's where the rollup will build the the app version if it's running in in a dev mode so that's the idea here and also if you look at the the rollup config here. What's interesting here, if you never worked with a rollup before, a rollup is a bundler tool, partly similar to like a webpack without steroids, I would say. But it still, it focuses on like the minimum configuration and speed of the output. But eventually, if you have complex set up, probably you will have also a big configuration file, but what's the parts of this config? I think pretty straightforward, you have the entry point, which can also be multiple, you have the output, the format of the output and the name of the file, and you have the plugins, which in this case work in a similar way as in case of webpack, plugins for rollup, they replay both the loaders and the plugins. So here you get special plugin to handle svelte cases, and we have a special plugin to run the other... to change the common JS models, and to generate them, and there is also a simple version of a dev server that just runs a local server for development purposes. Back to the questions. The second version you're ignoring the event parameter and passing...

Handling Events and Conditional Rendering

Short description:

We can demonstrate a simple code example that starts the dev mode and changes the name when a button is pressed. Svelte generates bundled files and minifies them for small output. We can use event handling and reactive statements to manipulate data in the app. Components can be created and connected, and properties can be passed between them. We can import components and use them in a similar way to other frameworks. Conditional rendering can be implemented by using flags and callbacks to control the display of content.

It's answering the question of Mikhail. Yeah, I think we can also demonstrate, demo it here. Just if you... Give me a moment.

So we have this simple code. start the dev mode starts quite fast because it's a tiny tiny app and tiny bundle now I will switch to the I will show where we can have the app. And, of course, if you press the button, it changes the name. What we can see as the output for this app we also have the, by default, the CSS classes are generated with the extra suffixes that gives you, by default, isolated styling. But for the code, I can see this, wait a moment, I guess from the other app. So here is the bundled file that is generated. We can also better look at it in the REPL online. But if we minify it, it's really a small output. So for your question, what we would do with the handle click, basically if we put another one with a similar code, something complete. So we'll do it like this, and then the idea, yeah, what Mathias was referencing, I guess, is that if you want the object event, then your choice is number one. Other than that, maybe what you were referring to was that you could also do in line handler, and this was more like this that you can let's say do here. User name is Jane. So, and then you don't even need the whole method. So, this is about the events. Let's also add the components, sorry the reactive statements. for example. So if we have a name, a username and say, data. Last name, for example. And we put here Smith. Then we can, if we want the combined word, text here. I should have tried it before showing. So if we want to put the full name, let's say, username plus user last name, we can obviously do it here in the template like this or what is more preferable in this would be to declare the full username as a reactive statement which will look something like this full username equals a username plus user last name and then we can output the full username here. What we will get now is that if we change it it changes in both places, so and again this works not only for the simple for more complex objects.

Okay, what else I'd like to show is the events propagation from the components. But for that, let's first create another component inside of our app, which we'll later use also for creating chat app components. Again, to declare component, you don't need much. You can just start. For example, something like this. component does not contain any JavaScript we can just include it inside of our root component. Connecting components still goes through the JavaScript part of the of the component code so we'll have to do here import here there Then you use it similarly to other frameworks where you have components. We'll have an app header here. For now it's pretty static header. We'll start really injecting stuff into it, so make it more configurable. example we have those global app properties we can say it's chat app and then we can read it from here if the property called name then we can actually place it inside of our header component what needs to be done now is of course to declare this variable as an API of this component. Should be sufficient. ExpertLabs. What's also good about this approach is that you can also use default naming so we start with uh uh and we replay if we not we do not supply it let's say uh like this uh then here we say name so now it's not ... Let me see, it's not going anywhere. app name and... So what we've done here, we declared the property on the component where we will pass to the other component. um sick so uh created a header created the variable to output uh yeah yeah definitely imported and it was uh it wasn't working it's i think um let me see, if I just put a static name here, okay, I think it has to do with this, okay, let me put this username there. Username works, the component, if it's initial value does not come through, Just, okay. Okay, it was just a glitch. So that was because it was not set up here. I guess it was not properly passed down to the header component. So now we have a simple property for the, sorry, I need to switch to the sharing the browser. Just give me a moment. It's easy to forget that it's not visible. So, what I changed? I'm supplying the value here and then it is displayed in our header. I see another question in the Q&A. How did you... question, how do you import the header tag again? It's maybe it's a bit ambiguous name of the component. You're right. I would suggest to use more local names for that. Let's say I think in the React world, there are also those kind of guidelines, how you structure the code, how you name components. So in this case, it could be maybe something like appHeader and then there will be no ambiguity. But that starts with a capital is still distinguishable from a header tag which is also a valid tag inside of inside of the appHeader component. But indeed it's better to call components more specifically more more specific so uh so now we have a app with a header uh does that answer your question i'm not sure what was the author so next uh is to add uh um some conditional rendering to our logic just to show how things can be set up for example we have some data loading logic and we want to display a loader during the process and then show something the results. So how we can how we're going to do that we can have say basic flag. Again also a moment that I did a point that I did not stress earlier but you can declare their variables and reactive statements and functions across the whole file. So there is no problem with doing another declaration here. For example, I create a flag called is loading. Then later I will use a mount, callback to change it. So here it will do the, is loading equals true, sorry, true and then it will be false, for example. So, to... And then here depending on this flag I can also show, lets see, some content.

Displaying Content and Handling Events

Short description:

We will display either the content or a loading indicator. Svelte offers UI libraries for enhanced designs. Extensions can cause conflicts, so be aware of the number installed. The loading code uses a flag to determine what to display. The onMount callback is useful for executing code after component addition. Bubbling events are used to pass data between components. Svelte's reactivity is built-in, requiring less code than other frameworks. The events handling example demonstrates how to initiate events and pass data between components.

For example, we have We will display either the content here. we'll just display the loader, some indicator of loading. Of course, it's really simplified but you get the idea. I will later show the existing UI libraries that are available for Svelte. So, make it look nice, you can always include them and really make it something more like material design instead of just plain HTML with a bit of styling. There are multiple extensions that are available for Svelte.

Meanwhile, I think some of them are... I have installed, I think, a couple of them that are not aware about each other. And that's why I get this double autocomplete things. So, be aware. If you have this problem, just make sure you have less extension.

OK, so back to our loading code. So, what do we have here? We have the flag that is to by default and then is set to false. And then depending on this flag, we just either display some data, some list, some information, or we just display the loading block. So, if we go back to the browser, so as you can see on top I'll just increase the time out a bit, so it's loading, and then later it switches to some data here. Again, you could remember that we also have on mount callback that we can also employ to use, to call some code after the component is actually added. In this case, our app is really tiny and small and there's no, it will be still executed immediately. so we can skip that. But, of course, for the real-world scenario where you want to first display the UI and then do the calculations and rendering, then it's recommended to use onMount callback. We will look into other lifecycle hooks a bit later when we create more components.

Another next step I would like to show is the events from the components because we now covered the properties. So the way to pass data inside of a component, the way to pass data back from the component is bubbling events. And in case of Svelte, it's a bit different syntax than in React world where you would have something like some on, let's say on click prop that will trigger some other callback in the parent component. And here it's done through custom event generator. Let's add this one here. For example, in our header, we might have a really nice comparison, Fernando. I would agree with that. It's also lightweight in terms of the syntax, I think. uh honestly because uh uh it's uh it's a um lightweight uh also in terms of the the output uh bundle right uh where i see so matthias maybe i'm the freelance technical but now is failed to relate with react uh no no um maybe i was too much referring to react no uh guys i was Just because we are on a React event, I was quite often referring to React, but it's it's not it's not React related in any way. And, yeah, also good point Max. It's, it's reactive, like out of the box, because of the these superpowers that compiler gives your code. but it does not require extra methods or constructs in your code to make things reactive. So in that way, it's like an easier alternative to reactivity that other big frameworks have. I would put it like this. Okay, so what I wanted to do is to add the events handling. So I will just copy this from the example. So to initiate an event, you need to first import a special event dispatcher factory and then instantiate it. And then later in your business logic, you can call it. So let's say you can call this dispatch method that will be fired for the parent component. So let's say we have this is our header component. What you usually have in the header you have let's say a logo image. I'll add this a bit later. autocomplete is killing me. I'll have a logo image, I will have an app name, and I will have, let's say, a login button, right? So let's add a button. Here. And this will be... The log. So of course, we have this header, it will be more like a dump component. It should not do any logic on its own, so it should just pass the events to the more advanced component to, in our case to a root app component. Back to the questions. Fazul asked, so it's like RxJS event driven. I'm not a big user of RxJS, but RxJS is another way to handle the events in terms of that you treat them as like, is a treat a stream as an array, right? You're working with streams and you can use the array kind of perception and all those operators that you have in Rx to tackle . And it's, again, a separate library to do that. The whole philosophy, right? It's RxJS. This is only JavaScript version of it, and you can have same things in Java and stuff. Well, here for reactivity, you just don't kind of need to do anything. Maybe those kind of declarations you need to do to point that this code needs to be reactive. So the way it behaves, kind of similar, but the amount of code that you need to provide to enable this reactivity, I think it's significantly smaller. Speaking about the size, can you show the large ease the production box? Yeah, yeah, I will get to that. Well, first we'll show you the REPL where you can also try and run your code and see what it outputs and then we'll look into that one specifically. Yeah. So first with the event, right? So we have a login button, we have a logo, which will probably ... We can use it from here. You can find it, of course, somewhere else. Doesn't matter for the logo now. We have a button and we want to fire an event called Login and then work with it in the parent components. So we do here a login event. Currently we don't need any input with it, but later we can extend it and really add a form, a login form here that we'll be switching. So here potentially in the next iteration, we can put a form with like input, Something like this. And then we will add a possibility to pass this data and really authenticate the user.

Event Handling and Bundle Size

Short description:

We can fire an event from a child component to the parent component using the dispatch method. The parent component captures the event and fires the callback function. In the future, the callback can perform backend API calls. The bundle size is 6 kilobytes, but it's not minified. We can read data from the DOM and implement a simple form. We can split the logic script and presentational component into separate files. Components in Svelte follow a component-based architecture, similar to React. Components can be thin UI components or containers for business logic. Properties are used to pass data between components.

Again, it's more just to give you an idea what it may be in future. It's usually not enough time to build everything but it's more just to show how things can be architected and then if you have those labels here those here, let's say you have User name again and Password there you can pass them here as a value for your parent component. But for now, it's not needed with just firing an empty event. So this event will be called login as the first argument of a dispatch method. And we will subscribe to it here with the same syntax as for native DOM events. And for that, I will create another method here, which will be, let's say, Authenticate. And probably in the future we'll do some kind of Axios post call to some backend API. This then, and TK. like this. So now, by clicking a login button here, we will fire an event from this component to the parent component and then the parent component it will capture it and fire the call back that is called authenticate. And this authenticate will in the future can perform some some uh back and calls so um so if i press it now i should see the the output in my console again just uh stop for now but uh that's that's how the events work and events as i said again they can we can pass data with them if we need to now uh back to uh

This is a bundle size. Let's, let's look into this. So what I wanted to first to show is just this, on the rappel on the official ZeLT web site. And meanwhile it's opening. My connection is not the best today. I think it's also thanks to the zoom stream. We'll run the build here and explore the rappel. So this is what I was referencing before. Here you write your svelte components, here you add... You can add other files with no problem and then import them the same way you do here. And the output will be not only displayed here, but you also will have the compiled code here, which is I think really nice. So you can quickly experiment and see how much of the code is generated. So if I just directly copy the code from my app, just to see, so I put it here, as I think it's just faster to navigate it here. Then I will just put it here. This is one, this is two. It will be here. This is my script. I hope it's here. And the app header is here. And in the app header, I will have the other piece of code like this. So now it's all built. Um, also gives you some accessibility notices, but this is the code that is generated I'm I guess it's just because we don't have much of the app logic actually really going on. on. So most of it in this case is just the generating of the markup pieces. It's called create fragment method. So again, there is a series of articles on the dev.to where a guy adds a line by line to the simple Svelte app and looks at the output. You can check this one out afterwards to see the insights of this. But in short, you can see that we have a template generation through this create fragment method that contains all the pieces of the app, sometimes in the form of an element, sometimes in the form of a plain dom string and stuff like this. And then we have various evolutions, like when the app is first mounted in this M method, it basically builds the structure and then starts to do stuff like what happens later when certain flags change. So it also has some other lifecycle methods like prepared, but they are not used yet. So for example, like a detaching, I guess here when we have some of the components with some of the hooks like the hooks that will be called during the component removal from the dome, there will be more code in those blocks. Yeah, so that's about it. But it's not minified. And if we do it, let's see, I think it can be. So this is even more detailed output if you want to look internals. So your question was, how big is the output, right? I think the build should be done for now. Let me switch back to our demo app. Yeah, the bundle is created. That is 6 kilobytes. I think it's not. Yeah. So that was the answer to your question, Renando. But again, it's far from something that we end up after the workshop. Yeah, let's move on. So what I'd like to show next is the way we can read the data from the Dom and input fields, for example. And how we can, yeah, implement something like a simple form in this case. And later we'll implement simple list of elements that will in future become a list of messages. So switch back to the editor here. And I also see a couple of questions. Is it possible to split the logic script and the presentational component into separate files? Yeah. That's out of the box with this setting of the rollup. It's not possible, but that's possible to do in principle. Yes. Can you explain again how clicking the login button print to the console access message? Yes, sure, sure, sure. Yeah. So for the separation, as I said, it doesn't work out of the box, but can be done with some setup changes for the Axios call. let me switch back, but in short, the idea is that we have component-based architecture, so each component is a building block that contains the logic, the markup, and the logic and markup and styling. And like in React world, some of the components are considered, are built to be thin, UI components just to display markup mostly, and some components are done to be more containers for business logic, and this is one of the ways you can achieve code reuse and modularity, for example, for large React apps that are also quite applicable to other frameworks as well. So, to ensure that we can separate logic and between the components we need some kind of API, some kind of contract, how they exchange data and for the approach that is adopted by react it's similar that we can use in svelte. And in this case we have properties that are passed into the component, like like that one, the property name that goes from the parent component into the child component to be displayed here.

Connecting Components and Handling User Input

Short description:

To connect components in Svelte, we use the dispatch method and custom events. We can bind values to input fields using the bind directive. The form component collects user input and sends a message event. The messages list component displays a list of messages. We can load messages from a backend API or cache using the onMount lifecycle event. The for each directive is used to display the messages in the messages list component.

and for the events that flow back from the child component into the parent component that mechanism helps us to again not process some of the logic inside of the simpler components like here but it helps us to bubble it to more advanced parent component and work with them there react on them there and that's the second uh the second attribute we have here on the header uh component we have this uh on login property which uh declares for svelte that we are going to listen to the login event it's a custom event that it's not built in uh and when when this event fires we will call this callback which is called the method authenticate. And to connect them together, we need to also enable this dispatch method. It's done like this by importing the certain factory from the from self library. And when the dispatch is called, it takes two arguments. One is the event name, and the second one is the data that you want to pass to the event. So the list of events is like this. The click happens on this button, then the dispatch is called. And then the event goes up to the parent component. And then the parent component, it's being captured and processed. And we get the authenticate call back call. I hope I answered this sufficiently. Let's move on to the next point.

Using the inputs and forms to communicate with, to collect user input basically. If you have any questions, Please feel free to ask in the chat. I will try to answer them meanwhile editing them. So also for the properties, what is nice can useful for us in future that we can also apply spreading to the properties that contain multiple multiple fields. So, for example, if we have other component that reads some complex object with details, for example, we have some data, let's say like this, and we want to pass it to the component, we can also do like this. and that will enable properties to be passed one by one. So also something similar to the react world in a way.

So we have a header. It's really basic. Let's add a simple functionality for displaying a list of messages and then switch back to details of more complex things, how they can be implemented in Svelte, like stores and routing and stuff. To display messages, I need one component that will display, one component that will enable sending a messages and another component that will be displaying a list, right? So we can do it. For example, here we can say, just a moment. a moment. I said just list and mess, just form. Let's create those two components and start adding logic to them. So for the forms, we can have basic functionality. We need the text area to collect the user input. And the button that will be sending messages. That will... Right. for the for the text area and inputs how we can bind values to the input fields there's actually a special attribute that Svelte provides for this let's say we have a method text and then if we want connected to some uh input field we can do like this bind value and bind value will create a connection between the model uh value and the um and uh and the value sorry and the um and the input field So, and of course, for the button, again, we need some way to send data. And for this, we can again use the event system that we just showed on the header. So I will just copy paste some of this stuff just to save some time. So when we do send here, I will dispatch a send method and then the text. Exactly what I can do afterwards. I can also clean the text, right? Because I want the message field to be clean again, right? Just there's not much happening in the chat right now. Can you please measure from one to five? When one is, I don't know what this guy is doing. two five, we're pretty much on the same page. That will help everybody and also me myself. Thanks, guys, so many fives, I like it, thanks, cool. So we have a text area, we're binding the value, we are sending an event on click and here I do this. Okay, and then still to start my app just to see if it's working. Yeah, probably there was some typos. Let me check. I think problem is that I bind value. Yes, that's. That's exactly how it's supposed to be used. Can either have a value attribute, child content. Okay, yeah. Yeah, there's always a problem with text areas with this, right? So now it's fine. um uh i'll i'll switch back to to browser when we have something more to to display uh so now we add the connection here message form on um again we can have something like this and the messages list something also interesting i think we let's start with the case that we load messages from from a backend api or from cache we can use For example, we can use a lifecycle event like onMount for this, so when the page is displayed, we can load the messages, so we put onMount here. Again, it's a part of a Svelte package, here I will add some logic that will retrieve the messages. So what I'll do here, I'll just take the messages. I will be using a simple proxy, sorry, proxy, the mock API that will give me 20 Lorem Ipsum messages. So. I'll create a value here, let messages. Again, there is no strict guideline where you register the values and the functions. But my assumption is that in a really large file that might be handy to either segregate them by functionality, so that keep them next to each other because if you have a hundred of declarations like this and you put everything on the top, to me, sounds really hard to remember which each of them does in future. So for now, I'm just putting it here just to show you. It becomes harder to read. But it's not the way to go. I think I also broke something here. As it works so, so what what what did we add now, we added I'll remove this we created on mount we use the on mount hook for the the app component which will feature some of the mock results, some of the mocked posts and then we'll display them on the page. So for displaying on page, we will have a, we have a messages list component and we will pass the values there. So that we separate the markups into this component and to display them in the messages list component, we will employ the, employ the for each directive that Svelte provides. which looks something like this. You put a hash each and then messages as message, and here you put the markup. Again, it will be relatively simple for now.

Displaying Posts and Creating the Form Component

Short description:

To avoid errors, declare messages as an array. Show a list of posts from a mock server. Svelte supports abstracting async logic and routing features. Display posts with a title and body. Hide the form by default and show it on button click. The form component uses a state variable and event binding. Ensure textarea is closed properly to avoid compilation errors. Create a git repo for easy access. Svelte is worth trying in hackathons or pet projects. Explore the Svelte event for practical insights. Svelte utilizes patterns from other frameworks for faster learning.

What did I forget? What I forgot is, of course, to declare these messages as a property so that Svelte injects the property during the compilation script. I say export messages like that. And what is so for now, it's like this. Later, we will add the loading status here. So let me double check what we get. Okay, now we can switch back to the full share. So why did I change these messages to an array? Because if I declare it like this, messages will be undefined and I will get the following error: 'each directive iterates only on array-like objects, so lists.' And to avoid that case, we declare it as an array here. So now, as you can see, we got the list of the posts. Again, I will quickly show if you never came across this mock website, then I'll just quickly show you what it is. So it's an NPM package that you can employ to run a mock server for your apps. And some of those built-in lorem ipsum content tags like posts, comments, users, but if you go inside of them, any of them, it will be something like this, just randomized text which is really handy for the demo purposes for the for freeing and stuff. So here we will get to any of those items. Of course, we want to show a bit more here. And so I'm going to do that. Also, see a question. Can we abstract the async logic similar to what we do in React? And Daniel, very good question. We're going to do that just shortly when we learn what are the states of the stores, and also we will discuss the routing features. That's definitely possible. That helps to structure the app indeed in a more modular fashion. So yes, Svelte supports that. Okay. Just to wrap it up with some display of texts, not keep it as some unreadable object, I think we can put just like a title and a body, right, title and a body. Now we should get something more readable. Yeah, okay, so we get something that from far behind looks like a post for the chat. Of course, in a real world, you probably want to limit this size to something that is only within the height of the page, something, let's say, I don't know, 50. Right? So it will be like this. And then now we'll have the posts more or less aligned. Of course, again, in the end result that you can later discover in the repository, it looks more with all the styles. So don't worry about that. If you will want to explore the final result, there will be a demo app. So here we're mostly focusing on writing the Svelte code and making sure that the things work together rather than doing the whole styling from scratch. Something like that. So yeah. And yeah, I will get to form component because I didn't show it yet, you're right. Also I'm not so sure. Because of the default styles that are still attached that are generated while you create a new app, we have all those extra styles so I'll just get rid of them. Might break a bit but now it takes the whole screen. What I also would like to do is hide the form by default, because we only want to show it when we click the login button. But we'll do it later. Mihail, here is the form component. What is here we create a state variable called text that will contain the message text connected to the text area. And then by binding it to the event, the click event to the button, that basically will send the event will send the event back to the parent component. Is that clear now? Let me know. Just to show that it works, we can, again, check it here on the parent component. We have a send event and a send message callback that should fire. It's also important that we want to read the value from it, right? Because it's not just some anonymous callback that just fires an event. We want the actual text in it, so it should be there. So we can display it here. Question, Pichel, textarea can have either a value attribute or child count, but not both. Yes, yes, that was my typo in the beginning that, Exactly, that I had extra spaces here, and that was the problem for compilers. So just make sure it's closed. It doesn't have anything. Oh, that's great. That's great to hear, Mikhail. Sure, sure. What I can also do, maybe it's handy for those also trying to follow but not don't have time to check the details, I can just quickly create a git repo and place it there so that we can do Can you hear me? I think there was some switch with the mute. Okay. I see. Thanks. Yeah. So I will quickly publish the repo and we will continue. So how do you like Svelte until now? What do you think? Is it something to give it a shot in the coming hackathon or pet project? Okay, great to hear you, Jordi. Yeah, as I said, there is just in four days, there's the whole event dedicated to Svelte. I'm not sure, but I'm pretty, I don't know for certain, but I'm 99% sure it's a free event. So... So you can check more practical stuff there. Today our goal is just to learn what a Svelte is, why it's... where it may play cool and how to actually start with it. So okay here is the repo. Feel free to clone and follow the updates there. Yeah so many patterns from other lips, yeah yeah we have a good point. I especially stress those also because for me Swelt is more like a extra thing in my toolbox, not something that I use daily and yeah, again start with this with an overview of the ecosystem and other popular tools. And I think it's important just to use the analogy to learn faster right so. Indeed, I think that the the CORE team, they did a good job by reusing a lot of of common things and like more like a patterns rather than just inventions of other frameworks.

Implementing Messages and Introducing Stores

Short description:

Here's a demo of sending a message and reading the detail. Svelte implements simple conditional rendering using the if directive. The speaker clarifies their use of the camera and mentions their experience with Svelte in proof-of-concept projects but not in large-scale production. They refer to a talk by a Svelte user and share a link to slides on using Svelte in production. The speaker concludes that Svelte may not be suitable for large-scale projects but is a safe choice for smaller apps. They mention the app structure they have implemented and their plan to cover more advanced Svelte concepts. The speaker introduces stores as a built-in feature in Svelte and explains the three versions: writable, readable, and derived. They provide an example of a readable store and clarify that it is a reactive variable with an initial value that can change internally.

I guess here here's the repo. Okay. Yeah. Indeed, indeed. So what do we have? We have this, and I just wanted to quickly demo that we can send a message, and then we'll switch back to the theoretical part. Sending this, and yeah, and now send message pops up here in the console. And here we can read the detail. As you can see, it's just almost like normal, custom event that you can create programmatically in your JavaScript. code and it just um uh contains some of the similar flags that uh yeah just since it's a custom event it has all the all the same properties and what is interesting for us is especially the detail dot text this is where the specific um so we can actually go here and take the detail, then use a detail text here, right? Now, hello, it should really give me a hello. Okay, yeah, so it's kind of prepared to become a bit more robust app after we touch upon the more advanced Svelte concepts. I'll just finish this and we'll switch back to the slides.

This is how we implement simple conditional rendering in Svelte. Just by using the if directive, now the form will not be always present only until we actually show it, right? currently streaming your desktop yeah indeed I just was switching sometimes to show the camera because I think it gives a bit of a presence rather than just a narrator voice I remember that note so I'm not doing it constantly now Also, it's almost evening here, so less visible. Cool. Faisal, about the – no, I'm not using Svelte for my daily work. I did a couple of proof-of-concept projects. but not something like a big that is really used in production. This is not what I did. But, again, in our Svelte Amsterdam meetup, we had a talk by the guy who works, who worked with Svelte for about two years. This was version, like, one and I will now find this link and share with you because I think it's quite an enterprise. If you manage to do that. Talking about the large-scale projects with Svelte, it's also a really common question. Can we really use it? And, again, I can only refer to the last community event that Svelte Society, the team of active users, had. and I think there was a word from a Svelte creator Rich Harris and in a brief summary what he was mentioning was that there is no strict there is no some strict limitation that you may find where why Svelte is not approachable for a large scale project it's mostly a bit of cache 22 that nobody did that, like really large, like you said. And nobody did that. Nobody does that in a way. But if you talk about a large project in, let's say, number of files or stuff like that, there are examples where people did that for quite a big project. But again, I will send a link later where. But it was not like the fully, the app that is like GitHub, as you mentioned, in the sense of how many moving parts are there and stuff. But it was more, I'd say, a lot of static files that were processed and had enriched content also together with using Svelte. So, yes, I found the link. Meanwhile, here is our repo with the previous meetup documents. And I think in the second, let me quickly find the last one. So here's the slides for the three years of Svelte in production by Benjamin. So you can have a look what were the challenges and what were the recommendations that whether you should use it for a larger scale project. To briefly summarize, no, because at some point you will have to really fix the issues in the current Svelte release and invent things that are still not done for Svelte. So, again, referring to React as we are on React conference. It's for large scale apps where you can easily find developers, make sure the upgrades are smooth and stuff like this. It's a safe choice to use the big three, right? That's my message in this case. Okay. So what we end up with, we have partly implemented the app structure where we have a header that will later, we can enhance its capabilities with authenticating a user. We have a listing of messages that are loaded from a backend API. We have a form that will send the data. The rest, basically, this can be removed in future. So now let's switch back to the slides. I will walk you through the more advanced concepts of how Svelte works with data. And then we'll try to implement some of them. Okay. about the building blocks, I guess we are far beyond that. Yeah. So now we are on the block about in-depth details, so we'll start with the stores. The stores I mentioned several times. It's basically a built-in feature, which enables, And it gives you the API to work data reading and changing predictably. So Svelte has three versions of stores. And it's basically writable, readable, and derived. We will mostly look in those two. I have a Redux logo here just to kind of give a comparison. but comparison is... sorry... I'll do it just by explaining. So here we have an example of a readable store, that's the like the simplest one. The one that is just, let's say, one-way flow, just read-only. But it doesn't mean that it's a static one, because that's what you may first the thing when you read the definition, that it's just some fixed constant value that does not change. So why don't you just have a const, or some config value, or maybe a flag that is passed through the, from local storage or from input parameters or something like this. It's still a reactive variable, which has the initial value. And if it changes in future, for example, like it is changing here, you see it's changing every second, basically. It's just a typical, just like a timer, a ticker. And what it does, you can't change it from outside. That's why it said readable. But inside of it, inside of the initialization code, the value may change.

States, Routing, and Dynamic Importing

Short description:

You can use readable and writable states in Svelte for managing values that can be consumed by components. Svelte also provides routing capabilities, allowing you to switch between pages and handle programmatic navigation. The router synchronizes the state of the app with the URL, and you can use dynamic importing for larger applications.

And it, again, can be, for example, a flag that the browser is offline. That's what I have in an advanced version of this chat which you probably will not implement fully but you get the idea. So if you have certain capabilities like flags that browser is online or offline you can set it as a readable state and if the value changes then the state will be updated and your component that read this state, they will be able to use it. So all the code related to the states, of course it can be consumed by the components. We will look at the examples later. So for now it's just the JavaScript code, the description of a state, But in future, in later, we will see how those values can be of course consumed. So readable are the first one. The second one is a so-called writeable. Basically, it's the one that you can set up the initial value and then change this value from other components or JavaScript files. So this really, may remind you just use Redux or use Memo. One of those hooks where you can create initial value and then program calling a certain API, change its value. And inside of a component, you can do things like subscription that is displayed here. Then you can add some reactive logic for those cases when the store value is changing. So you can follow this and react accordingly. Another big thing that is important for building some real-world app is of course the routing, so the ability to switch between pages. With Svelte, again, it shows a bit of an ecosystem current state and there are quite some routers here and this is just the beginning of Twitter thread. There are more in the comments below this thread. So I'm, for most of my use cases with Svelte, I'm using this one. I think it's also one of the most popular ones that can be easily installed and uses the config object which i think reminds the uh the react router version 3. uh so you you just create an object that maps the routes uh to the specific components and then uh the router will do the all the all the heavy lifting to make sure that the state of the app so the component that that is currently displayed is synchronized with the URL. And in this case, you need to add initialization code like this, sorry, it's again jumping. I hope it goes away. So you need to add this initialization logic into your root component, where the router resides and then it will be switching the pages. What it also can do, it can do, of course, a programmatic navigation. So you can not only switch pages by clicking, by user input, but you can also do navigation in case of some events or some checking of some parameters and stuff. And it also supports the dynamic importing, which I think is really important in our... for the bigger apps. OK.

Additional Features and Next Steps

Short description:

Svelte provides additional features like displaying DOM strings, a debug statement for stopping execution, avoiding global class scoping, creating hooks to the runtime, using the Svelte head block for adding scripts or styles, and utilizing actions to extend element behavior. Svelte also has built-in animation capabilities and offers UI libraries. In the upcoming sections, we will focus on adding routing and state management to the application, as well as techniques for improving usability and performance.

So other things, more like small features that may be handy when you're writing and debugging a bit more complex app, more like features, really of a Svelte compiler. First of all, there is also opportunity to display DOM strings. Like when you have, when you, for example, loading a template dynamically, or when you get it from some, from backend or something, you can render it, or maybe you're constructing the DOM string from pieces. not sure that's a good way to use it, but still it's possible. So you can use it with a special HTML directive.

Another one, a really useful one is debug statement. What it does is just, like a debugger statement in the JavaScript code. It stops the execution in a specific place, as of a template where this debug statement is mentioned.

Last but not the least, I wanted to highlight how you can avoid the global classes scoping for the components, for that you add this global modifier to the style declaration, and then Svelte will make sure this CSS styling is not bounded to this specific component. So that's the way to make them more available to other components.

One more special concept is because all the previous ones, I think throughout all the workshops, things were something that you can easily find some close alternative in React or ViewWorld. Those things don't have direct analogy, again, because of the nature of Svelte. And those things, those directives, serve the purpose of kind of creating a hooks, creating some connections to the runtime, because as you remember, Svelte is a compiler. So the code cannot kind of run all the logic or some of the methods in runtime only. And in case of web development with the browser that displays the page, there might be some use cases where you can't just get it directly in a compile time. So for that, there are those special directives where you can bind the execution of a certain method, certain callbacks to the runtime. For example, here we can listen to the events on the window or listen to some global properties on a window in the runtime and then execute certain code. So these are kind of hooks to the runtime world, while you're writing the component code. And there's also this Svelte head block, which is again focusing on the, if you need for example to add some scripts or styles that needs to be added to the page, and then you can employ this one.

And I think the last concept I wanted to share is the concept of actions. It's quite a powerful tool in Svelte apps. It's basically like a combination of, like a directive, but in the same time directive and the component. So it gives you this option to extend a behavior of a certain element. It can be just the div, just a normal dom node or it can be a whole component. But this action, this function that is passed with this use syntax is yeah. Way to configure the behavior of this specific tech. And then when it is added to the, to the dorm then you may add certain features to it. And actually in the return block here I only mentioning the destroy but it also has the update hoop. So again you can kind of enrich the behavior certain markup to become almost like a full-blown component.

We will not really touch upon this one in the practical part but it gives I think an extra flexibility to Svelte component. What I also did not mention is the things that are listed here especially the built-in animation and the ssr well uh you're probably all uh familiar with the ssr term where we can have a server-side rendered javascript that will uh ensure we have a faster best co uh and initial page load So SWELT does have that as a separate standalone project called SEPR. And as I said before, if you call Svelt, it's still in active development. SEPR is even more heavily under development. So, as an experimental thing, if you want really to push your ability to solve tasks in this kind of new projects, then probably it's really nice tool to give it a shot. Again, it's very performant because it does the same, uses the same approach. And it also repeats some of the APIs that other SSR tools have, such as Nest or Nuxt. But again, you need to double-check that it has all the features that you may need. And the animation. I think it's really important to stress that Svelte has animation out of the box. for this use case of small apps that you want to provide interactive behavior not only just by pure CSS animations but also with extra parameters and modifying CSS values it might be overkill to bring the whole separate library like G-Sock or some other one. So Svelte has out-of-the-box most of those basic capabilities, however, if you if you want to use some other apps for animation you can still do that. So in that sense, Svelte is better included, I would say. For the UI libraries, I did not cover it here in the workshop, again, just to save time and make it more smooth. But there are two libraries that are quite in a good shape with the, well, developed, let's say, in the current ecosystem. So they are mostly mirroring the materials.

Okay, so what we're gonna do now, we're gonna try to add the routing and the state management using the tools that I've just shown. And then just look at some of the techniques that you may want to use for improving the usability of the application, and increasing the speed of loading and some of the production tips and tricks for Svelte apps. so switching back to the code editor uh yeah i see a question from uh alexei yes indeed um you can start using the svelte with typescript uh relatively recently uh there was also the stable uh starter pack released so you You can check this out, for example, this article where they explain how that should be all set up. So, yes, Svelte does work with TypeScript. It's actually written in TypeScript as a compiler. So, it's absolutely doable. Yeah. So, what we're going to do with the state management, right? Let's start with this one. um what we can do uh first we can maybe really just uh connect the router because it does not contain uh does not take too much time and then uh proceed with the rest and proceed with the with the state management just uh to do um fast things first and then do the rest so um install the router we first need to install this dependency this Svelte SPA router so I'm gonna do that here meanwhile what I will need to do I will need to create the config object on config with with all the routes listed, which component relates to which route. For that I will also need to restructure a bit what I have currently on the page. I will do like pages for example, maybe create a login spell, that was a typo. yeah and um for now they are uh doesn't contain much but uh soon we will add a bit more stuff here So what are we going to do? We're going to first create the route. at this and then to make use of this router we need to add the router component here So the idea is that all the rest is just gone from this component and only header and the route state. So, for example, messages list will go to the chat component. A bit of reshuffling here. also the login form probably moves also to the login page and stuff like this so so I move the messages to the chat send messages also here also this one and also need to read some of those guys This is one.

Connecting Router and State Management

Short description:

We connect the router and proceed with the state management. Install the Svelte SPA router dependency and create a config object with the routes. Restructure the pages and move components accordingly. The root component contains only the header and the router. The app now has a chat page, a user's page, and a login page. We add a navigation component to enable navigation between pages. The router tag is added to the root component, and the routes are defined in the config object.

So, what we're going to do with the state management, right? Let's start with this one. um what we can do uh first we can maybe really just uh connect the router because it does not contain uh does not take too much time and then uh proceed with the rest and proceed with the with the state management just uh to do um fast things first and then do the rest so um install the router we first need to install this dependency this Svelte SPA router so I'm gonna do that here meanwhile what I will need to do I will need to create the config object on config with with all the routes listed, which component relates to which route. For that I will also need to restructure a bit what I have currently on the page. I will do like pages for example, maybe create a login spell, that was a typo. yeah and um for now they are uh doesn't contain much but uh soon we will add a bit more stuff here

So what are we going to do? We're going to first create the route. at this and then to make use of this router we need to add the router component here So the idea is that all the rest is just gone from this component and only header and the route state. So, for example, messages list will go to the chat component. A bit of reshuffling here. also the login form probably moves also to the login page and stuff like this so so I move the messages to the chat send messages also here also this one and also need to read some of those guys This is one. The chat file. Also, now I will get rid of all this boilerplate that we had with the users just to demonstrate how things work. I have the users there, login. And then chat, chat will go here. I think this is loading. I can move somewhere to the users who'd be useful there. auto completion i will don't install new plugins before before the demo The rule of thumb, of course. So something like that. Now our app is a bit more cleaner. Also the loading, I will reuse it there. Buttons, I think we don't need all that. Now our root component only contains the header and the router. Here are the routes for other pages, which are now situated in the pages folder. and for the users, we can later reuse this logic here. Something like that. The only thing I think we're missing is the chat. We'll need to do it like that. Also, what I would say is that components go to components folder I like that. Yes, sure, that's what I already installed. I'm going to use this Svelte SPI router. Yes, that was also on the slides that it has. So what we do here, we, um, let's see if everything is working as expected. There's still some minor errors in the router. Let me see something with the component. Authenticate is not, I guess, here. So this one and this one is actually in the form, and the form is here. we can put this form to our goes directly to our login page and the properties we will need there Can you see the mar finishing? Did I say advise? Authenticate, where is it? Here, yes Well, of course. It would be nice to import this one, of course. And give me a sec, why is this not... ah it's it's a default default textbook okay okay so we have the of course some things are broken but a login page we should have a chat page it's HTML 5 a And a chat page, right? And we should have a user's page which for now is kind of empty. And I think what I also to do is to get rid of the button here in the header like this. In the main we can still use this. Let's use a proper name here, up-name, then I'll put it into the header. Yes, so not needed anymore, this is not needed really. App name is not defined, yes, so because I did not...

Okay so, we have a chat app with a list of users, just let's write it down here this list. here will be the list of users, what I would also suggest, we add a navigation component with all the links so we can check that we can go between the pages. So, how the router works is that we have, sorry, it's not this one, this one. We'll use some of the shortcuts, of course, here you can actually see the with the actions so the route this router plugin uses actions to enable extra behavior on links so you can see here we are saying that the URL and then use this use link which is really handy way to make this link Routar.link again this is just one of the routers available I think one of the popular ones, maybe the most popular, but it's not the only one. So if you, by some reason, want another set of features or another API, you can also use that one. Any other one? What I wanted to add is, of course, a nav component here. Okay, so it's far from being stylish but it has all the pieces. Again for those who missed that part we have the ... I have the improved version like a fully working app in a separate repo which I used as inspiration and now to cut the corners so don't be afraid that the The styles are missing. It's just like a skeleton. Yes, this is here, and I think we're still missing the login button in the user screen just to have this thing more or less settled. Michael wrote, could you show how to use router please. Yeah, that's what we're doing here. So router, including router consists of multiple parts, you need to install it as a dependency see then you add the router tag in the root component here. So, and it consumes one per meter. It consists of, It excepts one parameter which is routes basically a conflict object for the, That, as I mentioned, creates a mapping between the routes and the components. And here you import all the components that will be in routes. There are also some advanced things like a not found route. So you can do that as well. You can also have like extra configuration for routes. Like, I don't know, some pro ducked slash ID and stuff like this. So this is all possible. It's just a bit all outside of the scope. Yes, it should work. But as I said, it's a hash router. So make sure you have it like that with a slash hash, not without it.

Connecting Router and Creating Stores

Short description:

In this part, we connect a router and then proceed with creating stores to manage some of our state. We start by creating a store for storing the data of the posts. We also explore the API for reading and writing values in the store, including the set method, the update method, and subscribing to the store. We discuss the use cases for these methods and the importance of separating store updates from component code. Finally, we move the messages list component to use the store and observe its behavior.

Because if you want to have it in HTML5 mode, you have to choose another one. That's a bit of a thing. Again, so many routers that are available for Svelte. That's kind of the downside of too many routers, but actually probably none of them is good enough. That was my previous, my separate slide for that. So router is really quite a complex thing, not by its main behavior, but by its quarter cases. And yeah, that's why having a React router team in React community, I think really helps that they create one great product that every... most everybody uses.

Okay, so that was connecting a router. We have this basic behavior. Now, let's wrap it up with connecting some... creating stores to manage some of our state. But first, I wanted to commit what we have now, just to keep the repo updated in case if you're following and you're missing some of the content. Yeah, I pushed it to the repo. the code is here. I see also question. Yeah. Yeah. Yeah. I just, oh, I only now saw your question. Sorry. It is 10 minutes later. Okay. Moving on. Now we going to create stores, as I said. Hmm, we can start with, sorry, we can start with store for just storing the data of the users. I think they also mentioned it during, sorry, for the posts. So let's start with this. a store folder. I'm going to be using the writable store that we will be able to reconnect later. What I also will do, I will, sorry, that's So what I also want to do here is just to create a simple version for catching the messages in a local storage. So let's make use of this. I'm looking for something. So what I'm doing here, I'm importing the store, and I'm also creating like a fallback case. I first try to load messages from there, if there is something from a previous page refreshes, for example. But it's not really needed right now. We can start without it. So in this case, I'll have the. Let's add it later. So I have this will be the messages or I call the posts. It's just an empty. That's an empty array, right? and if we want to start reading the data from it, we can make use of the existing API for the stores. In this case, I will switch back to the editor to make it a bit more smooth switching so that we can, how we can read and write values. I will display you a couple of examples first. So we have a set method. When the store is created, we created the store here by just calling a writable factory and passing the initial value. So think of it as a set state or something. If you want to add value, you can do it like this. if you want to update the list of values using the previous value you can do it using update method so you can do something like so here you have a callback and you don't need to return something from it. Sorry, you need to change it and then return the new value, right? So, for example, you can do here, let's say, old posts push, I don't know, one new message, and then return it. then that should be sufficient to add a new value to the list. And one last way to communicate with the writable store, is to subscribe to it. This is done again with the same kind of API, what's.subscribe and then here you have a callback that will be fired when the value is changed like this uh so this is three again this the first one is when you have want to have like indefinite change of of of a value the second one is when you want to make use of the previous data, previous value of in this case, posts list. And for example, why I may want to use the update one, I could do something like id equals post link plus one. So if you want need the previous data to create a new item, then Then update is your friend. And so those are the use cases. Again, those methods also can be called inside of the components. So you can just directly, since we're exporting it here, we can use those method components. But this can easily lead to the basically spaghetti code, which does stuff all over the place. So imagine you have the post somewhere here and you do the code, like modifying the posts list here, which can be unreadable if the project goes a little bigger. So for that, what is the suggestion is not to update store here directly, but rather go something like a Redux way when you create, just a moment, I want to find the right file. It's probably right here. So when you create explicit methods to change a value and then export those. So for example, here you can do export some net variable. Let's say clear list and this will, what it will do, it will do exactly this separation. and export add item, actually do the update operation and so on, so that can be the solution. It's just finished with this. Like this, so now we can, this one is still can be used in the component, but we will try to use it there as well. So here we have a messages list and we can move it here and see how it works. So we take the subscribe.

Working with Stores and Loading Data

Short description:

Let's create a button to clear the store value and a subscription to read the value. The dollar syntax allows us to display posts. Adding items is reactive, and we can restructure the code to avoid copy-pasting methods. We can also create a service layer to load items into the store. Although not everything is covered, you can load various data using this approach.

What also I would like to show is using those two items. Just to show the trick, we can work with the stores. Let's create a button that will be doing just that. And clear list I will import from here. So what I did here, I created a button that will use the method that will clear the store value. And also, I created the subscription here to read the value, just for more demo purposes. So let's see what's happening.

Also, let's also add one more to add an item just to finish the create read update a list of actions. So I will have an add item also imported from here. Like this. And of course, the most interesting part is actually the dollar syntax that posts have to display them. So now let's see how it behaves in the browser. Give me a moment just to double-check if everything is there. What I can't see is then... What I don't see is the button. Let me switch to the sharing. So here we have the chat page, but I don't see what be some typo. Give me a second. I think there is a, it did not refresh properly. Like here, we have these, what is the close? Oh, yes. Problem with that, export type-export, just stop the screen freezing. Hi, everyone. Just a typo. Okay, now it should be fine. Yeah, okay. I'll switch back to the list of all items. You can see here. So we have Chat List app. Again, the posts for now, they are not connected to those items that are loaded asynchronously, that's our next step. But we have here the posts initially, it's just an empty list. And those are the buttons that will actually add the items there. So what we can do, we can first add items as you can see, we get the subscription. We get the console log statement when we're doing the change in the posts list here, right? In the shared component here. So this subscription fires every time. So it's already in the component, so you can imagine if you want to form some logic, you can do it here as well. Secondly, the output to the DOM is happening, we get all these extra objects. That is, this nice dollar syntax, which really puts a lot of corners for us. We can just imagine we import the default, the store object, And then we use it with a dollar and we're done. We can now basically iterate on them. We can maybe just put them here inside of these messages, at least I think we'll do that just in a sec. And of course, now, if we keep adding items, it keeps working and then we're clear and it's all gone. So it's fully reactive with the minimum amount of code. Here I also wanted specifically to show how you can a bit restructure the code so you don't do a lot of copy-pasting of the methods that mutate the store. So this pattern should save you from that. So, what the last step we're missing I guess this loading of the list of items into the store not just into the component. So for that again we can apply a bit of a refactoring here. We can also create some service layer. and here I'm calling them posts but it can be messages so what we can do we can take this away from here file File. Take it from here. Like that and here, what I do, I just take again, the addItems method, I can create a new one, which will be like a set list, for example, not very creative with names right now. But I hope you get the idea. All posts, for example, I'll put this one here and I also import it in the services layer. Sure. I can imagine, Martin. Yeah. Thanks for following. Yeah. I hope it was useful. Something like this at least messages. Of course we need a try-catch block here and then and everything, but it's a bit outside of the scope. Okay. So probably I can remove everything and it should work message is not defined that's all right because i from here to here um so then the network call was it did the text of course the network call did not happen yeah because nobody uses the load post and this yeah that's why i forgot on launch still stay because because we will need it exactly for that. Like that. Again, we couldn't do everything, but I hope you get the idea. With this, you can load all kinds of data. I think something. I said load posts, when they're in the load post as a set list, because I'm not exporting it. Yeah, okay, there was a delay, of course. So yeah, as you can see, it's not working.

Wrapping Up and Q&A

Short description:

As you can see, the posts are not loading correctly. We can show a loading message while the posts are empty. Svelte is a great choice for small projects that require small bundles and high performance. However, for larger projects like GitLab, Svelte may not be the best option. There are also options for micro frontends, such as Single SPA. If you're interested in Svelte, check out the upcoming event for more information on the practicalities and the evolving ecosystem. Feel free to ask questions in the Discord chat and fill out the feedback form. Thank you for attending the event!

So yeah, as you can see, it's not working. We're loading the posts. We can also show the loading message somewhere here while the posts are empty and all that stuff. That's also we can do it with a reactive state. We can do something like that. If posts length equals to zero, then is loading and so on. So I hope you get the idea. I can imagine there's a bigger timeline, a timetable for today's events for you guys. So I won't dive into that part. Who got the idea how we can use the router and the store, I will update the code of the repo, with the latest version, and let me quickly switch to the slides and do some last wrap up to share the important content with you. It's over here. So, I think we'll skip the optimization part. You can read about it in the slides and also deployment other multitude of tools how we can do that. For simple projects, I prefer Netlify. For complex ones, my cloud of choice is Azure, but of course each of the big clouds has its own service to where can deploy front-end apps. The main question probably for those who like Svelte is it production rate? Well, I would say if you want, like, a yes or no, then probably no because it's a very small ecosystem, very small core team which is also busy with other projects of theirs. And still, there are things that Svelte, as a tool, needs to improve in terms of developer experience. So it's definitely a thing to try for your next project, maybe something small, maybe something that needs extra small bundles and performance. things like embedded widgets or forms or some login pages where you need to be blazingly fast because i know uh for a couple of big portals for on russian market they used it just for the login form you know when you wanted to be uh as as thin as possible as fast as possible so For those use cases, it's hard to be svelte in terms of speed and the bundle size. But again, if you're writing something like a GitLab, like somebody mentioned, that would be ambitious, and that's what you really need to consider. Also, there was a question by Dojo about the micro frontends. I think there is a demo solution. I mean, there are a lot of ways to hook microfrontends, single SP is one of them, and I think they have sample implementation but I might be wrong. So Svelte is tiny enough to be one of those pieces in this package that we have already created, and I think that's very good. ...for sure. If you got excited about Svelte... ...for a second. So I will repeat once again. If you are interested in Svelte and you want to know more about the practicalities and what is interesting and how the ecosystem is evolving, please check out the upcoming event. It's free online. We'll have a lot of links and interesting talks. That's all from my side. I hope you liked it today, and I'll be happy to answer your questions in the Discord chat. One last thing, please find a moment to fill in this small feedback form. If you have still a couple of minutes, it will also help me to improve the workshop. Yeah, that's it for my side. Guys, questions? and here is the link to the discord chat the the one that uh where we can continue the discussion I hope you like the event today. Please give Svelte a try. It definitely deserves attention because of its innovative approach and blazingly fast work. Thanks, Yuli. Again, if you have more questions and especially about where to read about something or how to do certain things. I'll be happy to answer your questions in the separate Discord chat. I also see already people started writing something there. So we'll be switching to this one. Thanks, Slobodan. Thanks. we'll be wrapping up and see you on other events of GS Nation.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.