Svelte for practical developers by Mikhail Kuznetcov

[Music] hello everyone sorry about this small delay we had some technical issues uh hopefully everything is fine now uh i guess mikhail thank you very much for being with us um i want to let you know that attendees can ask questions on youtube channel or on the slack channel for this track uh you will not see them live i will relay them for you at the end of the session and since we are a bit running a bit late now i will pass it to you if you can introduce yours yourself please and start your presentation thank you very much sure thanks uh for the intro samuel i'm really happy to be speaking at the g nation today uh it's my first time i'm doing this talk at this conference and uh yeah let's uh kick it in so today we're going to be speaking about svelte and talk is titled swell for practical developers because it's focusing on basics of swell how you can quickly pick it up whether you are a beginner javascript developer or you are proficient with a front-end and want to learn some new cool stuff or you may be coming from other background in i.t or not even ip i will show you that svelte can be really quick to start a couple of words about myself i'm mikhail i'm originally from russia i'm working uh for uh fintech in amsterdam uh ing bank i've been also running a swelt meetup for last two years from the first moment i saw how cool is actually swelled for uh all kinds of small tasks i was really fascinated and uh happy to share this knowledge with you guys today uh what we're gonna do today we're gonna look at let's say theory part about what is the motivation behind swelt how it works under the hood what it brings to you as a developer then we'll go through the typical code patterns how to do uh certain typical activities uh uh in swelt code uh and then we'll look into more advanced concepts like switching pages in a single page application routing or working with uh application data like stores and also some advanced features uh in the end and if we have time we'll do a quick demo with live coding we'll see how it goes and uh just one last word of self promotion that's the event we are doing together with developers from ing it's basically focused on modern simple uh tools to build efficient web applications in 2021 uh it's going to be online and it's absolutely free you can join uh on evan bright to this event or you can just type simplewebconf dot com and find the schedule we have speakers from microsoft uh ubisoft uh ing and many more exciting talks it's going to be two days event plus workshops okay then uh let's uh dive into svelte so uh the basics uh before explaining what's swelt is let me give you a quick uh overview of of uh how the frontend was evolving and why svelte come into play and uh is really uh interesting uh uh and efficient choice in today's world so uh from starting in uh uh early uh uh uh early uh 2000 uh the web has become more and more an important platform for e-commerce and social networking and all that and that gave rise to first beckoned centered uh frameworks like django and rails they're still on stage and they're still great uh tools for some cases but uh the more uh the pressure was on time to market and quick product growth uh the more we had uh complexity shifting to the front end and if you've been long enough you you recognize the next logo like jquery which was a great uh greatest tool of all ages i would say to help front enders to build co code efficiently and and that uh library is still available and still serves a lot of projects and what it was great about it was that it provided a common baseline to solve certain tasks that was great for its time however the complexity continued to grow and uh code basis of a typical successful frontend project and the team size was increasing and that gave rise to another generation of uh front-end tools well-known like angularjs then react and then even vue they all had different uh partially different concepts under the hood but they were all serving the same purpose that you're just learn the api you learn how this frame for framework does certain stuff and then you can just keep building and then uh other developers who join into the project they already know how typical tasks are solved and the framework kind of isolates the complexity of a browser interaction for you and you're just writing framework code and the framework does the rest for you with efficient uh rewrites efficient uh uh event communication and all that the those are great tools you probably worked with some of them before uh however uh what was happening further is that uh there is more sorry my wash machine just stopped i will switch it off that happens uh so uh what was happening further again more uh attention in the front end area and a lot of newcomers with uh other i.t backgrounds and at some point there was a situation when you have to learn so much stuff you can just name maybe dozen terms from top of your head which you need to master before you can actually run your frontend project just a simple hello world line will will take you npm javascript typescript css everything like click events preloading and all that so what uh that really shows that the complexity increased enormously and there was a space for some rethinking of of the approach and that's what uh svelte basically did uh with its first version in uh 2017 it introduced a new conception which was um let's uh remove the complexity from the developer code and and do the work in the background during the build time so svelte basically is a compiler the same way other industrial programming languages do this like c plus plus or java in some way right when you write a high level code and then the compiler processes it uh applying the same approaches like in other languages with uh parsing your syntax tree into a low level code in this case both uh the low level code is still a javascript but uh that gives enormous power in applying new concepts to your uh already written code by adding new compiler features there is a great talk by uh timely huawei about internals of a swelt compiler uh check this out if you want to know more how swelt compiler works so swell compiler is written in typescript and it's again takes the complexity from you you will see how the swell syntax looks like it's even simpler than javascript so you'll be amazed that gives uh opportunity to reduce the actually the runtime bundle size to uh negligible uh two three kilobytes so all the swelt app code is just your business logic nothing else uh compared to other popular tools like uh viewer react you still have to bring some runtime with you swelt in that sense is a much more uh rigid and almost not bringing any extra uh bundle size which again is very important in today's world where we have diversity in terms of network uh communication and uh different uh browsers uh on different uh low end and high-end devices and and that's where the the bundle size and actually the uh overhead that the framework brings becomes important so if you try to run uh let's say uh re complex vue or react or angular app on a low end phone and low end phone is not something that is just exists in this presentation there's like a good one third of humanity is using the phones that are not iphone 12 or stuff like this and even you yourself if you just drive outside a agglomeration and be somewhere in the countryside you will be on on this uh not very stable connection and you will clearly feel that pressure of uh large bundle sizes just are not efficient in those settings so svelte tries to eliminate that by removing all the overhead a couple of words of course about the uh the team who created it rich harris on this slide uh the guy behind svelt and several other successful uh front-end and javascript related projects so swell started uh years ago and uh by now it's very uh quickly growing in popularity amongst the senior frontenders and also the newcomers in the area so uh today's version is a major version is 3. 30 something however even the second generation which was released uh about a year and a half ago was already a big step forward with a nice developer experience uh we will see today uh if you are just starting with swelt it will be even better uh developer experience with uh developer tools uh plugins for your ide uh starter projects and and all that uh we'll see that in a bit so let's finally dive into how to write spelt code so again you are as efficient as you know your tools and for uh your id of choice there are plugins for either it's a visual studio code or jetbrains product make sure you install them if you want to play with swell locally and run the project however uh svelte provides a really nice uh online sandbox where you can run a multi-file uh project and explore its capabilities swelt also has a dev tools that you can use in pro which helps you to debug your code so be sure to check those tools and now let's uh finally dive into how to start this felt project so as you can see we can just either download the the hello world app from a repository called svelt js template or you can run the command that is uh first line in this slide and this one is uh basically uh cloning the repository and removing the the git folder out of it so that you can start playing with the actual file that's also a nice option if you don't want to don't want to install some too much on your machine then of course you need to go to that folder and install dependencies and then there you go you have a hello world there we will look into this uh uh quickly and then uh finally uh uh look at the syntax so give me a moment so here we have um freshly installed uh startup project uh let's quickly explore what it has so uh it's it has a uh uh by default a rollup bundler config however svelt also comes with a webpack starter so if you want to use webpack you can easily find a template on official github repo in a starter package it doesn't have much options it's just a production build uh command and a dev build where you can get the hot reloading while you're coding so you can run npm run dev to get your uh dev setup running in the source folder you will have only one swelt component that's how it looks like it's basically a file with a swelt extension and since i have a already installed the [Music] extension for swelt that's why i have also the syntax highlighting so make sure you have it on your visual studio code or intellij to have all the auto completion and uh syntax highlighting so this component is really really simple it just has some html some styles like almost nothing and the app is initialized in the main.js file this one may look a bit familiar to uh users of react or view two users where you creating an instance and just saying where to mount the application and here it is done via the the object which has a target property where you need to um pass the uh dom node where the the project will be bound so that's that the props object props property is is not required so we can skip it if we want and of course the the index.html file is uh placed in the index uh in the public folder and here you can see uh yeah the uh pretty typical setup if you if you've been using roll up before okay now let's go back to the the syntax and quickly overview what are the building blocks of swelt components so sveld comp swelt also uh uses the uh uh pretty standard uh approach today with a single file components that combine together html javascript and css uh the difference is that you do not limit html into a separate template tag or something like this you can just write it anywhere above below in the middle it will all work because it's a compiler that will parse your component and it will extract the script part the style part and will make them scoped by default the styles are scoped by default in swell so here we can see a simple component with one property and this property is declared in the script part and it is uh then displayed in the in the html template part you can see here svelte is using a single uh bracket notation for templating and if we go further to if we want to display something more complex here we can see the first swell directives directives look like again a bracket a single bracket expressions that start with a hash so hash tells the compiler that they're going to be some instruction that is uh uh needs to be processed uh uh as one of the built-in directives so for simple uh uh uh conditional rendering you can use hash if or if you have multiple items you can have if else to display different statements and there is a iteration directive called each which i think looks pretty familiar if you're if you've been doing any uh any programming uh recently then you will find it pretty straightforward so we just take an array or an object basically something that is iterable and then uh get the the single instance and you can access its uh its uh internal properties inside of the inside of this expression so this is for iteration uh when we go further and we want to uh combine several components we do it uh following way we import the the child component here we have a simple setup of a page component and several blog post components in it we create those two files we indicate properties by adding a export keyword to them so if you just want to indicate a property that is local to the component you skip the export word however if you want this uh property to be um to this variable to be a property in sense of how uh component oriented frameworks uh treat that you add an export and that will be taken by a compiler as a statement that you can actually set the title in the parent so here we've uh also added a default value again uh remember how you do the default values in other frameworks here is i think as simple as breeze you just set the value and it will be set up and if it will be overwritten by the parent you you will get a you get a new uh value in your html so and in the parent component which is here on the left you can see we are setting up the title property and assigning it to some other uh constant that is uh that is present in the parent component you can also for multiple properties you can do uh destruction like like it would be with some object uh so he the the plain simple and again just don't forget to import your component in your parent moving on this is really cool stuff this uh if if people see something like this they say uh yeah it's it's like jquery or php or what is that it's actually a valid javascript uh notation uh you can you can google for uh label statements and this is this is the way you can uh mark certain certain statement with kind of a name uh it's not didn't have much attention in the javascript community so rich took it as a as an opportunity to reuse it as a special syntax in swell so what it does it actually creates a reactive truly reactive variable that will be uh automatically recalculated when you when the uh source value is changing so in this example we are um declaring one one variable and uh creating two more variables that are reactively connected to the first one so uh as you can imagine if you press uh if you run the handle click function you will have a uh increase of the count here and then automatically uh this expression will run and this expression will run and you will get double and quadruple values so these reactive declarations make just a regular um work with strings or arithmetics or even validation things like this really a breeze and swelt and it's really straightforward what is happening there there can be more than one dependency in such expression so you can concatenate parts and and do things like this uh events we are all living in an events based world in the front end so let's look how the events are handled uh for the events we have a syntax with a uh on and then double dot and then event name and after that goes the uh declaration of the of the handler if you forget uh to declare the handler in the in the script block you will get a compiler error that will tell you about it before you actually try to build the code and ship it so um swelt html elements within swell components support all the standard html events so all the stuff with a mouse over or drag or scroll all that stuff works so i'm just using a simplest one here to give you an idea and for a really simple uh callbacks uh you can you can have them in line so again if you're from a react no things like this or like anonymous functions you don't need all that because compiler will do that for you so the syntax as you can see is the simplest possible uh to invent and so events will run the code in the callback and do the the changes and also what is nice here again you're just declaring a variable and then you do do some something with this variable you mutate it this will be automatically uh re-rendered in the component uh so again no need for declaring certain type of properties uh some reactivity or hooks things like that it's just uh it's just removed from your mental uh load now after a quick intro into the basics let's have a look at the typical uh not not very useful of course but uh some model uh component what we have here we have two inputs and then in the template block we're just combining the input of those of those two fields like a plus b equals uh a b right or two plus two equals four this is the component so let's have a look at the amount of code we have to write to achieve that goal so uh starting with react where we're using a hooke's approach and create a state variable for each of the of the blocks and then uh increase them in a callback uh to view where we skipped the more detailed declaration and just rely on the reactive system of view a bit shorter but still quite a lot of excessive brackets and variable declarations and here's the swell block where we just have two variables and just bind them to inputs and just output it in the template so here is the the difference in the in the amount of code of course this is a very simple example but it gives the idea right how how much of your developer work can be taken away by the compiler now moving on forward to a more advanced stuff uh first of all uh probably there could be questions about uh how i gonna build uh more advanced applications with uh adding some styling uh there are several solutions exist in swelt world for this uh the the most uh advanced is wealth material ui uh however my personal recommendation would be uh that kind of in my opinion uh goes against what swelt is trying to do swells trying to bring simplicity and and straightforwardness so and those uh component libraries is a nice way to keep developing component uh like uh you've been doing it with other frameworks however uh svelte i think really shines when you need quick uh bootstrap project so i personally prefer using css only libraries like bootstrap for example just to get the styles get the nice uh colors and all that and not uh interact completely with all the components lists that those libraries bring however if you uh fancy more uh component libraries uh against just css libraries uh then then you can give it a try so there is a certain uh list of those uh present and they are actively developed uh other than that uh for uh things like events we also have the ways to modify the event again if you're coming from uh angular or view background you recognize those kind of things when you want to eliminate repetitive code in uh typical situations you can add modifiers and then uh basically uh disable the typical uh behavior uh for for example when you're submitting a form or you want some item to some callback to be run only once there there is a modifier for you that you can employ css as i said css in swelt is built inside the uh style tag uh and uh it uh by default all the c component styles are um scoped so if you look at the compiled code of any swell component you will see uh swelt prefix and some uh hash be after that so that uh styles do not intersect and you can name them as generic if you want you will not have the intersection however there is a way to make styles global we'll look into it in the end of the slides uh so if you want just style all the headers with the same styling you can do it from swell first option would be to just attach it to the external css file right and this but secondly you can also do it uh inside swelt component what is also nice you can quickly uh create um styled components with uh uh real components with a um those shortcuts like like shown on the left uh we create a component with flags for different states of the button uh with not even states but more uh different types of a button right a bigger button or a more color highlighted one and then uh svelte can pick pick them up and map them to the to the classes that are described in this component and then in your where you're using it you can just state the the properties because those two uh big and highlighted they are actually the properties declared remember the export um keyword and then it means that when you state this uh property in the parent component then value of this property inside of the button component becomes true and that automatically takes the the css class and applies it to the bottom so this really uh uh pretty straightforward way to create uh advanced uh components inside your application um also you can use css variables uh from javascript and if you fancy uh preprocessors uh by default swell does not have them in this hello world setup however you can attach all of the modern uh preprocessors quite easily there's a instructions on this uh in the documentation it's pretty easy moving on of course we want to feed our app with data and there are several ways to do that and the the simplest and most straightforward one is using the await directive again remember the hash block which tells to the compiler that there is a built-in directive used and what it does it just takes some callback that returns a promise and then basically until the promise is resolved you get the loading block and then when it's resolved successfully you get the then block template and if it resolves uh rejects basically you get an error then you can get a separate block so it's uh again things that are uh existing in in uh react right uh and svelt also gives you quite straightforward way of handling this um if you wanna do it more fancy with a a way through stores and like uh like uh in in redux you can also do that we'll uh not dive into this during this session but um i'll give you the pointers uh to what to uh check in the demo uh also since we have components we want to have a life cycle we are used to using uh this approach so svelte has several a bit less than uh than other frameworks but just enough to make the job right uh you can start loading on mount you can clean stuff on on destroy and you have also the tick callback which is again if you're from view community you know what it is right like after the next uh dome uh re-render you can you can trigger something so that's a cold uh component life cycle that is present in the svelte syntax you can make use of it uh next block the uh more advanced uh about uh stores and routing of course uh when your app starts growing you know this becomes a nightmare to manage data uh just uh inside of each component or move it to a global level so we uh frontend community was inventive enough to to come up with uh yeah several great projects uh which i'm a happy user of some of them but we all know that it brings again uh extra complexity in terms of you need to learn how it works then you need to learn how how to do it properly and then uh and then the new version comes out with a new way of working and and it's always like a constant uh race of uh uh are we actually writing uh business logic and implementing features or we are re-architecting re-architecting our state management system so svelte in this sense uh comes with the batteries included and it has so-called stores it's a very simple concept uh and it goes it is shipped together with swelt uh by default again since felt is a compiler it will throw away a needed a library code if you are not using them but if you already uh grew uh your component code base to several pages and you want to have some uh centralized store measurement you you can do it so svelte has three types of stores like readable writable and derived basically uh readable is something that you just cannot change and you just uh overseeing uh whether it's changing and may react on it writeable is a full-blown read and write solution and if you want something more advanced you can go for derived this is an example of simple readable store that what it does it just takes some counter and uh updates its value together with this counter you can think of it as a uh it can follow not only the the set time set interval but some other uh more let's say useful uh property of your window like if your app goes offline mode or if registration time is already gone or if if the let's say user entered some data and then you checking it inside of this readable store and and then throw a flag that [Music] app should somehow react on it so it's it's a example of a self-contained store value that cannot be changed from outside but can be read and the writable stores as i said it's a full-blown solution where you uh it can remind you something like a set state hook where you initialize it with uh with a default value and then in other components you can subscribe to changes in the in this uh in this store or you can change it manually uh again you can either change it uh without looking at the previous value or you can pass it a callback and change it with uh with uh based on the previous wave what is uh so this is pretty straightforward uh uh and it does not imply any extra um um way to architect your your your state management however you can always apply the typical patterns of uh spreading the the work with data across several services that only focus on specific uh uh insta specific uh data types in your app that's that's all possible uh inside of the components you can not only change the values of this store but you can also consume it with a nice shortcut again using a dollar sign here so you don't need to do something like subscribe and then change the value of some property of the component and then only show this property you can just tell it like this with a with a dollar sign and then swell automatically will be showing the the store failure um next one the router uh what the uh svelte is a growing project uh you can imagine there is a uh dozens of uh um developers who try their efforts to to build the best solution for something and with router it was particularly interesting there were several uh solutions with with good uh with uh good features and maybe some some items lacking so it's it's hard to advise for one uh there is no official router or something like this my personal choice is a swelt spa router which uh basically just uh installs it as an npm package and you can configure your routes in a in an object manner like this and uh it also comes with a typical components like a uh like a link that you can that you can employ so this one works quite fine for the size of projects i've been doing and it also uh yeah uses hash based navigation might have some issues with the ssr rendering but that's uh outside of the basics called let's say uh other than that swelt has uh more stuff we we will not be able to to take a look at it for example animation built in or um so-called uh actions which are kind of like angular directives but just to give you a quick overview of useful tools uh there is also debug directive which can basically stop the execution when when the value is changed very helpful for daily uh routine development this is the way to make your styles global with a with a special syntax of dot global and then putting a selector again uh look at this css which you normally would not write and which you would not want to have in your uh production build however uh thanks to the compiler approach uh svelte can take this uh process and and throw uh uh back uh that properly prefixed css so that's not possible in non-compiler setup and some more fun stuff since wealth is a compile based approach uh you you kind of in the run time uh you may not have access to certain uh elements of the page so here uh you can see a special um uh directives that swelt provides if you want uh in the run time when the app is already running after the build to kind of hook into the what's happening on the page so for that you can use special threat window tag which will add this kind of callback or will read certain property on on the window when the app is already run so there are ways to kind of um save some some stuff that needs to be only run time and pass it further through the compiler pipeline the same goes for the head block which you can also employ for the same reason uh something that is injected into the final page so that there is more than that it's just just an example of a typical task that you may encounter and svelte has an answer for this uh so uh that's uh a quick for the uh for the for this felt overview uh how we're doing on the questions uh or do we have time for the demo we still have 10 minutes including including time for q a so if you think you can handle it that's perfect yeah uh maybe i could quickly uh show the uh the online code sandbox that felt provides uh that's uh indeed a really nice toolbox to start exploring so the website is swell.dev and here you have the repel that's where the the magic happens basically here you can start writing code in in a swell manner for example that and it will automatically uh compile uh the the result what is interesting here you can also see the actual javascript output what what swelt will generate so and as you can see uh for this simple app you don't want uh uh you you're not expecting too much uh uh code and actually you can see it's pretty pretty small amount just uh uh besides uh some uh just declaration of elements and then uh variables that will be changing and and some in need function so normally this this overhead for smaller apps that's something that felt is really good at you can also experiment with some extra features here like um supporting legacy solutions or you know how it will look in the dev mode so uh be sure to check this out besides that uh of course you as in any uh toolbox you can save the code samples or also the examples section is really cool basically shows all the swell features uh one by one in a nice overview like for example here we have a mouse uh position uh uh display just uh done by uh in in like five lines of javascript if we if we have a look at it what we're doing we again declaring a property in this case it's not a plane property but an object and then we use the uh on property on on a tag to subscribe to a mouse move event and here we could do again declare a callback that will be doing this changes right we could move this code into there or if it's a simple one we could just uh do it in line as you can see here so this is uh uh be sure to check the demos there's a lot of them also shows animation and all the uh callback um all the all the uh properties that svelte has in its uh in its sleeve um but uh given the time i would just jump to the um summary uh so what i would say uh if swelt is the right right choice for your tool it really depends on your uh project and your uh uh ability or wheel to uh make sure and make sure everything works as it should in terms of different uh browser support and maybe some corner cases of course with the current growth of community a lot of things were improved and bugs are fixed regularly however it's uh nowhere near the consumption of of a bigger frameworks uh uh like react of view so uh that's something you need to uh double check before uh however the the ecosystem and community size is steadily growing and for most of the developer cases there's there is a solution or a library that should help you to handle it and again i as i showed earlier in the beginning there are a set of dev tools uh and tip libraries that solve typical problems like routing or component library so that's all present and i would definitely recommend to play with it in your pet project first and then maybe try to sell it to the team because i seen several enterprise level projects who used swelt or played with it for small elements for example a login form or uh some widget that that needs to be loading as fast as possible that does not have a too complex code base and which is kind of standalone you know maybe some graphics widget with some diagrams maybe some separate uh elements that needs to be just integrated as a separate project so that's uh actually was also a motivation of uh reach when he was building it he needed some reusable toolkit to uh build the uh for the for the built-in um infographic widgets on on pages of a popular website so uh bringing the whole jquery or or angular or react was not not a right uh tool for for this situation so that's how he came up with this uh uh approach uh also uh important part about the the audience again uh if you want to just broaden your um scope and see how the same tasks can be performed differently probably uh with with a less coding involved then uh you definitely check this out but the second big audience and i think it's much bigger than actually the uh the developer the front-end developers audience is our colleagues from other uh industries maybe uh officer who wants to build some dashboard or the data analyst who needs some nice input form to to actually collect some data and then display it those guys and girls they they know what what a variable is and what is the uh iteration but learning all the all the front-end stuff i think it's it's really uh becomes quite an overhead so uh if if you have people asking what what i should try to play with uh point them to svelte they will uh thank you later i'm pretty sure and and again it can be a nice transition bridge between uh just uh let's say html css coding to more uh javascript and dynamic uh front-end development so it sells felt has enormous potential in conquering the the front-end ecosystem so uh be sure to check this one out a couple of words about the resources there is a big event that happens uh i think uh once in a while last one was just uh several months ago called swell summit and uh it has bunch of talks about the what's happening in the ecosystem uh the toolboxes toolbox uh ambitious projects and stuff like this also announcements about where actually the ecosystem is steering and the core community is present there so be sure to check the cell summit if you want to know more so that's uh most of my slides i have some more links but i'll be happy to answer your questions thank you thank you it was very interesting mikhail we have a couple of questions but i think since we have only two minutes left i will ask you once and i invite you to join the slack discussion if you go to our website you have a button on the old page to join the slack the generation slack and if you go to monday group which is the this track you can try the discussion so one of the questions maybe the this one is easier what about testing is there a good player for swelt yes yes a very good question actually uh i think one of the first talks on the meetup we were doing here at amsterdam was uh by uh uh a guy who uh showed how to uh connect a test framework the testing library sorry whether the one that uh was uh relatively recently introduced with swell so you can you can do a simple module testing or uh unit testing and also uh trigger some ui functions so that there are solutions to to test yourself components indeed okay the other one i thought yeah i don't think we have time for it but it will be about to elaborate a bit on composibility and components reuse within this belt but this one i'm guessing it will take longer to answer so please join the slack channel and join the discussion there if you yeah yeah doing it now and yeah we'll be happy to share the links on the slides and the uh uh relevant information there yeah thanks uh thanks for having me samuel thank you very much for being with us see you next time see you have a good conference bye thank you

Channel: JNation

Views: 152

Keywords: jnation, javascript, svelte

Id: wPgZTt3hsa4

Length: 47min 46sec (2866 seconds)

Published: Wed Aug 25 2021