The most popular JavaScript frameworks in 2022 - strengths, weaknesses and use cases

Angular, Vue, React, Ember, Preact, Svelte and SolidJS All Have Their Strengths But Which Is Right For Your Next Web Development Project?

Blog • UPDATED ON July 29, 2022

John Adam

Author

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. The more adventurous might even throw up-and-coming new frameworks Lit, Alpine.js, Solid and Stimulus into the mix for consideration. Each of the JavaScript frameworks and libraries regularly used commercially and the new options fighting for traction has its relative strengths and weaknesses.

Different developers, product owners and management have their comfort zones and opinions on the different options, which can be both commercial and technical.

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 the 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 previous iterations 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, like 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. And behind them are shiny new frameworks including Lit, Alpine.js, Solid.js and Stimulus that have their admirers from a technology viewpoint, even if they are still too niche to be considered for most commercial applications.

However, that could change over the next few years with especially the “reactive” Solid considered to offer enough added value over existing frameworks and libraries to potentially make the breakthrough into mainstream commercial usage. But 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.

That doesn’t mean, as Vue.js has demonstrated, that JavaScript frameworks need Big Tech backing to achieve commercial viability. But React and Angular show the resources made available to those who do benefit from such support do make a difference.

How to choose the optimal JavaScript framework or library to use

Taking an informed decision on which JavaScript framework or library to go with for a particular front-end development project is one of the first major tasks at the outset of any software development planning process. There are a number of different considerations that can influence the final decision. Of course, technical pros and cons in the context of the combinations of required functionalities and performance priorities are a big factor in any choice between React, Angular, Vue and the other options available. 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:

• Organisational policy ie. “We use React for our front-end development unless there’s a particularly compelling reason why an app’s desired functionalities cannot be achieved with React”.
• Availability of development resources ie. “We currently have Angular specialists available in-house” or “our IT outsourcing partner has a Vue.js team available to start work at short notice”.
• Future-proofing ie. It’s comparatively easier to update React-built apps to the most recent iteration of the framework than it is with Angular or Vue.js. How stable do the framework’s active support and open source community engagement look on a medium to long-term basis?
• Developer sentiment. It’s easier to recruit and retain developers to work with the most popular JS frameworks. Greater numbers of developers with experience in a particular framework can also contribute to keeping costs down.

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 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, Svelte and Preact 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.

What exactly are JavaScript libraries and frameworks?

The distinction between a programming language, library and framework can be initially confusing. Non-technical management can 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?

What is a JavaScript library?

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, Solid and the legacy jQuery are all examples of JavaScript libraries.

What is a JavaScript framework?

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 from 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:

• Listens to web requests
• Handles session
• Calls your code to handle requests

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.

• Angular
• Ember JS
• Vue.js

When would you choose a JavaScript library and when a framework for a development project?

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.

Angular, Vue.js, React, Preact, Ember, Svelte and SolidJS: which JavaScript framework is most popular in 2022 and why?

Anyone approaching a commercial web development project in the months ahead will almost certainly make a choice between React, Angular orVue.js. Legacy projects sometimes still make use of Ember but very few new initiatives. Svelte and Preact are gathering enough momentum that they might be considered by more adventurous project sponsors or development teams if the skills are available.

Despite appreciation for their technical qualities by developers who have used or started to explore them, it is an exception to see Solid, Alpine.js, Lit or Stimulus in commercial development.

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 cover the relative strengths and weaknesses of the individual options and their relative use cases.

But as an introduction to that, let’s take a look at the wider trends around the different JS framework library choices.

What do JavaScript developers think of the different JavaScript frameworks and libraries?

There are of course more open-source JavaScript frameworks and libraries than those we cover 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 niche frameworks and libraries means that it is unusual for organisations to use them commercially. As already mentioned, it is even a rarity for commercial projects to deviate from the ‘Big 3’ of React, Angular and Vue.js.

The visual below shows the level of awareness of JavaScript frameworks and libraries among the thousands of international JS developers around the world that contributed to the State of JavaScript 2021 report. It becomes apparent how Ember has fallen in popularity over the past few years, with Vue.js usurping its place at the top table. We can also see how Preact, Svelte and Solid have, like Vue.js a few years ago, quickly burst onto the scene and made a genuine impact on the JS landscape.

