First, we learn some basic concepts in Svelte 3 and how to build reactive UI components with JavaScript. Then we build a fullstack realtime todo list with RxFire and Svelte. https://fireship.io/lessons/svelte-v3-overview-firebase/

- Svelte https://svelte.dev/
- Rich Harris - Rethinking reactivity https://youtu.be/AdNJ3fydeao
- RxFire https://www.npmjs.com/package/rxfire

#svelte #javascript
2024-02-04T06:48:20.314Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
fff92fc9-5dd4-4fbb-ac88-9f242d09bca8
1ef4027556c127a1ecf2d0543abe3bc221a0bf321294238483507cb75bafd776
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Just when I discovered the meaning of life, they changed.
One of my favorite things about JavaScript is that the status quo never seems to last very long.
React, Angular, and Vue have dominated the mindshare of developers over the last few years.
Svelte has been around for a while, but they just released version 3 last week and my initial experience with it has been very positive and that's mostly because it empowers you to solve problems with less code.
In the first half of this video, we'll cover the basic concepts in Svelte and in the process this.
You'll see why it's such an awesome tool.
In the second half of the video, we'll build a real time to do list with Svelte and Firebase from scratch.
If you're new here, like and subscribe and you can find the full source code on Fireship IO.
Now, before you jump into Svelte, I'd recommend watching this talk from its creator, Rich Harris.
That's what really got me excited to start learning Svelte 3.
Let's go ahead and just jump right into things.
Will run npx dig it and then point to the Svelte JS template.
This is the equivalent to create react app or ng new.
Go ahead and open it up in Versus Code and run npm install.
Then you can run npm dev to serve it locally.
And that should give you this hello world on local host 5000.
The first thing you'll see is the rollupconfig.js.
This is what bundles your code and it's an turnative to webpack.
Personally, I prefer to use Rollup, but you can also use webpack here if you want.
And while we're talking about bundling, there's 2 things you should know and that's that Svelte supports server side rendering as well as native web components or custom elements.
So that's cool, but so far this might just look like another JavaScript a framework, but if we go into the package.
Json, we can see that something's different here.
What's missing is dependencies.
We only have development dependencies and that's because Svelte is a compiler.
There.
It generates all of your code at build time, which means it doesn't need to include the framework itself as a hard dependency in your JavaScript bundle.
Another framework that also does this is StencilJS and I feel like this approach makes a lot more sense than the current status quo.
And that's because you only need to compile the JavaScript from the framework that you actually need so you don't have any extra bloat in your JavaScript bundle.
What I'm doing right now is just exporting our entire app as a string, and then if we go to the bundled output, you can see that it's just a function that returns a string.
So in theory, this should result in smaller bundle sizes or at least bundles that are optimized for the code that you actually use if you're using tree shakeable libraries.
That's what makes Svelte fundamentally different than the status quo, but we've only just hit the tip of the iceberg here.
It's also unique in the way that it handles reactivity.
If we go into the app component, we'll see a script up here at top.
That's where we keep our main JavaScript logic.
And then we have a style tag.
All the styles will be scoped to this component.
And another cool thing about the compiler is that it will automatically eliminate all of your unused CSS styles from the CSS bundle.
And then after that, we have our markup, and Svelte has its own templating syntax for adding logic to your HTML.
This is a similar approach to Angular and Vue but differs from React which uses JSX.
Now, the difference with JSX is that you're taking your HTML and putting it inside of JavaScript and letting the JavaScript handle the logic.
This can be a very divisive topic and it's really just a matter of opinion, but I just find I'm more productive by putting the logic in the HTML like we do with Angular, Vue, and Svelte.
Now if we go up into the script, you'll notice I have export let name.
Using the export keyword in front of a variable means that it can be passed down from a parent component.
If we leave the export keyword off, it basically means we have a private variable that can only be used inside of this component.
Now, the cool thing about Svelte is that it's reactive based on the assignment of a variable.
We'll create a variable here for a random number and then create a function that can reassign that variable.
So now that we have this function, we need to bind it to an event in the DOM.
You can bind to events by doing on colon click or on colon whatever DOM event you want to bind to.
This is very similar to all other frameworks.
We pass in the function and it's going to call that function with the event passed as the argument.
So that's going to change the random number and then we can show it in the template by wrapping it in braces.
Now we have an app that reacts to this randomized button.
Whenever we click it, we get a new random number.
But what happens if we need to compute a different value from this random number?
Let's say if it rounds to 1, it'll be a winner.
If it rounds to 0, it'll be a loser.
The simple solution is just to write that expression directly in the template, and Svelte will rerun this logic every time the reactive value changes.
But this isn't going to scale very well because we can't reuse this logic.
If we want to show that same value somewhere else in the template.
We'd have to duplicate that code.
Fortunately, Svelte has a very cool trick up its sleeve for computed values.
We'll define a new variable, but instead of using let, to will use this dollar sign colon syntax.
Believe it or not, this is valid vanilla JavaScript and it's basically just a way to tell Svelte to recalculate this value when the app reacts.
Now we can go back into our template and simply reuse the result computed value as many times as we want.
Now speaking of reactivity, another thing we can do is bind to the attributes on DOM elements.
For example, if we want to bind to the value attribute on a form input, we can do that with this bind directive and then use our random variable.
Old.
If we start typing in the form, you'll see how the value itself is recomputed every time we type a new value.
Now currently, our computed result is a string, but but let's go ahead and change that to a number and then we'll show an entirely different template based on some conditional logic.
The new computed value will give us a number between 1 and 100, and we can show a template conditionally by using this if syntax.
And we can also throw an else if if we have multiple conditions and then else for the default value.
And then we'll just add some DOM elements in between these conditions and that will recompute the template every time our random number changes.
So that's pretty standard stuff but bad.
Now I wanna show you something that you're not going to find in other frameworks.
Let's go ahead and import fade and fly from svelte transition.
These are directives that will allow you to automatically compute CSS animations based on the logic in your template.
So if you want something to fade in and fade out when added or moved to the DOM.
You can just add this transition fade directive and everything will just happen automatically.
But let's say we want our poop emojis to fly in from the right and then fly out to the left.
Left.
Normally, this would take some careful thought about your CSS animations or you might use a JavaScript animation library.
But in Svelte, we can use the directives to keep the animation logic tied directly to the DOM element that's being animated, and then we can add our own properties to it to customize the way it behaves.
And that gives us poop flying all over the screen, which is the effect we're going warped, and there's even a directive specifically for SVG graphics that will draw the path along the shape.
So that's really awesome stuff, but there's still a couple of other fundamental things that I wanna show you before we the full demo.
Earlier, I mentioned that Svelte is reactive based on assignment.
So if we have an array and then we push new items to the array, we won't get any actual changes in the DOM.
That's because we're just mutating the array and we're not actually reassigning the variable.
So if you want the app to react to changes to an array or to an object, it's generally a good idea to use the spread syntax.
This code here will do the same thing as array push, but it will also reassign the variable causing the app to react and update the DOM.
Now when working at the rays, you'll probably want to loop over them and to lay some DOM elements for each item.
We can do that by using each, which will give us access to both the value and the index of each item in the array.
When we build out our full demo, you'll also see that each loops work with asynchronous values similar to the async pipe in Angular.
And speaking of asynchronous values, Svelte has a really cool way of handling promises.
I have a helper function here that just creates a delay, and then I'm defining our random value as a promise that resolves to a random number after that delay.
When working with promises, there's generally 3 things that happen.
First, you're in some kind of loading state waiting for the promise to resolve, then you get a value or maybe you get an error and need to show some kind of error message.
In Svelte, you can await a promise directly in the template, and this will also handle things like race conditions for you automatically.
The first section is where you would put your loading spinner while the promise is being resolved, then you show the actual result or you catch the error and show an error message.
And that provides a very readable and intuitive way to handle promises in my opinion.
It's actually very similar to a future builder in Flutter if there's any Flutter developers watching at this point.
Now we're going to switch gears into Svelte stores which behave very similar to RxJS Observables.
And they can be shared anywhere in the component tree so you have a very easy mechanism for sharing data anywhere in your app.
Let's go ahead and create a writable store and it's very similar to a behavior subject in RxJS, at least in terms of its API.
First, we can pass it a default value and then we can set the value directly by calling set or we can call update to get access to the current value and then compute a new value in the stream, which which we can do with this callback function, which gives us the current value, then we return the next value.
And if we just want to listen to the value, we just subscribe to it.
But if you've worked with observables, then you know that you need to manage your subscriptions carefully.
Otherwise, you could end up with memory leaks.
If we go back into our component, the first thing that we'll do is import the random store that we just created.
We could subscribe to that directly in the JavaScript, but then we would have to dispose of it once this component is destroyed.
That leads to a lot of boilerplate and also a lot of potential for error.
But notice how I have this dollar sign in front of the store value itself.
This will tell the compiler to automatically subscribe to the value and also manage the subscription automatically.
And now we can push new values to the stream from any component anywhere in the app.
That will solve a lot of your complex data sharing situations, but you can also just pass props directly between a parent and child component.
I went ahead and created a new component called tiled and it's just a dumb component that displays some properties.
Now we'll go back up to our app component and pass some properties down to this child.
Let's imagine we have this data object here that we pulled from a database or something.
Now we can go and declare our child component and just pass in each property 1 by 1.
But even after just 3 simple properties, it's starting to become kind of hard to read.
But Svelte has yet another little piece of magic that will make this code much nicer.
There.
You can simply send all of your props down to the child using the spread syntax.
So now that you know some of the basic concepts in Svelte, I want to put everything together into a full working demo.
In in just a few minutes, we'll be able to build this real time to do list that also includes user authentication and even some animation.
Once a user is logged in, they'll be able to fill out this form with some information about the to do that'll be saved to Firestore and they can toggle it complete or incomplete or delete it.
And, of course, everything will stay synced up with the back end database.
We'll be using RX Fire for this demo, which you can install with the following command.
The first thing we'll do is create a file called firebasejs just used to initialize Firebase, and you'll need to use the credentials from your own Firebase project.
We'll be going through this code very quickly, so make sure to follow along with the source code on Fireship IO.
But, basically, the purpose of this file is just to initialize the app and then export auth and the Firestore database so we can use them in other files.
From there, we'll go into the app component and we just have a few small changes to make here.
We'll import this login component which we'll create next.
And with Svelte, you'll notice that there's no index HTML that you can mess with.
So instead, what you can do is use this Svelte colon head tag to add additional things to the head of the document.
In this demo, I'm using the Bulma CSS framework just so we have some better base styles to work with.
After that, we'll build our auth feature so the user has a way to log in.
I'm creating a profile component, which will just be a dumb presentational component to show the user's display name, photo URL, and user ID.
And another cool side note here is that felt will automatically warn you for accessibility issues.
For example, if we leave out the alt attribute, it's going to warn us to add 1.
You can also do this in ESLint but it's nice to just have this stuff working right out of the gate.
After that, we can create the login component which is the smart component that does the actual interaction with Firebase.
Now the interesting thing about Svelte is that the shape of the stores are similar to the shape of RxJS observables.
So that means we can use some of that syntactic sugar on RxJS observables in addition to Svelte stores.
Currently, I'm grabbing the auth state observable from RX fire and just subscribing to it manually, but we'll refactor this in a minute.
And I'll also define a function here to trigger the pop up that will allow the user to log in with Google, and that will cause the value of the auth state observable to change.
Now we can go down to the template and create an if else statement.
And if we have a user logged in, we'll go ahead and display that user profile component and, of course, use that spread syntax to pass the props down.
And if the user is not logged in, we'll just show a button that can trigger that login function.
At this point, we have a fully working auth system, but we can actually refactor this a little bit to use some of Svelte's built in syntactic sugar.
This time, we'll define the user as the observable itself and then we'll just go ahead and use that dollar sign syntax to unwrap the observable directly in the template.
Late.
That'll work inside the if condition and also works inside the spread syntax.
And now we have a login component that will manage our subscription automatically with almost no boilerplate.
Now it's time to move on to the to do list.
Each of the individual to do items will be represented by this dumb component called to do item.
But instead of just displaying data, it's also going to emit custom events up to the parent component.
So this is a way to pass data from a child component back up to the parent.
And in this case, we're doing that so we can tell the parent component when to remove the item from the database or when to update the status in the database.
Svelte has a thing called an event batcher, which will create a custom event in the DOM for you.
In this case, when we want to remove an item, we'll dispatch an event called remove with that item's ID in the database.
And then we'll do a similar thing to toggle the status of a to do item, but this time we'll pass the ID as well as the new status that the item should change to.
Now I'm defining a CSS class that will show when an item is complete.
And I'm going to make sure that that class name is the same of the property that toggles that class, which is the boolean value of complete on this component.
And we might as well just add a transition to this item when it's created so it kind of slides in from the right, and we can easily do that by simply using Svelte's transition directive.
From there, we can go ahead and add the text inside the list item and when it's complete, we want to show that CSS class.
Svelte has a built in class directive which we can use like this by pointing it to the complete property.
But if the CSS class and the property both share the same name, which they do in this case, we can actually make this even more concise like so.
Now the last thing we'll do in this component is create our buttons that will dispatch the custom events.
We have 3 different buttons here.
2 of those are used to toggle status and the other one is used to remove the item.
And now we're ready to move on to the final component of this app which is the to dos list.
I'm not going to talk too much about the Firebase code.
Basically, we're just making a reference to the collection in the database and then making a query for all of the to do items that are seeded with the logged in user's user ID.
Then we're going to use the collection data function from RX fire, which takes that query and converts it to an observable of the document data.
But in order to work with an each loop in Svelte, we'll also want to pipe in start with and that will guarantee that the observable always has a synchronous array to start good.
From there, we'll define the update status method which will take the custom event that's being emitted by the child component and use it to make an update to the Firestore database.
And then we'll do the same basic thing to handle the remove event.
Now if we go down to the template, we'll set up an each loop and notice that I put a dollar sign in front of the to dos observable.
This will unwrap the observable automatically, manage the subscription, and then react to any new changes whether they happen client side or on the server.
Then we can pass our props down to the to do item component and then we can also listen to the custom events that we define on that component as well.
So instead of just doing a simple on click event here we're doing on remove and on toggle.
Again, those are custom events defined in the child component.
And then the very last thing we'll do is set up a form input using the bind value directive and then set up a button that will add that item to the database when clicked.
And that's all there is to it.
We now have a reactive real time to do app.
Overall, I've been super impressed with Svelte.
The only thing that I think is missing at this point is TypeScript support.
But from what I understand, there should be TypeScript support in the near future.
I think what impresses me the most about Svelte is that the abstractions are really well thought out, but but they don't take you too far away from vanilla JavaScript or native DOM APIs.
I'm gonna go ahead and wrap things up there.
Let me know what you think about Svelte in the comments.
Thanks for watching and I will talk to you soon.

