What framework do you use? Are the big three JS flavors still Angular, React, and Vue? The great debate for JavaScript is do we want new and shiny or do we want reliable.
A high-level history Angular, React, and Vue
Angular, developed by Google, was first released in 2010, making it the oldest of the three. It is a TypeScript-based JavaScript framework. Angular 2 dropped the JS from the original name in 2016. The newest edition Angular 11 released 11.11.2020.
React, developed by Facebook, was initially released in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp). The current stable version is React v17.0, released October 2020 with no new features but it's goal is primarily focused on making it easier to upgrade React itself. The React developer team calls this the 'stepping stone' release.
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 four years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. The current stable version is 3.0, released in September 2020. Contributors for Vue are supported by Patreon.
The State of JS 2020 Survey Results
Based on the newest 2020 survey Best of JS it includes over 23,700 humans surveyed in 137 countries. Fun Fact: Only 5.8% of the respondents are female. sigh.
Front-End Frameworks
As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very serious contender for the front-end trophy. The big winner was React for satisfaction, and usage. Vue did capture top billing for interest at 63%.
| Satisfaction Scores | |
|---|---|
| React | 88% |
| Vue | 85% |
| Angular | 42% |
| Usage | |
|---|---|
| React | 80% |
| Vue | 49% |
| Angular | 56% |
| Interest | |
|---|---|
| React | 58% |
| Vue | 63% |
| Angular | 21% |
| Awareness | |
|---|---|
| React | 100% |
| Vue | 77% |
| Angular | 100% |
License
Before you use an open-source framework, make sure you go through its license. Interestingly, all three frameworks use the MIT license, which provides limited reuse restrictions, even in proprietary software. Make sure you know the implications of the license before using any framework or software.
Size Matters and So Does Load Times
| Library Size | |
|---|---|
| React | 116 KB |
| Vue | 91 KB |
| Angular | varies depends on the bundle size produced |
Although there are significant difference between the sizes of the frameworks, they are still small as compared to the average webpage size (about 2MB according to the most recent data).
Pros and Cons
Components
Components are integral parts of all three frameworks. A component generally gets an input, and changes behavior based on it. The use of components makes it easy to reuse code.
Angular is the most mature of the frameworks with a steep learning curve and concepts of development. Angular separates the UI part of components as attributes of HTML tags, and their behavior is in the form of JavaScript code.
React combines the UI and behavior of components. The same part of the code is also creating the UI elements and dictating it's behavior.
Vue the UI and behavior are part of the components and make it more intuitive. Vue is highly customizable, for example, combine the UI and behavior of components from within a script. Also kudos to superb functionality and integration.
What About Learning Curves?
Angular Steep Learning Curve. In order to become an Angular master you must learn TypeScript and MCV.
React is not a complete framework and advanced features require the use of third-party libraries. This makes the learning curve not so steep. You can set up React within an hour. Documentation is amazing, thorough and complete with a pretty great Getting Started guide.
Vue highly customizable so much easier to learn that Angular or React. Vue has an overlap with Angular and React for component functionality. Transitioning to Vue from Angular or React is an easy option. Beware! It allows poor code making it hard to debug and test.
So Who Wins?
Angular is the most mature of the frameworks, and is a complete package. The learning curve is steep, but is a good choice for large teams and developers who already use Typescript (which is making a comeback). Very restrictive and not much flexibility.
React is on the cusp of a mature framework and has gained widespread acceptance. And the job marketing is looking really good for "Reacters". If you are getting started with front-end JavaScript frameworks, devs who like flexibility this is a solid choice. The ability to integrate with other frameworks seamlessly makes it advantageous for those who like code flexibility.
Vue over the last few years has really become a strong competitor for Angular and React. There are a lot of Chinese giants (think Alibaba and Baidu) who use Vue as their primary front-end JavaScript frameworks. If you like simplicity and just enough flexibility Vue will work for you.
Each framework has it pros and cons and there's no absolute right choice. I encourage you do some research before deciding. That's what I am doing and also asking our DEV community. I reached out earlier this month to find out what's the real dev opinions that aren't swayed by corporate sponsorship or employment.
Shout out to Soumya Ranjan Naik who just took the choose your framework life partner (which I love). He offered these consideration for choosing:
Vue.js : young and simple and has most stars on GitHub among these brainchild of a person but is influenced by community.
React.js : Mature enough and the most popular one and child of a big company hence won't die soon also has most number of jobs.
Angular : Oldest one and very strict along with a very opinionated and mixed impressions among Developers also child of a big Company.
The Big Take Away
Learn plain JavaScript and Typescript first before making a decision.
I hope this helps your 'framework life partner' journey. I look forward to your replies. Seriously, talk to me.
Top comments (4)
For me it is Svelte, there is no debate.
Interesting...Tell me more. Why do you like it? As I am still trying to decide what framework is best for me. And is Svelte too new to be a marketable trait for people looking for jobs?
The job market is polluted with React and Angular developers and often has poor developer experience for newcomers to the framework.
Svelte on the other hand has a very small learning curve and the site has great tutorials; if you know basic HTML, CSS and JS then you already know 50% of Svelte.
I personally chose svelte because it is very straightforward and easy to code and maintain even a large codebase and I really enjoy having a clean codebase and a neat file tree which is impossible with Angular. Svelte, in general, is a compiler-based framework, it compiles your code to vanilla javascript, react, angular and vuejs mounts the library to the client-side.
In Svelte you write less code, and less code means fewer errors, so you can concentrate on improving your app and concentrate in areas of the app (shipping the code, business logic, etc.)
Excerpt from here
PS. It is easy to hire any frontend dev and make them a good Svelte developer because of the short learning curve.
Angular is a mature framework 😄.