The next two graphics represent how much the various JS frameworks and libraries covered are actually used by developers and their sentiment towards those with awareness penetration of at least 10%. Satisfaction levels among JS developers who have used frameworks and libraries could be a significant clue to how widespread their use is several years from now.

We can see that React is not only very widely used, 80% of JS developers have coded with it, but that satisfaction levels are high with 84% of those polled saying they would happily use it again. Next in terms of usage comes Angular, with54% of JS developers have used the framework. However, that’s a drop from 56% in 2020 and 58% in 2019.

Despite Angular’s relative popularity with those paying for and managing development projects, the developers themselves show relatively high levels of angst in their attitude to Angular. Only 55% say they would use it again, a level of negative sentiment surpassed only by Ember.Evidence usage of the framework is slowly but steadily declining may well be a consequence of its lack of popularity among developers who have used it.

That contrasts with Vue.js, usage of which has steadily increased from 10% to 51% between 2016 and 2021. That may have something to do with the fact sentiment towards it is largely positive with 80% of those who have used it saying they would do so again. 50% of JavaScript developers who haven’t yet learned Vue.js say they are interested to.

Of the newer JS frameworks and libraries gaining traction, satisfaction levels with Svelte and Solid are particularly high at 90%. That is helping Svelte become more used, with 20% of JS developers now having worked with it compared to just 8% in 2019 and 15% in 2020.

Solid is a new entry to the 2021 SoJS report and had only been used by 3% of polled developers. It will be interesting to see if the high levels of satisfaction among those developers that have used Solid translates into increasing use reported in future editions.

Svelte and Solid are also the two JS options most developers who haven’t yet worked with but are interested to, with 68% of polled developers indicating they are interested to learn the former and 56% the latter.

Demand for Angular, Vue.js, React, Preact, Svelte, Solid etc. developers in 2022

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 the mainstream means a significant number of companies and organisations choosing to use the framework or library when developing new applications.

That’s the real acid test. Are employers looking for  Solid, Svelte or Preact developers? Is there still demand for Ember skills on the job market? Let’s take a look at the demand for skills in the various JavaScript frameworks in 2022.

An interesting picture emerges based on the number of roles that list the various JS frameworks and libraries advertised on LinkedIn. The methodology used set the location to the USA, as the single biggest market for IT specialists and therefore the best proxy for global demand. The platform’s filter does not allow for searches that do not specify a location, capturing all vacancies advertised internationally.

When it comes to commercial demand for developers with competency in the JS frameworks and libraries discussed here, React and Angular are way out in front with 85,596 and 65,384 roles respectively listing the skills under requirements. There is also solid demand for Vue.js developers, with 19,025 vacancies advertised in the USA.

Beyond that, commercial demand is limited despite the enthusiasm of JS developers for some of the newer frameworks and libraries. In fact, there is still more demand for Ember developers, 2680 vacancies advertised, than there is for any of the new rivals. That is presumably mainly due to legacy apps built using Ember.

There is some commercial demand for Solid developers, 1657 vacancies advertised, and to a lesser extent for Svelte, 421 vacancies, and Preact, 125 vacancies. However, it is notable how few of these roles there are compared to those requiring React, Angular and Vue.js. Advertised vacancies for developers with experience in Alpine.js, Lit and Stimulus are in the low double or single figures, indicating companies do not yet see the technologies as commercially viable choices for the applications they are building. That may change over the years ahead but for now Solid, which is the most recently released of the challenger frameworks and libraries, seems best placed to gain serious commercial traction. With the caveat, it is still in the early stages of a potential breakthrough.

Comparing the strengths & weaknesses and use cases of the most popular JS frameworks and libraries

The commercial demand for developers with experience in the frameworks and libraries covered by the State of JS 2021 report 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. They are all efficient, mature and high-performance technologies, which is why they have established themselves commercially.

The others we have mentioned here, including the new pretenders and legacy options like Ember that have fallen out of favour, also have their merits but are clearly not considered, on the most part, commercially viable choices.