Speaker 0: Just when I discovered the meaning of life, they changed. One of my favorite things about JavaScript is that the status quo never seems to last very long. React, Angular, and Vue have dominated the mindshare of developers over the last few years. Svelte has been around for a while, but they just released version 3 last week and my initial experience with it has been very positive and that's mostly because it empowers you to solve problems with less code. In the first half of this video, we'll cover the basic concepts in Svelte and in the process this.

You'll see why it's such an awesome tool. In the second half of the video, we'll build a real time to do list with Svelte and Firebase from scratch. If you're new here, like and subscribe and you can find the full source code on Fireship IO. Now, before you jump into Svelte, I'd recommend watching this talk from its creator, Rich Harris. That's what really got me excited to start learning Svelte 3.

Let's go ahead and just jump right into things. Will run npx dig it and then point to the Svelte JS template. This is the equivalent to create react app or ng new. Go ahead and open it up in Versus Code and run npm install. Then you can run npm dev to serve it locally.

And that should give you this hello world on local host 5000. The first thing you'll see is the rollupconfig.js. This is what bundles your code and it's an turnative to webpack. Personally, I prefer to use Rollup, but you can also use webpack here if you want. And while we're talking about bundling, there's 2 things you should know and that's that Svelte supports server side rendering as well as native web components or custom elements.

So that's cool, but so far this might just look like another JavaScript a framework, but if we go into the package. Json, we can see that something's different here. What's missing is dependencies. We only have development dependencies and that's because Svelte is a compiler. There.

It generates all of your code at build time, which means it doesn't need to include the framework itself as a hard dependency in your JavaScript bundle. Another framework that also does this is StencilJS and I feel like this approach makes a lot more sense than the current status quo. And that's because you only need to compile the JavaScript from the framework that you actually need so you don't have any extra bloat in your JavaScript bundle. What I'm doing right now is just exporting our entire app as a string, and then if we go to the bundled output, you can see that it's just a function that returns a string. So in theory, this should result in smaller bundle sizes or at least bundles that are optimized for the code that you actually use if you're using tree shakeable libraries.

That's what makes Svelte fundamentally different than the status quo, but we've only just hit the tip of the iceberg here. It's also unique in the way that it handles reactivity. If we go into the app component, we'll see a script up here at top. That's where we keep our main JavaScript logic. And then we have a style tag.

All the styles will be scoped to this component. And another cool thing about the compiler is that it will automatically eliminate all of your unused CSS styles from the CSS bundle. And then after that, we have our markup, and Svelte has its own templating syntax for adding logic to your HTML. This is a similar approach to Angular and Vue but differs from React which uses JSX. Now, the difference with JSX is that you're taking your HTML and putting it inside of JavaScript and letting the JavaScript handle the logic.

This can be a very divisive topic and it's really just a matter of opinion, but I just find I'm more productive by putting the logic in the HTML like we do with Angular, Vue, and Svelte. Now if we go up into the script, you'll notice I have export let name. Using the export keyword in front of a variable means that it can be passed down from a parent component. If we leave the export keyword off, it basically means we have a private variable that can only be used inside of this component. Now, the cool thing about Svelte is that it's reactive based on the assignment of a variable.

We'll create a variable here for a random number and then create a function that can reassign that variable. So now that we have this function, we need to bind it to an event in the DOM. You can bind to events by doing on colon click or on colon whatever DOM event you want to bind to. This is very similar to all other frameworks. We pass in the function and it's going to call that function with the event passed as the argument.

So that's going to change the random number and then we can show it in the template by wrapping it in braces. Now we have an app that reacts to this randomized button. Whenever we click it, we get a new random number. But what happens if we need to compute a different value from this random number? Let's say if it rounds to 1, it'll be a winner.

If it rounds to 0, it'll be a loser. The simple solution is just to write that expression directly in the template, and Svelte will rerun this logic every time the reactive value changes. But this isn't going to scale very well because we can't reuse this logic. If we want to show that same value somewhere else in the template. We'd have to duplicate that code.

Fortunately, Svelte has a very cool trick up its sleeve for computed values. We'll define a new variable, but instead of using let, to will use this dollar sign colon syntax. Believe it or not, this is valid vanilla JavaScript and it's basically just a way to tell Svelte to recalculate this value when the app reacts. Now we can go back into our template and simply reuse the result computed value as many times as we want. Now speaking of reactivity, another thing we can do is bind to the attributes on DOM elements.

For example, if we want to bind to the value attribute on a form input, we can do that with this bind directive and then use our random variable. Old. If we start typing in the form, you'll see how the value itself is recomputed every time we type a new value. Now currently, our computed result is a string, but but let's go ahead and change that to a number and then we'll show an entirely different template based on some conditional logic. The new computed value will give us a number between 1 and 100, and we can show a template conditionally by using this if syntax.

And we can also throw an else if if we have multiple conditions and then else for the default value. And then we'll just add some DOM elements in between these conditions and that will recompute the template every time our random number changes. So that's pretty standard stuff but bad. Now I wanna show you something that you're not going to find in other frameworks. Let's go ahead and import fade and fly from svelte transition.

These are directives that will allow you to automatically compute CSS animations based on the logic in your template. So if you want something to fade in and fade out when added or moved to the DOM. You can just add this transition fade directive and everything will just happen automatically. But let's say we want our poop emojis to fly in from the right and then fly out to the left. Left.

Normally, this would take some careful thought about your CSS animations or you might use a JavaScript animation library. But in Svelte, we can use the directives to keep the animation logic tied directly to the DOM element that's being animated, and then we can add our own properties to it to customize the way it behaves. And that gives us poop flying all over the screen, which is the effect we're going warped, and there's even a directive specifically for SVG graphics that will draw the path along the shape. So that's really awesome stuff, but there's still a couple of other fundamental things that I wanna show you before we the full demo. Earlier, I mentioned that Svelte is reactive based on assignment.

So if we have an array and then we push new items to the array, we won't get any actual changes in the DOM. That's because we're just mutating the array and we're not actually reassigning the variable. So if you want the app to react to changes to an array or to an object, it's generally a good idea to use the spread syntax. This code here will do the same thing as array push, but it will also reassign the variable causing the app to react and update the DOM. Now when working at the rays, you'll probably want to loop over them and to lay some DOM elements for each item.

We can do that by using each, which will give us access to both the value and the index of each item in the array. When we build out our full demo, you'll also see that each loops work with asynchronous values similar to the async pipe in Angular. And speaking of asynchronous values, Svelte has a really cool way of handling promises. I have a helper function here that just creates a delay, and then I'm defining our random value as a promise that resolves to a random number after that delay. When working with promises, there's generally 3 things that happen.

First, you're in some kind of loading state waiting for the promise to resolve, then you get a value or maybe you get an error and need to show some kind of error message. In Svelte, you can await a promise directly in the template, and this will also handle things like race conditions for you automatically. The first section is where you would put your loading spinner while the promise is being resolved, then you show the actual result or you catch the error and show an error message. And that provides a very readable and intuitive way to handle promises in my opinion. It's actually very similar to a future builder in Flutter if there's any Flutter developers watching at this point.

Now we're going to switch gears into Svelte stores which behave very similar to RxJS Observables. And they can be shared anywhere in the component tree so you have a very easy mechanism for sharing data anywhere in your app. Let's go ahead and create a writable store and it's very similar to a behavior subject in RxJS, at least in terms of its API. First, we can pass it a default value and then we can set the value directly by calling set or we can call update to get access to the current value and then compute a new value in the stream, which which we can do with this callback function, which gives us the current value, then we return the next value. And if we just want to listen to the value, we just subscribe to it.

But if you've worked with observables, then you know that you need to manage your subscriptions carefully. Otherwise, you could end up with memory leaks. If we go back into our component, the first thing that we'll do is import the random store that we just created. We could subscribe to that directly in the JavaScript, but then we would have to dispose of it once this component is destroyed. That leads to a lot of boilerplate and also a lot of potential for error.

But notice how I have this dollar sign in front of the store value itself. This will tell the compiler to automatically subscribe to the value and also manage the subscription automatically. And now we can push new values to the stream from any component anywhere in the app. That will solve a lot of your complex data sharing situations, but you can also just pass props directly between a parent and child component. I went ahead and created a new component called tiled and it's just a dumb component that displays some properties.

Now we'll go back up to our app component and pass some properties down to this child. Let's imagine we have this data object here that we pulled from a database or something. Now we can go and declare our child component and just pass in each property 1 by 1. But even after just 3 simple properties, it's starting to become kind of hard to read. But Svelte has yet another little piece of magic that will make this code much nicer.

There. You can simply send all of your props down to the child using the spread syntax. So now that you know some of the basic concepts in Svelte, I want to put everything together into a full working demo. In in just a few minutes, we'll be able to build this real time to do list that also includes user authentication and even some animation. Once a user is logged in, they'll be able to fill out this form with some information about the to do that'll be saved to Firestore and they can toggle it complete or incomplete or delete it.

And, of course, everything will stay synced up with the back end database. We'll be using RX Fire for this demo, which you can install with the following command. The first thing we'll do is create a file called firebasejs just used to initialize Firebase, and you'll need to use the credentials from your own Firebase project. We'll be going through this code very quickly, so make sure to follow along with the source code on Fireship IO. But, basically, the purpose of this file is just to initialize the app and then export auth and the Firestore database so we can use them in other files.

From there, we'll go into the app component and we just have a few small changes to make here. We'll import this login component which we'll create next. And with Svelte, you'll notice that there's no index HTML that you can mess with. So instead, what you can do is use this Svelte colon head tag to add additional things to the head of the document. In this demo, I'm using the Bulma CSS framework just so we have some better base styles to work with.

After that, we'll build our auth feature so the user has a way to log in. I'm creating a profile component, which will just be a dumb presentational component to show the user's display name, photo URL, and user ID. And another cool side note here is that felt will automatically warn you for accessibility issues. For example, if we leave out the alt attribute, it's going to warn us to add 1. You can also do this in ESLint but it's nice to just have this stuff working right out of the gate.

After that, we can create the login component which is the smart component that does the actual interaction with Firebase. Now the interesting thing about Svelte is that the shape of the stores are similar to the shape of RxJS observables. So that means we can use some of that syntactic sugar on RxJS observables in addition to Svelte stores. Currently, I'm grabbing the auth state observable from RX fire and just subscribing to it manually, but we'll refactor this in a minute. And I'll also define a function here to trigger the pop up that will allow the user to log in with Google, and that will cause the value of the auth state observable to change.

Now we can go down to the template and create an if else statement. And if we have a user logged in, we'll go ahead and display that user profile component and, of course, use that spread syntax to pass the props down. And if the user is not logged in, we'll just show a button that can trigger that login function. At this point, we have a fully working auth system, but we can actually refactor this a little bit to use some of Svelte's built in syntactic sugar. This time, we'll define the user as the observable itself and then we'll just go ahead and use that dollar sign syntax to unwrap the observable directly in the template.

Late. That'll work inside the if condition and also works inside the spread syntax. And now we have a login component that will manage our subscription automatically with almost no boilerplate. Now it's time to move on to the to do list. Each of the individual to do items will be represented by this dumb component called to do item.

But instead of just displaying data, it's also going to emit custom events up to the parent component. So this is a way to pass data from a child component back up to the parent. And in this case, we're doing that so we can tell the parent component when to remove the item from the database or when to update the status in the database. Svelte has a thing called an event batcher, which will create a custom event in the DOM for you. In this case, when we want to remove an item, we'll dispatch an event called remove with that item's ID in the database.

And then we'll do a similar thing to toggle the status of a to do item, but this time we'll pass the ID as well as the new status that the item should change to. Now I'm defining a CSS class that will show when an item is complete. And I'm going to make sure that that class name is the same of the property that toggles that class, which is the boolean value of complete on this component. And we might as well just add a transition to this item when it's created so it kind of slides in from the right, and we can easily do that by simply using Svelte's transition directive. From there, we can go ahead and add the text inside the list item and when it's complete, we want to show that CSS class.

Svelte has a built in class directive which we can use like this by pointing it to the complete property. But if the CSS class and the property both share the same name, which they do in this case, we can actually make this even more concise like so. Now the last thing we'll do in this component is create our buttons that will dispatch the custom events. We have 3 different buttons here. 2 of those are used to toggle status and the other one is used to remove the item.

And now we're ready to move on to the final component of this app which is the to dos list. I'm not going to talk too much about the Firebase code. Basically, we're just making a reference to the collection in the database and then making a query for all of the to do items that are seeded with the logged in user's user ID. Then we're going to use the collection data function from RX fire, which takes that query and converts it to an observable of the document data. But in order to work with an each loop in Svelte, we'll also want to pipe in start with and that will guarantee that the observable always has a synchronous array to start good.

From there, we'll define the update status method which will take the custom event that's being emitted by the child component and use it to make an update to the Firestore database. And then we'll do the same basic thing to handle the remove event. Now if we go down to the template, we'll set up an each loop and notice that I put a dollar sign in front of the to dos observable. This will unwrap the observable automatically, manage the subscription, and then react to any new changes whether they happen client side or on the server. Then we can pass our props down to the to do item component and then we can also listen to the custom events that we define on that component as well.

So instead of just doing a simple on click event here we're doing on remove and on toggle. Again, those are custom events defined in the child component. And then the very last thing we'll do is set up a form input using the bind value directive and then set up a button that will add that item to the database when clicked. And that's all there is to it. We now have a reactive real time to do app.

Overall, I've been super impressed with Svelte. The only thing that I think is missing at this point is TypeScript support. But from what I understand, there should be TypeScript support in the near future. I think what impresses me the most about Svelte is that the abstractions are really well thought out, but but they don't take you too far away from vanilla JavaScript or native DOM APIs. I'm gonna go ahead and wrap things up there.

