Framework vs. Library: What's the Difference?
Are you confused whether you should use Angular, React, or Vue for your next project? Let me help you out. In this short video, I'm gonna quickly compare these three tools. We're gonna look at their history, their learning curve, their stability, their ecosystem, and then I'm gonna tell you which JavaScript framework to use for your next project.
First, let me get the terminology clear. What is the difference between a library and a framework? Some developers use these terms interchangeably, but they're actually different. A library is a collection of reusable code that is used to solve common problems. There are various libraries out there for solving different types of problems. For example, we have libraries for performing mathematical calculations, we have libraries for machine learning, and so on. React is a library for building interactive user interfaces.
A framework, on the other hand, gives us a lot of reusable code, just like a library, but it also provides a structure or a skeleton for building applications. So when using a framework, we have to build our application according to that framework. Frameworks have opinions in terms of how we should structure our application, how the application should get started, how various components should interact with each other, and so on. Angular and Vue are both examples of popular frameworks for building front-end applications.
Why Use a Framework or Library?
Now, one of the questions I get a lot is, "Mosh, why do we have to use a framework or a library to build an application? Can we just use plain old JavaScript?" The answer is yes, you certainly can, but it's a waste of time. Here is the reason: imagine you want to build a desk. Would you buy pieces of wood and put them together, or would you go to the forest and cut the trees first? There is no reason to cut the trees when there are already pieces of wood ready for us to reuse. We use frameworks and libraries to increase our productivity and speed up the development process. There is a lot of code that is tested and is ready for us to reuse.
Popularity Trends: React, Angular, and Vue
So, this is all about libraries and frameworks. Now, React, Angular, and Vue are the top three tools for building applications these days, but which one is better? Let's find out. Look at the results of this Stack Overflow developer survey in 2019 that just came out. Here's a list of the most loved web frameworks, and the winner is React. It is closely followed by Vue this year, and Angular seems to be losing its popularity compared to previous years. If you look at Google Trends, you can see that React is the most popular library out of the three.
The History of Angular
Now let's have a quick look at the history of these frameworks. Angular is the oldest of the three. It's developed by Google and was initially released in 2010. Until 2016, it used to be called AngularJS. In 2016, the Angular team released Angular 2, which was a complete rewrite of AngularJS. In fact, it had nothing in common with the previous version of Angular. It was a completely new framework. So to reduce confusion, the Angular team decided to drop the JS from the original name and they call the new framework Angular. This made a lot of developers unhappy. Any applications that were built with AngularJS had to be rebuilt with Angular. Also, over the last three years, there have been several releases of Angular, and we have experienced several breaking changes. As an online instructor, this made me very unhappy because my Angular course got outdated pretty quickly, and I had to do a lot of patches to the course, and at some point, I ended up recreating the entire course from scratch, but it came soon after the course got outdated.
The History of React
React is developed and maintained by Facebook and it's been around since 2013. Currently, it's at version 16 and it's being used by Facebook, Twitter, Netflix, PayPal, and Uber to name a few. It has a huge community, which means somebody out there has already solved the problems you may encounter. So there are tons of third-party libraries, packages, tools, extensions, as well as tutorials and courses.
The History of Vue
Vue, or Vue.js, is the youngest kid in town. Unlike Angular and React, Vue isn't developed by a big corporation. It was originally developed by an ex-Googler employee in 2014 and now it's maintained by a group of passionate developers. Even though it's a new framework, it has gained a lot of popularity over the past two years.
Learning Curve: Angular vs. React
Now, what about the learning curve? The framework or library you choose should be relatively easy to learn so other members in your team can quickly get up to speed. Angular has always been famous for having a steep learning curve because it's a full-blown framework or a complete solution. There are so many concepts you need to learn, such as directives, modules, decorators, components, services, dependency injection, pipes, and templates. After that, there are more advanced topics such as change detection, zones, ahead-of-time compilation, and RxJS. The entry barrier for Angular is clearly higher than for React. There are so many things you need to learn.
In contrast, React is just a library and not a complete solution, so it has fewer concepts that you need to learn and understand. React uses JavaScript XML, or JSX—HTML within JavaScript code. So to get started, you need to learn the JSX syntax as well as how to write components, manage internal state, and use props for configuration. You don't need to learn a lot of new concepts since all of this is just plain JavaScript. Once you have learned the basics, then you can learn about a routing and a state management library for building complex enterprise applications. So the entry barrier for React is a lot lower than for Angular, and that's one of the reasons I love React. If you know JavaScript well, you can get started with React pretty quickly.
Author's JavaScript Learning Resources
Now, if you want to improve your JavaScript skills, I have a tutorial here on my channel called JavaScript for React Developers. It quickly walks you through the essential JavaScript features that you need to know to build React applications. I also have a couple of comprehensive courses on my website: JavaScript Basics for Beginners and Object-Oriented Programming in JavaScript. So totally you have 12 hours of in-depth JavaScript training in front of you for a very reasonable price. If you're interested, the link is below this video.
Vue's Learning Curve & Talent Availability
Now let's talk about Vue. I would say learning Vue requires roughly the same amount of time and effort. It's definitely easier to learn than Angular. Some argue that it's even easier than React, but that's very subjective.
Another thing to consider when choosing a framework or library for your next project is talent availability. You want to make sure that you can easily find new resources to join your team. With React being the most popular front-end library, you'll have a better chance at finding React developers. I would say Angular comes next and Vue comes last since it's still a new framework.
Stability and Breaking Changes
The other factor you need to consider is the stability of a framework. You want to make sure that the framework or library you choose introduces minimal risks to your development process. The Angular team have planned major updates every six months. During these major upgrades, you will experience breaking changes, and you have another six months to make the necessary changes before the old APIs are deprecated. So that gives you a total of two releases or one year to make the necessary changes.
With React, you have to worry less about this because Facebook takes the stability of React seriously. Big companies like Twitter and Airbnb use React, and that's one of the reasons Facebook is reluctant to make any big changes that could impact these companies. As per Vue, 90% of the APIs are the same if you're migrating from version 1 to 2. They also have a migration helper tool that makes it easier to migrate your applications.
Now let's take a look at the open-source community involvement in all these three frameworks. Something interesting to note here is that Vue has the most number of stars among the three on GitHub, but it also has the least number of contributors. What it tells me is that people are interested in Vue, but it hasn't gained the momentum that React and Angular have gained in the open-source community. React has around 126,000 stars, which is a lot for an open-source library. This shows that people love React. In contrast, Angular has only about 40,000 stars. React also has a significant number of contributors. There are over 1,200 developers contributing to React, which is way more than Vue and Angular.
Now, look at the weekly downloads. React has the most number of weekly downloads with a whopping 5.2 million. Vue comes second with 980,000 weekly downloads. I was surprised to see that Angular downloads have dropped significantly. So based on the community and growth of frameworks, React is at the very top, Vue is liked by the community and upcoming. Angular, on the other hand, seems to be losing its spark and slowing down.
Bundle Size and Modularity
And the last thing I want to consider when choosing a framework is its size. Now, I personally don't like to debate much on this because all these frameworks and libraries are constantly getting optimized. But if you're curious, you can see that Angular is fairly large compared to React and Vue. This is because Angular is a full-blown framework. It has everything you need, from routing, templates, testing utilities, and so on. And that's the reason the framework size is big and not suitable for lightweight applications.
React, on the other hand, is a library and not a framework. This means you don't get much out of the box, and you have to use other libraries for routing and state management. This makes React small and lightweight. So maybe you're building a small application that doesn't need routing, then you don't need to bring in a routing library. Or if you really need it, you can always choose your preferred routing library. You're not locked to what a framework gives you. Vue is even smaller and also suitable for lightweight applications. If you're looking for an extremely lightweight option, then Preact is smaller than Vue, and it's basically React with some features stripped out.
The Final Recommendation: Why Choose React
So, to recap, based on all these factors that we discussed in this video, I would recommend you to use React for your next project. Because first and foremost, it's a stable library and introduces minimal risk to your projects. It's easy to learn, it has a huge community, which means it's easier for you to find developers who know React, and there are tons of third-party tools, packages, and libraries for you to use. If you want to learn React from scratch, I have a comprehensive two-hour tutorial here on my channel. You can see it over here. I've also put the link down below. This tutorial walks you through all the core concepts in React. Even though I made it last year in 2018, it's still valid and up to date because React is a stable library and you won't encounter breaking changes. Facebook takes the stability of React seriously.
Learn React: Courses and Outro
So watch this tutorial first, but if you want to master React, I have a complete course for you that is 12 hours long. It goes far beyond my YouTube tutorial and touches on concepts such as building complex user interfaces, routing and navigation, calling back-end APIs, authentication and authorization, handling and logging errors, and deployment—pretty much all the concepts involved in building real applications. In this course, you will learn how to build a real video rental application with a Node back-end. This is an online video course just like my YouTube tutorial, and you can watch it anytime, anywhere, as many times as you want. You will also receive a certificate of completion at the end that you can add to your resume. We even offer a 30-day money-back guarantee. If you're interested, use the link below this video to get the course for a discount. Just remember we have a limited number of coupons, so enroll before the coupons run out.
If you enjoyed this video, please support me by liking and sharing this video. Also, subscribe to my channel for more videos like this and let me know in the comments section about your experience with any of these top three frameworks and your goals. Thank you and have a fantastic day.