That can be put down to strategic considerations as much as technical merit, especially with regard to the newer JS frameworks and libraries. The volume of resources available to developers and the size and activity of open source communities are incomparable to those that React, Angular and Vue.js benefit from. Equally important is the confidence of project sponsors that they will be able to hire developers able to work with the chosen JS framework or library now and sustainably into the future.

But setting aside strategic and business considerations and focusing only on their technical merits, what are the strengths and weaknesses, or limitations, of the leading JavaScript frameworks and libraries?

Angular

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 library, 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 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 also 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 we refer back to the State of JavaScript graphic displaying JS developer sentiment, that is apparent. Developer satisfaction levels with the framework have plunged from almost 70% in 2016 to 45% in 2021, ahead of only Ember. But Angular remains popular with organisations as, backed by Google, it is considered future-proofed. It is also relatively easy to hire experienced Angular developers. Ultimately, the framework is still a strong option for especially large web applications that benefit from the consistency inherent in the framework.

For a deeper dive into Angular’s strengths, K&C developer Alex Chugaev makes his case for why he prefers Angular over React and Vue in the context of enterprise-level applications. 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 and argues Angular’s case. It also offers a valuable critical analysis of the data sets used in the State of JavaScript reports.

Angular strengths

• Modularity;
• The use of components with modules;
• The use of dependency injection;
• Rich catalogue of out-of-the-box components;
• The high level of control;
• Unlike React, Angular enables normal usage of HTML and CSS along with all their features and advantages.
• Angular CLI is one of the best Command-Line Tool in the JavaScript landscape.
• TypeScript and separating the template from styling and business logic makes Angular development especially suited for the large code-base of enterprise-grade apps.
• Built-in features like DOM sanitisation makes Angular the most secure front-end framework.

Google’s backing of Angular may not be on quite the same level as the resources Facebook supports React with but is more than enough to ensure the framework is both future-proofed and continues to innovate and improve. Improvements made between versions such as lazy loading, differential loading to improve the loading time of modules and rendering Engine Ivy to improve startup time, response time, and to reduce bundle size, are pluses.

Angular weaknesses

• It can be a little tricky for inexperienced developers to start working with Angular, especially if they do not have a strong background in Typescript. However, it is still it easier than React for the less experienced to get to grips with;
• New iterations of Angular have historically differed significantly from previous releases, which results in distrust of the framework and complicates forward-looking migrations of apps to the latest version of Angular complex. That’s especially the case between AngularJS and Angular, which can’t be switched directly between.
• Dependency injection can be time-consuming and creating dependencies for components tricky.
• A developer is limited if he/she wants to create a single-page application. You can’t just drop it into your full-stack or a multi-page application.
• Angular is heavy. At 500-plus KB, it is generally not an optimal choice for smaller applications.

React

React is a JavaScript library for UI development, despite the fact it is often referred to as a 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 both large and mid-size projects.

A component-based library with one-way data flow, React has had a major impact on front-end web development, and is today the dominant technology used for JS applications.

React can be credited with introducing concepts like functional, declarative programming, and immutable state, which weren’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, especially in the context of a dynamic UX.

React strengths

• Optimisation does not require a world of work.
• Flexibility. React is unopinionated with React-Core simply a component-based library for the View layer, offering almost complete flexibility and customisation of apps.
• A further expression of React’s flexibility is that there are few barriers to how it interacts with other JS libraries and projects.
• The library genuinely lives up to its “Learn Once, Write Anywhere” slogan and can be used to develop Web, Mobile (React Native) and Desktop applications as well as in back-end development with Node.js.
• React uses JavaScript ES6 which has a gentler learning curve compared to picking up TypeScript for Angular;
• React is designed to render content based on JSX. It can be used in both SPA and SSR architectures, making it a very strong solution for this type of development work. Its server-side rendering is superior to that of its competition and offers very good SEO support.
• Declarative. React updates efficiently and renders the right components when data changes. Declarative views also make the code readable and easy to debug.
• Being backed by Facebook, and used for Facebook, means the tech giant allocates significant resources to continually developing React. That also means features are proven in battle on one of the largest and highest traffic applications, browser and mobile native, apps in history.
• React continues to innovate and improve, with recent examples of that including React-Fiber for improved Concurrency, React hook, reducing boilerplate code and Suspense for better rendering.