Let me know what you think about Svelte in the comments. Thanks for watching and I will talk to you soon.
Just when I discovered the meaning of life, they changed. One of my favorite things about JavaScript is that the status quo never seems to last very long.
React, Angular, and Vue have dominated the mindshare of developers over the last few years. Svelte has been around for a while, but they just released version 3 last week and my initial experience with it has been very positive and that's mostly because it empowers you to solve problems with less code.
software development
In the first half of this video, we'll cover the basic concepts in Svelte and in the process this. You'll see why it's such an awesome tool. In the second half of the video, we'll build a real time to do list with Svelte and Firebase from scratch. If you're new here, like and subscribe and you can find the full source code on Fireship IO. Now, before you jump into Svelte, I'd recommend watching this talk from its creator, Rich Harris. That's what really got me excited to start learning Svelte 3. Let's go ahead and just jump right into things. Will run npx dig it and then point to the Svelte JS template. This is the equivalent to create react app or ng new. Go ahead and open it up in Versus Code and run npm install. Then you can run npm dev to serve it locally. And that should give you this hello world on local host 5000. The first thing you'll see is the rollupconfig.js. This is what bundles your code and it's an turnative to webpack. Personally, I prefer to use Rollup, but you can also use webpack here if you want. And while we're talking about bundling, there's 2 things you should know and that's that Svelte supports server side rendering as well as native web components or custom elements. So that's cool, but so far this might just look like another JavaScript a framework, but if we go into the package. Json, we can see that something's different here. What's missing is dependencies. We only have development dependencies and that's because Svelte is a compiler. There. It generates all of your code at build time, which means it doesn't need to include the framework itself as a hard dependency in your JavaScript bundle. Another framework that also does this is StencilJS and I feel like this approach makes a lot more sense than the current status quo. And that's because you only need to compile the JavaScript from the framework that you actually need so you don't have any extra bloat in your JavaScript bundle.
What I'm doing right now is just exporting our entire app as a string, and then if we go to the bundled output, you can see that it's just a function that returns a string. So in theory, this should result in smaller bundle sizes or at least bundles that are optimized for the code that you actually use if you're using tree shakeable libraries.
programming
That's what makes Svelte fundamentally different than the status quo, but we've only just hit the tip of the iceberg here. It's also unique in the way that it handles reactivity. If we go into the app component, we'll see a script up here at top. That's where we keep our main JavaScript logic. And then we have a style tag. All the styles will be scoped to this component. And another cool thing about the compiler is that it will automatically eliminate all of your unused CSS styles from the CSS bundle. And then after that, we have our markup, and Svelte has its own templating syntax for adding logic to your HTML. This is a similar approach to Angular and Vue but differs from React which uses JSX. Now, the difference with JSX is that you're taking your HTML and putting it inside of JavaScript and letting the JavaScript handle the logic. This can be a very divisive topic and it's really just a matter of opinion, but I just find I'm more productive by putting the logic in the HTML like we do with Angular, Vue, and Svelte. Now if we go up into the script, you'll notice I have export let name. Using the export keyword in front of a variable means that it can be passed down from a parent component. If we leave the export keyword off, it basically means we have a private variable that can only be used inside of this component. Now, the cool thing about Svelte is that it's reactive based on the assignment of a variable. We'll create a variable here for a random number and then create a function that can reassign that variable. So now that we have this function, we need to bind it to an event in the DOM. You can bind to events by doing on colon click or on colon whatever DOM event you want to bind to. This is very similar to all other frameworks. We pass in the function and it's going to call that function with the event passed as the argument. So that's going to change the random number and then we can show it in the template by wrapping it in braces.
Now we have an app that reacts to this randomized button. Whenever we click it, we get a new random number. But what happens if we need to compute a different value from this random number? Let's say if it rounds to 1, it'll be a winner. If it rounds to 0, it'll be a loser. The simple solution is just to write that expression directly in the template, and Svelte will rerun this logic every time the reactive value changes. But this isn't going to scale very well because we can't reuse this logic.
probability
logic
solutions
If we want to show that same value somewhere else in the template. We'd have to duplicate that code. Fortunately, Svelte has a very cool trick up its sleeve for computed values. We'll define a new variable, but instead of using let, to will use this dollar sign colon syntax. Believe it or not, this is valid vanilla JavaScript and it's basically just a way to tell Svelte to recalculate this value when the app reacts. Now we can go back into our template and simply reuse the result computed value as many times as we want. Now speaking of reactivity, another thing we can do is bind to the attributes on DOM elements. For example, if we want to bind to the value attribute on a form input, we can do that with this bind directive and then use our random variable. Old. If we start typing in the form, you'll see how the value itself is recomputed every time we type a new value. Now currently, our computed result is a string, but but let's go ahead and change that to a number and then we'll show an entirely different template based on some conditional logic. The new computed value will give us a number between 1 and 100, and we can show a template conditionally by using this if syntax. And we can also throw an else if if we have multiple conditions and then else for the default value. And then we'll just add some DOM elements in between these conditions and that will recompute the template every time our random number changes.
So that's pretty standard stuff but bad. Now I wanna show you something that you're not going to find in other frameworks. Let's go ahead and import fade and fly from svelte transition. These are directives that will allow you to automatically compute CSS animations based on the logic in your template. So if you want something to fade in and fade out when added or moved to the DOM. You can just add this transition fade directive and everything will just happen automatically. But let's say we want our poop emojis to fly in from the right and then fly out to the left. Left. Normally, this would take some careful thought about your CSS animations or you might use a JavaScript animation library. But in Svelte, we can use the directives to keep the animation logic tied directly to the DOM element that's being animated, and then we can add our own properties to it to customize the way it behaves. And that gives us poop flying all over the screen, which is the effect we're going warped, and there's even a directive specifically for SVG graphics that will draw the path along the shape. So that's really awesome stuff, but there's still a couple of other fundamental things that I wanna show you before we the full demo.
animation
graphic design
visualization
Earlier, I mentioned that Svelte is reactive based on assignment. So if we have an array and then we push new items to the array, we won't get any actual changes in the DOM. That's because we're just mutating the array and we're not actually reassigning the variable. So if you want the app to react to changes to an array or to an object, it's generally a good idea to use the spread syntax. This code here will do the same thing as array push, but it will also reassign the variable causing the app to react and update the DOM. Now when working at the rays, you'll probably want to loop over them and to lay some DOM elements for each item. We can do that by using each, which will give us access to both the value and the index of each item in the array. When we build out our full demo, you'll also see that each loops work with asynchronous values similar to the async pipe in Angular. And speaking of asynchronous values, Svelte has a really cool way of handling promises. I have a helper function here that just creates a delay, and then I'm defining our random value as a promise that resolves to a random number after that delay. When working with promises, there's generally 3 things that happen. First, you're in some kind of loading state waiting for the promise to resolve, then you get a value or maybe you get an error and need to show some kind of error message. In Svelte, you can await a promise directly in the template, and this will also handle things like race conditions for you automatically. The first section is where you would put your loading spinner while the promise is being resolved, then you show the actual result or you catch the error and show an error message. And that provides a very readable and intuitive way to handle promises in my opinion. It's actually very similar to a future builder in Flutter if there's any Flutter developers watching at this point.
Now we're going to switch gears into Svelte stores which behave very similar to RxJS Observables. And they can be shared anywhere in the component tree so you have a very easy mechanism for sharing data anywhere in your app. Let's go ahead and create a writable store and it's very similar to a behavior subject in RxJS, at least in terms of its API. First, we can pass it a default value and then we can set the value directly by calling set or we can call update to get access to the current value and then compute a new value in the stream, which which we can do with this callback function, which gives us the current value, then we return the next value.
programming
systems
And if we just want to listen to the value, we just subscribe to it. But if you've worked with observables, then you know that you need to manage your subscriptions carefully. Otherwise, you could end up with memory leaks. If we go back into our component, the first thing that we'll do is import the random store that we just created.
copyright
customers
We could subscribe to that directly in the JavaScript, but then we would have to dispose of it once this component is destroyed. That leads to a lot of boilerplate and also a lot of potential for error.
But notice how I have this dollar sign in front of the store value itself. This will tell the compiler to automatically subscribe to the value and also manage the subscription automatically. And now we can push new values to the stream from any component anywhere in the app. That will solve a lot of your complex data sharing situations, but you can also just pass props directly between a parent and child component. I went ahead and created a new component called tiled and it's just a dumb component that displays some properties. Now we'll go back up to our app component and pass some properties down to this child. Let's imagine we have this data object here that we pulled from a database or something. Now we can go and declare our child component and just pass in each property 1 by 1. But even after just 3 simple properties, it's starting to become kind of hard to read.
billing
data
infrastructure
databases
customer support
But Svelte has yet another little piece of magic that will make this code much nicer. There. You can simply send all of your props down to the child using the spread syntax. So now that you know some of the basic concepts in Svelte, I want to put everything together into a full working demo. In in just a few minutes, we'll be able to build this real time to do list that also includes user authentication and even some animation. Once a user is logged in, they'll be able to fill out this form with some information about the to do that'll be saved to Firestore and they can toggle it complete or incomplete or delete it. And, of course, everything will stay synced up with the back end database. We'll be using RX Fire for this demo, which you can install with the following command. The first thing we'll do is create a file called firebasejs just used to initialize Firebase, and you'll need to use the credentials from your own Firebase project. We'll be going through this code very quickly, so make sure to follow along with the source code on Fireship IO. But, basically, the purpose of this file is just to initialize the app and then export auth and the Firestore database so we can use them in other files. From there, we'll go into the app component and we just have a few small changes to make here. We'll import this login component which we'll create next. And with Svelte, you'll notice that there's no index HTML that you can mess with. So instead, what you can do is use this Svelte colon head tag to add additional things to the head of the document. In this demo, I'm using the Bulma CSS framework just so we have some better base styles to work with. After that, we'll build our auth feature so the user has a way to log in.
I'm creating a profile component, which will just be a dumb presentational component to show the user's display name, photo URL, and user ID. And another cool side note here is that felt will automatically warn you for accessibility issues. For example, if we leave out the alt attribute, it's going to warn us to add 1.
visualization
You can also do this in ESLint but it's nice to just have this stuff working right out of the gate. After that, we can create the login component which is the smart component that does the actual interaction with Firebase. Now the interesting thing about Svelte is that the shape of the stores are similar to the shape of RxJS observables. So that means we can use some of that syntactic sugar on RxJS observables in addition to Svelte stores. Currently, I'm grabbing the auth state observable from RX fire and just subscribing to it manually, but we'll refactor this in a minute. And I'll also define a function here to trigger the pop up that will allow the user to log in with Google, and that will cause the value of the auth state observable to change. Now we can go down to the template and create an if else statement. And if we have a user logged in, we'll go ahead and display that user profile component and, of course, use that spread syntax to pass the props down. And if the user is not logged in, we'll just show a button that can trigger that login function. At this point, we have a fully working auth system, but we can actually refactor this a little bit to use some of Svelte's built in syntactic sugar. This time, we'll define the user as the observable itself and then we'll just go ahead and use that dollar sign syntax to unwrap the observable directly in the template. Late. That'll work inside the if condition and also works inside the spread syntax. And now we have a login component that will manage our subscription automatically with almost no boilerplate.
Now it's time to move on to the to do list. Each of the individual to do items will be represented by this dumb component called to do item. But instead of just displaying data, it's also going to emit custom events up to the parent component. So this is a way to pass data from a child component back up to the parent. And in this case, we're doing that so we can tell the parent component when to remove the item from the database or when to update the status in the database.
data
Svelte has a thing called an event batcher, which will create a custom event in the DOM for you. In this case, when we want to remove an item, we'll dispatch an event called remove with that item's ID in the database. And then we'll do a similar thing to toggle the status of a to do item, but this time we'll pass the ID as well as the new status that the item should change to. Now I'm defining a CSS class that will show when an item is complete. And I'm going to make sure that that class name is the same of the property that toggles that class, which is the boolean value of complete on this component. And we might as well just add a transition to this item when it's created so it kind of slides in from the right, and we can easily do that by simply using Svelte's transition directive. From there, we can go ahead and add the text inside the list item and when it's complete, we want to show that CSS class. Svelte has a built in class directive which we can use like this by pointing it to the complete property. But if the CSS class and the property both share the same name, which they do in this case, we can actually make this even more concise like so. Now the last thing we'll do in this component is create our buttons that will dispatch the custom events. We have 3 different buttons here. 2 of those are used to toggle status and the other one is used to remove the item. And now we're ready to move on to the final component of this app which is the to dos list. I'm not going to talk too much about the Firebase code. Basically, we're just making a reference to the collection in the database and then making a query for all of the to do items that are seeded with the logged in user's user ID.
Then we're going to use the collection data function from RX fire, which takes that query and converts it to an observable of the document data. But in order to work with an each loop in Svelte, we'll also want to pipe in start with and that will guarantee that the observable always has a synchronous array to start good.
data
From there, we'll define the update status method which will take the custom event that's being emitted by the child component and use it to make an update to the Firestore database. And then we'll do the same basic thing to handle the remove event. Now if we go down to the template, we'll set up an each loop and notice that I put a dollar sign in front of the to dos observable. This will unwrap the observable automatically, manage the subscription, and then react to any new changes whether they happen client side or on the server.
Then we can pass our props down to the to do item component and then we can also listen to the custom events that we define on that component as well. So instead of just doing a simple on click event here we're doing on remove and on toggle. Again, those are custom events defined in the child component.
toys
And then the very last thing we'll do is set up a form input using the bind value directive and then set up a button that will add that item to the database when clicked.
And that's all there is to it. We now have a reactive real time to do app. Overall, I've been super impressed with Svelte. The only thing that I think is missing at this point is TypeScript support. But from what I understand, there should be TypeScript support in the near future. I think what impresses me the most about Svelte is that the abstractions are really well thought out, but but they don't take you too far away from vanilla JavaScript or native DOM APIs. I'm gonna go ahead and wrap things up there.
ideologies
software
Let me know what you think about Svelte in the comments. Thanks for watching and I will talk to you soon.
Just when I discovered the meaning of life, they changed. One of my favorite things about JavaScript is that the status quo never seems to last very long. React, Angular, and Vue have dominated the mindshare of developers over the last few years. Svelte has been around for a while, but they just released version 3 last week and my initial experience with it has been very positive and that's mostly because it empowers you to solve problems with less code. In the first half of this video, we'll cover the basic concepts in Svelte and in the process this. You'll see why it's such an awesome tool. In the second half of the video, we'll build a real time to do list with Svelte and Firebase from scratch. If you're new here, like and subscribe and you can find the full source code on Fireship IO. Now, before you jump into Svelte, I'd recommend watching this talk from its creator, Rich Harris. That's what really got me excited to start learning Svelte 3. Let's go ahead and just jump right into things. Will run npx dig it and then point to the Svelte JS template. This is the equivalent to create react app or ng new. Go ahead and open it up in Versus Code and run npm install. Then you can run npm dev to serve it locally. And that should give you this hello world on local host 5000. The first thing you'll see is the rollupconfig.js. This is what bundles your code and it's an turnative to webpack. Personally, I prefer to use Rollup, but you can also use webpack here if you want. And while we're talking about bundling, there's 2 things you should know and that's that Svelte supports server side rendering as well as native web components or custom elements. So that's cool, but so far this might just look like another JavaScript a framework, but if we go into the package. Json, we can see that something's different here. What's missing is dependencies. We only have development dependencies and that's because Svelte is a compiler. There. It generates all of your code at build time, which means it doesn't need to include the framework itself as a hard dependency in your JavaScript bundle. Another framework that also does this is StencilJS and I feel like this approach makes a lot more sense than the current status quo. And that's because you only need to compile the JavaScript from the framework that you actually need so you don't have any extra bloat in your JavaScript bundle. What I'm doing right now is just exporting our entire app as a string, and then if we go to the bundled output, you can see that it's just a function that returns a string. So in theory, this should result in smaller bundle sizes or at least bundles that are optimized for the code that you actually use if you're using tree shakeable libraries. That's what makes Svelte fundamentally different than the status quo, but we've only just hit the tip of the iceberg here. It's also unique in the way that it handles reactivity. If we go into the app component, we'll see a script up here at top. That's where we keep our main JavaScript logic. And then we have a style tag. All the styles will be scoped to this component. And another cool thing about the compiler is that it will automatically eliminate all of your unused CSS styles from the CSS bundle. And then after that, we have our markup, and Svelte has its own templating syntax for adding logic to your HTML. This is a similar approach to Angular and Vue but differs from React which uses JSX. Now, the difference with JSX is that you're taking your HTML and putting it inside of JavaScript and letting the JavaScript handle the logic. This can be a very divisive topic and it's really just a matter of opinion, but I just find I'm more productive by putting the logic in the HTML like we do with Angular, Vue, and Svelte. Now if we go up into the script, you'll notice I have export let name. Using the export keyword in front of a variable means that it can be passed down from a parent component. If we leave the export keyword off, it basically means we have a private variable that can only be used inside of this component. Now, the cool thing about Svelte is that it's reactive based on the assignment of a variable. We'll create a variable here for a random number and then create a function that can reassign that variable. So now that we have this function, we need to bind it to an event in the DOM. You can bind to events by doing on colon click or on colon whatever DOM event you want to bind to. This is very similar to all other frameworks. We pass in the function and it's going to call that function with the event passed as the argument. So that's going to change the random number and then we can show it in the template by wrapping it in braces. Now we have an app that reacts to this randomized button. Whenever we click it, we get a new random number. But what happens if we need to compute a different value from this random number? Let's say if it rounds to 1, it'll be a winner. If it rounds to 0, it'll be a loser. The simple solution is just to write that expression directly in the template, and Svelte will rerun this logic every time the reactive value changes. But this isn't going to scale very well because we can't reuse this logic. If we want to show that same value somewhere else in the template. We'd have to duplicate that code. Fortunately, Svelte has a very cool trick up its sleeve for computed values. We'll define a new variable, but instead of using let, to will use this dollar sign colon syntax. Believe it or not, this is valid vanilla JavaScript and it's basically just a way to tell Svelte to recalculate this value when the app reacts. Now we can go back into our template and simply reuse the result computed value as many times as we want. Now speaking of reactivity, another thing we can do is bind to the attributes on DOM elements. For example, if we want to bind to the value attribute on a form input, we can do that with this bind directive and then use our random variable. Old. If we start typing in the form, you'll see how the value itself is recomputed every time we type a new value. Now currently, our computed result is a string, but but let's go ahead and change that to a number and then we'll show an entirely different template based on some conditional logic. The new computed value will give us a number between 1 and 100, and we can show a template conditionally by using this if syntax. And we can also throw an else if if we have multiple conditions and then else for the default value. And then we'll just add some DOM elements in between these conditions and that will recompute the template every time our random number changes. So that's pretty standard stuff but bad. Now I wanna show you something that you're not going to find in other frameworks. Let's go ahead and import fade and fly from svelte transition. These are directives that will allow you to automatically compute CSS animations based on the logic in your template. So if you want something to fade in and fade out when added or moved to the DOM. You can just add this transition fade directive and everything will just happen automatically. But let's say we want our poop emojis to fly in from the right and then fly out to the left. Left. Normally, this would take some careful thought about your CSS animations or you might use a JavaScript animation library. But in Svelte, we can use the directives to keep the animation logic tied directly to the DOM element that's being animated, and then we can add our own properties to it to customize the way it behaves. And that gives us poop flying all over the screen, which is the effect we're going warped, and there's even a directive specifically for SVG graphics that will draw the path along the shape. So that's really awesome stuff, but there's still a couple of other fundamental things that I wanna show you before we the full demo. Earlier, I mentioned that Svelte is reactive based on assignment. So if we have an array and then we push new items to the array, we won't get any actual changes in the DOM. That's because we're just mutating the array and we're not actually reassigning the variable. So if you want the app to react to changes to an array or to an object, it's generally a good idea to use the spread syntax. This code here will do the same thing as array push, but it will also reassign the variable causing the app to react and update the DOM. Now when working at the rays, you'll probably want to loop over them and to lay some DOM elements for each item. We can do that by using each, which will give us access to both the value and the index of each item in the array. When we build out our full demo, you'll also see that each loops work with asynchronous values similar to the async pipe in Angular. And speaking of asynchronous values, Svelte has a really cool way of handling promises. I have a helper function here that just creates a delay, and then I'm defining our random value as a promise that resolves to a random number after that delay. When working with promises, there's generally 3 things that happen. First, you're in some kind of loading state waiting for the promise to resolve, then you get a value or maybe you get an error and need to show some kind of error message. In Svelte, you can await a promise directly in the template, and this will also handle things like race conditions for you automatically. The first section is where you would put your loading spinner while the promise is being resolved, then you show the actual result or you catch the error and show an error message. And that provides a very readable and intuitive way to handle promises in my opinion. It's actually very similar to a future builder in Flutter if there's any Flutter developers watching at this point. Now we're going to switch gears into Svelte stores which behave very similar to RxJS Observables. And they can be shared anywhere in the component tree so you have a very easy mechanism for sharing data anywhere in your app. Let's go ahead and create a writable store and it's very similar to a behavior subject in RxJS, at least in terms of its API. First, we can pass it a default value and then we can set the value directly by calling set or we can call update to get access to the current value and then compute a new value in the stream, which which we can do with this callback function, which gives us the current value, then we return the next value. And if we just want to listen to the value, we just subscribe to it. But if you've worked with observables, then you know that you need to manage your subscriptions carefully. Otherwise, you could end up with memory leaks. If we go back into our component, the first thing that we'll do is import the random store that we just created. We could subscribe to that directly in the JavaScript, but then we would have to dispose of it once this component is destroyed. That leads to a lot of boilerplate and also a lot of potential for error. But notice how I have this dollar sign in front of the store value itself. This will tell the compiler to automatically subscribe to the value and also manage the subscription automatically. And now we can push new values to the stream from any component anywhere in the app. That will solve a lot of your complex data sharing situations, but you can also just pass props directly between a parent and child component. I went ahead and created a new component called tiled and it's just a dumb component that displays some properties. Now we'll go back up to our app component and pass some properties down to this child. Let's imagine we have this data object here that we pulled from a database or something. Now we can go and declare our child component and just pass in each property 1 by 1. But even after just 3 simple properties, it's starting to become kind of hard to read. But Svelte has yet another little piece of magic that will make this code much nicer. There. You can simply send all of your props down to the child using the spread syntax. So now that you know some of the basic concepts in Svelte, I want to put everything together into a full working demo. In in just a few minutes, we'll be able to build this real time to do list that also includes user authentication and even some animation. Once a user is logged in, they'll be able to fill out this form with some information about the to do that'll be saved to Firestore and they can toggle it complete or incomplete or delete it. And, of course, everything will stay synced up with the back end database. We'll be using RX Fire for this demo, which you can install with the following command. The first thing we'll do is create a file called firebasejs just used to initialize Firebase, and you'll need to use the credentials from your own Firebase project. We'll be going through this code very quickly, so make sure to follow along with the source code on Fireship IO. But, basically, the purpose of this file is just to initialize the app and then export auth and the Firestore database so we can use them in other files. From there, we'll go into the app component and we just have a few small changes to make here. We'll import this login component which we'll create next. And with Svelte, you'll notice that there's no index HTML that you can mess with. So instead, what you can do is use this Svelte colon head tag to add additional things to the head of the document. In this demo, I'm using the Bulma CSS framework just so we have some better base styles to work with. After that, we'll build our auth feature so the user has a way to log in. I'm creating a profile component, which will just be a dumb presentational component to show the user's display name, photo URL, and user ID. And another cool side note here is that felt will automatically warn you for accessibility issues. For example, if we leave out the alt attribute, it's going to warn us to add 1. You can also do this in ESLint but it's nice to just have this stuff working right out of the gate. After that, we can create the login component which is the smart component that does the actual interaction with Firebase. Now the interesting thing about Svelte is that the shape of the stores are similar to the shape of RxJS observables. So that means we can use some of that syntactic sugar on RxJS observables in addition to Svelte stores. Currently, I'm grabbing the auth state observable from RX fire and just subscribing to it manually, but we'll refactor this in a minute. And I'll also define a function here to trigger the pop up that will allow the user to log in with Google, and that will cause the value of the auth state observable to change. Now we can go down to the template and create an if else statement. And if we have a user logged in, we'll go ahead and display that user profile component and, of course, use that spread syntax to pass the props down. And if the user is not logged in, we'll just show a button that can trigger that login function. At this point, we have a fully working auth system, but we can actually refactor this a little bit to use some of Svelte's built in syntactic sugar. This time, we'll define the user as the observable itself and then we'll just go ahead and use that dollar sign syntax to unwrap the observable directly in the template. Late. That'll work inside the if condition and also works inside the spread syntax. And now we have a login component that will manage our subscription automatically with almost no boilerplate. Now it's time to move on to the to do list. Each of the individual to do items will be represented by this dumb component called to do item. But instead of just displaying data, it's also going to emit custom events up to the parent component. So this is a way to pass data from a child component back up to the parent. And in this case, we're doing that so we can tell the parent component when to remove the item from the database or when to update the status in the database. Svelte has a thing called an event batcher, which will create a custom event in the DOM for you. In this case, when we want to remove an item, we'll dispatch an event called remove with that item's ID in the database. And then we'll do a similar thing to toggle the status of a to do item, but this time we'll pass the ID as well as the new status that the item should change to. Now I'm defining a CSS class that will show when an item is complete. And I'm going to make sure that that class name is the same of the property that toggles that class, which is the boolean value of complete on this component. And we might as well just add a transition to this item when it's created so it kind of slides in from the right, and we can easily do that by simply using Svelte's transition directive. From there, we can go ahead and add the text inside the list item and when it's complete, we want to show that CSS class. Svelte has a built in class directive which we can use like this by pointing it to the complete property. But if the CSS class and the property both share the same name, which they do in this case, we can actually make this even more concise like so. Now the last thing we'll do in this component is create our buttons that will dispatch the custom events. We have 3 different buttons here. 2 of those are used to toggle status and the other one is used to remove the item. And now we're ready to move on to the final component of this app which is the to dos list. I'm not going to talk too much about the Firebase code. Basically, we're just making a reference to the collection in the database and then making a query for all of the to do items that are seeded with the logged in user's user ID. Then we're going to use the collection data function from RX fire, which takes that query and converts it to an observable of the document data. But in order to work with an each loop in Svelte, we'll also want to pipe in start with and that will guarantee that the observable always has a synchronous array to start good. From there, we'll define the update status method which will take the custom event that's being emitted by the child component and use it to make an update to the Firestore database. And then we'll do the same basic thing to handle the remove event. Now if we go down to the template, we'll set up an each loop and notice that I put a dollar sign in front of the to dos observable. This will unwrap the observable automatically, manage the subscription, and then react to any new changes whether they happen client side or on the server. Then we can pass our props down to the to do item component and then we can also listen to the custom events that we define on that component as well. So instead of just doing a simple on click event here we're doing on remove and on toggle. Again, those are custom events defined in the child component. And then the very last thing we'll do is set up a form input using the bind value directive and then set up a button that will add that item to the database when clicked. And that's all there is to it. We now have a reactive real time to do app. Overall, I've been super impressed with Svelte. The only thing that I think is missing at this point is TypeScript support. But from what I understand, there should be TypeScript support in the near future. I think what impresses me the most about Svelte is that the abstractions are really well thought out, but but they don't take you too far away from vanilla JavaScript or native DOM APIs. I'm gonna go ahead and wrap things up there. Let me know what you think about Svelte in the comments. Thanks for watching and I will talk to you soon.
Just
just
when
when
I
i
discovered
discovered
the
the
meaning
meaning
of
of
life,
life
they
they
changed.
changed
One
one
of
of
my
my
favorite
favorite
things
things
about
about
JavaScript
javascript
is
is
that
that
the
the
status
status
quo
quo
never
never
seems
seems
to
to
last
last
very
very
long.
long
React,
react
Angular,
angular
and
and
Vue
vue
have
have
dominated
dominated
the
the
mindshare
mindshare
of
of
developers
developers
over
over
the
the
last
last
few
few
years.
years
Svelte
svelte
has
has
been
been
around
around
for
for
a
a
while,
while
but
but
they
they
just
just
released
released
version
version
3
3
last
last
week
week
and
and
my
my
initial
initial
experience
experience
with
with
it
it
has
has
been
been
very
very
positive
positive
and
and
that's
that's
mostly
mostly
because
because
it
it
empowers
empowers
you
you
to
to
solve
solve
problems
problems
with
with
less
less
code.
code
In
in
the
the
first
first
half
half
of
of
this
this
video,
video
we'll
we'll
cover
cover
the
the
basic
basic
concepts
concepts
in
in
Svelte
svelte
and
and
in
in
the
the
process
process
this.
this
You'll
you'll
see
see
why
why
it's
it's
such
such
an
an
awesome
awesome
tool.
tool
In
in
the
the
second
second
half
half
of
of
the
the
video,
video
we'll
we'll
build
build
a
a
real
real
time
time
to
to
do
do
list
list
with
with
Svelte
svelte
and
and
Firebase
firebase
from
from
scratch.
scratch
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
Now,
now
before
before
you
you
jump
jump
into
into
Svelte,
svelte
I'd
i'd
recommend
recommend
watching
watching
this
this
talk
talk
from
from
its
its
creator,
creator
Rich
rich
Harris.
harris
That's
that's
what
what
really
really
got
got
me
me
excited
excited
to
to
start
start
learning
learning
Svelte
svelte
3.
3
Let's
let's
go
go
ahead
ahead
and
and
just
just
jump
jump
right
right
into
into
things.
things
Will
will
run
run
npx
npx
dig
dig
it
it
and
and
then
then
point
point
to
to
the
the
Svelte
svelte
JS
js
template.
template
This
this
is
is
the
the
equivalent
equivalent
to
to
create
create
react
react
app
app
or
or
ng
ng
new.
new
Go
go
ahead
ahead
and
and
open
open
it
it
up
up
in
in
Versus
versus
Code
code
and
and
run
run
npm
npm
install.
install
Then
then
you
you
can
can
run
run
npm
npm
dev
dev
to
to
serve
serve
it
it
locally.
locally
And
and
that
that
should
should
give
give
you
you
this
this
hello
hello
world
world
on
on
local
local
host
host
5000.
5000
The
the
first
first
thing
thing
you'll
you'll
see
see
is
is
the
the
rollupconfig.js.
rollupconfig.js
This
this
is
is
what
what
bundles
bundles
your
your
code
code
and
and
it's
it's
an
an
turnative
turnative
to
to
webpack.
webpack
Personally,
personally
I
i
prefer
prefer
to
to
use
use
Rollup,
rollup
but
but
you
you
can
can
also
also
use
use
webpack
webpack
here
here
if
if
you
you
want.
want
And
and
while
while
we're
we're
talking
talking
about
about
bundling,
bundling
there's
there's
2
2
things
things
you
you
should
should
know
know
and
and
that's
that's
that
that
Svelte
svelte
supports
supports
server
server
side
side
rendering
rendering
as
as
well
well
as
as
native
native
web
web
components
components
or
or
custom
custom
elements.
elements
So
so
that's
that's
cool,
cool
but
but
so
so
far
far
this
this
might
might
just
just
look
look
like
like
another
another
JavaScript
javascript
a
a
framework,
framework
but
but
if
if
we
we
go
go
into
into
the
the
package.
package
Json,
json
we
we
can
can
see
see
that
that
something's
something's
different
different
here.
here
What's
what's
missing
missing
is
is
dependencies.
dependencies
We
we
only
only
have
have
development
development
dependencies
dependencies
and
and
that's
that's
because
because
Svelte
svelte
is
is
a
a
compiler.
compiler
There.
there
It
it
generates
generates
all
all
of
of
your
your
code
code
at
at
build
build
time,
time
which
which
means
means
it
it
doesn't
doesn't
need
need
to
to
include
include
the
the
framework
framework
itself
itself
as
as
a
a
hard
hard
dependency
dependency
in
in
your
your
JavaScript
javascript
bundle.
bundle
Another
another
framework
framework
that
that
also
also
does
does
this
this
is
is
StencilJS
stenciljs
and
and
I
i
feel
feel
like
like
this
this
approach
approach
makes
makes
a
a
lot
lot
more
more
sense
sense
than
than
the
the
current
current
status
status
quo.
quo
And
and
that's
that's
because
because
you
you
only
only
need
need
to
to
compile
compile
the
the
JavaScript
javascript
from
from
the
the
framework
framework
that
that
you
you
actually
actually
need
need
so
so
you
you
don't
don't
have
have
any
any
extra
extra
bloat
bloat
in
in
your
your
JavaScript
javascript
bundle.
bundle
What
what
I'm
i'm
doing
doing
right
right
now
now
is
is
just
just
exporting
exporting
our
our
entire
entire
app
app
as
as
a
a
string,
string
and
and
then
then
if
if
we
we
go
go
to
to
the
the
bundled
bundled
output,
output
you
you
can
can
see
see
that
that
it's
it's
just
just
a
a
function
function
that
that
returns
returns
a
a
string.
string
So
so
in
in
theory,
theory
this
this
should
should
result
result
in
in
smaller
smaller
bundle
bundle
sizes
sizes
or
or
at
at
least
least
bundles
bundles
that
that
are
are
optimized
optimized
for
for
the
the
code
code
that
that
you
you
actually
actually
use
use
if
if
you're
you're
using
using
tree
tree
shakeable
shakeable
libraries.
libraries
That's
that's
what
what
makes
makes
Svelte
svelte
fundamentally
fundamentally
different
different
than
than
the
the
status
status
quo,
quo
but
but
we've
we've
only
only
just
just
hit
hit
the
the
tip
tip
of
of
the
the
iceberg
iceberg
here.
here
It's
it's
also
also
unique
unique
in
in
the
the
way
way
that
that
it
it
handles
handles
reactivity.
reactivity
If
if
we
we
go
go
into
into
the
the
app
app
component,
component
we'll
we'll
see
see
a
a
script
script
up
up
here
here
at
at
top.
top
That's
that's
where
where
we
we
keep
keep
our
our
main
main
JavaScript
javascript
logic.
logic
And
and
then
then
we
we
have
have
a
a
style
style
tag.
tag
All
all
the
the
styles
styles
will
will
be
be
scoped
scoped
to
to
this
this
component.
component
And
and
another
another
cool
cool
thing
thing
about
about
the
the
compiler
compiler
is
is
that
that
it
it
will
will
automatically
automatically
eliminate
eliminate
all
all
of
of
your
your
unused
unused
CSS
css
styles
styles
from
from
the
the
CSS
css
bundle.
bundle
And
and
then
then
after
after
that,
that
we
we
have
have
our
our
markup,
markup
and
and
Svelte
svelte
has
has
its
its
own
own
templating
templating
syntax
syntax
for
for
adding
adding
logic
logic
to
to
your
your
HTML.
html
This
this
is
is
a
a
similar
similar
approach
approach
to
to
Angular
angular
and
and
Vue
vue
but
but
differs
differs
from
from
React
react
which
which
uses
uses
JSX.
jsx
Now,
now
the
the
difference
difference
with
with
JSX
jsx
is
is
that
that
you're
you're
taking
taking
your
your
HTML
html
and
and
putting
putting
it
it
inside
inside
of
of
JavaScript
javascript
and
and
letting
letting
the
the
JavaScript
javascript
handle
handle
the
the
logic.
logic
This
this
can
can
be
be
a
a
very
very
divisive
divisive
topic
topic
and
and
it's
it's
really
really
just
just
a
a
matter
matter
of
of
opinion,
opinion
but
but
I
i
just
just
find
find
I'm
i'm
more
more
productive
productive
by
by
putting
putting
the
the
logic
logic
in
in
the
the
HTML
html
like
like
we
we
do
do
with
with
Angular,
angular
Vue,
vue
and
and
Svelte.
svelte
Now
now
if
if
we
we
go
go
up
up
into
into
the
the
script,
script
you'll
you'll
notice
notice
I
i
have
have
export
export
let
let
name.
name
Using
using
the
the
export
export
keyword
keyword
in
in
front
front
of
of
a
a
variable
variable
means
means
that
that
it
it
can
can
be
be
passed
passed
down
down
from
from
a
a
parent
parent
component.
component
If
if
we
we
leave
leave
the
the
export
export
keyword
keyword
off,
off
it
it
basically
basically
means
means
we
we
have
have
a
a
private
private
variable
variable
that
that
can
can
only
only
be
be
used
used
inside
inside
of
of
this
this
component.
component
Now,
now
the
the
cool
cool
thing
thing
about
about
Svelte
svelte
is
is
that
that
it's
it's
reactive
reactive
based
based
on
on
the
the
assignment
assignment
of
of
a
a
variable.
variable
We'll
we'll
create
create
a
a
variable
variable
here
here
for
for
a
a
random
random
number
number
and
and
then
then
create
create
a
a
function
function
that
that
can
can
reassign
reassign
that
that
variable.
variable
So
so
now
now
that
that
we
we
have
have
this
this
function,
function
we
we
need
need
to
to
bind
bind
it
it
to
to
an
an
event
event
in
in
the
the
DOM.
dom
You
you
can
can
bind
bind
to
to
events
events
by
by
doing
doing
on
on
colon
colon
click
click
or
or
on
on
colon
colon
whatever
whatever
DOM
dom
event
event
you
you
want
want
to
to
bind
bind
to.
to
This
this
is
is
very
very
similar
similar
to
to
all
all
other
other
frameworks.
frameworks
We
we
pass
pass
in
in
the
the
function
function
and
and
it's
it's
going
going
to
to
call
call
that
that
function
function
with
with
the
the
event
event
passed
passed
as
as
the
the
argument.
argument
So
so
that's
that's
going
going
to
to
change
change
the
the
random
random
number
number
and
and
then
then
we
we
can
can
show
show
it
it
in
in
the
the
template
template
by
by
wrapping
wrapping
it
it
in
in
braces.
braces
Now
now
we
we
have
have
an
an
app
app
that
that
reacts
reacts
to
to
this
this
randomized
randomized
button.
button
Whenever
whenever
we
we
click
click
it,
it
we
we
get
get
a
a
new
new
random
random
number.
number
But
but
what
what
happens
happens
if
if
we
we
need
need
to
to
compute
compute
a
a
different
different
value
value
from
from
this
this
random
random
number?
number
Let's
let's
say
say
if
if
it
it
rounds
rounds
to
to
1,
1
it'll
it'll
be
be
a
a
winner.
winner
If
if
it
it
rounds
rounds
to
to
0,
0
it'll
it'll
be
be
a
a
loser.
loser
The
the
simple
simple
solution
solution
is
is
just
just
to
to
write
write
that
that
expression
expression
directly
directly
in
in
the
the
template,
template
and
and
Svelte
svelte
will
will
rerun
rerun
this
this
logic
logic
every
every
time
time
the
the
reactive
reactive
value
value
changes.
changes
But
but
this
this
isn't
isn't
going
going
to
to
scale
scale
very
very
well
well
because
because
we
we
can't
can't
reuse
reuse
this
this
logic.
logic
If
if
we
we
want
want
to
to
show
show
that
that
same
same
value
value
somewhere
somewhere
else
else
in
in
the
the
template.
template
We'd
we'd
have
have
to
to
duplicate
duplicate
that
that
code.
code
Fortunately,
fortunately
Svelte
svelte
has
has
a
a
very
very
cool
cool
trick
trick
up
up
its
its
sleeve
sleeve
for
for
computed
computed
values.
values
We'll
we'll
define
define
a
a
new
new
variable,
variable
but
but
instead
instead
of
of
using
using
let,
let
to
to
will
will
use
use
this
this
dollar
dollar
sign
sign
colon
colon
syntax.
syntax
Believe
believe
it
it
or
or
not,
not
this
this
is
is
valid
valid
vanilla
vanilla
JavaScript
javascript
and
and
it's
it's
basically
basically
just
just
a
a
way
way
to
to
tell
tell
Svelte
svelte
to
to
recalculate
recalculate
this
this
value
value
when
when
the
the
app
app
reacts.
reacts
Now
now
we
we
can
can
go
go
back
back
into
into
our
our
template
template
and
and
simply
simply
reuse
reuse
the
the
result
result
computed
computed
value
value
as
as
many
many
times
times
as
as
we
we
want.
want
Now
now
speaking
speaking
of
of
reactivity,
reactivity
another
another
thing
thing
we
we
can
can
do
do
is
is
bind
bind
to
to
the
the
attributes
attributes
on
on
DOM
dom
elements.
elements
For
for
example,
example
if
if
we
we
want
want
to
to
bind
bind
to
to
the
the
value
value
attribute
attribute
on
on
a
a
form
form
input,
input
we
we
can
can
do
do
that
that
with
with
this
this
bind
bind
directive
directive
and
and
then
then
use
use
our
our
random
random
variable.
variable
Old.
old
If
if
we
we
start
start
typing
typing
in
in
the
the
form,
form
you'll
you'll
see
see
how
how
the
the
value
value
itself
itself
is
is
recomputed
recomputed
every
every
time
time
we
we
type
type
a
a
new
new
value.
value
Now
now
currently,
currently
our
our
computed
computed
result
result
is
is
a
a
string,
string
but
but
but
but
let's
let's
go
go
ahead
ahead
and
and
change
change
that
that
to
to
a
a
number
number
and
and
then
then
we'll
we'll
show
show
an
an
entirely
entirely
different
different
template
template
based
based
on
on
some
some
conditional
conditional
logic.
logic
The
the
new
new
computed
computed
value
value
will
will
give
give
us
us
a
a
number
number
between
between
1
1
and
and
100,
100
and
and
we
we
can
can
show
show
a
a
template
template
conditionally
conditionally
by
by
using
using
this
this
if
if
syntax.
syntax
And
and
we
we
can
can
also
also
throw
throw
an
an
else
else
if
if
if
if
we
we
have
have
multiple
multiple
conditions
conditions
and
and
then
then
else
else
for
for
the
the
default
default
value.
value
And
and
then
then
we'll
we'll
just
just
add
add
some
some
DOM
dom
elements
elements
in
in
between
between
these
these
conditions
conditions
and
and
that
that
will
will
recompute
recompute
the
the
template
template
every
every
time
time
our
our
random
random
number
number
changes.
changes
So
so
that's
that's
pretty
pretty
standard
standard
stuff
stuff
but
but
bad.
bad
Now
now
I
i
wanna
wanna
show
show
you
you
something
something
that
that
you're
you're
not
not
going
going
to
to
find
find
in
in
other
other
frameworks.
frameworks
Let's
let's
go
go
ahead
ahead
and
and
import
import
fade
fade
and
and
fly
fly
from
from
svelte
svelte
transition.
transition
These
these
are
are
directives
directives
that
that
will
will
allow
allow
you
you
to
to
automatically
automatically
compute
compute
CSS
css
animations
animations
based
based
on
on
the
the
logic
logic
in
in
your
your
template.
template
So
so
if
if
you
you
want
want
something
something
to
to
fade
fade
in
in
and
and
fade
fade
out
out
when
when
added
added
or
or
moved
moved
to
to
the
the
DOM.
dom
You
you
can
can
just
just
add
add
this
this
transition
transition
fade
fade
directive
directive
and
and
everything
everything
will
will
just
just
happen
happen
automatically.
automatically
But
but
let's
let's
say
say
we
we
want
want
our
our
poop
poop
emojis
emojis
to
to
fly
fly
in
in
from
from
the
the
right
right
and
and
then
then
fly
fly
out
out
to
to
the
the
left.
left
Left.
left
Normally,
normally
this
this
would
would
take
take
some
some
careful
careful
thought
thought
about
about
your
your
CSS
css
animations
animations
or
or
you
you
might
might
use
use
a
a
JavaScript
javascript
animation
animation
library.
library
But
but
in
in
Svelte,
svelte
we
we
can
can
use
use
the
the
directives
directives
to
to
keep
keep
the
the
animation
animation
logic
logic
tied
tied
directly
directly
to
to
the
the
DOM
dom
element
element
that's
that's
being
being
animated,
animated
and
and
then
then
we
we
can
can
add
add
our
our
own
own
properties
properties
to
to
it
it
to
to
customize
customize
the
the
way
way
it
it
behaves.
behaves
And
and
that
that
gives
gives
us
us
poop
poop
flying
flying
all
all
over
over
the
the
screen,
screen
which
which
is
is
the
the
effect
effect
we're
we're
going
going
warped,
warped
and
and
there's
there's
even
even
a
a
directive
directive
specifically
specifically
for
for
SVG
svg
graphics
graphics
that
that
will
will
draw
draw
the
the
path
path
along
along
the
the
shape.
shape
So
so
that's
that's
really
really
awesome
awesome
stuff,
stuff
but
but
there's
there's
still
still
a
a
couple
couple
of
of
other
other
fundamental
fundamental
things
things
that
that
I
i
wanna
wanna
show
show
you
you
before
before
we
we
the
the
full
full
demo.
demo
Earlier,
earlier
I
i
mentioned
mentioned
that
that
Svelte
svelte
is
is
reactive
reactive
based
based
on
on
assignment.
assignment
So
so
if
if
we
we
have
have
an
an
array
array
and
and
then
then
we
we
push
push
new
new
items
items
to
to
the
the
array,
array
we
we
won't
won't
get
get
any
any
actual
actual
changes
changes
in
in
the
the
DOM.
dom
That's
that's
because
because
we're
we're
just
just
mutating
mutating
the
the
array
array
and
and
we're
we're
not
not
actually
actually
reassigning
reassigning
the
the
variable.
variable
So
so
if
if
you
you
want
want
the
the
app
app
to
to
react
react
to
to
changes
changes
to
to
an
an
array
array
or
or
to
to
an
an
object,
object
it's
it's
generally
generally
a
a
good
good
idea
idea
to
to
use
use
the
the
spread
spread
syntax.
syntax
This
this
code
code
here
here
will
will
do
do
the
the
same
same
thing
thing
as
as
array
array
push,
push
but
but
it
it
will
will
also
also
reassign
reassign
the
the
variable
variable
causing
causing
the
the
app
app
to
to
react
react
and
and
update
update
the
the
DOM.
dom
Now
now
when
when
working
working
at
at
the
the
rays,
rays
you'll
you'll
probably
probably
want
want
to
to
loop
loop
over
over
them
them
and
and
to
to
lay
lay
some
some
DOM
dom
elements
elements
for
for
each
each
item.
item
We
we
can
can
do
do
that
that
by
by
using
using
each,
each
which
which
will
will
give
give
us
us
access
access
to
to
both
both
the
the
value
value
and
and
the
the
index
index
of
of
each
each
item
item
in
in
the
the
array.
array
When
when
we
we
build
build
out
out
our
our
full
full
demo,
demo
you'll
you'll
also
also
see
see
that
that
each
each
loops
loops
work
work
with
with
asynchronous
asynchronous
values
values
similar
similar
to
to
the
the
async
async
pipe
pipe
in
in
Angular.
angular
And
and
speaking
speaking
of
of
asynchronous
asynchronous
values,
values
Svelte
svelte
has
has
a
a
really
really
cool
cool
way
way
of
of
handling
handling
promises.
promises
I
i
have
have
a
a
helper
helper
function
function
here
here
that
that
just
just
creates
creates
a
a
delay,
delay
and
and
then
then
I'm
i'm
defining
defining
our
our
random
random
value
value
as
as
a
a
promise
promise
that
that
resolves
resolves
to
to
a
a
random
random
number
number
after
after
that
that
delay.
delay
When
when
working
working
with
with
promises,
promises
there's
there's
generally
generally
3
3
things
things
that
that
happen.
happen
First,
first
you're
you're
in
in
some
some
kind
kind
of
of
loading
loading
state
state
waiting
waiting
for
for
the
the
promise
promise
to
to
resolve,
resolve
then
then
you
you
get
get
a
a
value
value
or
or
maybe
maybe
you
you
get
get
an
an
error
error
and
and
need
need
to
to
show
show
some
some
kind
kind
of
of
error
error
message.
message
In
in
Svelte,
svelte
you
you
can
can
await
await
a
a
promise
promise
directly
directly
in
in
the
the
template,
template
and
and
this
this
will
will
also
also
handle
handle
things
things
like
like
race
race
conditions
conditions
for
for
you
you
automatically.
automatically
The
the
first
first
section
section
is
is
where
where
you
you
would
would
put
put
your
your
loading
loading
spinner
spinner
while
while
the
the
promise
promise
is
is
being
being
resolved,
resolved
then
then
you
you
show
show
the
the
actual
actual
result
result
or
or
you
you
catch
catch
the
the
error
error
and
and
show
show
an
an
error
error
message.
message
And
and
that
that
provides
provides
a
a
very
very
readable
readable
and
and
intuitive
intuitive
way
way
to
to
handle
handle
promises
promises
in
in
my
my
opinion.
opinion
It's
it's
actually
actually
very
very
similar
similar
to
to
a
a
future
future
builder
builder
in
in
Flutter
flutter
if
if
there's
there's
any
any
Flutter
flutter
developers
developers
watching
watching
at
at
this
this
point.
point
Now
now
we're
we're
going
going
to
to
switch
switch
gears
gears
into
into
Svelte
svelte
stores
stores
which
which
behave
behave
very
very
similar
similar
to
to
RxJS
rxjs
Observables.
observables
And
and
they
they
can
can
be
be
shared
shared
anywhere
anywhere
in
in
the
the
component
component
tree
tree
so
so
you
you
have
have
a
a
very
very
easy
easy
mechanism
mechanism
for
for
sharing
sharing
data
data
anywhere
anywhere
in
in
your
your
app.
app
Let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
writable
writable
store
store
and
and
it's
it's
very
very
similar
similar
to
to
a
a
behavior
behavior
subject
subject
in
in
RxJS,
rxjs
at
at
least
least
in
in
terms
terms
of
of
its
its
API.
api
First,
first
we
we
can
can
pass
pass
it
it
a
a
default
default
value
value
and
and
then
then
we
we
can
can
set
set
the
the
value
value
directly
directly
by
by
calling
calling
set
set
or
or
we
we
can
can
call
call
update
update
to
to
get
get
access
access
to
to
the
the
current
current
value
value
and
and
then
then
compute
compute
a
a
new
new
value
value
in
in
the
the
stream,
stream
which
which
which
which
we
we
can
can
do
do
with
with
this
this
callback
callback
function,
function
which
which
gives
gives
us
us
the
the
current
current
value,
value
then
then
we
we
return
return
the
the
next
next
value.
value
And
and
if
if
we
we
just
just
want
want
to
to
listen
listen
to
to
the
the
value,
value
we
we
just
just
subscribe
subscribe
to
to
it.
it
But
but
if
if
you've
you've
worked
worked
with
with
observables,
observables
then
then
you
you
know
know
that
that
you
you
need
need
to
to
manage
manage
your
your
subscriptions
subscriptions
carefully.
carefully
Otherwise,
otherwise
you
you
could
could
end
end
up
up
with
with
memory
memory
leaks.
leaks
If
if
we
we
go
go
back
back
into
into
our
our
component,
component
the
the
first
first
thing
thing
that
that
we'll
we'll
do
do
is
is
import
import
the
the
random
random
store
store
that
that
we
we
just
just
created.
created
We
we
could
could
subscribe
subscribe
to
to
that
that
directly
directly
in
in
the
the
JavaScript,
javascript
but
but
then
then
we
we
would
would
have
have
to
to
dispose
dispose
of
of
it
it
once
once
this
this
component
component
is
is
destroyed.
destroyed
That
that
leads
leads
to
to
a
a
lot
lot
of
of
boilerplate
boilerplate
and
and
also
also
a
a
lot
lot
of
of
potential
potential
for
for
error.
error
But
but
notice
notice
how
how
I
i
have
have
this
this
dollar
dollar
sign
sign
in
in
front
front
of
of
the
the
store
store
value
value
itself.
itself
This
this
will
will
tell
tell
the
the
compiler
compiler
to
to
automatically
automatically
subscribe
subscribe
to
to
the
the
value
value
and
and
also
also
manage
manage
the
the
subscription
subscription
automatically.
automatically
And
and
now
now
we
we
can
can
push
push
new
new
values
values
to
to
the
the
stream
stream
from
from
any
any
component
component
anywhere
anywhere
in
in
the
the
app.
app
That
that
will
will
solve
solve
a
a
lot
lot
of
of
your
your
complex
complex
data
data
sharing
sharing
situations,
situations
but
but
you
you
can
can
also
also
just
just
pass
pass
props
props
directly
directly
between
between
a
a
parent
parent
and
and
child
child
component.
component
I
i
went
went
ahead
ahead
and
and
created
created
a
a
new
new
component
component
called
called
tiled
tiled
and
and
it's
it's
just
just
a
a
dumb
dumb
component
component
that
that
displays
displays
some
some
properties.
properties
Now
now
we'll
we'll
go
go
back
back
up
up
to
to
our
our
app
app
component
component
and
and
pass
pass
some
some
properties
properties
down
down
to
to
this
this
child.
child
Let's
let's
imagine
imagine
we
we
have
have
this
this
data
data
object
object
here
here
that
that
we
we
pulled
pulled
from
from
a
a
database
database
or
or
something.
something
Now
now
we
we
can
can
go
go
and
and
declare
declare
our
our
child
child
component
component
and
and
just
just
pass
pass
in
in
each
each
property
property
1
1
by
by
1.
1
But
but
even
even
after
after
just
just
3
3
simple
simple
properties,
properties
it's
it's
starting
starting
to
to
become
become
kind
kind
of
of
hard
hard
to
to
read.
read
But
but
Svelte
svelte
has
has
yet
yet
another
another
little
little
piece
piece
of
of
magic
magic
that
that
will
will
make
make
this
this
code
code
much
much
nicer.
nicer
There.
there
You
you
can
can
simply
simply
send
send
all
all
of
of
your
your
props
props
down
down
to
to
the
the
child
child
using
using
the
the
spread
spread
syntax.
syntax
So
so
now
now
that
that
you
you
know
know
some
some
of
of
the
the
basic
basic
concepts
concepts
in
in
Svelte,
svelte
I
i
want
want
to
to
put
put
everything
everything
together
together
into
into
a
a
full
full
working
working
demo.
demo
In
in
in
in
just
just
a
a
few
few
minutes,
minutes
we'll
we'll
be
be
able
able
to
to
build
build
this
this
real
real
time
time
to
to
do
do
list
list
that
that
also
also
includes
includes
user
user
authentication
authentication
and
and
even
even
some
some
animation.
animation
Once
once
a
a
user
user
is
is
logged
logged
in,
in
they'll
they'll
be
be
able
able
to
to
fill
fill
out
out
this
this
form
form
with
with
some
some
information
information
about
about
the
the
to
to
do
do
that'll
that'll
be
be
saved
saved
to
to
Firestore
firestore
and
and
they
they
can
can
toggle
toggle
it
it
complete
complete
or
or
incomplete
incomplete
or
or
delete
delete
it.
it
And,
and
of
of
course,
course
everything
everything
will
will
stay
stay
synced
synced
up
up
with
with
the
the
back
back
end
end
database.
database
We'll
we'll
be
be
using
using
RX
rx
Fire
fire
for
for
this
this
demo,
demo
which
which
you
you
can
can
install
install
with
with
the
the
following
following
command.
command
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
create
create
a
a
file
file
called
called
firebasejs
firebasejs
just
just
used
used
to
to
initialize
initialize
Firebase,
firebase
and
and
you'll
you'll
need
need
to
to
use
use
the
the
credentials
credentials
from
from
your
your
own
own
Firebase
firebase
project.
project
We'll
we'll
be
be
going
going
through
through
this
this
code
code
very
very
quickly,
quickly
so
so
make
make
sure
sure
to
to
follow
follow
along
along
with
with
the
the
source
source
code
code
on
on
Fireship
fireship
IO.
io
But,
but
basically,
basically
the
the
purpose
purpose
of
of
this
this
file
file
is
is
just
just
to
to
initialize
initialize
the
the
app
app
and
and
then
then
export
export
auth
auth
and
and
the
the
Firestore
firestore
database
database
so
so
we
we
can
can
use
use
them
them
in
in
other
other
files.
files
From
from
there,
there
we'll
we'll
go
go
into
into
the
the
app
app
component
component
and
and
we
we
just
just
have
have
a
a
few
few
small
small
changes
changes
to
to
make
make
here.
here
We'll
we'll
import
import
this
this
login
login
component
component
which
which
we'll
we'll
create
create
next.
next
And
and
with
with
Svelte,
svelte
you'll
you'll
notice
notice
that
that
there's
there's
no
no
index
index
HTML
html
that
that
you
you
can
can
mess
mess
with.
with
So
so
instead,
instead
what
what
you
you
can
can
do
do
is
is
use
use
this
this
Svelte
svelte
colon
colon
head
head
tag
tag
to
to
add
add
additional
additional
things
things
to
to
the
the
head
head
of
of
the
the
document.
document
In
in
this
this
demo,
demo
I'm
i'm
using
using
the
the
Bulma
bulma
CSS
css
framework
framework
just
just
so
so
we
we
have
have
some
some
better
better
base
base
styles
styles
to
to
work
work
with.
with
After
after
that,
that
we'll
we'll
build
build
our
our
auth
auth
feature
feature
so
so
the
the
user
user
has
has
a
a
way
way
to
to
log
log
in.
in
I'm
i'm
creating
creating
a
a
profile
profile
component,
component
which
which
will
will
just
just
be
be
a
a
dumb
dumb
presentational
presentational
component
component
to
to
show
show
the
the
user's
user's
display
display
name,
name
photo
photo
URL,
url
and
and
user
user
ID.
id
And
and
another
another
cool
cool
side
side
note
note
here
here
is
is
that
that
felt
felt
will
will
automatically
automatically
warn
warn
you
you
for
for
accessibility
accessibility
issues.
issues
For
for
example,
example
if
if
we
we
leave
leave
out
out
the
the
alt
alt
attribute,
attribute
it's
it's
going
going
to
to
warn
warn
us
us
to
to
add
add
1.
1
You
you
can
can
also
also
do
do
this
this
in
in
ESLint
eslint
but
but
it's
it's
nice
nice
to
to
just
just
have
have
this
this
stuff
stuff
working
working
right
right
out
out
of
of
the
the
gate.
gate
After
after
that,
that
we
we
can
can
create
create
the
the
login
login
component
component
which
which
is
is
the
the
smart
smart
component
component
that
that
does
does
the
the
actual
actual
interaction
interaction
with
with
Firebase.
firebase
Now
now
the
the
interesting
interesting
thing
thing
about
about
Svelte
svelte
is
is
that
that
the
the
shape
shape
of
of
the
the
stores
stores
are
are
similar
similar
to
to
the
the
shape
shape
of
of
RxJS
rxjs
observables.
observables
So
so
that
that
means
means
we
we
can
can
use
use
some
some
of
of
that
that
syntactic
syntactic
sugar
sugar
on
on
RxJS
rxjs
observables
observables
in
in
addition
addition
to
to
Svelte
svelte
stores.
stores
Currently,
currently
I'm
i'm
grabbing
grabbing
the
the
auth
auth
state
state
observable
observable
from
from
RX
rx
fire
fire
and
and
just
just
subscribing
subscribing
to
to
it
it
manually,
manually
but
but
we'll
we'll
refactor
refactor
this
this
in
in
a
a
minute.
minute
And
and
I'll
i'll
also
also
define
define
a
a
function
function
here
here
to
to
trigger
trigger
the
the
pop
pop
up
up
that
that
will
will
allow
allow
the
the
user
user
to
to
log
log
in
in
with
with
Google,
google
and
and
that
that
will
will
cause
cause
the
the
value
value
of
of
the
the
auth
auth
state
state
observable
observable
to
to
change.
change
Now
now
we
we
can
can
go
go
down
down
to
to
the
the
template
template
and
and
create
create
an
an
if
if
else
else
statement.
statement
And
and
if
if
we
we
have
have
a
a
user
user
logged
logged
in,
in
we'll
we'll
go
go
ahead
ahead
and
and
display
display
that
that
user
user
profile
profile
component
component
and,
and
of
of
course,
course
use
use
that
that
spread
spread
syntax
syntax
to
to
pass
pass
the
the
props
props
down.
down
And
and
if
if
the
the
user
user
is
is
not
not
logged
logged
in,
in
we'll
we'll
just
just
show
show
a
a
button
button
that
that
can
can
trigger
trigger
that
that
login
login
function.
function
At
at
this
this
point,
point
we
we
have
have
a
a
fully
fully
working
working
auth
auth
system,
system
but
but
we
we
can
can
actually
actually
refactor
refactor
this
this
a
a
little
little
bit
bit
to
to
use
use
some
some
of
of
Svelte's
svelte's
built
built
in
in
syntactic
syntactic
sugar.
sugar
This
this
time,
time
we'll
we'll
define
define
the
the
user
user
as
as
the
the
observable
observable
itself
itself
and
and
then
then
we'll
we'll
just
just
go
go
ahead
ahead
and
and
use
use
that
that
dollar
dollar
sign
sign
syntax
syntax
to
to
unwrap
unwrap
the
the
observable
observable
directly
directly
in
in
the
the
template.
template
Late.
late
That'll
that'll
work
work
inside
inside
the
the
if
if
condition
condition
and
and
also
also
works
works
inside
inside
the
the
spread
spread
syntax.
syntax
And
and
now
now
we
we
have
have
a
a
login
login
component
component
that
that
will
will
manage
manage
our
our
subscription
subscription
automatically
automatically
with
with
almost
almost
no
no
boilerplate.
boilerplate
Now
now
it's
it's
time
time
to
to
move
move
on
on
to
to
the
the
to
to
do
do
list.
list
Each
each
of
of
the
the
individual
individual
to
to
do
do
items
items
will
will
be
be
represented
represented
by
by
this
this
dumb
dumb
component
component
called
called
to
to
do
do
item.
item
But
but
instead
instead
of
of
just
just
displaying
displaying
data,
data
it's
it's
also
also
going
going
to
to
emit
emit
custom
custom
events
events
up
up
to
to
the
the
parent
parent
component.
component
So
so
this
this
is
is
a
a
way
way
to
to
pass
pass
data
data
from
from
a
a
child
child
component
component
back
back
up
up
to
to
the
the
parent.
parent
And
and
in
in
this
this
case,
case
we're
we're
doing
doing
that
that
so
so
we
we
can
can
tell
tell
the
the
parent
parent
component
component
when
when
to
to
remove
remove
the
the
item
item
from
from
the
the
database
database
or
or
when
when
to
to
update
update
the
the
status
status
in
in
the
the
database.
database
Svelte
svelte
has
has
a
a
thing
thing
called
called
an
an
event
event
batcher,
batcher
which
which
will
will
create
create
a
a
custom
custom
event
event
in
in
the
the
DOM
dom
for
for
you.
you
In
in
this
this
case,
case
when
when
we
we
want
want
to
to
remove
remove
an
an
item,
item
we'll
we'll
dispatch
dispatch
an
an
event
event
called
called
remove
remove
with
with
that
that
item's
item's
ID
id
in
in
the
the
database.
database
And
and
then
then
we'll
we'll
do
do
a
a
similar
similar
thing
thing
to
to
toggle
toggle
the
the
status
status
of
of
a
a
to
to
do
do
item,
item
but
but
this
this
time
time
we'll
we'll
pass
pass
the
the
ID
id
as
as
well
well
as
as
the
the
new
new
status
status
that
that
the
the
item
item
should
should
change
change
to.
to
Now
now
I'm
i'm
defining
defining
a
a
CSS
css
class
class
that
that
will
will
show
show
when
when
an
an
item
item
is
is
complete.
complete
And
and
I'm
i'm
going
going
to
to
make
make
sure
sure
that
that
that
that
class
class
name
name
is
is
the
the
same
same
of
of
the
the
property
property
that
that
toggles
toggles
that
that
class,
class
which
which
is
is
the
the
boolean
boolean
value
value
of
of
complete
complete
on
on
this
this
component.
component
And
and
we
we
might
might
as
as
well
well
just
just
add
add
a
a
transition
transition
to
to
this
this
item
item
when
when
it's
it's
created
created
so
so
it
it
kind
kind
of
of
slides
slides
in
in
from
from
the
the
right,
right
and
and
we
we
can
can
easily
easily
do
do
that
that
by
by
simply
simply
using
using
Svelte's
svelte's
transition
transition
directive.
directive
From
from
there,
there
we
we
can
can
go
go
ahead
ahead
and
and
add
add
the
the
text
text
inside
inside
the
the
list
list
item
item
and
and
when
when
it's
it's
complete,
complete
we
we
want
want
to
to
show
show
that
that
CSS
css
class.
class
Svelte
svelte
has
has
a
a
built
built
in
in
class
class
directive
directive
which
which
we
we
can
can
use
use
like
like
this
this
by
by
pointing
pointing
it
it
to
to
the
the
complete
complete
property.
property
But
but
if
if
the
the
CSS
css
class
class
and
and
the
the
property
property
both
both
share
share
the
the
same
same
name,
name
which
which
they
they
do
do
in
in
this
this
case,
case
we
we
can
can
actually
actually
make
make
this
this
even
even
more
more
concise
concise
like
like
so.
so
Now
now
the
the
last
last
thing
thing
we'll
we'll
do
do
in
in
this
this
component
component
is
is
create
create
our
our
buttons
buttons
that
that
will
will
dispatch
dispatch
the
the
custom
custom
events.
events
We
we
have
have
3
3
different
different
buttons
buttons
here.
here
2
2
of
of
those
those
are
are
used
used
to
to
toggle
toggle
status
status
and
and
the
the
other
other
one
one
is
is
used
used
to
to
remove
remove
the
the
item.
item
And
and
now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
the
the
final
final
component
component
of
of
this
this
app
app
which
which
is
is
the
the
to
to
dos
dos
list.
list
I'm
i'm
not
not
going
going
to
to
talk
talk
too
too
much
much
about
about
the
the
Firebase
firebase
code.
code
Basically,
basically
we're
we're
just
just
making
making
a
a
reference
reference
to
to
the
the
collection
collection
in
in
the
the
database
database
and
and
then
then
making
making
a
a
query
query
for
for
all
all
of
of
the
the
to
to
do
do
items
items
that
that
are
are
seeded
seeded
with
with
the
the
logged
logged
in
in
user's
user's
user
user
ID.
id
Then
then
we're
we're
going
going
to
to
use
use
the
the
collection
collection
data
data
function
function
from
from
RX
rx
fire,
fire
which
which
takes
takes
that
that
query
query
and
and
converts
converts
it
it
to
to
an
an
observable
observable
of
of
the
the
document
document
data.
data
But
but
in
in
order
order
to
to
work
work
with
with
an
an
each
each
loop
loop
in
in
Svelte,
svelte
we'll
we'll
also
also
want
want
to
to
pipe
pipe
in
in
start
start
with
with
and
and
that
that
will
will
guarantee
guarantee
that
that
the
the
observable
observable
always
always
has
has
a
a
synchronous
synchronous
array
array
to
to
start
start
good.
good
From
from
there,
there
we'll
we'll
define
define
the
the
update
update
status
status
method
method
which
which
will
will
take
take
the
the
custom
custom
event
event
that's
that's
being
being
emitted
emitted
by
by
the
the
child
child
component
component
and
and
use
use
it
it
to
to
make
make
an
an
update
update
to
to
the
the
Firestore
firestore
database.
database
And
and
then
then
we'll
we'll
do
do
the
the
same
same
basic
basic
thing
thing
to
to
handle
handle
the
the
remove
remove
event.
event
Now
now
if
if
we
we
go
go
down
down
to
to
the
the
template,
template
we'll
we'll
set
set
up
up
an
an
each
each
loop
loop
and
and
notice
notice
that
that
I
i
put
put
a
a
dollar
dollar
sign
sign
in
in
front
front
of
of
the
the
to
to
dos
dos
observable.
observable
This
this
will
will
unwrap
unwrap
the
the
observable
observable
automatically,
automatically
manage
manage
the
the
subscription,
subscription
and
and
then
then
react
react
to
to
any
any
new
new
changes
changes
whether
whether
they
they
happen
happen
client
client
side
side
or
or
on
on
the
the
server.
server
Then
then
we
we
can
can
pass
pass
our
our
props
props
down
down
to
to
the
the
to
to
do
do
item
item
component
component
and
and
then
then
we
we
can
can
also
also
listen
listen
to
to
the
the
custom
custom
events
events
that
that
we
we
define
define
on
on
that
that
component
component
as
as
well.
well
So
so
instead
instead
of
of
just
just
doing
doing
a
a
simple
simple
on
on
click
click
event
event
here
here
we're
we're
doing
doing
on
on
remove
remove
and
and
on
on
toggle.
toggle
Again,
again
those
those
are
are
custom
custom
events
events
defined
defined
in
in
the
the
child
child
component.
component
And
and
then
then
the
the
very
very
last
last
thing
thing
we'll
we'll
do
do
is
is
set
set
up
up
a
a
form
form
input
input
using
using
the
the
bind
bind
value
value
directive
directive
and
and
then
then
set
set
up
up
a
a
button
button
that
that
will
will
add
add
that
that
item
item
to
to
the
the
database
database
when
when
clicked.
clicked
And
and
that's
that's
all
all
there
there
is
is
to
to
it.
it
We
we
now
now
have
have
a
a
reactive
reactive
real
real
time
time
to
to
do
do
app.
app
Overall,
overall
I've
i've
been
been
super
super
impressed
impressed
with
with
Svelte.
svelte
The
the
only
only
thing
thing
that
that
I
i
think
think
is
is
missing
missing
at
at
this
this
point
point
is
is
TypeScript
typescript
support.
support
But
but
from
from
what
what
I
i
understand,
understand
there
there
should
should
be
be
TypeScript
typescript
support
support
in
in
the
the
near
near
future.
future
I
i
think
think
what
what
impresses
impresses
me
me
the
the
most
most
about
about
Svelte
svelte
is
is
that
that
the
the
abstractions
abstractions
are
are
really
really
well
well
thought
thought
out,
out
but
but
but
but
they
they
don't
don't
take
take
you
you
too
too
far
far
away
away
from
from
vanilla
vanilla
JavaScript
javascript
or
or
native
native
DOM
dom
APIs.
apis
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Let
let
me
me
know
know
what
what
you
you
think
think
about
about
Svelte
svelte
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
Svelte, a web framework that generates all of your code at build time, provides a flexible and responsive framework for building Svelte apps. The use of Svelte's birthday function, response to random numbers, and birthday function in building dynamic Svelte apps are discussed. The importance of Svelte as a full working authoring system is emphasized, along with the use of Svelte's to do list and the use of Svelte's to do input and form input. A new component, tiled, is introduced to show properties and allow for easy access to the current value and new values in the stream. The speaker emphasizes the importance of making Svelte a full working authoring system and introduces TypeScript support and to dos input and form input.
Svelte 3 Reaction & QuickStart Tutorial
Just when I discovered the meaning of life, they changed. One of my favorite things about JavaScript is that the status quo never seems to last very long. React, Angular, and Vue have dominated the mindshare of developers over the last few years. Svelte has been around for a while, but they just released version 3 last week and my initial experience with it has been very positive and that's mostly because it empowers you to solve problems with less code. In the first half of this video, we'll cover the basic concepts in Svelte and in the process this. You'll see why it's such an awesome tool. In the second half of the video, we'll build a real time to do list with Svelte and Firebase from scratch. If you're new here, like and subscribe and you can find the full source code on Fireship IO. Now, before you jump into Svelte, I'd recommend watching this talk from its creator, Rich Harris. That's what really got me excited to start learning Svelte 3. Let's go ahead and just jump right into things. Will run npx dig it and then point to the Svelte JS template. This is the equivalent to create react app or ng new. Go ahead and open it up in Versus Code and run npm install. Then you can run npm dev to serve it locally. And that should give you this hello world on local host 5000. The first thing you'll see is the rollupconfig.js. This is what bundles your code and it's an turnative to webpack. Personally, I prefer to use Rollup, but you can also use webpack here if you want. And while we're talking about bundling, there's 2 things you should know and that's that Svelte supports server side rendering as well as native web components or custom elements. So that's cool, but so far this might just look like another JavaScript a framework, but if we go into the package. Json, we can see that something's different here. What's missing is dependencies. We only have development dependencies and that's because Svelte is a compiler. There. It generates all of your code at build time, which means it doesn't need to include the framework itself as a hard dependency in your JavaScript bundle. Another framework that also does this is StencilJS and I feel like this approach makes a lot more sense than the current status quo. And that's because you only need to compile the JavaScript from the framework that you actually need so you don't have any extra bloat in your JavaScript bundle. What I'm doing right now is just exporting our entire app as a string, and then if we go to the bundled output, you can see that it's just a function that returns a string. So in theory, this should result in smaller bundle sizes or at least bundles that are optimized for the code that you actually use if you're using tree shakeable libraries. That's what makes Svelte fundamentally different than the status quo, but we've only just hit the tip of the iceberg here. It's also unique in the way that it handles reactivity. If we go into the app component, we'll see a script up here at top. That's where we keep our main JavaScript logic. And then we have a style tag. All the styles will be scoped to this component. And another cool thing about the compiler is that it will automatically eliminate all of your unused CSS styles from the CSS bundle. And then after that, we have our markup, and Svelte has its own templating syntax for adding logic to your HTML. This is a similar approach to Angular and Vue but differs from React which uses JSX. Now, the difference with JSX is that you're taking your HTML and putting it inside of JavaScript and letting the JavaScript handle the logic. This can be a very divisive topic and it's really just a matter of opinion, but I just find I'm more productive by putting the logic in the HTML like we do with Angular, Vue, and Svelte. Now if we go up into the script, you'll notice I have export let name. Using the export keyword in front of a variable means that it can be passed down from a parent component. If we leave the export keyword off, it basically means we have a private variable that can only be used inside of this component. Now, the cool thing about Svelte is that it's reactive based on the assignment of a variable. We'll create a variable here for a random number and then create a function that can reassign that variable. So now that we have this function, we need to bind it to an event in the DOM. You can bind to events by doing on colon click or on colon whatever DOM event you want to bind to. This is very similar to all other frameworks. We pass in the function and it's going to call that function with the event passed as the argument. So that's going to change the random number and then we can show it in the template by wrapping it in braces. Now we have an app that reacts to this randomized button. Whenever we click it, we get a new random number. But what happens if we need to compute a different value from this random number? Let's say if it rounds to 1, it'll be a winner. If it rounds to 0, it'll be a loser. The simple solution is just to write that expression directly in the template, and Svelte will rerun this logic every time the reactive value changes. But this isn't going to scale very well because we can't reuse this logic. If we want to show that same value somewhere else in the template. We'd have to duplicate that code. Fortunately, Svelte has a very cool trick up its sleeve for computed values. We'll define a new variable, but instead of using let, to will use this dollar sign colon syntax. Believe it or not, this is valid vanilla JavaScript and it's basically just a way to tell Svelte to recalculate this value when the app reacts. Now we can go back into our template and simply reuse the result computed value as many times as we want. Now speaking of reactivity, another thing we can do is bind to the attributes on DOM elements. For example, if we want to bind to the value attribute on a form input, we can do that with this bind directive and then use our random variable. Old. If we start typing in the form, you'll see how the value itself is recomputed every time we type a new value. Now currently, our computed result is a string, but but let's go ahead and change that to a number and then we'll show an entirely different template based on some conditional logic. The new computed value will give us a number between 1 and 100, and we can show a template conditionally by using this if syntax. And we can also throw an else if if we have multiple conditions and then else for the default value. And then we'll just add some DOM elements in between these conditions and that will recompute the template every time our random number changes. So that's pretty standard stuff but bad. Now I wanna show you something that you're not going to find in other frameworks. Let's go ahead and import fade and fly from svelte transition. These are directives that will allow you to automatically compute CSS animations based on the logic in your template. So if you want something to fade in and fade out when added or moved to the DOM. You can just add this transition fade directive and everything will just happen automatically. But let's say we want our poop emojis to fly in from the right and then fly out to the left. Left. Normally, this would take some careful thought about your CSS animations or you might use a JavaScript animation library. But in Svelte, we can use the directives to keep the animation logic tied directly to the DOM element that's being animated, and then we can add our own properties to it to customize the way it behaves. And that gives us poop flying all over the screen, which is the effect we're going warped, and there's even a directive specifically for SVG graphics that will draw the path along the shape. So that's really awesome stuff, but there's still a couple of other fundamental things that I wanna show you before we the full demo. Earlier, I mentioned that Svelte is reactive based on assignment. So if we have an array and then we push new items to the array, we won't get any actual changes in the DOM. That's because we're just mutating the array and we're not actually reassigning the variable. So if you want the app to react to changes to an array or to an object, it's generally a good idea to use the spread syntax. This code here will do the same thing as array push, but it will also reassign the variable causing the app to react and update the DOM. Now when working at the rays, you'll probably want to loop over them and to lay some DOM elements for each item. We can do that by using each, which will give us access to both the value and the index of each item in the array. When we build out our full demo, you'll also see that each loops work with asynchronous values similar to the async pipe in Angular. And speaking of asynchronous values, Svelte has a really cool way of handling promises. I have a helper function here that just creates a delay, and then I'm defining our random value as a promise that resolves to a random number after that delay. When working with promises, there's generally 3 things that happen. First, you're in some kind of loading state waiting for the promise to resolve, then you get a value or maybe you get an error and need to show some kind of error message. In Svelte, you can await a promise directly in the template, and this will also handle things like race conditions for you automatically. The first section is where you would put your loading spinner while the promise is being resolved, then you show the actual result or you catch the error and show an error message. And that provides a very readable and intuitive way to handle promises in my opinion. It's actually very similar to a future builder in Flutter if there's any Flutter developers watching at this point. Now we're going to switch gears into Svelte stores which behave very similar to RxJS Observables. And they can be shared anywhere in the component tree so you have a very easy mechanism for sharing data anywhere in your app. Let's go ahead and create a writable store and it's very similar to a behavior subject in RxJS, at least in terms of its API. First, we can pass it a default value and then we can set the value directly by calling set or we can call update to get access to the current value and then compute a new value in the stream, which which we can do with this callback function, which gives us the current value, then we return the next value. And if we just want to listen to the value, we just subscribe to it. But if you've worked with observables, then you know that you need to manage your subscriptions carefully. Otherwise, you could end up with memory leaks. If we go back into our component, the first thing that we'll do is import the random store that we just created. We could subscribe to that directly in the JavaScript, but then we would have to dispose of it once this component is destroyed. That leads to a lot of boilerplate and also a lot of potential for error. But notice how I have this dollar sign in front of the store value itself. This will tell the compiler to automatically subscribe to the value and also manage the subscription automatically. And now we can push new values to the stream from any component anywhere in the app. That will solve a lot of your complex data sharing situations, but you can also just pass props directly between a parent and child component. I went ahead and created a new component called tiled and it's just a dumb component that displays some properties. Now we'll go back up to our app component and pass some properties down to this child. Let's imagine we have this data object here that we pulled from a database or something. Now we can go and declare our child component and just pass in each property 1 by 1. But even after just 3 simple properties, it's starting to become kind of hard to read. But Svelte has yet another little piece of magic that will make this code much nicer. There. You can simply send all of your props down to the child using the spread syntax. So now that you know some of the basic concepts in Svelte, I want to put everything together into a full working demo. In in just a few minutes, we'll be able to build this real time to do list that also includes user authentication and even some animation. Once a user is logged in, they'll be able to fill out this form with some information about the to do that'll be saved to Firestore and they can toggle it complete or incomplete or delete it. And, of course, everything will stay synced up with the back end database. We'll be using RX Fire for this demo, which you can install with the following command. The first thing we'll do is create a file called firebasejs just used to initialize Firebase, and you'll need to use the credentials from your own Firebase project. We'll be going through this code very quickly, so make sure to follow along with the source code on Fireship IO. But, basically, the purpose of this file is just to initialize the app and then export auth and the Firestore database so we can use them in other files. From there, we'll go into the app component and we just have a few small changes to make here. We'll import this login component which we'll create next. And with Svelte, you'll notice that there's no index HTML that you can mess with. So instead, what you can do is use this Svelte colon head tag to add additional things to the head of the document. In this demo, I'm using the Bulma CSS framework just so we have some better base styles to work with. After that, we'll build our auth feature so the user has a way to log in. I'm creating a profile component, which will just be a dumb presentational component to show the user's display name, photo URL, and user ID. And another cool side note here is that felt will automatically warn you for accessibility issues. For example, if we leave out the alt attribute, it's going to warn us to add 1. You can also do this in ESLint but it's nice to just have this stuff working right out of the gate. After that, we can create the login component which is the smart component that does the actual interaction with Firebase. Now the interesting thing about Svelte is that the shape of the stores are similar to the shape of RxJS observables. So that means we can use some of that syntactic sugar on RxJS observables in addition to Svelte stores. Currently, I'm grabbing the auth state observable from RX fire and just subscribing to it manually, but we'll refactor this in a minute. And I'll also define a function here to trigger the pop up that will allow the user to log in with Google, and that will cause the value of the auth state observable to change. Now we can go down to the template and create an if else statement. And if we have a user logged in, we'll go ahead and display that user profile component and, of course, use that spread syntax to pass the props down. And if the user is not logged in, we'll just show a button that can trigger that login function. At this point, we have a fully working auth system, but we can actually refactor this a little bit to use some of Svelte's built in syntactic sugar. This time, we'll define the user as the observable itself and then we'll just go ahead and use that dollar sign syntax to unwrap the observable directly in the template. Late. That'll work inside the if condition and also works inside the spread syntax. And now we have a login component that will manage our subscription automatically with almost no boilerplate. Now it's time to move on to the to do list. Each of the individual to do items will be represented by this dumb component called to do item. But instead of just displaying data, it's also going to emit custom events up to the parent component. So this is a way to pass data from a child component back up to the parent. And in this case, we're doing that so we can tell the parent component when to remove the item from the database or when to update the status in the database. Svelte has a thing called an event batcher, which will create a custom event in the DOM for you. In this case, when we want to remove an item, we'll dispatch an event called remove with that item's ID in the database. And then we'll do a similar thing to toggle the status of a to do item, but this time we'll pass the ID as well as the new status that the item should change to. Now I'm defining a CSS class that will show when an item is complete. And I'm going to make sure that that class name is the same of the property that toggles that class, which is the boolean value of complete on this component. And we might as well just add a transition to this item when it's created so it kind of slides in from the right, and we can easily do that by simply using Svelte's transition directive. From there, we can go ahead and add the text inside the list item and when it's complete, we want to show that CSS class. Svelte has a built in class directive which we can use like this by pointing it to the complete property. But if the CSS class and the property both share the same name, which they do in this case, we can actually make this even more concise like so. Now the last thing we'll do in this component is create our buttons that will dispatch the custom events. We have 3 different buttons here. 2 of those are used to toggle status and the other one is used to remove the item. And now we're ready to move on to the final component of this app which is the to dos list. I'm not going to talk too much about the Firebase code. Basically, we're just making a reference to the collection in the database and then making a query for all of the to do items that are seeded with the logged in user's user ID. Then we're going to use the collection data function from RX fire, which takes that query and converts it to an observable of the document data. But in order to work with an each loop in Svelte, we'll also want to pipe in start with and that will guarantee that the observable always has a synchronous array to start good. From there, we'll define the update status method which will take the custom event that's being emitted by the child component and use it to make an update to the Firestore database. And then we'll do the same basic thing to handle the remove event. Now if we go down to the template, we'll set up an each loop and notice that I put a dollar sign in front of the to dos observable. This will unwrap the observable automatically, manage the subscription, and then react to any new changes whether they happen client side or on the server. Then we can pass our props down to the to do item component and then we can also listen to the custom events that we define on that component as well. So instead of just doing a simple on click event here we're doing on remove and on toggle. Again, those are custom events defined in the child component. And then the very last thing we'll do is set up a form input using the bind value directive and then set up a button that will add that item to the database when clicked. And that's all there is to it. We now have a reactive real time to do app. Overall, I've been super impressed with Svelte. The only thing that I think is missing at this point is TypeScript support. But from what I understand, there should be TypeScript support in the near future. I think what impresses me the most about Svelte is that the abstractions are really well thought out, but but they don't take you too far away from vanilla JavaScript or native DOM APIs. I'm gonna go ahead and wrap things up there. Let me know what you think about Svelte in the comments. Thanks for watching and I will talk to you soon.
Svelte, a web framework that generates all of your code at build time, provides a flexible and responsive framework for building Svelte apps. The use of Svelte's birthday function, response to random numbers, and birthday function in building dynamic Svelte apps are discussed. The importance of Svelte as a full working authoring system is emphasized, along with the use of Svelte's to do list and the use of Svelte's to do input and form input. A new component, tiled, is introduced to show properties and allow for easy access to the current value and new values in the stream. The speaker emphasizes the importance of making Svelte a full working authoring system and introduces TypeScript support and to dos input and form input.