If you are a developer starting out on a project and cannot decide on which JavaScript framework to use, this guide should help you make a decision.
Once you’ve mastered the basics of JavaScript, selecting a front end JavaScript framework can be a difficult, confusing process. You’ve probably heard of React and Angular — now there’s this new thing called Vue?
You don’t have time to learn all three. So, how do you choose?
Whatever you do, don’t overthink it.
You can be successful with any of these frameworks, and learning one framework makes it easier to learn another. Picking a framework is important, but it’s far more important to focus on learning these shared concepts. This will prepare you for whatever you happen encounter in your development.
As you learn everything you need to know about a given framework, you won’t just learn about that specific framework, you’ll also learn about these concepts all three share:
- Single-Page Applications (SPAs) Architecture
- Component Design and Development
- Data Flow through an application
- State Management
- Templating
- Data Binding
- Working with Backend APIs
- Client-Side Routing
- Language Abstractions like Sass and TypeScript
- Testing
- Front end Builds
When deciding on which to use, think about your situation or requirements.
If you’re looking to land a job as a developer, what are employers in your area looking for? Do you want to work for a startup or for a more established enterprise? Do a survey of local job openings or talk with a recruiter.
Which framework has the most active local community? Get out and attend a local meetup that’s focused on React, Angular or Vue and meet other developers who are passionate about those frameworks.
If you’re selecting a framework for your team’s next project, what’s the collective skill set for your team? Do you have a lot of general JavaScript knowledge? Would your team benefit from selecting a framework with a gentler learning curve? What features are most important for the application that you’re building?
A Brief History of Angular, React, and Vue
Angular, developed by Google, was first released in 2010, making it the oldest of the lot. It is a TypeScript based JavaScript framework.
Google and Wix are among the most popular companies using Angular.
Vue, also known as Vue.js, is the youngest member of the group. It was developed by ex-Google employee Evan You in 2014. Over the last two years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. Websites like GitLab and Alibaba are using Vue.
React, developed by Facebook, was initially released in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp).
Whatsapp, Instagram , Paypal, Glassdoor, BBC are some of the popular companies using React. It is highly dynamic and offers great support in creating interactive user interfaces.
Popularity 🔥
As “angular” and “react” are common words, it is difficult to grasp their popularity from Google Trends. Though, a good proxy for their popularity is the number of stars that their GitHub repositories get. A sudden shift in the number of stars of Vue occurred in mid-2016 and, recently, Vue has been up there with React as the most popular frameworks.
Job market for Angular vs React vs Vue 👷♂️
The best sources of data that indicate the trends on the job market are the various job boards.
As seen from the trends of late 2018, the number of jobs that require a skill set of Angular or React is roughly the same, whereas that of Vue’s is still only a fraction of this number (about 20%). This list is definitely not exhaustive but gives a good picture of the overall tech industry.
If you are looking strictly from the point of view of the current job market, your best bet is to learn Angular or React. However, given that Vue has gained popularity over the last two years, it may take some time for projects to use Vue, or new projects that adopt Vue to reach a maturity level that commands a higher number of developers.
Ease of Learning
At their core, React and Vue are focused on building user interfaces while Angular is focused on building applications. Because of this, Angular is bigger, more complex and has a steeper learning curve.Even though it takes time to learn Angular, the investment pays dividends in terms of understanding how the front end works.
While they’re initially smaller and less complex, the more that you extend React and Vue the more their size and complexity grows.
React is not a complete framework and advanced features require the use of third-party libraries. This makes the learning curve of the core framework not so steep but depends on the path you take with additional functionality.
Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option
Tooling Support
All three frameworks provide CLIs, or Command Line Interfaces. These make it easy to create new projects, support local development and prepare your apps for deployment. All three also have great support within code editors like Visual Studio Code and Atom. To get the best experience and maximize your results, you’ll need to install the appropriate editor extensions.
Performance
While performance benchmarks (i.e. how quickly specific tasks take to complete, such as rendering a list of items) vary for some use cases, each of these frameworks offers similar performance, so this isn’t a significant differentiating factor for most developers or teams.
The Verdict
React
Pros
- Easy, lightweight component creation
- Elegant API that encourages composition
- Large supporting community
- Popular with startups
- Lots of open-source extensions
React offers easy, lightweight component creation — functional stateless components are about as easy as it gets. Furthermore, React’s elegant API encourages you to embrace composition using components.
React is very popular, evidenced by its large supporting community. React’s popularity has helped to drive adoption with startups. The availability of a wide variety of open-source, community-developed extensions for React gives you lots of options for building out complete solutions.
Cons
- Adjusting to JSX
- Complete solutions require third-party libraries
- Availability of options can overwhelm or confuse
Component templates are written using JSX, not native HTML, so you should expect a bit of an adjustment period. Because of its focus on building UIs, you’ll likely need to extend React with third-party libraries. For example, if you need to support client-side routing in your app, you’ll likely use the popular third-party library React Router. Luckily, there are lots of great choices for fulfilling almost any requirement. But having more choices can be overwhelming or confusing—especially for beginners.
Angular
Pros
- All-inclusive framework
- Guidance on how to build complete solutions
- Popular with enterprises
- Capable CLI
- TypeScript
- Support for native HTML and CSS
Angular is an all-inclusive framework that provides more “out of the box” than React or Vue. As a result, it provides more guidance on how to build complete solutions. Its focus on application development — evidenced by the inclusion of features like routing and form validation — makes it popular with enterprises.
Angular has the most capable CLI of the three frameworks. It’s used throughout the development of your app to create new components, install packages and run migration and installation scripts. TypeScript — with its static typing and amazing editor enhancements — offers skilled developers who don’t have a lot of JavaScript experience a friendlier transition to client-side development. And while its binding syntax can take a bit to get used to, being able to leverage native HTML and CSS for component templates and styles is a plus.
Cons
- Large API
- Steep learning curve
- Code can feel verbose and complex
Angular’s large API and overall approach to developing apps results in the steepest learning curve of the three frameworks. Angular code — with its use of static types, decorators and configuration-based approach — can feel verbose and complex at times when compared to React and Vue.
Vue
Pros
- Easy onramp for developers
- Grows with you
- More inclusive than React
- Support for native HTML and CSS
- Well written documentation
Vue’s scaled-down experience offers an easy onramp for developers who are newer to client-side development, while still being capable enough to grow with you as your skills develop. And while it’s not as inclusive as Angular, Vue does offer more “out of the box” than React. This makes it a popular choice for beginners.
Like Angular, Vue also allows you to leverage your native HTML and CSS skills instead of needing to learn a new templating language, as you do with React. And it’s known for its well written documentation.
Cons
- Newer than React and Angular
- Smaller community (for now)
- Lack of support for large-scale projects
Introduced in 2014, Vue is newer than both React (2013) and Angular (v.1 2010, v.2 2014). So, while its community is growing, it’s not currently as established or as big as the others.
The Conclusion
Trying to decide which of these front end frameworks is the “best” is a little like trying to decide which ice-cream flavor is the “best” — it’s a subjective decision that will vary for each person and situation, and your favorite will likely change over time.
Every framework has its own pros and cons, meaning that there should be just the right choice for every single case during product development.Make no mistake — front end web development, like all programming specialities, will continue to change and evolve over time.
If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks !!!
Top comments (3)
This is a very good comparison for each framework, but I didn't notice any mention of who backs these frameworks. React is used heavily at Facebook for their UI. Google use's Angular for hundreds of internally facing apps. So both companies are investing $ into their framework's development, maintainability, and stability, which offsets some risk for anyone who wants to use it for their own company/projects.
How and who maintains a framework might not matter to some people, but it is worth mentioning, as it can be a deciding factor in choosing the right one for a given job.
Hey @brad, you are right, I forgot to mention the giants who back these frameworks as I thought it's not important, but after reading your comment I rethought it and I completely agreed with you that it may not matter to some people, but at the same time it can be a deciding factor in choosing a right one for a given job. So, I've updated the content.
Thanks for your useful suggestion
Vue is getting stronger and with the next iterationwill have a better TypeScript support, Vue deserve more attention 👀
Those Cons aren't Cons at all, right?