React weaknesses

• React is quite simple but compiling an entire framework based on React is a challenging task;
• Flexibility can be a double-edged sword and the freedom React offers can lead to time being wasted deciding on the best approach to different challenges.
• React’s use of the JSX syntax extension for mixing HTML and JavaScript also has a flip side. Its complexity can be seen as a barrier to the effective use of the library, especially for junior developers.
• React development involves the use of a wide range of assembly tools to function well and be compatible with other web development tools.
• Poor documentation is a criticism often levelled at React libraries. A very active community and resourced support from Facebook sees updates and tools released regularly but accompanying documentation is often lacking. This can make it hard for developers to get up to speed with new features and library integration can be poor.

Vue.js

Vue.js was first launched in 2014 and then relaunched in 2016. The framework describes itself as an “intuitive, fast and integrable MVVM for creating interactive interfaces.” At K&C, we tend to agree.

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’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, including Angular.

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 open source community supporting the project. 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:

Vue.js strengths

• JavaScript code, templates, and CSS code are not mixed as they are in React;
• It is possible to use ES5, ES6, as well as TypeScript (with the caveat it can be harder to set up);
• As with React, Vue quite nicely interacts with other libraries and projects.
• That also allows for progressive app development. Large legacy JavaScript code bases can be progressively modernised with Vue.js, which is a big incentive for complex migration projects.
• Vue’s documentation is easy to understand and well-structured and the open source community is notably active in responding to questions or issues. This makes getting started relatively painless.
• js is simultaneously both an opinionated end-to-end framework and a view layer providing state management.
• We mentioned that the aim of Vue.js was to combine the strengths of both React and Angular and perhaps the most notable example of that is reactive two-way data binding (like Angular) and Virtual DOM, event sourcing (like React).
• Continuing in that vein, Vue.js supports both JavaScript and TypeScript.
• Vue is a real featherweight of a framework at a downloaded .zip of just 18KB. Downloading and installing the library is super fast and the lightness also has a positive impact on site speed, and by extension UX and SEO.
• With every new release, Vue.js becomes faster, smaller, more maintainable and it’s easier to target native.

Vue.js weakness

• Vue.js is still relatively new and doesn’t have the endorsement and financial backing of one of the big tech players like Angular (backed by Google) and React (backed by Facebook). To be adopted more often for large enterprise-level projects in favour of Angular or React, Vue.js still lacks a little in the kind of support corporations tend to look for, which is why it is most commonly used in smaller projects.
• Vue is particularly popular in China which does mean a significant part of the content, plug-in descriptions and instructions and community discussions on the framework are in Chinese. However, in recent years there has been a lot more English-language activity.
• Reactivity complexity. The two-way data binding implemented in Vue to manage DOM updates is a handy tool to keep components in sync. The reactivity system re-renders only those chunks of data that are triggered by a user activating a component. Mistakes are often made during this data reading, requiring data to be flattened. It is a known issue and there is plenty of documentation explaining how reactivity should be set up properly.
• Smaller ecosystem of plugins and tools compared to React or Angular.
• Lack of experienced Vue.js developers. It’s a chicken and egg situation, but fewer Vue developers can put companies off the framework while lower client demand discourages more developers from learning it. However, this is again a weakness that is becoming less pronounced with time.

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 it’s also famous for its quality) and enterprise-level support. On a technical level, complaints about shortcomings are hard to come by, indicating Vue.js is likely to continue to grow in popularity.

The paragraph above was originally written in 2018 with the first release of this article. Over the four years since, Vue’s trajectory has roughly followed the predicted path. If we refer back to the State of JS 2021 data shown in the charts above, usage of the framework among JavaScript developers has risen from 32% to 51%. The big leap in usage was between 2018 and 2019 but Vue has continued to, more slowly, gain ground since.

Interestingly, as Vue.js has become more frequently used by JS developers, satisfaction levels have dropped from 91% in 2018 to 80% in the most recent report. Again, the biggest change came between 2018 and 2019 when usage of the framework rocketed. That suggests that developer satisfaction levels are significantly influenced by how much they use a given framework or library in a commercial context.

