I built a simple app with 10 different JavaScript frameworks... Learn the pros and cons of each JS framework before building your next app https://github.com/fireship-io/10-javascript-frameworks

#javascript #webdev #top10

🔗 Resources

Full Courses https://fireship.io/courses/
Performance Benchmarks https://github.com/krausest/js-framework-benchmark
Source code https://github.com/fireship-io/10-javascript-frameworks

📚 Chapters

00:00 JavaScript Frameworks
00:53 1. Vanilla
04:21 2. React
07:48 3. Angular
10:15 4. Vue
12:18 5. Svelte
14:16 6. Lit
16:11 7. Stencil
17:18 8. Solid
18:35 9. Alpine
20:17 10. Mithril

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:00:50.417Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c834ede7-27e5-4e81-82f3-db99473d8f87
7b2dc0dfae7505ae0b7f7282fb6283266e02386e7f00431852906b744571990f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Which JavaScript framework is the best?
If we go off of downloads, React wins, but based on GitHub stars, Vue is the best.
But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework.
And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code.
There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them.
In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla.
In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project.
This video was a ton of work, so make sure to subscribe and hit the like button.
Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week.
The first thing we'll do is build a basic to do app with vanilla JavaScript.
About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all.
Any expert web developer needs to have a solid understanding of Vanilla JS.
But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster.
What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework.
To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body.
What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list.
In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present.
Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about.
The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically.
In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM.
And I can tell you right now, this is a very annoying way to build a complex application.
As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form.
Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM.
Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list.
In addition to keeping track of the data, we also need to update the actual UI when that data changes.
For that, I'm defining a function called add to do that takes a new to do item as its argument.
Now this is where things start to get ugly with Vanilla.
In order to update the UI, we need to manually create a new list item element by calling document create element.
Then we need to imperatively update its inner HTML to the to do text.
And finally, append it to the unordered list in the DOM.
And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed.
The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI.
Sigh.
Now that we have this function in place, we need a way to call it when the user submits the form.
For that, we need to register an event listener on the form's comes on submit event.
When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input.
At this point, we should have a working to do list.
But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing.
There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application.
Now, one final thing to think about is the application life cycle.
When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist.
If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them.
Congratulations.
You just built a to do app with vanilla JS.
But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch.
And that's why the vast majority of developers choose to build their apps with a framework.
1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way.
I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI.
React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on.
It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable.
Slow.
React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars.
Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with.
React has an official CLI called create react app.
We can create a new React project by running the create act app command from the terminal.
Now it's worth noting that many people opt for other tools when building a React project like Next.
Js or Gatsby that would replace the default CLI.
When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally.
Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file.
In React and most other frameworks, your application is organized as a tree of components.
These components encapsulate parts of the UI and have ways to communicate with each other.
This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same.
Now in the app JS file, you'll first notice a function called app.
That function represents a component in the UI, and personally, I love the simplicity of that.
Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML.
For the to do list, we can define reactive state on the component with the use state hook.
The hook is just a function that will return us with 2 values.
The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state.
And then the second item is a function to update the state.
Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item.
Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit.
Then on the right side of it, we can reference a function that will be called whenever where the submit event fires.
And that function will update the state and store the result in local storage.
You'll also notice that I'm using the use ref hook to grab the current value of the form input.
One thing to notice here is that the HTML is a lot more descriptive.
We know exactly which elements our data and events are bound to.
Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized.
This hook can be really confusing though if you're just getting started.
To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook.
In any case, React is the gold standard for declarative UI frameworks.
But there's more than one way to get the job done.
Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project.
It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm.
It comes with officially supported libraries for routing, animation, and server side rendering.
And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them.
In fact, you are actually required to use TypeScript.
Google uses it internally to build hundreds of different web apps throughout their product line.
It's a great option for big teams, but maybe a little overwhelming if you're a beginner.
To an Angular project, run ng new from the command line.
That'll give us a fairly large project to get started that's already configured with TypeScript.
We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically.
In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin.
And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it.
Now it is possible to define an entire component in this TS file.
However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS.
To add reactive state to the component, simply define a property on the class.
From there, we can define a method on the class to update the state.
In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init.
This method will be called whenever that component is first initialized.
Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive.
Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML.
Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired.
Then to get the actual value from the form input, we can use two way data binding using the ng model directive.
This binds the form value to the to do text property on the class.
However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work.
And for that reason, among many others, it tends to have a much higher learning curve than other frameworks.
But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications.
Since and that brings me to Vue.
Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers.
It has official packages for things like routing and state management and a huge ecosystem of third party packages.
It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads.
Vue also has a very powerful CLI.
Why?
For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app.
This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI.
You'll notice it generates a far more simplified project structure.
But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed.
Components are defined in files that end in dot Vue.
The code is organized into 3 parts, a template, a script, and the styles.
The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty.
Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered.
Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized.
Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class.
In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission.
One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve.
You'll find a lot of little things like that in Vue that make your life easier.
And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte.
It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars.
It's not as common as the other 3 in the wild, but is very well loved by the people who do use it.
Like React, it's designed as a minimal library and relies on the open source community for other features like routing.
One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser.
Instead, it works as a compiler to turn your code into plain JavaScript.
When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you.
When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you.
Components are defined in dot Svelte files.
And just like Vue, they have 3 parts, the script, the template, and the styles.
To create reactive state on the component, just declare a variable with the let keyword.
Then to modify the state, define a plain JavaScript function.
What I like about this is that it feels very natural.
Scroll.
It looks like regular JavaScript with minimal abstractions going on compared to something like React.
Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized.
Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array.
Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function.
And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable.
In my opinion, this is the cleanest implementation that we've looked at.
It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before.
The drawback though is that the community is much smaller than something like React.
So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework.
And the same goes for all the other frameworks that we'll look at from here starting with lit.
Lit is a Google sponsored project that's focused on building web components.
If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks.
Sounds great, but the web components API is notoriously difficult to work with.
The cool thing about split is that when you define a component, it's creating a standard custom element under the hood.
Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components.
Litt doesn't have a CLI of its own, but there is a starter project to get us going.
I'm using the TypeScript version here, but that part is optional.
Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser.
That's just a unique point that you won't see in other frameworks by default.
Components themselves are defined as a class that extends LitElement.
Reactive data can be defined as properties on the class using that property decorator.
Then methods can be defined on the class to update the state.
Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback.
By implementing the connectedCallback method, we can run code when the component is first initialized.
Now one thing that's really interesting about Lit is the way that it handles templates.
It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks.
This allows you to interpolate JavaScript into an HTML string using dollar sign braces.
The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value.
And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires.
The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs.
And that brings me to an alternative framework that is also focused on web components called Stencil.
This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil.
They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started.
Just like lit, it will take each component and compile it down to a standard web component.
A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator.
Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized.
At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React.
That gives you the best or worst of both worlds depending on who you ask.
The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form.
Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS.
It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM.
Instead, compiles your code down to native DOM nodes similar to Svelte.
And because of this, it hits very high performance marks across every benchmark.
You can think of it like a faster, faster, more developer friendly version of React.
But the drawback is that it has a smaller community to draw from.
When you generate a new project, it uses Vite as the build tool, which is cool.
Then then you have components defined in JSX files just like React.
Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal.
It returns us with a reactive value and a function to update that value.
We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized.
Now for the UI itself, we use JSX.
It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier.
For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that.
Overall, SolidJS feels like a more well thought out and faster version of React.
But now let's look at something totally different, Alpine JS.
It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at.
Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML.
If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript.
It has over 17,000 GitHub stars and is a popular replacement for jQuery.
To get started, create an HTML file, then add the alpine script to the head.
Reactive data can be stored directly in a DOM node using the x data attribute.
That data can then be used in a child element with something like x4 to loop over the array of to dos.
Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript.
The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX.
Now, if we do want to write some plain JavaScript, we can do that in a script tag.
And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI.
That's what we'll need to do for our to dos so that we can load them from local storage.
To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires.
And that gives us a complete app with very minimal code.
In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page.
But at the same time, I don't think Alpine could replace something like React, Vue, or Angular.
So if you're building a very complicated single page application, it might be best to stick with one of those.
And that brings us to the final wildcard framework, Mythril.
It's also very wait and tends to perform better than the big frameworks.
It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different.
To get started, create an index HTML file, then add the mithril script tag to it.
You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object.
We can add data and methods to the component as properties on the object.
There are also special properties like on init, which is the life cycle hook for when the component is first initialized.
Then we have view to define the UI itself.
To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items.
Then down on the form element, we're defining a handler for the on submit event.
What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript.
If you hate HTML and never want to touch it, you might like this system.
But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build.
But like I said before, it really comes down to personal preference and I could see why someone would really like this.
And there you have 10 different ways to build the exact same JavaScript app.
There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing.
It's really just a matter of choosing the one that makes you and your teammates happy.
If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses.
Thanks for watching, and I will see you in the next one.

Speaker 0: Which JavaScript framework is the best? If we go off of downloads, React wins, but based on GitHub stars, Vue is the best. But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework. And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code. There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them.

In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla. In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project. This video was a ton of work, so make sure to subscribe and hit the like button. Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week. The first thing we'll do is build a basic to do app with vanilla JavaScript.

About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all. Any expert web developer needs to have a solid understanding of Vanilla JS. But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster. What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework. To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body.

What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list. In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present. Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about. The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically. In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM.

And I can tell you right now, this is a very annoying way to build a complex application. As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form. Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM. Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list. In addition to keeping track of the data, we also need to update the actual UI when that data changes.

For that, I'm defining a function called add to do that takes a new to do item as its argument. Now this is where things start to get ugly with Vanilla. In order to update the UI, we need to manually create a new list item element by calling document create element. Then we need to imperatively update its inner HTML to the to do text. And finally, append it to the unordered list in the DOM.

And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed. The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI. Sigh. Now that we have this function in place, we need a way to call it when the user submits the form. For that, we need to register an event listener on the form's comes on submit event.

When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input. At this point, we should have a working to do list. But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing. There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application. Now, one final thing to think about is the application life cycle.

When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist. If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them. Congratulations. You just built a to do app with vanilla JS. But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch.

And that's why the vast majority of developers choose to build their apps with a framework. 1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way. I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI. React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on. It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable.

Slow. React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars. Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with. React has an official CLI called create react app. We can create a new React project by running the create act app command from the terminal.

Now it's worth noting that many people opt for other tools when building a React project like Next. Js or Gatsby that would replace the default CLI. When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally. Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file. In React and most other frameworks, your application is organized as a tree of components.

These components encapsulate parts of the UI and have ways to communicate with each other. This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same. Now in the app JS file, you'll first notice a function called app. That function represents a component in the UI, and personally, I love the simplicity of that. Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML.

For the to do list, we can define reactive state on the component with the use state hook. The hook is just a function that will return us with 2 values. The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state. And then the second item is a function to update the state. Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item.

Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit. Then on the right side of it, we can reference a function that will be called whenever where the submit event fires. And that function will update the state and store the result in local storage. You'll also notice that I'm using the use ref hook to grab the current value of the form input. One thing to notice here is that the HTML is a lot more descriptive.

We know exactly which elements our data and events are bound to. Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized. This hook can be really confusing though if you're just getting started. To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook. In any case, React is the gold standard for declarative UI frameworks.

But there's more than one way to get the job done. Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project. It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm. It comes with officially supported libraries for routing, animation, and server side rendering. And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them.

In fact, you are actually required to use TypeScript. Google uses it internally to build hundreds of different web apps throughout their product line. It's a great option for big teams, but maybe a little overwhelming if you're a beginner. To an Angular project, run ng new from the command line. That'll give us a fairly large project to get started that's already configured with TypeScript.

We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically. In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin. And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it. Now it is possible to define an entire component in this TS file. However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS.

To add reactive state to the component, simply define a property on the class. From there, we can define a method on the class to update the state. In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init. This method will be called whenever that component is first initialized. Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive.

Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML. Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired. Then to get the actual value from the form input, we can use two way data binding using the ng model directive. This binds the form value to the to do text property on the class. However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work.

And for that reason, among many others, it tends to have a much higher learning curve than other frameworks. But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications. Since and that brings me to Vue. Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers. It has official packages for things like routing and state management and a huge ecosystem of third party packages.

It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads. Vue also has a very powerful CLI. Why? For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app. This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI.

You'll notice it generates a far more simplified project structure. But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed. Components are defined in files that end in dot Vue. The code is organized into 3 parts, a template, a script, and the styles. The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty.

Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered. Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized. Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class. In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission. One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve.

You'll find a lot of little things like that in Vue that make your life easier. And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte. It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars. It's not as common as the other 3 in the wild, but is very well loved by the people who do use it. Like React, it's designed as a minimal library and relies on the open source community for other features like routing.

One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser. Instead, it works as a compiler to turn your code into plain JavaScript. When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you. When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you. Components are defined in dot Svelte files.

And just like Vue, they have 3 parts, the script, the template, and the styles. To create reactive state on the component, just declare a variable with the let keyword. Then to modify the state, define a plain JavaScript function. What I like about this is that it feels very natural. Scroll.

It looks like regular JavaScript with minimal abstractions going on compared to something like React. Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized. Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array. Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function. And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable.

In my opinion, this is the cleanest implementation that we've looked at. It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before. The drawback though is that the community is much smaller than something like React. So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework. And the same goes for all the other frameworks that we'll look at from here starting with lit.

Lit is a Google sponsored project that's focused on building web components. If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks. Sounds great, but the web components API is notoriously difficult to work with. The cool thing about split is that when you define a component, it's creating a standard custom element under the hood. Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components.

Litt doesn't have a CLI of its own, but there is a starter project to get us going. I'm using the TypeScript version here, but that part is optional. Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser. That's just a unique point that you won't see in other frameworks by default. Components themselves are defined as a class that extends LitElement.

Reactive data can be defined as properties on the class using that property decorator. Then methods can be defined on the class to update the state. Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback. By implementing the connectedCallback method, we can run code when the component is first initialized. Now one thing that's really interesting about Lit is the way that it handles templates.

It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks. This allows you to interpolate JavaScript into an HTML string using dollar sign braces. The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value. And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires. The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs.

And that brings me to an alternative framework that is also focused on web components called Stencil. This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil. They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started. Just like lit, it will take each component and compile it down to a standard web component. A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator.

Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized. At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React. That gives you the best or worst of both worlds depending on who you ask. The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form. Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS.

