Introduction
Which technology should I choose for my new project/startup/application? If you haven't asked yourself this question yet, either you already know the answer or you probably will have to decide soon. Selecting a front-end framework can be a difficult and confusing process — you've heard of React, Angular and there's this new thing called Vue but you don't have time to learn all three so how do you choose?
As a technology company, building tools for technologies we use dozens of technologies on a daily basis. That's why we decided to share our experiencesof using the above-mentioned technologies in real life applications.
Before we move on to an actual comparison, you should understand one very important thing — there are no good or bad frameworks. They are all great and all of them will go down in the history of a web development.
You
- architecting single page applications or SPA's
- designing and developing components
- understanding how data flows through an application
- properly managing state templating and data binding
- working with back-end API s handling client-side routing
- using language abstractions like Sass and TypeScript
- applying testing in all of its various forms and leveraging front-end builds
You can think of frameworks as different types of cars. Each one can basically get you from point A to point B. However, while one accelerates faster, the other will be faster in winding-roads. The real question is what is more important for you? Therefore the real question isn't actually:
Which framework is better?
but:
Which framework suits my needs better?
As a team of developers we've been building both and huge applications, conducting discussions, interviewing colleagues with relevant experience in other companies, as well as reading tons of material online and today we would like to share with you our outcomes.
Similar to how the automotive market offers dozens of different car types, web development offers numerous solutions which could possibly help us build our new app. We can find Ember, AngularJS, Knockout, Polymer, Riot, Angular2, Vue, React and more. Back in the day (2012) AngularJS created by Google was very famous and almost dominated the world of open-source JavaScript frameworks. Technologies tend to change, progress and evolve at rapid speeds. Due to that, Google has decided to release Angular 2.0 in 2016, however, in order to apply new architecture (MVC vs components & directives, JavaScript vs TypeScript), the new version wasn't backwards compatible at all. As a result, the new framework came into existence, while the old one is still referred to as AngularJS, version 2 and next (currently 7) are just called Angular.
It took 5 years for the Angular team to release a new version, — though in web development 5 years is like an eternity. Therefore while Google was working on a new version, dozens of new libraries/frameworks were created. Some of them never got enough traction to become widely used, others survived till today but the community around them is marginal. In this article, I’m comparing the finalists in the race for the next framework we are going to be building our infrastructure with: Angular, React and Vue.
Hold on! What about jQuery?
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. jQuery was originally created in January 2006 and almost dominated the market. In 2015, jQuery was used on 63% of the top 1 million websites (according to BuiltWith), and 17% of all Internet websites. As of June 2018, jQuery is used on 73% of the top 1 million websites, and by 22.4% of all websites (according to BuiltWith).
Back in the day jQuery was making developers lives easier by solving issues which were difficult to deal with using plain JavaScript. The biggest advantage was cross-browser compatibility, you didn't have to worry whether given function is supported by a different browser. If you add on top of that, the fact that jQuery is very powerful in terms of available functions and ease of use, that might give you understanding why it became so popular that around 2009-2010, whenever you searched for a JS issue on stack overflow you've almost always found a jQuery solution.
However, although using jQuery is easier than plain JavaScript, new frameworks made it even easier thanks to the concept of templating (which isn't available in jQery). That shifted the logic to the view and made code much more readable and intuitive which is very important, especially in larger projects.
Does it mean that jQuery isn't important anymore? Definitely not! As I mentioned before — over 70% of the top 1 million websites still operates using jQuery. WordPress which powers over 32% of the web also uses jQuery as a core library, therefore it's still a very important part of web development environment. What is even more important - we should always choose the technology which covers the requirements of our project in a most efficient way. It doesn't make any sense to use i.e. Angular to build a personal blog or company website. In such cases, jQuery will provide the same performance and easier implementation in terms of time and difficulty
Although in this publication we will focus on Angular, React and Vue, jQuery is a still important player in the market.
Comparison method
To give you comprehensive answers we have compared all 3 in numerous, though not always obvious, aspects:
- Popularity
- Learning Curve
- Designation
- Code Style
- Performance
- Flexibility
- Tooling
- Maturity
- Support
- Usage
- Works demand
Learning Curve
How easy a framework is to learn for an experienced developer.
Templates are written using JSX, not native HTML so expect a bit of an adjustment period.
Vue offers an easy on-ramp for developers who are newer to client-side development. However it still lets you grow with it, which makes it a popular choice for beginners. Vue allows you to leverage native HTML and CSS skills and it's known for its well-written documentation.
A TypeScirpt and binding syntax may take a bit to get used to. However, being able to leverage native HTML and CSS for component templates and styles is a plus. Since Angular is meant for building the entire application, it's bigger and more complex than Vue. Angular has the steepest learning curve of the three frameworks — the Angular code can also feel verbose and complex at times when compared to React and Vue.
Designation
Focused on building user interfaces.
Focused on building user interfaces.
Meant to build whole applications.
Code Style
How readable and intuitive is the code and conventions of the framework?
React uses JSX (a simple JavaScript that uses HTML quoting). You can also use HTML tag syntax to render subcomponents, or write in good old-fashioned JavaScript, meaning you have flexibility as you code, either way.
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.
With Angular the official site provides example code in several languages; JavaScript, TypeScript, and Dart, though TypeScript is the most commonly used. As per styles, Angular utilizes Sass.
Performance
Package size
Library size (over the network / uncompressed): 32.5KB / 101.2KB
Library size (over the network / uncompressed): 31KB / 84.4KB
Library size (over the network):
-runtime.js (runtime) 1.05 kB
-polyfills.js (polyfills) 59.6 kB
-main.js (main) 172 kB
Together: 232,65 kB
How well-performing are apps built with the framework?
Performance benchmarks vary for some use cases — that said, each of these frameworks offers broadly similar performance. You can find very interesting comparisons in this post.
How big is the footprint of the framework with regards to package size and memory usage?
Duration in milliseconds ± standard deviation (Slowdown = Duration / Fastest)
Memory allocation in MBs ± standard deviation
Source: JS framework benchmark
Flexibility
How many features is the framework offering out of the box?
Because it's focused on building UI, you'll likely need to extend react with 3rd party libraries.
It's not as all-inclusive as Angular. Vue offers more out of the box than a react.
It's an all-inclusive framework that provides more in the box than React or Vue.
Tooling
What tools are available for the framework?
All three frameworks provide CLIs. These CLIs make it easy to create a new project, support local development and prepare for deployment.
How many stable plugins are there for the frameworks?
There are lots of great choices for fulfilling almost any requirement.
Although it has fewer plugins and tools available, there is a sufficient number of plugins for most common cases. Taking into account the rapidly growing community of Vue, new plugins are released on a daily basis.
The most capable CLI of the three, it furthermore offers a lot of built-in features, which are missing in competitors out of the box. Yet, the number of available plugins is huge and still growing.
Code Editors
All three frameworks have a great support within code editors like Visual Studio Code or Atom. However to get the best experience you will have to install the appropriate extensions.
Mobile
Does it offer a way to build native mobile applications?With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
Vue.js is a lightweight framework for building engaging user interfaces. NativeScript powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences.
NativeScript doesn't require Angular, but it's even better when you use it.
NativeScript features deep integration with Angular, the latest and greatest (and fastest) Angular framework.
Alternatively:
Ionic is a framework that allows us to develop mobile apps and websites using web technologies – HTML, CSS and Javascript basically.
The app on a mobile device is running inside a WebView, but of course, you don’t see a navigation bar inside that app later! It looks and feels like a regular app, and can be installed from the app store of course.
Maturity
How mature is the framework?Initially released in March 2013.
Is the youngest, initially released in February 2014.
While the AngularJS (the old one) was initially released in October 2010, the new Angular was introduced in September 2016.
A strong community and Facebook support ensures that React is a key player and will stay that way over the coming years. Similar to Vue React don't publish estimated release dates.
There are no future release dates announced, however taking into account the fastest growth of Vue users among others factors we can assume that it will be a key player in the coming years.
Unlike Vue and React Angular announces expected dates for its future releases. Angular 8 is expected in March/April 2019, while Angular 9 should go live somewhere in September/October 2019.
Support
Long-term support and migrations:
React's API is quite stable as Facebook states in their design principles. Whenever a new API is released, there are some scripts that help you to migrate. The React team wrote a blog post about their versioning scheme. When they add a deprecation warning, they keep it for the rest of the current release version before the behavior is changed in the next major version.
The Vue Team states that whenever a new major version is released, the previous major becomes LTS for 18 months.
According to an Angular team blog post, their major releases are scheduled every six months. Starting from Angular 4 the team has announced that each version will be supported for at least one year beyond the next major version release. In most cases updates are easy and supported by migration tools (if needed).
How big is the team behind the framework?
React seems to have the biggest team with 989 contributors on GitHub.
Though the community is growing, it is not currently as established as or as big as the others counting 215 contributors on GitHub.
Originally created by Google, there currently are 758 contributors on GitHub.
Is there a company or organization that owns the framework?
As already noted, Angular and React are supported and used by big companies. Facebook, Instagram, and Whatsapp are using it for their pages. Google uses it in a lot of projects: for example, the new Adwords UI was implemented using Angular & Dart. Again, Vue is realized by a group of individuals whose work is supported via Patreon and other means of sponsorship. You can decide for yourself whether this is a positive or negative.
Usage
Typical end user:
Popular within startups and smaller organizations.
Popular within startups and smaller organizations.
Focused on the application which makes it popular with enterprises.
Companies using these frameworks:
Airbnb
Uber
Twitter
Pinterest
Codecademy
9GAG
Netflix
Adobe
Xiaomi
Alibaba
Google
PayPal
Microsoft
AT&T
WWF
Works demand
What is the current and past demand in the market for people with certain skills? (Job advertisements)
Disclaimer: values below are estimated. Due to the ambiguity of phrases like React, values are estimated based on 5 different search results and averaged
Indeed: ~7,000
LinkedIn: ~20,000
Indeed ~2,500
LinkedIn: ~7,000
Indeed: 17,500
LinkedIn: 82,398
Popularity
Some time back there was a fairly momentous occurrence in the JavaScript framework world: Vue.js passed React.js in the number of people who have 'starred' it on Github. Using a tool called Star History, we can see that this measure, in particular tells a story of React's historical dominance being overtaken by the skyrocketing Vue.
This challenge was so exciting that one the developers created a dedicated website to track whether Vue has passed React yet?
Although GitHub stars can indicate an attitude that a community has to a certain technology, it has no correlation with actual usage. Github stars are more of a measure of the "hipness" of a project than its actual use.
Let me visualize why this apparent correlation is wrong:
A web server that powers 38% of the Internet has 1,766 stars on GitHub. A library that adds color to your Node console has 3,206. pic.twitter.com/tGQJi3jYq1
— Ben Sandofsky (@sandofsky) June 15, 2018
As you can see, stars are important but they cannot be confused with actual usage.
Summary
Picking the right front-end framework is important. But far more important is to focus on learning their shared concepts, as this will prepare you for whatever happens to come next. Make no mistake front-end web development like all programming specialties will continue to change and evolve over time