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.