Satisfaction levels with the Solid library are currently at 90% but usage is low. Based on Vue’s pattern, the more developers use Solid commercially, the less satisfied they can be expected to become. Let’s keep an eye on that theory over the next few years!

Preact

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.

The release of Preact X 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 that React can be heavy for. It’s minimalist nature means Preact will generally be considered for smallish projects where performance is prioritised or embeddable components which prioritise lightness.

Preact strengths

• Fastest virtual DOM in the JavaScript ecosystem and one of the smallest libraries.
• Preact’s simple and predictable diff implementation is another reason for its speed.
• Effective memory storage makes Preact very efficient.
• Simple apps can be run in the browser without needing to use build tools
• Preact offers a dedicated CLI
• Uses React’s API
• Can be integrated with React projects

Preact weaknesses

• 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, for which React uses the Enzyme testing utility developed by Airbnb, is possible but requires some Webpack config and comes with limitations.

Ember

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 have used Ember in apps.

Ember Strengths

• Simply configured on the system;
• Ember is an end-to-end opinionated cohesive framework focusing on “Convention over Configuration.”
• Ember is backed by a consortium of big tech corporations and brands, including Yahoo and LinkedIn. That means it has not been shaped to one corporation’s needs.
• Ember’s data library allows for data to be accessed across multiple sources at once, setting up asynchronous relationships.
• Ember CLI is widely considered the best CLI of all the JavaScript frameworks. It helps to generate the right codes and scaffold them with the right structure, taking dependencies into account. Ember Inspector is a handy browser extension that lets developers monitor and edit apps in real time.
• Ember’s MVVM (Model–View–ViewModel pattern) architecture is popular with its users and the framework also offers two-way data binding.
• The Ember Octane iteration has introduced an HTML and component first approach with improved support for state management and reactivity.
• Ember benefits from an active community that regularly contributes to Ember Observer, a website that aggregates solutions to common tasks.

You might also be interested in our blog post directly comparing Angular vs Ember.

Ember Weaknesses

• Being a highly opinionated framework makes customisation difficult.
• Among the heaviest frameworks;
• Hard to master;
• Sometimes considered too complex for small projects;
• Slow release of new versions with few new options.
• Ember is closely tied to jQuery, which for developers who prefer using standard fetch or Axios for AJAX requests, can be considered a disadvantage. However, in Ember Octane, jQuery is no longer included by default.
• Falling popularity can make finding good Ember developers tricky.

Svelte

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 entirely new 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.

The leap in the number of JS developers using Svelte, from just 8% in 2019 to 20% in 2021, is notable and if it maintains its current trajectory could soon be seen as a mainstream, commercially viable alternative to React, Angular and Vue.

Svelte strengths

• It’s easy for developers without a lot of JS experience to get up and running with Svelte.
• The compile-time framework doesn’t require any framework-specific runtime and Svelte has the smallest bundle size of any JS framework.
• Fastest rendering of any framework thanks to Dom rendering via reactive programming.
• Svelte’s component-based framework allows for UIs to be built by creating composable and reusable components. The result is less boilerplate code and reduced development time.
• Like React-Core, Svelte is a View layer and unopinionated.
• Client-side and server-side rendering both supported. Well-regarded SEO support.
• Svelte is cross-platform and can be used to develop web, non-native mobile and desktop apps.

Svelte weaknesses

• Lack of maturity. Still young, Svelte doesn’t yet have many significant use cases or third-party tools. Lack of tooling and tooling support is currently the main criticism of Svelte.
• The number of features offered by Svelte is still limited, which means a lot of code would have to be written or third-party tools used for more complex development projects.
• Compared to the mature, dominant JS frameworks and libraries, Svelte still has a small community, has underdeveloped documentation and generally lacks the kind of support that most enterprise-level projects demand.
• Child components can’t be adjusted with scoped styles.
• TypeScript not supported.
• Few job openings specifically for Svelte developers, though the number is now growing as we saw earlier when examining job openings data.

Solid

Solid is an open-source declarative JavaScript framework designed for building large UIs with maximum control over reactivity and was created by Ryan Carniato in 2018. It has quickly impressed JS developers who see it as offering a very good balance between pragmaticism and performance. The framework is built on and supports TypeScript.