It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM. Instead, compiles your code down to native DOM nodes similar to Svelte. And because of this, it hits very high performance marks across every benchmark. You can think of it like a faster, faster, more developer friendly version of React. But the drawback is that it has a smaller community to draw from.

When you generate a new project, it uses Vite as the build tool, which is cool. Then then you have components defined in JSX files just like React. Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal. It returns us with a reactive value and a function to update that value. We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized.

Now for the UI itself, we use JSX. It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier. For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that. Overall, SolidJS feels like a more well thought out and faster version of React. But now let's look at something totally different, Alpine JS.

It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at. Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML. If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript. It has over 17,000 GitHub stars and is a popular replacement for jQuery. To get started, create an HTML file, then add the alpine script to the head.

Reactive data can be stored directly in a DOM node using the x data attribute. That data can then be used in a child element with something like x4 to loop over the array of to dos. Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript. The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX. Now, if we do want to write some plain JavaScript, we can do that in a script tag.

And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI. That's what we'll need to do for our to dos so that we can load them from local storage. To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires. And that gives us a complete app with very minimal code. In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page.

But at the same time, I don't think Alpine could replace something like React, Vue, or Angular. So if you're building a very complicated single page application, it might be best to stick with one of those. And that brings us to the final wildcard framework, Mythril. It's also very wait and tends to perform better than the big frameworks. It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different.

To get started, create an index HTML file, then add the mithril script tag to it. You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object. We can add data and methods to the component as properties on the object. There are also special properties like on init, which is the life cycle hook for when the component is first initialized. Then we have view to define the UI itself.

To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items. Then down on the form element, we're defining a handler for the on submit event. What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript. If you hate HTML and never want to touch it, you might like this system. But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build.

But like I said before, it really comes down to personal preference and I could see why someone would really like this. And there you have 10 different ways to build the exact same JavaScript app. There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing. It's really just a matter of choosing the one that makes you and your teammates happy. If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses.

