React vs Angular vs Vue - Benefits and Drawbacks
This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Beginner's Guide to Real World React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Beginner's Guide to Real World React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:50] Lesson 2. Comparisons with similar frameworks. There are many JavaScript libraries, frameworks, tools, projects and platforms out there that help solve developers problems, help them to build user interfaces and ship excellent products faster. When it comes to the building user interfaces part, the most popular libraries out there are Angular, Vue.js and React.js. Much like React, both Vue and Angular are concerned with empowering developers to build complex user interfaces in a modular way, breaking down parts of those interfaces into component parts. Look at these search trends from late 2017 to mid 2020. You can see React is the blue line, Angular is yellow and Vue is red. Looking at this search data from Google Trends, you can see that Vue has been steadily gaining interest over the past two years . React has increased dramatically whilst Angular has actually declined over the same time frame.
[00:51 - 01:13] Vue.js. Vue.js came onto the scene around 2014 and was developed by a former Google employee called Evanue. Vue is a progressive JavaScript framework, similar to React and has a rich ecosystem of additional libraries and plugins to enable additional functionality. Some of the benefits include empowered HTML. Vue is a lot of crossover with Angular in the way that it decorates HTML blocks within its components.
[01:14 - 01:40] Detailed documentation. One of the best features of Vue is the hugely detailed and informative documentation that helps developers at either end of the experience scale get up and running quickly. Ease of integration. Whether you're building a single page application or SPA or more complex application, Vue's smaller interactive parts meaning it can be integrated into existing infrastructure without affecting the wider system. Large scaling. Vue can be used to develop pretty large reusable templates to power very complex apps.
[01:41 - 01:50] Small code footprint. Vue wears in at about 20 kilobytes, keeping its size small but also aiding and increasing its speed and performance. It also has a small learning curve.
[01:51 - 02:56] Some of the drawbacks to Vue include lack of support and resources. Whilst rising in interest and boasting a loyal and growing community Vue has the smallest market share and so naturally has limited resources and solutions out there for budding developers of those seeking answers. Angular, formerly Angular.js which is a very different beast, is a fully fledged framework released back in 2009. It boasts a very mature framework that handles everything you need to build rich data driven user interfaces right out of the box. It offers an MVVM model view view model approach to development structure that separates out the working parts into their respective areas of responsibility. Some of the benefits of Angular include this MVVM structure. This allows developers to work in the same area of the app without stepping on colleagues' tools. However the MVVM approach is not as intuitive to those starting out or to those unfamiliar with this particular project structure. Two wear data binding. This enables singular behavior within the app reducing the risk for errors. Dependency injection of the required features that the current components depend on. Deep coupling with TypeScript including excellent TypeScript support. Very detailed documentation and guides.
[02:57 - 04:08] It also has a mature ecosystem similar to the documentation Angular is widely used and has a large ecosystem of resources, guides, help and advice for just about any situation you'll come across. Opinionated approach. Even down to the structure and architecture to make sure your project can scale well. Some of the drawbacks to Angular. It 's very complex and has an equally steep learning curve which is a big barrier to entry especially for new developers. Migration is often a problem when moving from older versions to new and a deep coupling with TypeScript. Yes this is also a benefit but TypeScript is not widely adopted by new developers and adds yet another few degrees to an already steep learning curve. But which one is best? This is really a duplicitous question as it pits each framework against one another and it really boils down to opinions and preference. There are many solid reasons to choose any of these three frameworks or indeed not at all. Remember that any library, framework, platform, language, design, pattern, whatever they're all just tools . At the end of the day you wouldn't use a hammer to unscrew a bolt and sometimes it's about finding the right tool for the job. When you have a choice of hammers it can be as simple as I prefer this one over that one and it's just as easy to write bad code with a good library. That is the concept where here to become React Jedi's so let's choose React and keep going.