It shares many similarities with React, such as components being JS functions that return JSX for the UI and one-directional data flow. Solid’s most significant divergence from React is using a compiler similar to Svelte’s that converts code to vanilla JavaScript, getting as close to the DOM as possible rather than a Virtual DOM.

Solid is considered to be the first truly reactive JS framework with function components only called once. That allows developers to do things not possible in other frameworks and libraries such as using set intervals predictably at the top level.

Data that changes is observed by the framework and surgically update this data in the exact location in the DOM when it changes instead of re-rendering the entire component, making it genuinely reactive. Nested reactivity is achieved via stores whose return values are a proxy object whose properties can be tracked.

Solid strengths

• SolidJS uses a lot of the ergonomic qualities of React while minimising confusion and the errors that can affect hooks code.
• Predictable output.
• Lightweight – the framework only weighs 6.4kb
• Lightning fast runtime – only fractionally slower than vanilla JS and better than either Svelte or Preact, its nearest competitors.
• Its compact size and speed makes Solid ideal for building JS widgets that will minimally impact host websites.
• Great developer experience. Solid supports Typescript, hooks, Suspense-like features, SSR, SSG, and you can easily bundle it with modern tools.
• Matches Svelte as the fastest framework for Time To Interactive(TTI).
• All parts of Solid are independently reusable, which makes it possible to build a variety of different types of projects with it, and due to the simplicity of Solid’s reactive system, it is very easy to hook any other state system into Solid components.

Solid weaknesses

• As a still very new framework, there are still only a few third-party Solid libraries, tools and resources.
• In Solid, all rendering and DOM interaction is a side effect of the reactive system. This means that while it’s possible to handle things like exit animations in a similar way to React or Vue using the reactive lifecycle the framework doesn’t really keep track of the DOM in a way that is accessible outside of a user’s own references.
• Solid does less diffing than basically every other library out there which is one reason why it is so performant. The flip side of the coin is that in the few instances where diffing actually is valuable, like Hot Module Replacement(HMR), Solid can make life more difficult.
• Solid being declarative makes debugging more of a challenge. Templates are easy to debug as Solid puts all the DOM operations out in the open so any issues can be spotted. But bugs that appear elsewhere, which is most bugs, can be hard to locate.

Angular, Vue, React, Preact, Ember, Svelte or Solid? Which should you choose for your next JavaScript project?

So finally, which of Angular, Vue, React, Preact, Ember, Svelte or Solid 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:

• Your solution is Angular if you like TypeScript and prefer to work in a clearly defined framework in one style and flow. This is especially the case in the context of a large, enterprise-level app for which stability, support and a large pool of experienced developers is a priority.
• Your solution is React if you need flexibility, prefer big ecosystems, do not want to choose between various packages, or are fond of JS, like your own approach and cutting-edge technologies. Like in the case of Angular, a deep pool of React developers and mature support and stability are also in the library’s favour.
• Your solution is Preact if you are also considering React but feel the performance benefits derived from the former’s lightness outweigh its more limited functionalities.
• Your solution is Vue.js if you are looking for a gentler learning curve to help onboard junior devs, need a lightweight framework or need clean HTML files. Take into consideration that while Vue is now well established, the pool of experienced developers is not as deep as in the case of Angular or React. Vue creator Evan has said he positioned Vue as between React and Angular in terms of its trade-off between consistency and flexibility.
• Your solution is Ember if you personally like working with the framework, are not overly concerned about being able to relatively easily hire Ember developers a couple of years from now and don’t consider future-proofing as a strategic must.
• Your solution is Svelte if you are ready to prioritise its technical strengths over lack of maturity and either don’t have to worry about or are willing to take a risk on a still shallow pool of experienced developers.
• Your solution is SolidJS if speed and lightweight is your priority and you would like to experiment with a promising new framework. SPAs are a great testing ground for Solid, as are web widgets.

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 – Munich-based nearshore web development consultants

Krusche & Company is a Munich-based nearshore IT outsourcing company specialising in web development, DevOps and cloud 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 combine 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.