Thanks for watching, and I will see you in the next one.
Which JavaScript framework is the best? If we go off of downloads, React wins, but based on GitHub stars, Vue is the best. But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework. And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code. There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them.
In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla. In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project. This video was a ton of work, so make sure to subscribe and hit the like button.
animation
software
graphic design
software development
Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week. The first thing we'll do is build a basic to do app with vanilla JavaScript. About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all. Any expert web developer needs to have a solid understanding of Vanilla JS. But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster. What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework. To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body. What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list.
In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present. Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about.
data management
databases
data
The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically. In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM. And I can tell you right now, this is a very annoying way to build a complex application. As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form. Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM. Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list. In addition to keeping track of the data, we also need to update the actual UI when that data changes. For that, I'm defining a function called add to do that takes a new to do item as its argument. Now this is where things start to get ugly with Vanilla. In order to update the UI, we need to manually create a new list item element by calling document create element. Then we need to imperatively update its inner HTML to the to do text. And finally, append it to the unordered list in the DOM. And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed. The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI. Sigh. Now that we have this function in place, we need a way to call it when the user submits the form. For that, we need to register an event listener on the form's comes on submit event. When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input. At this point, we should have a working to do list. But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing. There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application.
Now, one final thing to think about is the application life cycle. When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist. If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them. Congratulations. You just built a to do app with vanilla JS. But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch. And that's why the vast majority of developers choose to build their apps with a framework. 1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way.
software development
software
programming
I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI. React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on. It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable. Slow. React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars. Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with.
React has an official CLI called create react app. We can create a new React project by running the create act app command from the terminal. Now it's worth noting that many people opt for other tools when building a React project like Next. Js or Gatsby that would replace the default CLI. When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally.
software development
Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file. In React and most other frameworks, your application is organized as a tree of components. These components encapsulate parts of the UI and have ways to communicate with each other.
programming
This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same. Now in the app JS file, you'll first notice a function called app. That function represents a component in the UI, and personally, I love the simplicity of that. Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML.
For the to do list, we can define reactive state on the component with the use state hook. The hook is just a function that will return us with 2 values. The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state.
programming
And then the second item is a function to update the state. Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item. Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit. Then on the right side of it, we can reference a function that will be called whenever where the submit event fires. And that function will update the state and store the result in local storage. You'll also notice that I'm using the use ref hook to grab the current value of the form input. One thing to notice here is that the HTML is a lot more descriptive. We know exactly which elements our data and events are bound to. Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized. This hook can be really confusing though if you're just getting started. To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook. In any case, React is the gold standard for declarative UI frameworks. But there's more than one way to get the job done. Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project.
It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm. It comes with officially supported libraries for routing, animation, and server side rendering. And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them. In fact, you are actually required to use TypeScript. Google uses it internally to build hundreds of different web apps throughout their product line. It's a great option for big teams, but maybe a little overwhelming if you're a beginner. To an Angular project, run ng new from the command line. That'll give us a fairly large project to get started that's already configured with TypeScript. We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically.
google
software
software development
In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin. And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it. Now it is possible to define an entire component in this TS file. However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS. To add reactive state to the component, simply define a property on the class. From there, we can define a method on the class to update the state. In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init. This method will be called whenever that component is first initialized. Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive. Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML. Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired. Then to get the actual value from the form input, we can use two way data binding using the ng model directive. This binds the form value to the to do text property on the class. However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work. And for that reason, among many others, it tends to have a much higher learning curve than other frameworks. But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications. Since and that brings me to Vue. Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers. It has official packages for things like routing and state management and a huge ecosystem of third party packages. It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads. Vue also has a very powerful CLI. Why? For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app.
This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI. You'll notice it generates a far more simplified project structure. But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed.
software development
Components are defined in files that end in dot Vue. The code is organized into 3 parts, a template, a script, and the styles. The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty. Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered. Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized. Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class. In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission.
One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve. You'll find a lot of little things like that in Vue that make your life easier. And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte.
systems
It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars. It's not as common as the other 3 in the wild, but is very well loved by the people who do use it. Like React, it's designed as a minimal library and relies on the open source community for other features like routing. One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser.
Instead, it works as a compiler to turn your code into plain JavaScript. When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you.
programming
software development
When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you. Components are defined in dot Svelte files. And just like Vue, they have 3 parts, the script, the template, and the styles. To create reactive state on the component, just declare a variable with the let keyword. Then to modify the state, define a plain JavaScript function. What I like about this is that it feels very natural. Scroll. It looks like regular JavaScript with minimal abstractions going on compared to something like React. Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized.
Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array. Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function.
programming
And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable. In my opinion, this is the cleanest implementation that we've looked at. It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before. The drawback though is that the community is much smaller than something like React. So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework. And the same goes for all the other frameworks that we'll look at from here starting with lit. Lit is a Google sponsored project that's focused on building web components. If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks. Sounds great, but the web components API is notoriously difficult to work with. The cool thing about split is that when you define a component, it's creating a standard custom element under the hood. Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components. Litt doesn't have a CLI of its own, but there is a starter project to get us going. I'm using the TypeScript version here, but that part is optional. Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser. That's just a unique point that you won't see in other frameworks by default. Components themselves are defined as a class that extends LitElement. Reactive data can be defined as properties on the class using that property decorator. Then methods can be defined on the class to update the state. Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback. By implementing the connectedCallback method, we can run code when the component is first initialized. Now one thing that's really interesting about Lit is the way that it handles templates. It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks. This allows you to interpolate JavaScript into an HTML string using dollar sign braces. The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value. And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires.
The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs. And that brings me to an alternative framework that is also focused on web components called Stencil. This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil. They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started.
graphic design
software development
architecture
Just like lit, it will take each component and compile it down to a standard web component. A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator. Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized. At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React. That gives you the best or worst of both worlds depending on who you ask. The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form. Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS. It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM. Instead, compiles your code down to native DOM nodes similar to Svelte. And because of this, it hits very high performance marks across every benchmark.
You can think of it like a faster, faster, more developer friendly version of React. But the drawback is that it has a smaller community to draw from. When you generate a new project, it uses Vite as the build tool, which is cool. Then then you have components defined in JSX files just like React.
software development
Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal. It returns us with a reactive value and a function to update that value. We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized. Now for the UI itself, we use JSX. It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier. For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that. Overall, SolidJS feels like a more well thought out and faster version of React. But now let's look at something totally different, Alpine JS. It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at. Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML. If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript. It has over 17,000 GitHub stars and is a popular replacement for jQuery. To get started, create an HTML file, then add the alpine script to the head. Reactive data can be stored directly in a DOM node using the x data attribute. That data can then be used in a child element with something like x4 to loop over the array of to dos. Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript. The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX. Now, if we do want to write some plain JavaScript, we can do that in a script tag. And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI. That's what we'll need to do for our to dos so that we can load them from local storage. To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires. And that gives us a complete app with very minimal code. In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page. But at the same time, I don't think Alpine could replace something like React, Vue, or Angular. So if you're building a very complicated single page application, it might be best to stick with one of those. And that brings us to the final wildcard framework, Mythril. It's also very wait and tends to perform better than the big frameworks. It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different. To get started, create an index HTML file, then add the mithril script tag to it. You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object. We can add data and methods to the component as properties on the object. There are also special properties like on init, which is the life cycle hook for when the component is first initialized. Then we have view to define the UI itself. To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items. Then down on the form element, we're defining a handler for the on submit event. What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript. If you hate HTML and never want to touch it, you might like this system. But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build. But like I said before, it really comes down to personal preference and I could see why someone would really like this. And there you have 10 different ways to build the exact same JavaScript app.
There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing. It's really just a matter of choosing the one that makes you and your teammates happy.
video gaming
youtube
If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses. Thanks for watching, and I will see you in the next one.
Which JavaScript framework is the best? If we go off of downloads, React wins, but based on GitHub stars, Vue is the best. But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework. And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code. There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them. In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla. In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project. This video was a ton of work, so make sure to subscribe and hit the like button. Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week. The first thing we'll do is build a basic to do app with vanilla JavaScript. About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all. Any expert web developer needs to have a solid understanding of Vanilla JS. But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster. What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework. To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body. What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list. In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present. Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about. The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically. In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM. And I can tell you right now, this is a very annoying way to build a complex application. As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form. Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM. Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list. In addition to keeping track of the data, we also need to update the actual UI when that data changes. For that, I'm defining a function called add to do that takes a new to do item as its argument. Now this is where things start to get ugly with Vanilla. In order to update the UI, we need to manually create a new list item element by calling document create element. Then we need to imperatively update its inner HTML to the to do text. And finally, append it to the unordered list in the DOM. And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed. The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI. Sigh. Now that we have this function in place, we need a way to call it when the user submits the form. For that, we need to register an event listener on the form's comes on submit event. When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input. At this point, we should have a working to do list. But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing. There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application. Now, one final thing to think about is the application life cycle. When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist. If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them. Congratulations. You just built a to do app with vanilla JS. But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch. And that's why the vast majority of developers choose to build their apps with a framework. 1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way. I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI. React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on. It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable. Slow. React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars. Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with. React has an official CLI called create react app. We can create a new React project by running the create act app command from the terminal. Now it's worth noting that many people opt for other tools when building a React project like Next. Js or Gatsby that would replace the default CLI. When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally. Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file. In React and most other frameworks, your application is organized as a tree of components. These components encapsulate parts of the UI and have ways to communicate with each other. This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same. Now in the app JS file, you'll first notice a function called app. That function represents a component in the UI, and personally, I love the simplicity of that. Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML. For the to do list, we can define reactive state on the component with the use state hook. The hook is just a function that will return us with 2 values. The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state. And then the second item is a function to update the state. Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item. Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit. Then on the right side of it, we can reference a function that will be called whenever where the submit event fires. And that function will update the state and store the result in local storage. You'll also notice that I'm using the use ref hook to grab the current value of the form input. One thing to notice here is that the HTML is a lot more descriptive. We know exactly which elements our data and events are bound to. Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized. This hook can be really confusing though if you're just getting started. To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook. In any case, React is the gold standard for declarative UI frameworks. But there's more than one way to get the job done. Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project. It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm. It comes with officially supported libraries for routing, animation, and server side rendering. And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them. In fact, you are actually required to use TypeScript. Google uses it internally to build hundreds of different web apps throughout their product line. It's a great option for big teams, but maybe a little overwhelming if you're a beginner. To an Angular project, run ng new from the command line. That'll give us a fairly large project to get started that's already configured with TypeScript. We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically. In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin. And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it. Now it is possible to define an entire component in this TS file. However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS. To add reactive state to the component, simply define a property on the class. From there, we can define a method on the class to update the state. In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init. This method will be called whenever that component is first initialized. Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive. Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML. Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired. Then to get the actual value from the form input, we can use two way data binding using the ng model directive. This binds the form value to the to do text property on the class. However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work. And for that reason, among many others, it tends to have a much higher learning curve than other frameworks. But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications. Since and that brings me to Vue. Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers. It has official packages for things like routing and state management and a huge ecosystem of third party packages. It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads. Vue also has a very powerful CLI. Why? For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app. This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI. You'll notice it generates a far more simplified project structure. But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed. Components are defined in files that end in dot Vue. The code is organized into 3 parts, a template, a script, and the styles. The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty. Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered. Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized. Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class. In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission. One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve. You'll find a lot of little things like that in Vue that make your life easier. And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte. It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars. It's not as common as the other 3 in the wild, but is very well loved by the people who do use it. Like React, it's designed as a minimal library and relies on the open source community for other features like routing. One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser. Instead, it works as a compiler to turn your code into plain JavaScript. When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you. When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you. Components are defined in dot Svelte files. And just like Vue, they have 3 parts, the script, the template, and the styles. To create reactive state on the component, just declare a variable with the let keyword. Then to modify the state, define a plain JavaScript function. What I like about this is that it feels very natural. Scroll. It looks like regular JavaScript with minimal abstractions going on compared to something like React. Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized. Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array. Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function. And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable. In my opinion, this is the cleanest implementation that we've looked at. It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before. The drawback though is that the community is much smaller than something like React. So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework. And the same goes for all the other frameworks that we'll look at from here starting with lit. Lit is a Google sponsored project that's focused on building web components. If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks. Sounds great, but the web components API is notoriously difficult to work with. The cool thing about split is that when you define a component, it's creating a standard custom element under the hood. Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components. Litt doesn't have a CLI of its own, but there is a starter project to get us going. I'm using the TypeScript version here, but that part is optional. Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser. That's just a unique point that you won't see in other frameworks by default. Components themselves are defined as a class that extends LitElement. Reactive data can be defined as properties on the class using that property decorator. Then methods can be defined on the class to update the state. Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback. By implementing the connectedCallback method, we can run code when the component is first initialized. Now one thing that's really interesting about Lit is the way that it handles templates. It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks. This allows you to interpolate JavaScript into an HTML string using dollar sign braces. The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value. And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires. The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs. And that brings me to an alternative framework that is also focused on web components called Stencil. This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil. They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started. Just like lit, it will take each component and compile it down to a standard web component. A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator. Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized. At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React. That gives you the best or worst of both worlds depending on who you ask. The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form. Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS. It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM. Instead, compiles your code down to native DOM nodes similar to Svelte. And because of this, it hits very high performance marks across every benchmark. You can think of it like a faster, faster, more developer friendly version of React. But the drawback is that it has a smaller community to draw from. When you generate a new project, it uses Vite as the build tool, which is cool. Then then you have components defined in JSX files just like React. Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal. It returns us with a reactive value and a function to update that value. We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized. Now for the UI itself, we use JSX. It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier. For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that. Overall, SolidJS feels like a more well thought out and faster version of React. But now let's look at something totally different, Alpine JS. It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at. Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML. If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript. It has over 17,000 GitHub stars and is a popular replacement for jQuery. To get started, create an HTML file, then add the alpine script to the head. Reactive data can be stored directly in a DOM node using the x data attribute. That data can then be used in a child element with something like x4 to loop over the array of to dos. Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript. The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX. Now, if we do want to write some plain JavaScript, we can do that in a script tag. And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI. That's what we'll need to do for our to dos so that we can load them from local storage. To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires. And that gives us a complete app with very minimal code. In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page. But at the same time, I don't think Alpine could replace something like React, Vue, or Angular. So if you're building a very complicated single page application, it might be best to stick with one of those. And that brings us to the final wildcard framework, Mythril. It's also very wait and tends to perform better than the big frameworks. It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different. To get started, create an index HTML file, then add the mithril script tag to it. You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object. We can add data and methods to the component as properties on the object. There are also special properties like on init, which is the life cycle hook for when the component is first initialized. Then we have view to define the UI itself. To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items. Then down on the form element, we're defining a handler for the on submit event. What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript. If you hate HTML and never want to touch it, you might like this system. But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build. But like I said before, it really comes down to personal preference and I could see why someone would really like this. And there you have 10 different ways to build the exact same JavaScript app. There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing. It's really just a matter of choosing the one that makes you and your teammates happy. If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses. Thanks for watching, and I will see you in the next one.
Which
which
JavaScript
javascript
framework
framework
is
is
the
the
best?
best
If
if
we
we
go
go
off
off
of
of
downloads,
downloads
React
react
wins,
wins
but
but
based
based
on
on
GitHub
github
stars,
stars
Vue
vue
is
is
the
the
best.
best
But
but
Svelte
svelte
is
is
the
the
most
most
loved
loved
framework
framework
according
according
to
to
the
the
2021
2021
Stack
stack
Overflow
overflow
survey,
survey
and
and
some
some
people
people
out
out
there
there
might
might
even
even
tell
tell
you
you
that
that
you
you
don't
don't
need
need
a
a
JavaScript
javascript
framework.
framework
And
and
whether
whether
you're
you're
a
a
new
new
developer
developer
or
or
have
have
20
20
years
years
of
of
experience,
experience
it
it
can
can
be
be
very
very
difficult
difficult
to
to
choose
choose
which
which
framework
framework
you
you
wanna
wanna
marry,
marry
which
which
is
is
the
the
single
single
most
most
important
important
decision
decision
you'll
you'll
make
make
related
related
to
to
your
your
front
front
end
end
code.
code
There's
there's
no
no
absolute
absolute
best
best
framework
framework
and
and
the
the
only
only
way
way
to
to
find
find
out
out
which
which
one
one
will
will
make
make
you
you
happy
happy
is
is
to
to
build
build
something
something
with
with
all
all
of
of
them.
them
In
in
today's
today's
video,
video
we'll
we'll
build
build
the
the
same
same
app
app
with
with
10
10
different
different
JavaScript
javascript
frameworks
frameworks
including
including
Angular,
angular
React,
react
Vue,
vue
Svelte,
svelte
Lit,
lit
Alpine,
alpine
Solid,
solid
Stencil,
stencil
mithril,
mithril
and
and
vanilla.
vanilla
In
in
the
the
process,
process
you'll
you'll
learn
learn
the
the
trade
trade
offs
offs
between
between
each
each
of
of
these
these
frameworks
frameworks
so
so
you
you
can
can
make
make
the
the
best
best
choice
choice
for
for
your
your
next
next
project.
project
This
this
video
video
was
was
a
a
ton
ton
of
of
work,
work
so
so
make
make
sure
sure
to
to
subscribe
subscribe
and
and
hit
hit
the
the
like
like
button.
button
Then
then
leave
leave
a
a
comment
comment
below
below
with
with
your
your
favorite
favorite
framework,
framework
and
and
I'll
i'll
choose
choose
a
a
few
few
random
random
ones
ones
to
to
win
win
a
a
free
free
t
t
shirt
shirt
next
next
week.
week
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
build
build
a
a
basic
basic
to
to
do
do
app
app
with
with
vanilla
vanilla
JavaScript.
javascript
About
about
once
once
a
a
year,
year
a
a
hot
hot
take
take
will
will
go
go
viral
viral
saying
saying
that
that
you
you
don't
don't
need
need
a
a
JavaScript
javascript
framework
framework
at
at
all.
all
Any
any
expert
expert
web
web
developer
developer
needs
needs
to
to
have
have
a
a
solid
solid
understanding
understanding
of
of
Vanilla
vanilla
JS.
js
But
but
even
even
if
if
you're
you're
a
a
JavaScript
javascript
god,
god
attempting
attempting
to
to
build
build
a
a
non
non
trivial
trivial
app
app
with
with
it
it
is
is
a
a
recipe
recipe
for
for
disaster.
disaster
What
what
you'll
you'll
end
end
up
up
doing
doing
is
is
building
building
your
your
own
own
shitty
shitty
JavaScript
javascript
framework,
framework
and
and
the
the
last
last
thing
thing
the
the
world
world
needs
needs
is
is
another
another
JavaScript
javascript
framework.
framework
To
to
build
build
an
an
app
app
from
from
scratch,
scratch
all
all
we
we
have
have
to
to
do
do
is
is
create
create
an
an
HTML
html
file,
file
then
then
add
add
a
a
script
script
tag
tag
to
to
the
the
body.
body
What
what
we
we
wanna
wanna
build
build
here
here
is
is
a
a
to
to
do
do
app
app
where
where
the
the
user
user
can
can
write
write
some
some
text
text
into
into
a
a
form
form
input,
input
then
then
submit
submit
the
the
form
form
and
and
have
have
that
that
item
item
appear
appear
in
in
the
the
list.
list
In
in
addition,
addition
we'll
we'll
save
save
those
those
items
items
to
to
local
local
storage
storage
as
as
kind
kind
of
of
a
a
mock
mock
database
database
so
so
that
that
when
when
the
the
user
user
refreshes
refreshes
the
the
page,
page
those
those
items
items
are
are
still
still
present.
present
Pretty
pretty
simple
simple
concept,
concept
but
but
there's
there's
actually
actually
a
a
lot
lot
going
going
on
on
there,
there
like
like
state
state
management,
management
data
data
binding,
binding
events,
events
and
and
the
the
application
application
life
life
cycle
cycle
to
to
think
think
about.
about
The
the
one
one
thing
thing
that
that
all
all
frameworks
frameworks
do
do
and
and
vanilla
vanilla
JS
js
doesn't
doesn't
is
is
provide
provide
a
a
way
way
to
to
bind
bind
or
or
connect
connect
your
your
HTML
html
to
to
the
the
JavaScript
javascript
automatically.
automatically
In
in
Vanilla,
vanilla
we
we
need
need
to
to
imperatively
imperatively
grab
grab
the
the
HTML
html
elements
elements
that
that
we're
we're
working
working
with
with
from
from
the
the
DOM.
dom
And
and
I
i
can
can
tell
tell
you
you
right
right
now,
now
this
this
is
is
a
a
very
very
annoying
annoying
way
way
to
to
build
build
a
a
complex
complex
application.
application
As
as
you
you
can
can
see
see
here
here
in
in
the
the
DOM,
dom
we
we
have
have
an
an
unordered
unordered
list
list
for
for
the
the
to
to
dos
dos
and
and
then
then
below
below
that,
that
we
we
have
have
a
a
form
form
with
with
an
an
input
input
and
and
a
a
button
button
to
to
submit
submit
the
the
form.
form
Now
now
going
going
into
into
the
the
JavaScript,
javascript
the
the
first
first
thing
thing
I'll
i'll
do
do
is
is
write
write
some
some
code
code
using
using
document
document
query
query
selector
selector
to
to
grab
grab
each
each
one
one
of
of
these
these
items
items
from
from
the
the
DOM.
dom
Now
now
that
that
we
we
have
have
access
access
to
to
the
the
HTML
html
elements,
elements
I'm
i'm
setting
setting
up
up
an
an
empty
empty
array
array
here
here
to
to
represent
represent
the
the
actual
actual
to
to
do
do
items
items
in
in
the
the
list.
list
In
in
addition
addition
to
to
keeping
keeping
track
track
of
of
the
the
data,
data
we
we
also
also
need
need
to
to
update
update
the
the
actual
actual
UI
ui
when
when
that
that
data
data
changes.
changes
For
for
that,
that
I'm
i'm
defining
defining
a
a
function
function
called
called
add
add
to
to
do
do
that
that
takes
takes
a
a
new
new
to
to
do
do
item
item
as
as
its
its
argument.
argument
Now
now
this
this
is
is
where
where
things
things
start
start
to
to
get
get
ugly
ugly
with
with
Vanilla.
vanilla
In
in
order
order
to
to
update
update
the
the
UI,
ui
we
we
need
need
to
to
manually
manually
create
create
a
a
new
new
list
list
item
item
element
element
by
by
calling
calling
document
document
create
create
element.
element
Then
then
we
we
need
need
to
to
imperatively
imperatively
update
update
its
its
inner
inner
HTML
html
to
to
the
the
to
to
do
do
text.
text
And
and
finally,
finally
append
append
it
it
to
to
the
the
unordered
unordered
list
list
in
in
the
the
DOM.
dom
And
and
as
as
an
an
add
add
attach,
attach
I'll
i'll
save
save
the
the
data
data
to
to
local
local
storage
storage
so
so
we
we
can
can
access
access
it
it
when
when
the
the
page
page
is
is
refreshed.
refreshed
The
the
problem
problem
with
with
this
this
code
code
is
is
that
that
the
the
application
application
data
data
or
or
state
state
is
is
completely
completely
decoupled
decoupled
from
from
the
the
UI
ui
itself,
itself
and
and
that
that
makes
makes
it
it
very
very
hard
hard
to
to
keep
keep
the
the
data
data
in
in
sync
sync
with
with
the
the
UI.
ui
Sigh.
sigh
Now
now
that
that
we
we
have
have
this
this
function
function
in
in
place,
place
we
we
need
need
a
a
way
way
to
to
call
call
it
it
when
when
the
the
user
user
submits
submits
the
the
form.
form
For
for
that,
that
we
we
need
need
to
to
register
register
an
an
event
event
listener
listener
on
on
the
the
form's
form's
comes
comes
on
on
submit
submit
event.
event
When
when
that
that
event
event
is
is
fired,
fired
we'll
we'll
first
first
call
call
prevent
prevent
default
default
to
to
prevent
prevent
it
it
from
from
refreshing
refreshing
the
the
page,
page
then
then
call
call
the
the
add
add
to
to
do
do
function
function
with
with
the
the
current
current
value
value
in
in
the
the
text
text
input.
input
At
at
this
this
point,
point
we
we
should
should
have
have
a
a
working
working
to
to
do
do
list.
list
But
but
one
one
important
important
thing
thing
to
to
notice
notice
here
here
is
is
that
that
if
if
you
you
look
look
at
at
the
the
HTML
html
markup,
markup
you
you
really
really
have
have
no
no
idea
idea
what
what
it's
it's
doing.
doing
There's
there's
no
no
way
way
to
to
tell
tell
this
this
form
form
has
has
an
an
event
event
listener
listener
attached
attached
to
to
it
it
unless
unless
you
you
go
go
search
search
through
through
the
the
JavaScript
javascript
code
code
itself,
itself
which
which
is
is
is
is
extremely
extremely
difficult
difficult
in
in
a
a
complex
complex
application.
application
Now,
now
one
one
final
final
thing
thing
to
to
think
think
about
about
is
is
the
the
application
application
life
life
cycle.
cycle
When
when
the
the
app
app
is
is
first
first
initialized,
initialized
what
what
we
we
wanna
wanna
do
do
here
here
is
is
grab
grab
the
the
existing
existing
to
to
do
do
items
items
from
from
the
the
local
local
storage
storage
and
and
render
render
them
them
in
in
the
the
to
to
do
do
list
list
if
if
they
they
exist.
exist
If
if
there
there
are
are
existing
existing
to
to
dos
dos
in
in
local
local
storage,
storage
we
we
can
can
loop
loop
over
over
them
them
with
with
4
4
each
each
and
and
call
call
you
you
add
add
to
to
do
do
function
function
for
for
each
each
one
one
of
of
them.
them
Congratulations.
congratulations
You
you
just
just
built
built
a
a
to
to
do
do
app
app
with
with
vanilla
vanilla
JS.
js
But
but
this
this
code
code
is
is
not
not
going
going
to
to
scale
scale
complexity
complexity
very
very
well,
well
and
and
there's
there's
likely
likely
many
many
other
other
features
features
we'd
we'd
want
want
to
to
add
add
like
like
routing
routing
or
or
animation
animation
that
that
we'd
we'd
have
have
to
to
implement
implement
from
from
scratch.
scratch
And
and
that's
that's
why
why
the
the
vast
vast
majority
majority
of
of
developers
developers
choose
choose
to
to
build
build
their
their
apps
apps
with
with
a
a
framework.
framework
1st,
1st
we
we
have
have
React,
react
which
which
most
most
people
people
would
would
consider
consider
the
the
most
most
popular
popular
framework,
framework
some
some
people
people
call
call
it
it
a
a
library,
library
but
but
it
it
doesn't
doesn't
really
really
matter
matter
because
because
it's
it's
a
a
tool
tool
that
that
becomes
becomes
the
the
main
main
driver
driver
of
of
your
your
project,
project
requiring
requiring
you,
you
the
the
developer,
developer
you
you
do
do
everything
everything
the
the
React
react
way.
way
I
i
don't
don't
mean
mean
that
that
in
in
a
a
bad
bad
way
way
because
because
React
react
was
was
created
created
by
by
very
very
smart
smart
people
people
at
at
Facebook
facebook
to
to
build
build
complex
complex
UIs
uis
like
like
the
the
Facebook
facebook
UI.
ui
React
react
is
is
minimal
minimal
by
by
design
design
and
and
relies
relies
on
on
the
the
open
open
source
source
community
community
to
to
handle
handle
other
other
concerns
concerns
like
like
routing,
routing
animation,
animation
state
state
management,
management
and
and
so
so
on.
on
It's
it's
not
not
opinionated
opinionated
about
about
how
how
you
you
organize
organize
your
your
code,
code
which
which
requires
requires
you
you
to
to
make
make
a
a
lot
lot
of
of
decisions
decisions
about
about
which
which
libraries
libraries
to
to
bring
bring
in
in
and
and
how
how
to
to
make
make
things
things
maintainable
maintainable
and
and
scalable.
scalable
Slow.
slow
React
react
is
is
by
by
far
far
the
the
most
most
popular
popular
framework
framework
with
with
over
over
10,000,000
10,000,000
weekly
weekly
downloads
downloads
on
on
npm
npm
and
and
over
over
a
a
170,000
170,000
GitHub
github
stars.
stars
Its
its
popularity
popularity
alone
alone
makes
makes
it
it
a
a
great
great
skill
skill
to
to
learn
learn
because
because
there
there
are
are
many
many
employers
employers
out
out
there
there
looking
looking
to
to
hire
hire
React
react
developers,
developers
and
and
you'll
you'll
find
find
tons
tons
of
of
other
other
React
react
developers
developers
in
in
the
the
it's
it's
free
free
to
to
collaborate
collaborate
with.
with
React
react
has
has
an
an
official
official
CLI
cli
called
called
create
create
react
react
app.
app
We
we
can
can
create
create
a
a
new
new
React
react
project
project
by
by
running
running
the
the
create
create
act
act
app
app
command
command
from
from
the
the
terminal.
terminal
Now
now
it's
it's
worth
worth
noting
noting
that
that
many
many
people
people
opt
opt
for
for
other
other
tools
tools
when
when
building
building
a
a
React
react
project
project
like
like
Next.
next
Js
js
or
or
Gatsby
gatsby
that
that
would
would
replace
replace
the
the
default
default
CLI.
cli
When
when
you
you
generate
generate
a
a
new
new
project
project
with
with
create
create
react
react
app,
app
you'll
you'll
notice
notice
it
it
has
has
a
a
package
package
JSON
json
in
in
the
the
root
root
of
of
the
the
project,
project
inside
inside
of
of
which
which
there's
there's
a
a
start
start
script
script
to
to
serve
serve
the
the
app
app
locally.
locally
Under
under
the
the
hood,
hood
it
it
uses
uses
a
a
tool
tool
called
called
webpack
webpack
to
to
bundle
bundle
all
all
your
your
code
code
together
together
into
into
a
a
single
single
JavaScript
javascript
file.
file
In
in
React
react
and
and
most
most
other
other
frameworks,
frameworks
your
your
application
application
is
is
organized
organized
as
as
a
a
tree
tree
of
of
components.
components
These
these
components
components
encapsulate
encapsulate
parts
parts
of
of
the
the
UI
ui
and
and
have
have
ways
ways
to
to
communicate
communicate
with
with
each
each
other.
other
This
this
allows
allows
you
you
to
to
organize
organize
your
your
app
app
in
in
a
a
declarative
declarative
way,
way
where
where
for
for
a
a
given
given
set
set
of
of
application
application
data,
data
the
the
end
end
result
result
of
of
the
the
UI
ui
will
will
always
always
be
be
the
the
same.
same
Now
now
in
in
the
the
app
app
JS
js
file,
file
you'll
you'll
first
first
notice
notice
a
a
function
function
called
called
app.
app
That
that
function
function
represents
represents
a
a
component
component
in
in
the
the
UI,
ui
and
and
personally,
personally
I
i
love
love
the
the
simplicity
simplicity
of
of
that.
that
Now
now
the
the
return
return
value
value
of
of
the
the
function
function
is
is
JSX,
jsx
which
which
itself
itself
looks
looks
like
like
HTML,
html
but
but
has
has
been
been
extended
extended
with
with
an
an
additional
additional
syntax
syntax
allowing
allowing
you
you
to
to
insert
insert
JavaScript
javascript
into
into
your
your
HTML.
html
For
for
the
the
to
to
do
do
list,
list
we
we
can
can
define
define
reactive
reactive
state
state
on
on
the
the
component
component
with
with
the
the
use
use
state
state
hook.
hook
The
the
hook
hook
is
is
just
just
a
a
function
function
that
that
will
will
return
return
us
us
with
with
2
2
values.
values
The
the
first
first
item
item
is
is
the
the
value
value
of
of
the
the
to
to
do
do
list
list
as
as
reactive
reactive
state,
state
which
which
means
means
anytime
anytime
it's
it's
updated,
updated
the
the
UI
ui
will
will
rerender
rerender
to
to
show
show
the
the
latest
latest
state.
state
And
and
then
then
the
the
second
second
item
item
is
is
a
a
function
function
to
to
update
update
the
the
state.
state
Now
now
if
if
we
we
go
go
back
back
down
down
to
to
the
the
JSX,
jsx
we
we
can
can
loop
loop
over
over
the
the
to
to
do
do
items
items
in
in
the
the
say,
say
and
and
render
render
them
them
out
out
directly
directly
in
in
the
the
UI
ui
as
as
a
a
list
list
item.
item
Then
then
below
below
that,
that
we
we
have
have
an
an
HTML
html
form,
form
but
but
the
the
cool
cool
thing
thing
about
about
React
react
is
is
that
that
we
we
can
can
bind
bind
an
an
event
event
directly
directly
to
to
this
this
form
form
using
using
on
on
submit.
submit
Then
then
on
on
the
the
right
right
side
side
of
of
it,
it
we
we
can
can
reference
reference
a
a
function
function
that
that
will
will
be
be
called
called
whenever
whenever
where
where
the
the
submit
submit
event
event
fires.
fires
And
and
that
that
function
function
will
will
update
update
the
the
state
state
and
and
store
store
the
the
result
result
in
in
local
local
storage.
storage
You'll
you'll
also
also
notice
notice
that
that
I'm
i'm
using
using
the
the
use
use
ref
ref
hook
hook
to
to
grab
grab
the
the
current
current
value
value
of
of
the
the
form
form
input.
input
One
one
thing
thing
to
to
notice
notice
here
here
is
is
that
that
the
the
HTML
html
is
is
a
a
lot
lot
more
more
descriptive.
descriptive
We
we
know
know
exactly
exactly
which
which
elements
elements
our
our
data
data
and
and
events
events
are
are
bound
bound
to.
to
Now
now
the
the
final
final
thing
thing
we
we
need
need
to
to
do
do
here
here
is
is
run
run
a
a
life
life
cycle
cycle
hook
hook
in
in
React
react
that
that
can
can
be
be
handled
handled
with
with
the
the
useEffect
useeffect
hook,
hook
which
which
will
will
grab
grab
the
the
items
items
from
from
local
local
storage
storage
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
This
this
hook
hook
can
can
be
be
really
really
confusing
confusing
though
though
if
if
you're
you're
just
just
getting
getting
started.
started
To
to
only
only
run
run
it
it
when
when
the
the
component
component
is
is
first
first
initialized,
initialized
I
i
need
need
you
you
add
add
an
an
array
array
as
as
the
the
second
second
argument,
argument
and
and
in
in
my
my
opinion,
opinion
this
this
code
code
is
is
just
just
really
really
hard
hard
to
to
look
look
at
at
unless
unless
you
you
really
really
know
know
what's
what's
going
going
on
on
with
with
the
the
useEffect
useeffect
hook.
hook
In
in
any
any
case,
case
React
react
is
is
the
the
gold
gold
standard
standard
for
for
declarative
declarative
UI
ui
frameworks.
frameworks
But
but
there's
there's
more
more
than
than
one
one
way
way
to
to
get
get
the
the
job
job
done.
done
Next,
next
we
we
have
have
React's
react's
arch
arch
nemesis,
nemesis
Angular,
angular
which
which
is
is
developed
developed
and
and
maintained
maintained
by
by
Google,
google
and
and
unlike
unlike
React,
react
is
is
very
very
opinionated
opinionated
about
about
how
how
to
to
organize
organize
and
and
structure
structure
a
a
project.
project
It
it
has
has
75,000
75,000
GitHub
github
stars
stars
and
and
is
is
the
the
second
second
most
most
downloaded
downloaded
it's
it's
a
a
framework
framework
on
on
npm.
npm
It
it
comes
comes
with
with
officially
officially
supported
supported
libraries
libraries
for
for
routing,
routing
animation,
animation
and
and
server
server
side
side
rendering.
rendering
And
and
because
because
it
it
follows
follows
a
a
set
set
of
of
predictable
predictable
conventions,
conventions
all
all
scalar
scalar
projects
projects
are
are
structured
structured
relatively
relatively
the
the
same
same
and
and
have
have
awesome
awesome
tooling
tooling
to
to
go
go
along
along
with
with
them.
them
In
in
fact,
fact
you
you
are
are
actually
actually
required
required
to
to
use
use
TypeScript.
typescript
Google
google
uses
uses
it
it
internally
internally
to
to
build
build
hundreds
hundreds
of
of
different
different
web
web
apps
apps
throughout
throughout
their
their
product
product
line.
line
It's
it's
a
a
great
great
option
option
for
for
big
big
teams,
teams
but
but
maybe
maybe
a
a
little
little
overwhelming
overwhelming
if
if
you're
you're
a
a
beginner.
beginner
To
to
an
an
Angular
angular
project,
project
run
run
ng
ng
new
new
from
from
the
the
command
command
line.
line
That'll
that'll
give
give
us
us
a
a
fairly
fairly
large
large
project
project
to
to
get
get
started
started
that's
that's
already
already
configured
configured
with
with
TypeScript.
typescript
We
we
can
can
build
build
a
a
component
component
in
in
the
the
app
app
component
component
dot
dot
ts
ts
file,
file
or
or
we
we
could
could
use
use
the
the
CLI
cli
to
to
generate
generate
a
a
brand
brand
new
new
component
component
automatically.
automatically
In
in
fact,
fact
Angular
angular
has
has
the
the
most
most
powerful
powerful
CLI
cli
I
i
up
up
all
all
the
the
frameworks
frameworks
by
by
a
a
pretty
pretty
wide
wide
margin.
margin
And
and
you'll
you'll
notice
notice
the
the
component
component
itself
itself
is
is
represented
represented
as
as
a
a
TypeScript
typescript
class
class
that
that
has
has
a
a
component
component
decorator
decorator
on
on
top
top
of
of
it.
it
Now
now
it
it
is
is
possible
possible
to
to
define
define
an
an
entire
entire
component
component
in
in
this
this
TS
ts
file.
file
However,
however
most
most
Angular
angular
apps
apps
break
break
components
components
down
down
into
into
at
at
least
least
3
3
separate
separate
files,
files
sells
sells
one
one
for
for
your
your
TypeScript,
typescript
one
one
for
for
the
the
HTML,
html
and
and
another
another
for
for
the
the
CSS.
css
To
to
add
add
reactive
reactive
state
state
to
to
the
the
component,
component
simply
simply
define
define
a
a
property
property
on
on
the
the
class.
class
From
from
there,
there
we
we
can
can
define
define
a
a
method
method
on
on
the
the
class
class
to
to
update
update
the
the
state.
state
In
in
addition,
addition
we
we
can
can
manage
manage
the
the
life
life
cycle
cycle
of
of
the
the
component
component
in
in
the
the
class
class
by
by
implementing
implementing
special
special
methods
methods
like
like
n
n
g
g
on
on
init.
init
This
this
method
method
will
will
be
be
called
called
whenever
whenever
that
that
component
component
is
is
first
first
initialized.
initialized
Now
now
if
if
we
we
go
go
into
into
the
the
template,
template
you'll
you'll
notice
notice
this
this
looks
looks
like
like
HTML,
html
but
but
it's
it's
been
been
extended
extended
or
or
empowered
empowered
with
with
a
a
special
special
templating
templating
language,
language
that
that
makes
makes
it
it
possible
possible
to
to
loop
loop
over
over
an
an
array
array
of
of
items
items
using
using
the
the
ng
ng
for
for
directive.
directive
Unlike
unlike
React,
react
which
which
brings
brings
HTML
html
into
into
your
your
JavaScript,
javascript
Angular
angular
does
does
the
the
opposite
opposite
and
and
brings
brings
JavaScript
javascript
into
into
your
your
HTML.
html
Then
then
in
in
the
the
form
form
itself,
itself
we
we
can
can
bind
bind
to
to
the
the
submit
submit
event
event
and
and
run
run
the
the
add
add
to
to
do
do
method
method
whenever
whenever
that
that
event
event
is
is
fired.
fired
Then
then
to
to
get
get
the
the
actual
actual
value
value
from
from
the
the
form
form
input,
input
we
we
can
can
use
use
two
two
way
way
data
data
binding
binding
using
using
the
the
ng
ng
model
model
directive.
directive
This
this
binds
binds
the
the
form
form
value
value
to
to
the
the
to
to
do
do
text
text
property
property
on
on
the
the
class.
class
However,
however
to
to
use
use
this,
this
we
we
need
need
to
to
go
go
into
into
the
the
app
app
module
module
and
and
import
import
the
the
Angular
angular
forms
forms
module
module
there
there
because
because
it's
it's
required
required
for
for
that
that
directive
directive
to
to
work.
work
And
and
for
for
that
that
reason,
reason
among
among
many
many
others,
others
it
it
tends
tends
to
to
have
have
a
a
much
much
higher
higher
learning
learning
curve
curve
than
than
other
other
frameworks.
frameworks
But
but
everything
everything
is
is
here
here
for
for
a
a
reason
reason
and
and
Angular
angular
is
is
very
very
opinionated
opinionated
about
about
how
how
to
to
structure
structure
a
a
project
project
that
that
will
will
scale
scale
well,
well
and
and
that
that
tends
tends
to
to
make
make
it
it
very
very
popular
popular
with
with
enterprise
enterprise
applications.
applications
Since
since
and
and
that
that
brings
brings
me
me
to
to
Vue.
vue
Js,
js
which
which
is
is
independently
independently
developed
developed
and
and
maintained
maintained
by
by
Evan
evan
Yu
yu
and
and
feels
feels
very
very
similar
similar
to
to
Angular,
angular
but
but
in
in
a
a
package
package
that's
that's
it's
it's
more
more
approachable
approachable
for
for
independent
independent
developers.
developers
It
it
has
has
official
official
packages
packages
for
for
things
things
like
like
routing
routing
and
and
state
state
management
management
and
and
a
a
huge
huge
ecosystem
ecosystem
of
of
third
third
party
party
packages.
packages
It
it
has
has
the
the
most
most
GitHub
github
stars
stars
at
at
a
a
187,000
187,000
and
and
is
is
basically
basically
tied
tied
with
with
Angular
angular
for
for
a
a
second
second
place
place
on
on
npm
npm
downloads.
downloads
Vue
vue
also
also
has
has
a
a
very
very
powerful
powerful
CLI.
cli
Why?
why
For
for
example,
example
we
we
can
can
hit
hit
the
the
view
view
UI
ui
command,
command
which
which
will
will
bring
bring
up
up
an
an
actual
actual
browser
browser
window
window
and
and
walk
walk
us
us
through
through
all
all
of
of
the
the
different
different
dependencies
dependencies
and
and
features
features
that
that
we
we
can
can
add
add
when
when
generating
generating
the
the
initial
initial
app.
app
This
this
creates
creates
a
a
really
really
nice
nice
developer
developer
experience,
experience
but
but
it
it
doesn't
doesn't
generate
generate
components
components
and
and
is
is
just
just
not
not
quite
quite
as
as
powerful
powerful
as
as
the
the
Angular
angular
for
for
CLI.
cli
You'll
you'll
notice
notice
it
it
generates
generates
a
a
far
far
more
more
simplified
simplified
project
project
structure.
structure
But
but
in
in
the
the
main
main
JS
js
file,
file
we
we
can
can
add
add
additional
additional
plug
plug
ins
ins
for
for
other
other
functionality
functionality
like
like
routing
routing
or
or
state
state
management
management
as
as
it
it
becomes
becomes
needed.
needed
Components
components
are
are
defined
defined
in
in
files
files
that
that
end
end
in
in
dot
dot
Vue.
vue
The
the
code
code
is
is
organized
organized
into
into
3
3
parts,
parts
a
a
template,
template
a
a
script,
script
and
and
the
the
styles.
styles
The
the
component
component
itself
itself
is
is
represented
represented
as
as
a
a
plain
plain
JavaScript
javascript
object
object
and
and
we
we
can
can
define
define
reactive
reactive
data
data
or
or
state
state
on
on
it
it
using
using
the
the
data
data
pretty.
pretty
Now
now
to
to
change
change
the
the
state,
state
we
we
have
have
the
the
methods
methods
property
property
where
where
we
we
can
can
define
define
our
our
add
add
to
to
do
do
method
method
that
that
can
can
be
be
called
called
when
when
certain
certain
events
events
are
are
triggered.
triggered
Then
then
to
to
tap
tap
into
into
the
the
component
component
life
life
cycle,
cycle
we
we
have
have
methods
methods
like
like
mounted
mounted
that
that
will
will
be
be
called
called
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Very
very
similar
similar
concepts
concepts
to
to
React
react
and
and
Angular,
angular
the
the
main
main
difference
difference
being
being
that
that
we're
we're
working
working
within
within
context
context
of
of
a
a
plain
plain
JavaScript
javascript
object
object
instead
instead
of
of
a
a
function
function
or
or
class.
class
In
in
the
the
template,
template
we
we
have
have
a
a
setup
setup
that's
that's
very
very
similar
similar
to
to
Angular
angular
that
that
uses
uses
directives
directives
to
to
handle
handle
things
things
like
like
v
v
4
4
to
to
loop
loop
over
over
the
the
to
to
do
do
items,
items
or
or
v
v
on
on
submit
submit
to
to
handle
handle
the
the
form
form
submission.
submission
One
one
thing
thing
that's
that's
nice
nice
here
here
is
is
that
that
you
you
can
can
automatically
automatically
prevent
prevent
the
the
default
default
behavior
behavior
by
by
just
just
adding
adding
dot
dot
prevent
prevent
to
to
this
this
directive
directive
instead
instead
of
of
implementing
implementing
that
that
code
code
in
in
the
the
method
method
solve.
solve
You'll
you'll
find
find
a
a
lot
lot
of
of
little
little
things
things
like
like
that
that
in
in
Vue
vue
that
that
make
make
your
your
life
life
easier.
easier
And
and
lastly,
lastly
we
we
have
have
the
the
v
v
model
model
directive
directive
to
to
bind
bind
the
the
to
to
do
do
text
text
to
to
the
the
form
form
input
input
value,
value
Vue
vue
is
is
awesome
awesome
and
and
has
has
a
a
big
big
community,
community
but
but
another
another
independent
independent
option
option
is
is
Svelte.
svelte
It
it
was
was
the
the
most
most
loved
loved
framework
framework
on
on
the
the
2021
2021
Stack
stack
Overflow
overflow
slow
slow
survey
survey
and
and
has
has
about
about
50,000
50,000
GitHub
github
stars.
stars
It's
it's
not
not
as
as
common
common
as
as
the
the
other
other
3
3
in
in
the
the
wild,
wild
but
but
is
is
very
very
well
well
loved
loved
by
by
the
the
people
people
who
who
do
do
use
use
it.
it
Like
like
React,
react
it's
it's
designed
designed
as
as
a
a
minimal
minimal
library
library
and
and
relies
relies
on
on
the
the
open
open
source
source
community
community
for
for
other
other
features
features
like
like
routing.
routing
One
one
thing
thing
that
that
makes
makes
it
it
unique
unique
from
from
the
the
other
other
frameworks
frameworks
is
is
that
that
it
it
doesn't
doesn't
ship
ship
a
a
runtime
runtime
like
like
virtual
virtual
DOM
dom
to
to
the
the
browser.
browser
Instead,
instead
it
it
works
works
as
as
a
a
compiler
compiler
to
to
turn
turn
your
your
code
code
into
into
plain
plain
JavaScript.
javascript
When
when
you
you
generate
generate
a
a
new
new
project,
project
you'll
you'll
have
have
a
a
roll
roll
up
up
or
or
webpack
webpack
config
config
if
if
you
you
choose,
choose
which
which
is
is
used
used
to
to
bundle
bundle
your
your
code
code
and
and
all
all
the
the
other
other
CLI
cli
tools
tools
attempt
attempt
to
to
abstract
abstract
that
that
part
part
away
away
from
from
you.
you
When
when
building
building
a
a
Svelte
svelte
project,
project
you
you
may
may
need
need
to
to
learn
learn
a
a
little
little
bit
bit
about
about
module
module
bundlers,
bundlers
whereas
whereas
the
the
other
other
frameworks
frameworks
try
try
to
to
hide
hide
that
that
detail
detail
from
from
you.
you
Components
components
are
are
defined
defined
in
in
dot
dot
Svelte
svelte
files.
files
And
and
just
just
like
like
Vue,
vue
they
they
have
have
3
3
parts,
parts
the
the
script,
script
the
the
template,
template
and
and
the
the
styles.
styles
To
to
create
create
reactive
reactive
state
state
on
on
the
the
component,
component
just
just
declare
declare
a
a
variable
variable
with
with
the
the
let
let
keyword.
keyword
Then
then
to
to
modify
modify
the
the
state,
state
define
define
a
a
plain
plain
JavaScript
javascript
function.
function
What
what
I
i
like
like
about
about
this
this
is
is
that
that
it
it
feels
feels
very
very
natural.
natural
Scroll.
scroll
It
it
looks
looks
like
like
regular
regular
JavaScript
javascript
with
with
minimal
minimal
abstractions
abstractions
going
going
on
on
compared
compared
to
to
something
something
like
like
React.
react
Now
now
to
to
deal
deal
with
with
life
life
cycle
cycle
hooks,
hooks
we
we
can
can
import
import
the
the
on
on
mount
mount
function
function
from
from
Svelte
svelte
and
and
register
register
a
a
callback
callback
for
for
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Now
now
down
down
in
in
the
the
template,
template
we
we
have
have
a
a
special
special
syntax
syntax
that
that
makes
makes
it
it
easy
easy
to
to
loop
loop
over
over
things
things
like
like
each
each
to
to
loop
loop
over
over
each
each
to
to
do
do
in
in
the
the
array.
array
Then
then
to
to
handle
handle
the
the
form
form
submission,
submission
we
we
have
have
onSubmit,
onsubmit
and
and
we
we
can
can
also
also
add
add
a
a
bar
bar
with
with
preventDefault
preventdefault
to
to
avoid
avoid
implementing
implementing
that
that
detail
detail
in
in
the
the
function.
function
And
and
lastly,
lastly
we'll
we'll
implement
implement
two
two
way
way
data
data
binding
binding
using
using
the
the
bind
bind
directive
directive
with
with
value
value
followed
followed
by
by
the
the
to
to
do
do
text
text
variable.
variable
In
in
my
my
opinion,
opinion
this
this
is
is
the
the
cleanest
cleanest
implementation
implementation
that
that
we've
we've
looked
looked
at.
at
It
it
has
has
the
the
fewest
fewest
lines
lines
of
of
code
code
and
and
is
is
fairly
fairly
easy
easy
to
to
read
read
if
if
you're
you're
a
a
JavaScript
javascript
developer
developer
that
that
has
has
never
never
used
used
Svelte
svelte
before.
before
The
the
drawback
drawback
though
though
is
is
that
that
the
the
community
community
is
is
much
much
smaller
smaller
than
than
something
something
like
like
React.
react
So
so
if
if
you
you
need
need
to
to
use
use
a
a
supporting
supporting
library
library
or
or
if
if
you're
you're
looking
looking
to
to
get
get
a
a
job,
job
you
you
might
might
run
run
into
into
some
some
more
more
roadblocks
roadblocks
than
than
if
if
you
you
used
used
a
a
more
more
popular
popular
framework.
framework
And
and
the
the
same
same
goes
goes
for
for
all
all
the
the
other
other
frameworks
frameworks
that
that
we'll
we'll
look
look
at
at
from
from
here
here
starting
starting
with
with
lit.
lit
Lit
lit
is
is
a
a
Google
google
sponsored
sponsored
project
project
that's
that's
focused
focused
on
on
building
building
web
web
components.
components
If
if
you're
you're
not
not
familiar,
familiar
web
web
components
components
are
are
a
a
browser
browser
standard
standard
that
that
allows
allows
you
you
to
to
create
create
custom
custom
elements
elements
that
that
can
can
work
work
across
across
multiple
multiple
frameworks.
frameworks
Sounds
sounds
great,
great
but
but
the
the
web
web
components
components
API
api
is
is
notoriously
notoriously
difficult
difficult
to
to
work
work
with.
with
The
the
cool
cool
thing
thing
about
about
split
split
is
is
that
that
when
when
you
you
define
define
a
a
component,
component
it's
it's
creating
creating
a
a
standard
standard
custom
custom
element
element
under
under
the
the
hood.
hood
Now,
now
other
other
frameworks
frameworks
can
can
do
do
that
that
as
as
well,
well
but
but
for
for
most
most
of
of
them,
them
it's
it's
just
just
an
an
afterthought
afterthought
and
and
the
the
developer
developer
experience
experience
is
is
usually
usually
not
not
ideal
ideal
if
if
your
your
goal
goal
is
is
to
to
build
build
standard
standard
web
web
components.
components
Litt
litt
doesn't
doesn't
have
have
a
a
CLI
cli
of
of
its
its
own,
own
but
but
there
there
is
is
a
a
starter
starter
project
project
to
to
get
get
us
us
going.
going
I'm
i'm
using
using
the
the
TypeScript
typescript
version
version
here,
here
but
but
that
that
part
part
is
is
optional.
optional
Inside
inside
the
the
litapp
litapp
ts
ts
file,
file
you'll
you'll
notice
notice
that
that
it's
it's
calling
calling
window
window
custom
custom
elements,
elements
which
which
is
is
part
part
of
of
the
the
web
web
components
components
API
api
in
in
the
the
browser.
browser
That's
that's
just
just
a
a
unique
unique
point
point
that
that
you
you
won't
won't
see
see
in
in
other
other
frameworks
frameworks
by
by
default.
default
Components
components
themselves
themselves
are
are
defined
defined
as
as
a
a
class
class
that
that
extends
extends
LitElement.
litelement
Reactive
reactive
data
data
can
can
be
be
defined
defined
as
as
properties
properties
on
on
the
the
class
class
using
using
that
that
property
property
decorator.
decorator
Then
then
methods
methods
can
can
be
be
defined
defined
on
on
the
the
class
class
to
to
update
update
the
the
state.
state
Life
life
cycle
cycle
hooks
hooks
are
are
based
based
on
on
the
the
ones
ones
find
find
in
in
the
the
actual
actual
web
web
components
components
API,
api
like
like
connectedCallback.
connectedcallback
By
by
implementing
implementing
the
the
connectedCallback
connectedcallback
method,
method
we
we
can
can
run
run
code
code
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Now
now
one
one
thing
thing
that's
that's
really
really
interesting
interesting
about
about
Lit
lit
is
is
the
the
way
way
that
that
it
it
handles
handles
templates.
templates
It
it
uses
uses
the
the
existing
existing
template
template
literals
literals
that
that
we
we
have
have
in
in
JavaScript,
javascript
or
or
in
in
other
other
words,
words
a
a
string
string
that
that
starts
starts
with
with
backticks.
backticks
This
this
allows
allows
you
you
to
to
interpolate
interpolate
JavaScript
javascript
into
into
an
an
HTML
html
string
string
using
using
dollar
dollar
sign
sign
braces.
braces
The
the
end
end
result
result
is
is
something
something
that
that
feels
feels
kind
kind
of
of
similar
similar
to
to
JSX
jsx
and
and
React,
react
but
but
the
the
HTML
html
can
can
also
also
have
have
directives
directives
like
like
submit
submit
or
or
dot
dot
value
value
to
to
bind
bind
to
to
the
the
form
form
submit
submit
event
event
or
or
the
the
input
input
value.
value
And
and
as
as
far
far
as
as
I
i
can
can
tell,
tell
it
it
doesn't
doesn't
support
support
two
two
way
way
data
data
binding,
binding
so
so
I
i
had
had
to
to
set
set
up
up
an
an
event
event
listener
listener
here
here
on
on
the
the
input
input
change
change
event
event
to
to
update
update
the
the
to
to
do
do
text
text
whenever
whenever
that
that
event
event
fires.
fires
The
the
bottom
bottom
line
line
with
with
lit
lit
is
is
that
that
you
you
get
get
a
a
much
much
nicer
nicer
way
way
to
to
build
build
standard
standard
web
web
components
components
without
without
having
having
to
to
be
be
an
an
expert
expert
on
on
the
the
underlying
underlying
APIs.
apis
And
and
that
that
brings
brings
me
me
to
to
an
an
alternative
alternative
framework
framework
that
that
is
is
also
also
focused
focused
on
on
web
web
components
components
called
called
Stencil.
stencil
This
this
one
one
comes
comes
from
from
the
the
team
team
behind
behind
the
the
Ionic
ionic
framework,
framework
which
which
itself
itself
is
is
actually
actually
a
a
component
component
library
library
for
for
mobile
mobile
development
development
that's
that's
built
built
with
with
Stencil.
stencil
They
they
use
use
web
web
components
components
for
for
the
the
purpose
purpose
of
of
making
making
Ionic
ionic
compatible
compatible
with
with
React,
react
Angular,
angular
and
and
Vue
vue
out
out
of
of
the
the
box,
box
create
create
a
a
new
new
app
app
by
by
running
running
npm
npm
init
init
stencil,
stencil
and
and
that
that
will
will
give
give
you
you
a
a
TypeScript
typescript
project
project
to
to
get
get
started.
started
Just
just
like
like
lit,
lit
it
it
will
will
take
take
each
each
component
component
and
and
compile
compile
it
it
down
down
to
to
a
a
standard
standard
web
web
component.
component
A
a
component
component
itself
itself
is
is
a
a
class
class
with
with
the
the
component
component
decorator,
decorator
which
which
looks
looks
very
very
similar
similar
to
to
Angular,
angular
then
then
reactive
reactive
data
data
can
can
be
be
defined
defined
as
as
properties
properties
with
with
the
the
state
state
decorator.
decorator
Custom
custom
methods
methods
can
can
be
be
defined
defined
to
to
update
update
the
the
state,
state
then
then
we
we
have
have
life
life
cycle
cycle
hooks
hooks
like
like
component
component
will
will
load
load
to
to
run
run
code
code
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
At
at
this
this
point,
point
this
this
component
component
looks
looks
almost
almost
exactly
exactly
like
like
an
an
Angular
angular
component,
component
but
but
for
for
templating,
templating
it
it
uses
uses
JSX
jsx
like
like
React.
react
That
that
gives
gives
you
you
the
the
best
best
or
or
worst
worst
of
of
both
both
worlds
worlds
depending
depending
on
on
who
who
you
you
ask.
ask
The
the
template
template
looks
looks
almost
almost
exactly
exactly
select
select
the
the
React
react
app,
app
but
but
it
it
doesn't
doesn't
appear
appear
to
to
support
support
two
two
way
way
data
data
binding,
binding
which
which
means
means
I've
i've
also
also
added
added
an
an
extra
extra
event
event
listener
listener
for
for
on
on
input
input
to
to
update
update
the
the
to
to
do
do
text
text
when
when
the
the
user
user
types
types
sips
sips
into
into
the
the
form.
form
Stencil
stencil
is
is
another
another
great
great
option
option
for
for
building
building
web
web
components,
components
but
but
now
now
we're
we're
going
going
to
to
move
move
on
on
to
to
a
a
framework
framework
that
that
I
i
get
get
a
a
ton
ton
of
of
requests
requests
for,
for
SolidJS.
solidjs
It's
it's
it's
it's
a
a
tool
tool
for
for
building
building
UI
ui
components
components
and
and
feels
feels
very
very
inspired
inspired
by
by
React,
react
but
but
the
the
main
main
difference
difference
is
is
that
that
it
it
doesn't
doesn't
use
use
the
the
virtual
virtual
DOM.
dom
Instead,
instead
compiles
compiles
your
your
code
code
down
down
to
to
native
native
DOM
dom
nodes
nodes
similar
similar
to
to
Svelte.
svelte
And
and
because
because
of
of
this,
this
it
it
hits
hits
very
very
high
high
performance
performance
marks
marks
across
across
every
every
benchmark.
benchmark
You
you
can
can
think
think
of
of
it
it
like
like
a
a
faster,
faster
faster,
faster
more
more
developer
developer
friendly
friendly
version
version
of
of
React.
react
But
but
the
the
drawback
drawback
is
is
that
that
it
it
has
has
a
a
smaller
smaller
community
community
to
to
draw
draw
from.
from
When
when
you
you
generate
generate
a
a
new
new
project,
project
it
it
uses
uses
Vite
vite
as
as
the
the
build
build
tool,
tool
which
which
is
is
cool.
cool
Then
then
then
then
you
you
have
have
components
components
defined
defined
in
in
JSX
jsx
files
files
just
just
like
like
React.
react
Components
components
are
are
defined
defined
as
as
functions,
functions
then
then
to
to
define
define
reactive
reactive
state
state
on
on
the
the
component,
component
we
we
use
use
something
something
very
very
similar
similar
to
to
a
a
React
react
hook
hook
called
called
a
a
signal.
signal
It
it
returns
returns
us
us
with
with
a
a
reactive
reactive
value
value
and
and
a
a
function
function
to
to
update
update
that
that
value.
value
We
we
can
can
then
then
define
define
sign
sign
a
a
function
function
to
to
update
update
the
the
state,
state
and
and
if
if
we
we
want
want
to
to
use
use
a
a
life
life
cycle
cycle
hook,
hook
instead
instead
of
of
useEffect,
useeffect
we
we
have
have
the
the
much
much
more
more
readable
readable
onMount
onmount
hook
hook
that
that
will
will
run
run
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Now
now
for
for
the
the
UI
ui
itself,
itself
we
we
use
use
JSX.
jsx
It
it
looks
looks
pretty
pretty
much
much
identical
identical
to
to
the
the
React
react
code,
code
but
but
I've
i've
noticed
noticed
that
that
Solid
solid
does
does
things
things
to
to
make
make
your
your
life
life
easier.
easier
For
for
example,
example
we
we
can
can
bind
bind
the
the
form
form
value
value
to
to
a
a
variable
variable
using
using
ref,
ref
and
and
unlike
unlike
React,
react
we
we
don't
don't
need
need
to
to
import
import
the
the
use
use
ref
ref
hook
hook
to
to
do
do
that.
that
Overall,
overall
SolidJS
solidjs
feels
feels
like
like
a
a
more
more
well
well
thought
thought
out
out
and
and
faster
faster
version
version
of
of
React.
react
But
but
now
now
let's
let's
look
look
at
at
something
something
totally
totally
different,
different
Alpine
alpine
JS.
js
It's
it's
a
a
tiny
tiny
library
library
at
at
around
around
4
4
kilobytes
kilobytes
that
that
allows
allows
you
you
to
to
extend
extend
send
send
your
your
existing
existing
HTML
html
with
with
reactive
reactive
data
data
and
and
many
many
of
of
the
the
features
features
that
that
you
you
would
would
find
find
in
in
the
the
frameworks
frameworks
we've
we've
already
already
looked
looked
at.
at
Instead
instead
of
of
primarily
primarily
focusing
focusing
on
on
JavaScript,
javascript
with
with
Alpine,
alpine
you
you
generally
generally
focus
focus
on
on
your
your
HTML.
html
If
if
you've
you've
ever
ever
used
used
Tailwind
tailwind
for
for
CSS,
css
you
you
can
can
think
think
of
of
Alpine
alpine
as
as
the
the
equivalent
equivalent
in
in
JavaScript.
javascript
It
it
has
has
over
over
17,000
17,000
GitHub
github
stars
stars
and
and
is
is
a
a
popular
popular
replacement
replacement
for
for
jQuery.
jquery
To
to
get
get
started,
started
create
create
an
an
HTML
html
file,
file
then
then
add
add
the
the
alpine
alpine
script
script
to
to
the
the
head.
head
Reactive
reactive
data
data
can
can
be
be
stored
stored
directly
directly
in
in
a
a
DOM
dom
node
node
using
using
the
the
x
x
data
data
attribute.
attribute
That
that
data
data
can
can
then
then
be
be
used
used
in
in
a
a
child
child
element
element
with
with
something
something
like
like
x4
x4
to
to
loop
loop
over
over
the
the
array
array
of
of
to
to
dos.
dos
Then
then
down
down
in
in
the
the
form,
form
we
we
can
can
use
use
x
x
on
on
submit
submit
and
and
also
also
prevent
prevent
default
default
salt,
salt
and
and
then
then
bind
bind
it
it
to
to
a
a
function
function
in
in
our
our
JavaScript.
javascript
The
the
concepts
concepts
here
here
are
are
very
very
similar
similar
to
to
the
the
other
other
frameworks
frameworks
that
that
we've
we've
looked
looked
at,
at
but,
but
in
in
this
this
case,
case
we're
we're
working
working
with
with
raw
raw
HTML
html
as
as
opposed
opposed
to
to
some
some
some
some
custom
custom
templating
templating
language
language
or
or
JSX.
jsx
Now,
now
if
if
we
we
do
do
want
want
to
to
write
write
some
some
plain
plain
JavaScript,
javascript
we
we
can
can
do
do
that
that
in
in
a
a
script
script
tag.
tag
And
and
alpine
alpine
actually
actually
has
has
a
a
mechanism
mechanism
called
called
alpine
alpine
store,
store
that
that
allows
allows
us
us
to
to
store
store
data
data
and
and
share
share
it
it
between
between
multiple
multiple
components
components
in
in
the
the
UI.
ui
That's
that's
what
what
we'll
we'll
need
need
to
to
do
do
for
for
our
our
to
to
dos
dos
so
so
that
that
we
we
can
can
load
load
them
them
from
from
local
local
storage.
storage
To
to
handle
handle
that
that
when
when
the
the
component
component
is
is
first
first
initialized,
initialized
we
we
can
can
call
call
document
document
add
add
event
event
listener
listener
to
to
the
the
custom
custom
alpine
alpine
init
init
event,
event
and
and
then
then
update
update
the
the
data
data
from
from
the
the
store
store
when
when
that
that
event
event
fires.
fires
And
and
that
that
gives
gives
us
us
a
a
complete
complete
app
app
with
with
very
very
minimal
minimal
code.
code
In
in
my
my
opinion,
opinion
Alpine
alpine
feels
feels
like
like
an
an
awesome
awesome
option
option
when
when
you
you
just
just
want
want
to
to
add
add
a
a
little
little
bit
bit
of
of
JavaScript
javascript
activity
activity
to
to
an
an
existing
existing
HTML
html
page.
page
But
but
at
at
the
the
same
same
time,
time
I
i
don't
don't
think
think
Alpine
alpine
could
could
replace
replace
something
something
like
like
React,
react
Vue,
vue
or
or
Angular.
angular
So
so
if
if
you're
you're
building
building
a
a
very
very
complicated
complicated
single
single
page
page
application,
application
it
it
might
might
be
be
best
best
to
to
stick
stick
with
with
one
one
of
of
those.
those
And
and
that
that
brings
brings
us
us
to
to
the
the
final
final
wildcard
wildcard
framework,
framework
Mythril.
mythril
It's
it's
also
also
very
very
wait
wait
and
and
tends
tends
to
to
perform
perform
better
better
than
than
the
the
big
big
frameworks.
frameworks
It
it
uses
uses
virtual
virtual
DOM
dom
like
like
React
react
and
and
Vue,
vue
but
but
the
the
overall
overall
developer
developer
experience
experience
is
is
it's
it's
a
a
lot
lot
different.
different
To
to
get
get
started,
started
create
create
an
an
index
index
HTML
html
file,
file
then
then
add
add
the
the
mithril
mithril
script
script
tag
tag
to
to
it.
it
You
you
can
can
actually
actually
create
create
components
components
from
from
functions,
functions
classes,
classes
or
or
as
as
we're
we're
doing
doing
here,
here
a
a
plain
plain
JavaScript
javascript
object.
object
We
we
can
can
add
add
data
data
and
and
methods
methods
to
to
the
the
component
component
as
as
properties
properties
on
on
the
the
object.
object
There
there
are
are
also
also
special
special
properties
properties
like
like
on
on
init,
init
which
which
is
is
the
the
life
life
cycle
cycle
hook
hook
for
for
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Then
then
we
we
have
have
view
view
to
to
define
define
the
the
UI
ui
itself.
itself
To
to
define
define
a
a
DOM
dom
node,
node
we
we
use
use
the
the
m
m
function
function
and
and
pass
pass
the
the
name
name
of
of
that
that
node
node
as
as
the
the
first
first
argument,
argument
then
then
options
options
about
about
the
the
node
node
as
as
the
the
second
second
argument,
argument
like
like
the
the
class
class
name
name
for
for
example,
example
or
or
you
you
can
can
pass
pass
children
children
as
as
a
a
second
second
argument,
argument
like
like
we're
we're
doing
doing
there
there
to
to
map
map
an
an
array
array
of
of
list
list
items.
items
Then
then
down
down
on
on
the
the
form
form
element,
element
we're
we're
defining
defining
a
a
handler
handler
for
for
the
the
on
on
submit
submit
event.
event
What
what
you
you
have
have
here
here
is
is
something
something
that
that
is
is
kind
kind
of
of
similar
similar
to
to
JSX,
jsx
but
but
the
the
UI
ui
is
is
truly
truly
defined
defined
in
in
pure
pure
JavaScript.
javascript
If
if
you
you
hate
hate
HTML
html
and
and
never
never
want
want
to
to
touch
touch
it,
it
you
you
might
might
like
like
this
this
system.
system
But
but
personally,
personally
I
i
found
found
it
it
a
a
bit
bit
awkward
awkward
and
and
the
the
Mythril
mythril
app
app
actually
actually
it
it
took
took
me
me
the
the
longest
longest
amount
amount
of
of
time
time
to
to
build.
build
But
but
like
like
I
i
said
said
before,
before
it
it
really
really
comes
comes
down
down
to
to
personal
personal
preference
preference
and
and
I
i
could
could
see
see
why
why
someone
someone
would
would
really
really
like
like
this.
this
And
and
there
there
you
you
have
have
10
10
different
different
ways
ways
to
to
build
build
the
the
exact
exact
same
same
JavaScript
javascript
app.
app
There
there
are
are
new
new
frameworks
frameworks
popping
popping
up
up
every
every
couple
couple
days,
days
so
so
this
this
video
video
will
will
likely
likely
be
be
very
very
outdated
outdated
by
by
the
the
time
time
you
you
finish
finish
watching
watching
the
the
bottom
bottom
line
line
is
is
that
that
all
all
these
these
frameworks
frameworks
can
can
do
do
the
the
same
same
basic
basic
thing.
thing
It's
it's
really
really
just
just
a
a
matter
matter
of
of
choosing
choosing
the
the
one
one
that
that
makes
makes
you
you
and
and
your
your
teammates
teammates
happy.
happy
If
if
you
you
wanna
wanna
see
see
frameworks
frameworks
like
like
Angular,
angular
React,
react
and
and
Vue
vue
in
in
action,
action
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
my
my
full
full
courses.
courses
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the best JavaScript framework for building a to-do list, including Svelte, Angular, and Angular based frameworks. They stress the importance of creating a working to-do list and using React as a framework for building responsive UI. The use of React for building websites and automation, including St renewed, is discussed, along with the use of honoring templates and creating a smaller community for building standard web components. Personal preference is also emphasized for each framework.
I built the same app 10 times // Which JS Framework is best?
Which JavaScript framework is the best? If we go off of downloads, React wins, but based on GitHub stars, Vue is the best. But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework. And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code. There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them. In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla. In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project. This video was a ton of work, so make sure to subscribe and hit the like button. Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week. The first thing we'll do is build a basic to do app with vanilla JavaScript. About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all. Any expert web developer needs to have a solid understanding of Vanilla JS. But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster. What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework. To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body. What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list. In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present. Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about. The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically. In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM. And I can tell you right now, this is a very annoying way to build a complex application. As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form. Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM. Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list. In addition to keeping track of the data, we also need to update the actual UI when that data changes. For that, I'm defining a function called add to do that takes a new to do item as its argument. Now this is where things start to get ugly with Vanilla. In order to update the UI, we need to manually create a new list item element by calling document create element. Then we need to imperatively update its inner HTML to the to do text. And finally, append it to the unordered list in the DOM. And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed. The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI. Sigh. Now that we have this function in place, we need a way to call it when the user submits the form. For that, we need to register an event listener on the form's comes on submit event. When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input. At this point, we should have a working to do list. But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing. There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application. Now, one final thing to think about is the application life cycle. When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist. If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them. Congratulations. You just built a to do app with vanilla JS. But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch. And that's why the vast majority of developers choose to build their apps with a framework. 1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way. I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI. React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on. It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable. Slow. React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars. Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with. React has an official CLI called create react app. We can create a new React project by running the create act app command from the terminal. Now it's worth noting that many people opt for other tools when building a React project like Next. Js or Gatsby that would replace the default CLI. When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally. Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file. In React and most other frameworks, your application is organized as a tree of components. These components encapsulate parts of the UI and have ways to communicate with each other. This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same. Now in the app JS file, you'll first notice a function called app. That function represents a component in the UI, and personally, I love the simplicity of that. Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML. For the to do list, we can define reactive state on the component with the use state hook. The hook is just a function that will return us with 2 values. The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state. And then the second item is a function to update the state. Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item. Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit. Then on the right side of it, we can reference a function that will be called whenever where the submit event fires. And that function will update the state and store the result in local storage. You'll also notice that I'm using the use ref hook to grab the current value of the form input. One thing to notice here is that the HTML is a lot more descriptive. We know exactly which elements our data and events are bound to. Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized. This hook can be really confusing though if you're just getting started. To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook. In any case, React is the gold standard for declarative UI frameworks. But there's more than one way to get the job done. Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project. It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm. It comes with officially supported libraries for routing, animation, and server side rendering. And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them. In fact, you are actually required to use TypeScript. Google uses it internally to build hundreds of different web apps throughout their product line. It's a great option for big teams, but maybe a little overwhelming if you're a beginner. To an Angular project, run ng new from the command line. That'll give us a fairly large project to get started that's already configured with TypeScript. We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically. In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin. And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it. Now it is possible to define an entire component in this TS file. However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS. To add reactive state to the component, simply define a property on the class. From there, we can define a method on the class to update the state. In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init. This method will be called whenever that component is first initialized. Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive. Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML. Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired. Then to get the actual value from the form input, we can use two way data binding using the ng model directive. This binds the form value to the to do text property on the class. However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work. And for that reason, among many others, it tends to have a much higher learning curve than other frameworks. But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications. Since and that brings me to Vue. Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers. It has official packages for things like routing and state management and a huge ecosystem of third party packages. It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads. Vue also has a very powerful CLI. Why? For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app. This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI. You'll notice it generates a far more simplified project structure. But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed. Components are defined in files that end in dot Vue. The code is organized into 3 parts, a template, a script, and the styles. The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty. Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered. Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized. Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class. In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission. One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve. You'll find a lot of little things like that in Vue that make your life easier. And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte. It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars. It's not as common as the other 3 in the wild, but is very well loved by the people who do use it. Like React, it's designed as a minimal library and relies on the open source community for other features like routing. One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser. Instead, it works as a compiler to turn your code into plain JavaScript. When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you. When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you. Components are defined in dot Svelte files. And just like Vue, they have 3 parts, the script, the template, and the styles. To create reactive state on the component, just declare a variable with the let keyword. Then to modify the state, define a plain JavaScript function. What I like about this is that it feels very natural. Scroll. It looks like regular JavaScript with minimal abstractions going on compared to something like React. Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized. Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array. Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function. And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable. In my opinion, this is the cleanest implementation that we've looked at. It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before. The drawback though is that the community is much smaller than something like React. So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework. And the same goes for all the other frameworks that we'll look at from here starting with lit. Lit is a Google sponsored project that's focused on building web components. If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks. Sounds great, but the web components API is notoriously difficult to work with. The cool thing about split is that when you define a component, it's creating a standard custom element under the hood. Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components. Litt doesn't have a CLI of its own, but there is a starter project to get us going. I'm using the TypeScript version here, but that part is optional. Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser. That's just a unique point that you won't see in other frameworks by default. Components themselves are defined as a class that extends LitElement. Reactive data can be defined as properties on the class using that property decorator. Then methods can be defined on the class to update the state. Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback. By implementing the connectedCallback method, we can run code when the component is first initialized. Now one thing that's really interesting about Lit is the way that it handles templates. It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks. This allows you to interpolate JavaScript into an HTML string using dollar sign braces. The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value. And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires. The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs. And that brings me to an alternative framework that is also focused on web components called Stencil. This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil. They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started. Just like lit, it will take each component and compile it down to a standard web component. A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator. Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized. At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React. That gives you the best or worst of both worlds depending on who you ask. The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form. Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS. It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM. Instead, compiles your code down to native DOM nodes similar to Svelte. And because of this, it hits very high performance marks across every benchmark. You can think of it like a faster, faster, more developer friendly version of React. But the drawback is that it has a smaller community to draw from. When you generate a new project, it uses Vite as the build tool, which is cool. Then then you have components defined in JSX files just like React. Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal. It returns us with a reactive value and a function to update that value. We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized. Now for the UI itself, we use JSX. It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier. For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that. Overall, SolidJS feels like a more well thought out and faster version of React. But now let's look at something totally different, Alpine JS. It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at. Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML. If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript. It has over 17,000 GitHub stars and is a popular replacement for jQuery. To get started, create an HTML file, then add the alpine script to the head. Reactive data can be stored directly in a DOM node using the x data attribute. That data can then be used in a child element with something like x4 to loop over the array of to dos. Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript. The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX. Now, if we do want to write some plain JavaScript, we can do that in a script tag. And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI. That's what we'll need to do for our to dos so that we can load them from local storage. To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires. And that gives us a complete app with very minimal code. In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page. But at the same time, I don't think Alpine could replace something like React, Vue, or Angular. So if you're building a very complicated single page application, it might be best to stick with one of those. And that brings us to the final wildcard framework, Mythril. It's also very wait and tends to perform better than the big frameworks. It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different. To get started, create an index HTML file, then add the mithril script tag to it. You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object. We can add data and methods to the component as properties on the object. There are also special properties like on init, which is the life cycle hook for when the component is first initialized. Then we have view to define the UI itself. To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items. Then down on the form element, we're defining a handler for the on submit event. What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript. If you hate HTML and never want to touch it, you might like this system. But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build. But like I said before, it really comes down to personal preference and I could see why someone would really like this. And there you have 10 different ways to build the exact same JavaScript app. There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing. It's really just a matter of choosing the one that makes you and your teammates happy. If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses. Thanks for watching, and I will see you in the next one.
The speakers discuss the best JavaScript framework for building a to-do list, including Svelte, Angular, and Angular based frameworks. They stress the importance of creating a working to-do list and using React as a framework for building responsive UI. The use of React for building websites and automation, including St renewed, is discussed, along with the use of honoring templates and creating a smaller community for building standard web components. Personal preference is also emphasized for each framework.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : I built the same app 10 times // Which JS Framework is best? 
        and a small summary : The speakers discuss the best JavaScript framework for building a to-do list, including Svelte, Angular, and Angular based frameworks. They stress the importance of creating a working to-do list and using React as a framework for building responsive UI. The use of React for building websites and automation, including St renewed, is discussed, along with the use of honoring templates and creating a smaller community for building standard web components. Personal preference is also emphasized for each framework.
        [/INST]
        
        Generate the video : Which JavaScript framework is the best? If we go off of downloads, React wins, but based on GitHub stars, Vue is the best. But Svelte is the most loved framework according to the 2021 Stack Overflow survey, and some people out there might even tell you that you don't need a JavaScript framework. And whether you're a new developer or have 20 years of experience, it can be very difficult to choose which framework you wanna marry, which is the single most important decision you'll make related to your front end code. There's no absolute best framework and the only way to find out which one will make you happy is to build something with all of them. In today's video, we'll build the same app with 10 different JavaScript frameworks including Angular, React, Vue, Svelte, Lit, Alpine, Solid, Stencil, mithril, and vanilla. In the process, you'll learn the trade offs between each of these frameworks so you can make the best choice for your next project. This video was a ton of work, so make sure to subscribe and hit the like button. Then leave a comment below with your favorite framework, and I'll choose a few random ones to win a free t shirt next week. The first thing we'll do is build a basic to do app with vanilla JavaScript. About once a year, a hot take will go viral saying that you don't need a JavaScript framework at all. Any expert web developer needs to have a solid understanding of Vanilla JS. But even if you're a JavaScript god, attempting to build a non trivial app with it is a recipe for disaster. What you'll end up doing is building your own shitty JavaScript framework, and the last thing the world needs is another JavaScript framework. To build an app from scratch, all we have to do is create an HTML file, then add a script tag to the body. What we wanna build here is a to do app where the user can write some text into a form input, then submit the form and have that item appear in the list. In addition, we'll save those items to local storage as kind of a mock database so that when the user refreshes the page, those items are still present. Pretty simple concept, but there's actually a lot going on there, like state management, data binding, events, and the application life cycle to think about. The one thing that all frameworks do and vanilla JS doesn't is provide a way to bind or connect your HTML to the JavaScript automatically. In Vanilla, we need to imperatively grab the HTML elements that we're working with from the DOM. And I can tell you right now, this is a very annoying way to build a complex application. As you can see here in the DOM, we have an unordered list for the to dos and then below that, we have a form with an input and a button to submit the form. Now going into the JavaScript, the first thing I'll do is write some code using document query selector to grab each one of these items from the DOM. Now that we have access to the HTML elements, I'm setting up an empty array here to represent the actual to do items in the list. In addition to keeping track of the data, we also need to update the actual UI when that data changes. For that, I'm defining a function called add to do that takes a new to do item as its argument. Now this is where things start to get ugly with Vanilla. In order to update the UI, we need to manually create a new list item element by calling document create element. Then we need to imperatively update its inner HTML to the to do text. And finally, append it to the unordered list in the DOM. And as an add attach, I'll save the data to local storage so we can access it when the page is refreshed. The problem with this code is that the application data or state is completely decoupled from the UI itself, and that makes it very hard to keep the data in sync with the UI. Sigh. Now that we have this function in place, we need a way to call it when the user submits the form. For that, we need to register an event listener on the form's comes on submit event. When that event is fired, we'll first call prevent default to prevent it from refreshing the page, then call the add to do function with the current value in the text input. At this point, we should have a working to do list. But one important thing to notice here is that if you look at the HTML markup, you really have no idea what it's doing. There's no way to tell this form has an event listener attached to it unless you go search through the JavaScript code itself, which is is extremely difficult in a complex application. Now, one final thing to think about is the application life cycle. When the app is first initialized, what we wanna do here is grab the existing to do items from the local storage and render them in the to do list if they exist. If there are existing to dos in local storage, we can loop over them with 4 each and call you add to do function for each one of them. Congratulations. You just built a to do app with vanilla JS. But this code is not going to scale complexity very well, and there's likely many other features we'd want to add like routing or animation that we'd have to implement from scratch. And that's why the vast majority of developers choose to build their apps with a framework. 1st, we have React, which most people would consider the most popular framework, some people call it a library, but it doesn't really matter because it's a tool that becomes the main driver of your project, requiring you, the developer, you do everything the React way. I don't mean that in a bad way because React was created by very smart people at Facebook to build complex UIs like the Facebook UI. React is minimal by design and relies on the open source community to handle other concerns like routing, animation, state management, and so on. It's not opinionated about how you organize your code, which requires you to make a lot of decisions about which libraries to bring in and how to make things maintainable and scalable. Slow. React is by far the most popular framework with over 10,000,000 weekly downloads on npm and over a 170,000 GitHub stars. Its popularity alone makes it a great skill to learn because there are many employers out there looking to hire React developers, and you'll find tons of other React developers in the it's free to collaborate with. React has an official CLI called create react app. We can create a new React project by running the create act app command from the terminal. Now it's worth noting that many people opt for other tools when building a React project like Next. Js or Gatsby that would replace the default CLI. When you generate a new project with create react app, you'll notice it has a package JSON in the root of the project, inside of which there's a start script to serve the app locally. Under the hood, it uses a tool called webpack to bundle all your code together into a single JavaScript file. In React and most other frameworks, your application is organized as a tree of components. These components encapsulate parts of the UI and have ways to communicate with each other. This allows you to organize your app in a declarative way, where for a given set of application data, the end result of the UI will always be the same. Now in the app JS file, you'll first notice a function called app. That function represents a component in the UI, and personally, I love the simplicity of that. Now the return value of the function is JSX, which itself looks like HTML, but has been extended with an additional syntax allowing you to insert JavaScript into your HTML. For the to do list, we can define reactive state on the component with the use state hook. The hook is just a function that will return us with 2 values. The first item is the value of the to do list as reactive state, which means anytime it's updated, the UI will rerender to show the latest state. And then the second item is a function to update the state. Now if we go back down to the JSX, we can loop over the to do items in the say, and render them out directly in the UI as a list item. Then below that, we have an HTML form, but the cool thing about React is that we can bind an event directly to this form using on submit. Then on the right side of it, we can reference a function that will be called whenever where the submit event fires. And that function will update the state and store the result in local storage. You'll also notice that I'm using the use ref hook to grab the current value of the form input. One thing to notice here is that the HTML is a lot more descriptive. We know exactly which elements our data and events are bound to. Now the final thing we need to do here is run a life cycle hook in React that can be handled with the useEffect hook, which will grab the items from local storage when the component is first initialized. This hook can be really confusing though if you're just getting started. To only run it when the component is first initialized, I need you add an array as the second argument, and in my opinion, this code is just really hard to look at unless you really know what's going on with the useEffect hook. In any case, React is the gold standard for declarative UI frameworks. But there's more than one way to get the job done. Next, we have React's arch nemesis, Angular, which is developed and maintained by Google, and unlike React, is very opinionated about how to organize and structure a project. It has 75,000 GitHub stars and is the second most downloaded it's a framework on npm. It comes with officially supported libraries for routing, animation, and server side rendering. And because it follows a set of predictable conventions, all scalar projects are structured relatively the same and have awesome tooling to go along with them. In fact, you are actually required to use TypeScript. Google uses it internally to build hundreds of different web apps throughout their product line. It's a great option for big teams, but maybe a little overwhelming if you're a beginner. To an Angular project, run ng new from the command line. That'll give us a fairly large project to get started that's already configured with TypeScript. We can build a component in the app component dot ts file, or we could use the CLI to generate a brand new component automatically. In fact, Angular has the most powerful CLI I up all the frameworks by a pretty wide margin. And you'll notice the component itself is represented as a TypeScript class that has a component decorator on top of it. Now it is possible to define an entire component in this TS file. However, most Angular apps break components down into at least 3 separate files, sells one for your TypeScript, one for the HTML, and another for the CSS. To add reactive state to the component, simply define a property on the class. From there, we can define a method on the class to update the state. In addition, we can manage the life cycle of the component in the class by implementing special methods like n g on init. This method will be called whenever that component is first initialized. Now if we go into the template, you'll notice this looks like HTML, but it's been extended or empowered with a special templating language, that makes it possible to loop over an array of items using the ng for directive. Unlike React, which brings HTML into your JavaScript, Angular does the opposite and brings JavaScript into your HTML. Then in the form itself, we can bind to the submit event and run the add to do method whenever that event is fired. Then to get the actual value from the form input, we can use two way data binding using the ng model directive. This binds the form value to the to do text property on the class. However, to use this, we need to go into the app module and import the Angular forms module there because it's required for that directive to work. And for that reason, among many others, it tends to have a much higher learning curve than other frameworks. But everything is here for a reason and Angular is very opinionated about how to structure a project that will scale well, and that tends to make it very popular with enterprise applications. Since and that brings me to Vue. Js, which is independently developed and maintained by Evan Yu and feels very similar to Angular, but in a package that's it's more approachable for independent developers. It has official packages for things like routing and state management and a huge ecosystem of third party packages. It has the most GitHub stars at a 187,000 and is basically tied with Angular for a second place on npm downloads. Vue also has a very powerful CLI. Why? For example, we can hit the view UI command, which will bring up an actual browser window and walk us through all of the different dependencies and features that we can add when generating the initial app. This creates a really nice developer experience, but it doesn't generate components and is just not quite as powerful as the Angular for CLI. You'll notice it generates a far more simplified project structure. But in the main JS file, we can add additional plug ins for other functionality like routing or state management as it becomes needed. Components are defined in files that end in dot Vue. The code is organized into 3 parts, a template, a script, and the styles. The component itself is represented as a plain JavaScript object and we can define reactive data or state on it using the data pretty. Now to change the state, we have the methods property where we can define our add to do method that can be called when certain events are triggered. Then to tap into the component life cycle, we have methods like mounted that will be called when the component is first initialized. Very similar concepts to React and Angular, the main difference being that we're working within context of a plain JavaScript object instead of a function or class. In the template, we have a setup that's very similar to Angular that uses directives to handle things like v 4 to loop over the to do items, or v on submit to handle the form submission. One thing that's nice here is that you can automatically prevent the default behavior by just adding dot prevent to this directive instead of implementing that code in the method solve. You'll find a lot of little things like that in Vue that make your life easier. And lastly, we have the v model directive to bind the to do text to the form input value, Vue is awesome and has a big community, but another independent option is Svelte. It was the most loved framework on the 2021 Stack Overflow slow survey and has about 50,000 GitHub stars. It's not as common as the other 3 in the wild, but is very well loved by the people who do use it. Like React, it's designed as a minimal library and relies on the open source community for other features like routing. One thing that makes it unique from the other frameworks is that it doesn't ship a runtime like virtual DOM to the browser. Instead, it works as a compiler to turn your code into plain JavaScript. When you generate a new project, you'll have a roll up or webpack config if you choose, which is used to bundle your code and all the other CLI tools attempt to abstract that part away from you. When building a Svelte project, you may need to learn a little bit about module bundlers, whereas the other frameworks try to hide that detail from you. Components are defined in dot Svelte files. And just like Vue, they have 3 parts, the script, the template, and the styles. To create reactive state on the component, just declare a variable with the let keyword. Then to modify the state, define a plain JavaScript function. What I like about this is that it feels very natural. Scroll. It looks like regular JavaScript with minimal abstractions going on compared to something like React. Now to deal with life cycle hooks, we can import the on mount function from Svelte and register a callback for when the component is first initialized. Now down in the template, we have a special syntax that makes it easy to loop over things like each to loop over each to do in the array. Then to handle the form submission, we have onSubmit, and we can also add a bar with preventDefault to avoid implementing that detail in the function. And lastly, we'll implement two way data binding using the bind directive with value followed by the to do text variable. In my opinion, this is the cleanest implementation that we've looked at. It has the fewest lines of code and is fairly easy to read if you're a JavaScript developer that has never used Svelte before. The drawback though is that the community is much smaller than something like React. So if you need to use a supporting library or if you're looking to get a job, you might run into some more roadblocks than if you used a more popular framework. And the same goes for all the other frameworks that we'll look at from here starting with lit. Lit is a Google sponsored project that's focused on building web components. If you're not familiar, web components are a browser standard that allows you to create custom elements that can work across multiple frameworks. Sounds great, but the web components API is notoriously difficult to work with. The cool thing about split is that when you define a component, it's creating a standard custom element under the hood. Now, other frameworks can do that as well, but for most of them, it's just an afterthought and the developer experience is usually not ideal if your goal is to build standard web components. Litt doesn't have a CLI of its own, but there is a starter project to get us going. I'm using the TypeScript version here, but that part is optional. Inside the litapp ts file, you'll notice that it's calling window custom elements, which is part of the web components API in the browser. That's just a unique point that you won't see in other frameworks by default. Components themselves are defined as a class that extends LitElement. Reactive data can be defined as properties on the class using that property decorator. Then methods can be defined on the class to update the state. Life cycle hooks are based on the ones find in the actual web components API, like connectedCallback. By implementing the connectedCallback method, we can run code when the component is first initialized. Now one thing that's really interesting about Lit is the way that it handles templates. It uses the existing template literals that we have in JavaScript, or in other words, a string that starts with backticks. This allows you to interpolate JavaScript into an HTML string using dollar sign braces. The end result is something that feels kind of similar to JSX and React, but the HTML can also have directives like submit or dot value to bind to the form submit event or the input value. And as far as I can tell, it doesn't support two way data binding, so I had to set up an event listener here on the input change event to update the to do text whenever that event fires. The bottom line with lit is that you get a much nicer way to build standard web components without having to be an expert on the underlying APIs. And that brings me to an alternative framework that is also focused on web components called Stencil. This one comes from the team behind the Ionic framework, which itself is actually a component library for mobile development that's built with Stencil. They use web components for the purpose of making Ionic compatible with React, Angular, and Vue out of the box, create a new app by running npm init stencil, and that will give you a TypeScript project to get started. Just like lit, it will take each component and compile it down to a standard web component. A component itself is a class with the component decorator, which looks very similar to Angular, then reactive data can be defined as properties with the state decorator. Custom methods can be defined to update the state, then we have life cycle hooks like component will load to run code when the component is first initialized. At this point, this component looks almost exactly like an Angular component, but for templating, it uses JSX like React. That gives you the best or worst of both worlds depending on who you ask. The template looks almost exactly select the React app, but it doesn't appear to support two way data binding, which means I've also added an extra event listener for on input to update the to do text when the user types sips into the form. Stencil is another great option for building web components, but now we're going to move on to a framework that I get a ton of requests for, SolidJS. It's it's a tool for building UI components and feels very inspired by React, but the main difference is that it doesn't use the virtual DOM. Instead, compiles your code down to native DOM nodes similar to Svelte. And because of this, it hits very high performance marks across every benchmark. You can think of it like a faster, faster, more developer friendly version of React. But the drawback is that it has a smaller community to draw from. When you generate a new project, it uses Vite as the build tool, which is cool. Then then you have components defined in JSX files just like React. Components are defined as functions, then to define reactive state on the component, we use something very similar to a React hook called a signal. It returns us with a reactive value and a function to update that value. We can then define sign a function to update the state, and if we want to use a life cycle hook, instead of useEffect, we have the much more readable onMount hook that will run when the component is first initialized. Now for the UI itself, we use JSX. It looks pretty much identical to the React code, but I've noticed that Solid does things to make your life easier. For example, we can bind the form value to a variable using ref, and unlike React, we don't need to import the use ref hook to do that. Overall, SolidJS feels like a more well thought out and faster version of React. But now let's look at something totally different, Alpine JS. It's a tiny library at around 4 kilobytes that allows you to extend send your existing HTML with reactive data and many of the features that you would find in the frameworks we've already looked at. Instead of primarily focusing on JavaScript, with Alpine, you generally focus on your HTML. If you've ever used Tailwind for CSS, you can think of Alpine as the equivalent in JavaScript. It has over 17,000 GitHub stars and is a popular replacement for jQuery. To get started, create an HTML file, then add the alpine script to the head. Reactive data can be stored directly in a DOM node using the x data attribute. That data can then be used in a child element with something like x4 to loop over the array of to dos. Then down in the form, we can use x on submit and also prevent default salt, and then bind it to a function in our JavaScript. The concepts here are very similar to the other frameworks that we've looked at, but, in this case, we're working with raw HTML as opposed to some some custom templating language or JSX. Now, if we do want to write some plain JavaScript, we can do that in a script tag. And alpine actually has a mechanism called alpine store, that allows us to store data and share it between multiple components in the UI. That's what we'll need to do for our to dos so that we can load them from local storage. To handle that when the component is first initialized, we can call document add event listener to the custom alpine init event, and then update the data from the store when that event fires. And that gives us a complete app with very minimal code. In my opinion, Alpine feels like an awesome option when you just want to add a little bit of JavaScript activity to an existing HTML page. But at the same time, I don't think Alpine could replace something like React, Vue, or Angular. So if you're building a very complicated single page application, it might be best to stick with one of those. And that brings us to the final wildcard framework, Mythril. It's also very wait and tends to perform better than the big frameworks. It uses virtual DOM like React and Vue, but the overall developer experience is it's a lot different. To get started, create an index HTML file, then add the mithril script tag to it. You can actually create components from functions, classes, or as we're doing here, a plain JavaScript object. We can add data and methods to the component as properties on the object. There are also special properties like on init, which is the life cycle hook for when the component is first initialized. Then we have view to define the UI itself. To define a DOM node, we use the m function and pass the name of that node as the first argument, then options about the node as the second argument, like the class name for example, or you can pass children as a second argument, like we're doing there to map an array of list items. Then down on the form element, we're defining a handler for the on submit event. What you have here is something that is kind of similar to JSX, but the UI is truly defined in pure JavaScript. If you hate HTML and never want to touch it, you might like this system. But personally, I found it a bit awkward and the Mythril app actually it took me the longest amount of time to build. But like I said before, it really comes down to personal preference and I could see why someone would really like this. And there you have 10 different ways to build the exact same JavaScript app. There are new frameworks popping up every couple days, so this video will likely be very outdated by the time you finish watching the bottom line is that all these frameworks can do the same basic thing. It's really just a matter of choosing the one that makes you and your teammates happy. If you wanna see frameworks like Angular, React, and Vue in action, consider becoming a pro member at FireShip IO to get access to my full courses. Thanks for watching, and I will see you in the next one.
        