Angular vs. Vue vs. React vs. Ember vs. Preact vs. Svelte (pheew, that was a mouthful after adding the last 2 to this update, even after consigning jQuery to history!) is a question a development team and product owners must ask themselves at the outset of every new web development project. Each of the popular JavaScript frameworks and libraries have their own relative strengths and weaknesses. Different developers, product owners and management have their own comfort zones in and opinions on the different options.
Of the JS frameworks and libraries we’ll cover Ember has certainly peaked and is now on the downward curve of its cycle of active use and popularity. There was hope of a road back with Ember Octane released in late 2019 and attracting a niche following. That appears to be spluttering out but it’s still early to stop talking about Ember entirely.
jQuery was covered in the previous edition of this post but we’ve dropped it here. The library is still used for some legacy applications that need to support old browsers but with the need for the abstraction layer to deal with interoperability issues between browsers now basically redundant, so is jQuery. RIP old friend! Your legacy will be remembered!
Others, Svelte and Preact, are fresh sensations and are just starting to pick up a head of steam. They may or may not go on to seriously challenge the dominance of the ‘big 3’ of React, Angular and Vue.js., as they mature.
Source: State of JavaScript 2019
But it would be dull to only talk about React, Vue and Angular. Ember has a significant legacy and will still see market demand for some time, even if it does look as though it is also on its way out as the technology wheel turns. Preact and Svelte, on the other hand, are just starting out on their journeys. They are generating some noise but it remains to be seen if they will become genuine rivals to the well-established choices of React, Angular and Vue.js at the enterprise level. The practical reality is that without the backing of a tech giant, like Google’s active support of Angular and Facebook’s for React, organisations see new frameworks and libraries as a strategic risk, even if they appreciate their technical qualities.
Taking an informed decision on which to go with for a particular front-end development project is one of the first major tasks at the outset of any planning process. There are a number of different considerations that can and do influence the final decision on the choice of JS framework/library that will be used for any given front-end project.
Of course, technical qualities, pros and cons in the context of the combinations of required functionalities, are a big factor in any choice between Angular, Vue, Ember and the rest. But it would be simplistic to presume the choice of JS framework for every front-end project comes down to an analysis of technical qualities and characteristics.
It can be argued that the strengths of a particular framework give it an edge in the context of a specific front-end dev project. But the most popular JavaScript frameworks and libraries are all highly flexible and impressive in their own right. The final choice often comes down to broader business case decisions and practicalities.
The additional factors that can often prove decisive in the decision-making process between frameworks include:
The goal of this blog is not to try to objectively determine which of the currently most used JavaScript frameworks/libraries is the best. The simple reason for that is the beauty of the contemporary front-end JS ecosystem is its maturity – the fact that there are a handful of great frameworks to choose between when considering the technical requirements of most applications.
And as already highlighted, the decision of which JS framework to run with on a new project or migration of legacy apps is often as much down to strategic business case factors as technical pros and cons.
But what we will do is look at both the trends in popularity between the main choices of React, Angular, Vue.js and Ember and what is influencing those trends. That will offer insight into the strategic considerations that might influence your decision.
And we’ll also take a broad overview of the technical strengths and weaknesses of those frameworks. The qualities that will help determine the suitability of a particular framework choice for a particular app, all things being equal across the strategic business case considerations.
Before moving on swiftly to looking at the competing merits of the ecosystem of dominant JavaScript frameworks, it makes sense to briefly touch on JavaScript itself and ask what is JavaScript used for as a coding language? That will give us context for our dive into the JS libraries and frameworks themselves.
JavaScript was first released 25 years ago and is credited with transforming web development over the years since. Despite the confusingly similar name, JS is completely distinct from Java, the general purpose programming language released by Sun Microsystems around the same time. Their only real common point is that they are both designed for cross platform development.
In a nutshell, the goal of JavaScript creator Brendan Eich was to make websites more interactive, improving user experience. JavaScript gained traction over the first 10 years of its existence but it was arguably Microsoft’s 2005 release of AJAX that was the real breakthrough.
AJAX led to Microsoft adding XMLHttpRequest to its Internet Explorer scripts, which meant the HTML of live web pages could be updated in real time by downloading new data from servers. There was no longer any need to fully reload a web page in order for it to pull new data to update. Other browsers quickly followed suite and asynchronous communication between website and server became the norm.
The result was a new breed of highly interactive apps such as Google Maps and Gmail, followed by Facebook et al. Google further catalysed the adoption rate of JavaScript as the front-end language of choice by creating its V8 browser and interpreter. That compensated for JavaScript’s weaknesses by compiling JS to machine code, rather interpreting it in real time on-the-go.
As JS has matured over the years and given rise to open source add-ons including the node.js server environment and React Native mobile app framework, it has become more than just a programming language. Today JavaScript is a bridge that connects front-end and back-end, web and mobile, browser-based and native app development.
The distinction between a programming language, library and framework can be initially confusing. Non-technical management often presume React, Angular, Vue.js, Ember and jQuery are programming languages.
Of course, they are not. JavaScript is the programming language and all of the above are frameworks and libraries based on JS. But libraries and frameworks have become a standard in contemporary web and application development because using them makes software development easier, faster, and by direct consequence, cheaper.
But what exactly are libraries and frameworks?
A library is a collection of pre-written ‘code snippets’ that perform commonly used JS functions. These snippets are used like Lego blocks to build more complex configurations of functions. For example, if you wanted your application’s search function to offer an autocomplete feature, a library snippet of code would be inserted.
Ultimately, libraries offer code snippets that speed up the process of building an entire project. But they are not a silver bullet that can be used to format a complex app from beginning to end.
React, Preact and jQuery are all examples of JavaScript libraries.
A JS framework is, on the other hand, a full toolbox that can be used to create a website or application. A good analogy is to think of libraries like the fixtures, fittings and furnishings of a house. And a framework is more like the template and pieces used to build a pre-fabricated building.
A JS framework provides the skeleton that an entire web development project is built around. The framework provides page templates that leave space for the details to be inserted in the form of custom code. That differs to using a library, where the developer decides where to add code snippets.
The strength of a framework is that it offers a lot of efficiency and organisation. The code is well-structured and the framework offers out-of-the-box solutions to frequently encountered coding challenges. The downside of a framework is that it allows for less flexibility. Additional custom coding of user experience and functionalities is limited to where the framework is designed to allow it to be inserted.
Frameworks can be customised but code added must follow the rules and conventions specific to the framework, limiting freedom and flexibility. It could be argued that, actually, no JavaScript framework really meets the strict definition of a ‘framework’. As nicely explained on StackOverflow:
“One of the defining characteristics of a software framework is that its code is protected from modifications. In JavaScript, this clearly isn’t the case. Any libraries or frameworks that can be called into your client-side code are modifiable, although it would be against best practices to alter them”.
A framework:
A framework calls your application’s code. But if you are using a library, your application calls the snippets of code from the library.
This explainer video by Java Brains offers a fuller explanation of the distinction between a JavaScript library and JavaScript framework:
Angular, Vue and Ember are examples of JS ‘frameworks’. Svelte, the new kid on the block, is described as a ‘component framework’. We’ll go into more detail on what that actually means when we look at Svelte in more detail.
There’s no black and white right or wrong answer to when to choose a JavaScript library and when a framework for a particular project. But as a rule of thumb, if the business and technical case for an application means you are happy to work within the limitations of the framework and lose some control in exchange for resource efficiencies, using a JS framework would make sense.
If you want greater control and flexibility and are willing to spend some more time putting your app together in the way you want, then a library may make more sense under the circumstances.
Anyone approaching a web development project in the months ahead will almost certainly be making a choice between React, Angular, Vue.js, Ember, Svelte or Preact. We’ve already tackled the very approximate question of when to opt for a JavaScript library, like React or Preact and when a framework, like Angular, Vue, Ember or Svelte.
Now we’ll take a closer look at the relative strengths and weaknesses of the individual options. But as an introduction into that, let’s take a look at the wider trends in the market.
There are of course more open source JavaScript frameworks and libraries than the 6 we are focusing on here. Backbone and Mithril, for example, have active communities and devotees. But it makes sense to focus our attention on those covered by the State of JavaScript report. The lack of developers with expertise in smaller frameworks and libraries mean that it is unusual for organisations to use them.
The visual below shows the level of awareness of major frameworks and libraries among the thousands of international JS developers around the world that contributed to the SoJS 2019 report. It clearly indicates how Ember has lost popularity over the past few years, with Vue.js usurping its place at the top table. It also shows how Preact and Svelte have, like Vue a few years ago, quickly burst onto the scene and made a genuine impact on the JS landscape.
The next graphic nicely represents developer sentiment towards the six, which could be a significant clue to how widespread the use of each is several years from now.
We can see that React is not only very widely used, with almost 80% of JS developers having coded with it, but that satisfaction levels are high. Next in terms of usage comes Angular, with over 60% of JS developers having used the framework.
But despite its popularity as a choice by those paying for and managing development projects, the developers themselves show relatively high levels of angst in their attitude to Angular. Of the approx. 58% of devs that have used Angular, close to two thirds say they would prefer to not do so again.
Their grumbling has obviously put off others from gaining experience in Angular. The number of those that haven’t used it yet and who have no intention or desire to in future is over three times more than the number of those who haven’t used it but would like to learn Angular.
That contrasts with Vue.js. A lower but still relatively high number of around 45% of JS developers have used Vue, but most who have are positive on the framework and would like to continue to use it. Of those who haven’t used Vue.js yet, almost two times more developers would like to in future compared to those who wouldn’t.
Almost 10% of JavaScript developers have now never heard of the Ember, which demonstrates it falling popularity and relevance. Of the 12%-ish of JS developers who have actually used Ember, a very small percent would like to do so again. A large majority of over 80% who have used Ember don’t want to work with it again. And a large majority of developers familiar with Ember without having used it, are not interested in doing so.
Of the two young pretenders, sentiment around Svelte is most positive. Only a tiny percentage of the 7% or so of JavaScripts devs who have used Svelte say they would not like to again. The rest have a positive attitude towards the new framework. Of those that haven’t yet used it but have heard of it, two times more would like to use it in the future compared to those who aren’t interested. Which can be presumed to be based on having heard positive things.
Roughly the same can be said of Preact, except that of those developers who haven’t yet used the library, less are interested in doing so in future, in comparison to the level of enthusiasm for Svelte.
Proactive JavaScript developers often explore and become familiar with new frameworks and libraries in their free time, utilising them in personal projects. But to move from niche to mainstream means companies and organisations choosing to use the framework or library when developing new applications.
That’s the real acid test. Are employers looking to hire Svelte or Preact developers? Is there still demand for Ember skills on the job market? Let’s take a look.
The numbers here speak very clearly. Commercially, in terms of open positions JavaScript developers are being actively recruited for internationally, there are only 3 JS frameworks and libraries being used in 2020 – React, Angular and Vue.js.
There is still some very limited demand for developers with experience in Ember. But despite interest, and positive sentiment, from the JavaScript development community, employers are not actually hiring Svelte or Preact developers. At least not in statistically relevant numbers.
When the State of JavaScript 2020 report is released, it will be interesting to see if that’s reflected by evidence the two upstarts have lost industry and community traction between 2019 and 2020. Or perhaps Svelte and Preact’s momentum hasn’t faltered. Maybe they just still have some way to go before becoming established enough for project sponsors with an eye on future-proofing to make the commitment of building their applications with them.
The market evidence of the statistics we’ve just looked at suggests that almost all new web and app development projects using JavaScript for their user-facing interfaces will choose between one of React, Angular and Vue.js in 2020. They are all great libraries and frameworks. The other 3 also have their merits but are clearly not considered, on the most part, commercially viable choices.
That can probably be put down to concerns over the longevity of active support and continued OS community development for Ember, Svelte and Preact. And the fact not enough developers have the skills and experience in either to mean sustainable recruitment will be practical.
But setting aside strategic and business considerations and focusing only on their technical merits, what are the strengths and weaknesses, or limitations, of our six leading JavaScript frameworks and libraries?
Angular is a JavaScript framework based on TypeScript and the second major iteration of the framework, phasing out AngularJS since its release in 2016. When first released by Google in 2010, AngularJS created a stir as one of the first JS-based front-end frameworks.
Facebook’s 2013 release of the React library, a more flexible framework, drew attention to AngularJS’s limitations and developers started to consider AngularJS outdated and move away from it.
In a great example of why a healthy JavaScript ecosystem is driven by competition and competing tools and standards, React’s arrival saw Google up its game and create an essentially new Single-Page Application (SPA) framework that was released as simply ‘Angular’.
All Angular releases up to 1.x versions are AngularJS, and all releases from 2.x on are Angular. In contrast to JS libraries like React, Angular is an end-to-end framework that offers all of the main components needed to build an Enterprise-grade web app.
The limitations that are inherent in Angular’s stricter structure, which is also its strength, has seen React overtake it in popularity in recent years. There are many developers that will argue that Vue.js, designed by ex-Googler Evan You to improve upon what he considered to be Angular’s weaknesses, is the superior framework.
If you refer back to the State of JavaScript graphic displaying JS developer sentiment, that is apparent. But Angular remains popular with organisations as, backed by Google, it is considered future-proofed. And, ultimately, the framework is still a strong option and far from a weak tool.
K&C developer Alex Chugaev makes his case for why he prefers Angular over React and Vue in the context of Enterprise-level applications. Ultimately, Angular is proven and reliable and will be an important JavaScript resource for years to come.
This video by Fireship compares the comparative strengths and weaknesses of Angular, React and Vue.js, argues Angular’s case. It also offers a very valuable critical analysis of the data set used in the State of JavaScript 2019 report.
React is a JavaScript library for UI development, despite the fact it is often referred to as framework for the sake of simplicity. Facebook originally created and maintains React, which gives it a lot of credibility. Uber, Netflix, PayPal, Airbnb, Twitter, Walmart and many other “giants” use React, which is a happy medium for large and middle-size projects.
A component-based web framework with one-way data flow, React has had a major impact on front-end web development, and in 2020 is the dominant framework/library used for JS applications. React can be credited with introducing concepts like functional, declarative programming, immutable state, which wasn’t previously common in front-end development. React’s other big claim to fame is the introduction of the Virtual DOM, which has helped improve user experience and app performance.
Preact’s goal as a JavaScript library is to offer the strengths or React in a smaller, lighter package. As a SPA tool, Preact weighs in at 3 KB compared to React’s 30 KB. The library was created by Googler Jason Miller with the support of a group of contributors and is used by Uber, Lyft, Tencent, Groupon and Domino’s.
Recently released Preact X has cleaned up the library’s code even more and added new features and compatibility enhancements to support more third-party libraries.
Preact’s size and speed mean that it is generally most suited to light mobile web apps or web widgets/embed that React can be heavy for. It’s minimalist nature means Preact will generally be considered for smallish projects where performance is prioritised.
Preact’s main weakness is a direct result of its primary strength as a much lighter, faster alternative to React. Its featherweight size inherently means it lacks the same range of features.
One notable difference to React is that ‘this props’ and ‘this.state’ are passed straight to render () method. This can be destructed later.
Based on the browser’s ‘addEventListener’, Preact doesn’t offer support for synthetic events.
Preact’s base core doesn’t support PropType validation which means it needs to be imported from the ‘preact/compat’ module if you want to use it.
Unit testing, which React uses the Enzyme testing utility developed by Airbnb for, is possible but requires some Webpack config and comes with limitations.
Vue.js was first launched in 2014 and then relaunched in 2016. Vue describes itself as an “Intuitive, Fast and Integrable MVVM for creating interactive interfaces.” At K&C, we tend to agree with those adjectives.
I love this description of Vue in a blog article on Packt:
“Vue occupies an interesting position in the triumvirate of frontend JavaScript frameworks. Not hyped to the extent that React is, and not as established as Angular, it’s spent the last couple of years quietly minding its business and building an engaged and enthusiastic community of developers.”
The framework project’s main goal is to make ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more comprehensible. Less dogmatic, it is much simpler to learn for young developers compared to other frameworks.
As mentioned earlier, Vue.js was created by Evan You, a former Google engineer, who set out to combine the strengths of both Angular and React, with the idea that would also go some way towards neutralising their respective weaknesses.
Despite arriving on the scene after both Angular and React, Vue.js quickly gained traction and has been chosen by Alibaba, Nintendo, Expedia, and multiple other enterprise-level projects, defying the sometimes lazy assumption that it is a framework for single-page applications. The fact that Vue.js does not enjoy the backing of a “big tech” corporation makes its growing success all the more notable and begs the question of whether it might not have been even more popular with the level of financial backing Angular and React benefit from.
But Vue.js’s independent nature is also viewed (pun intended 😊) by many in the web development community as a positive. It has also resulted in a particularly diligent volunteer support community having sprung up around Vue. Problems and questions are typically responded to much more quickly than is the case with the big, corporation-backed frameworks such as Angular and React.
Another positive side effect is clear code/API which has not been ‘over-engineered’. This is a great video on Vue.js for anyone looking for a concise, easily digestible summary of the framework:
It’s interesting to note that ‘weaknesses’ attributed to Vue.js are almost all related to the framework’s level of maturity in terms of community size (though its also famous for its quality) and enterprise-level support. On a technical level, complaints about shortcoming are hard to come by, indicating Vue.js is likely to continue to grow in popularity.
The Ember open source framework is an old friend of developers, originating from Apple Music. Inspired by the Ruby on Rails principle “Convention over Configuration,”, Ember is best known as a massive repository that serves as a dictionary for app development. It takes into account convention rather than juggling configurations and enables two-way data binding.
Ember has seen little in the way of major changes since being first released in 2012, which means it is a strictly backwards compatible framework. On the flip-side, the framework is updated every six weeks, and claims it maintains a strong commitment to stability. Netflix, Apple and Microsoft are just some of the corporations that use Ember.
You might also be interested in our blog post directly comparing Angular vs Ember.
Svelte was born from the 2016 eureka moment of software engineer Rich Harris who hit upon the idea of building a JavaScript framework minus any framework specific runtime. This was achieved by Svelte compiling framework-specific code into clean JavaScript, HTML and CSS, with the compiled code rendered to the browser. The approach wasn’t new more generally in software development but revolutionary in the context of front-end development.
Svelte’s second unique quality is the addition of first-class support of reactivity. That allows for improved performance without the need for a Virtual Dom, which makes Svelte’s rendering the fastest of any JS framework.
Component-based (HTML, CSS, and JS) and lightweight, Svelte is written in TypeScript. But crucially, the framework doesn’t require knowledge of TypeScript to fully use it.
JavaScript developers are impressed, and while it is still very early days for Svelte, it’s attracting a lot of interest and quickly gaining traction in front-end development circles. Some brave souls go as far as to suggest Svelte could eventually replace React as the dominant JS resource. Like Vue, however, a lack of big tech backing can be expected to result in a traction bottleneck at a certain point, despite its technical qualities.
So finally, which of Angular, Vue, React, Preact, Ember or Svelte should you choose for your app? As outlined above, each framework or library has its strengths and weaknesses. The right choice depends on the particular needs of an application and is also often at least as influenced by developer resources and business considerations.
But we would be cheating if we left it so open at the end of such an extensive review of the six. So, here are some rules of thumb to help you decide:
And if you still can’t make up your mind, try them all out in different contexts. You’ll come to your own conclusions.
Krusche & Company is a Munich-based web development, DevOps, Cloud and digital transformation agency with over 20-years of experience. We support and enable our partners’ digital goals from enterprise portals for some of Europe’s best known brands to lean MVPs for promising start-ups and everything in-between.
Our model of German management and nearshored tech talent combines to provide a unique blend of quality, control and price. We prioritise excellence in communication on an equal footing to excellence in our tech stack.
If you need software development capacity, cloud-native development, migration or architecture services, DevOps, in the form of a team extension or dedicated team, please don’t hesitate to get in touch. We’d love to hear about your project needs and discuss how we could help you realise your objectives on point, on time and in cost.
Add comment