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.
- 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?
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.
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?
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.
To give you comprehensive answers we have compared all 3 in numerous, though not always obvious, aspects:
- Learning Curve
- Code Style
- Works demand
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.
Focused on building user interfaces.
Focused on building user interfaces.
Meant to build whole applications.
How readable and intuitive is the code and conventions of the framework?
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
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.
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.
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.
MobileDoes it offer a way to build native mobile applications?
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.
MaturityHow 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.
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.
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:
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
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.
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