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 view is the best but svelt 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 want to marry which is the single most important decision you'll make related to your frontend 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 svelt 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 want to 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 do's 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 added touch 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 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 forum's 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 extremely difficult in a complex application now one final thing to think about is the application lifecycle when the app is first initialized what we want to 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-do's in local storage we can loop over them with four each and call the 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 first 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 to 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 react is by far the most popular framework with over 10 million weekly downloads on npm and over 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 industry to collaborate with react has an official cli called create react app we can create a new react project by running the create react 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 and 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 two values the first item is the value of the to-do list as reactive state which means any time it's updated the ui will re-render 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 array 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 the submit event fires and that function will update the state and store the result and local storage you'll also notice that i'm using the usref 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 use effect 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 to 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 use effect 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 as the second most downloaded 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 angular 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 may be a little overwhelming if you're a beginner to start 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 appcomponent.ts file or we could use the cli to generate a brand new component automatically in fact angular has the most powerful cli of 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 three separate files 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 lifecycle of the component in the class by implementing special methods like ng 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 ng4 directory 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 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 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 hundred and eighty seven thousand and is basically tied with angular for second place on npm downloads vue also has a very powerful cli for example we can hit the view ui command which will bring up an actual browser window and walk us through all 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 cli you'll notice it generates a far more simplified project structure but in the main.js file we can add additional plugins for other functionality like routing or state management as it becomes needed components are defined in files that end in dot view the code is organized into three 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 that data property 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 in angular the main difference being that we're working within the 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 v4 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 itself you'll find a lot of little things like that in view that make your life easier and lastly we have the v model directive to bind the to-do text to the form input value view is awesome and has a big community but another independent option is spelt it was the most loved framework on the 2021 stack overflow survey and has about 50 000 github stars it's not as common as the other three 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 rollup 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 smelt 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 spell files and just like view they have three 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 it looks like regular javascript with minimal abstractions going on compared to something like react now to deal with lifecycle hooks we can import the on mount function from svelt 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 on submit 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 spelt 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 lit 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 lit 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 lit app 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 lit element reactive data can be defined as properties on the class using the property decorator then methods can be defined on the class to update the state lifecycle hooks are based on the ones defined in the actual web components api like connected callback 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 like 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 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 solid js 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 it compiles your code down to native dom nodes similar to spelt and because of this it hits very high performance marks across every benchmark you can think of it like a 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 veet as the build tool which is cool 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 a function to update the state and if we want to use a life cycle hook instead of use effect we have the much more readable on mount 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 used ref hook to do that overall solid js 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 four kilobytes that allows you to extend 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 do's then down in the form we can use x on submit and also prevent default 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 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-do's 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 interactivity to an existing html page but at the same time i don't think alpine could replace something like react view 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 wild wildcard framework mithril it's also very lightweight and tends to perform better than the big frameworks it uses virtual dom like react and view but the overall developer experience is a lot different to get started create an index.html file then add the mithral 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 here 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 mithril app actually 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 it 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 want to see frameworks like angular react and view 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

Channel: Fireship

Views: 425,379

Rating: 4.9729128 out of 5

Keywords: webdev, app development, lesson, tutorial, javascript, js, react, angular, svelte, vue

Id: cuHDQhDhvPE

Length: 21min 58sec (1318 seconds)

Published: Wed Aug 11 2021