Consider it a useful starting point if you are deciding which is the best fit for the JS tech stack of your next web development project. The frameworks and libraries covered include the ‘Big 3’ of React, Angular and Vue.js, which the large majority of contemporary web development projects choose between for a combination of technical and strategic reasons.
And I’ll briefly touch on the technical qualities of the still niche but growing new frameworks of Solid.js, Alpine.js and Lit.
There are other front end JS frameworks and libraries in addition to those I’ll cover here. However, I have decided they are too niche, either because:
They are too young to have yet gained any significant traction in the developer community.
They haven’t demonstrated strong enough technical added value to convince developers learn them instead of rivals, or;
They have fallen out of mainstream use and are now largely considered legacy technologies.
Can We Help You With Your Next Web Development Project?
Flexible models to fit your needs! Quote in 24 hours
It offers important insights for both IT decision-makers and professionals, helping inform strategic commercial choices around JS tech stacks.
Preact, an even faster alternative to React and another relatively new option, is also continuing to establish itself while Ember continues its descent into legacy status and jQuery is practically extinct.
Strategic factors like the current and presumed future availability of developers with experience in particular front end libraries and frameworks and the strength of their open source communities remain key considerations. These factors often outweigh technical qualities that might otherwise lead to the choice of a non-Big 3 framework or library.
If you would prefer a video format, this one by Firefly offers an excellent comparative analysis of all of the frameworks and libraries we cover here, and a few more:
React – a technical overview
Uber, Netflix, PayPal, Airbnb, Twitter, Walmart and many other corporate “giants” use React, whose technical qualities make it a good fit for both large and small web development 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.
Code optimisation is relatively straightforward.
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 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 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 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.
Angular – a technical overview
Facebook’s 2013 release of the more flexible React library, drew attention to AngularJS’s limitations and developers started to move away from it.
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 inherent in Angular’s stricter structure, which is also its strength, have seen React overtake it in popularity in recent years. Many developers also 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.
But Angular remains popular for web development projects where a more opinionated structure is considered an advantage, such as large applications where enforced consistency is desirable. Backed by Google, the framework is also considered future-proofed and there is a deep pool of experienced Angular developers on the market.
The use of components with modules;
The use of dependency injection;
Rich catalogue of out-of-the-box components;
High level of control;
Unlike React, Angular enables normal usage of HTML and CSS along with all their features and advantages.
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.
The introduction of the Ivy engine, Angular’s new compilation and rendering pipeline, has improved startup time, response time and to reduced bundle size.
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 between version releases.
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 considered easier than React for the less experienced to get to grips with.
New iterations of Angular have historically differed significantly from previous releases. This results in some distrust of the framework and has historically made 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. The most recent iterations of Angular have improved in this regard.
Dependency injection can be time-consuming and creating dependencies for components tricky.
Angular is heavy. At 500-plus KB, it is generally not an optimal choice for smaller applications.
Vue.js – a technical overview
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 by Packt:
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 seen as much simpler to learn for young developers compared to other frameworks, including Angular.
As mentioned, Vue.js was created by Evan You, a former Google engineer, who set out to combine the strengths of both Angular and React. The belief was 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. It is used 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 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 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 of Vue not being created by a tech giant with huge resources is clear code/API which has not been over-engineered.
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.
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 helps make gaining experience with the framework relatively painless for more experienced developers.
Vue.js is simultaneously both an opinionated end-to-end framework and a view layer providing state management.
We mentioned that Vue.js aimed to combine the strengths of both React and Angular. Perhaps the most notable example of that is reactive two-way data binding (like Angular) and Virtual DOM event sourcing (like React).
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 and easier to maintain.
Vue.js is still relatively new and doesn’t have the endorsement and financial backing of one of the big tech players. Vue.js still lacks a little in the kind of support large corporations tend to look for, explaining why it is most commonly used in smaller projects.
Vue is particularly popular in China. Historically, that led to a significant part of the content, plug-in descriptions and instructions and community discussions on the framework being 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.
Vue.js has a 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’s popularity is not under threat.
Svelte – a technical overview
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, making full use of the framework doesn’t require knowledge of TypeScript.
The leap in the number of JS developers using Svelte, from just 8% in 2019 to 21% in 2022, is notable and if it maintains its current trajectory could soon be seen as a mainstream, commercially viable alternative to React, Angular and Vue.
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 are both supported, which makes Svelte more accessible to search engines . Well-regarded SEO support.
Svelte is cross-platform and can be used to develop web, non-native mobile and desktop apps.
Svelte’s straightforward syntax makes it relatively easy to learn, lowering barriers to entry for developers of all levels.
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.
Svelte’s still limited range of available out-of-the-box libraries and plugins may make it challenging to find solutions for specific use cases. As a result developers may need to write more custom code to implement some functionalities than they would if using a more mature alternative.
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.
Svelte’s compiled code can be challenging to debug because it is optimised during compilation, making it harder to trace issues back to the original source code. This can make it more challenging to find and fix bugs, slowing down the process. A lack of debugging and testing tools compounds this weakness but that can be expected to change as the framework matures.
Few job openings specifically for Svelte developers. The number is now growing but Svelte experience is still very much a ‘bonus points’ framework in a front end JS tech stack, rather than one to build a career around.
Preact – a technical overview
The library was created by Googler Jason Miller with the support of a group of contributors and is used by well known companies including 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. It
Preact’s small size and efficient rendering algorithm result in faster rendering performance compared to other front-end libraries. This makes Preact an excellent choice for building high performance web applications, especially on mobile devices or low-end hardware.
Server-side rendering means that web applications built with Preact can render on the server before being sent to the client. This improves the initial page load time and is important for SEO.
Its small size also means that Preact is easy to learn and use, making it an appealing choice for developers who want to quickly prototype and build simple web applications.
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 a similar programming model and API to React. That makes it both relatively easy for React developers to learn and use Preact and also means that existing React code can be easily migrated to Preact, without having to rewrite everything from scratch.
Can be integrated with React projects
Preact’s main limitations represent the flipside 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 consequence of Preact’s relative youth as a front end JS library is that despite its early success in gaining traction, it has a much smaller user base than more mature rivals like React. As such, there are still far fewer third-party components and libraries available. This can make it more challenging to find solutions for specific use cases, and developers may need to write custom code to implement some functionality.
As an open-source project and one not originally created and supported by a big corporate backer, Preact does not offer official support. This means that developers may need to rely on the community for support when difficulties are encountered, which can be more challenging than getting it directly from the library creators.
Another limitation that should ease as Preact gains maturity is that it is supported by less documentation and examples than React. Also, while its open source community is active and enthusiastic, it is much smaller than those of React and other more mature frameworks like Angular and Vue. That means that it can be more challenging for developers still gaining experience with the library to implement complex features while.
Again as a result of its relative newness as a library, Preact has limited tooling available, such as debugging and testing tools. This can make it harder for developers to ensure the quality of their code and streamline the development process.
Although Preact provides a similar programming model and API as React, there are some differences in the API, which means that developers who are used to React may need to learn some new concepts and patterns.
Ember – a technical overview
Known for its Ruby on Rails-inspired convention-over-configuration approach, Ember provides a clear and opinionated architecture for building web applications. It is designed to be easy to use, with a large set of built-in features and conventions that help developers be productive.
Because Ember has seen little in the way of major changes since being first released in 2011 it is a strongly backwards compatible framework. On the flip side, the framework is updated every six weeks, keeping the framework particularly stable.
While it has declined significantly in popularity over recent years due to decision makers favouring Angular and Vue.js, Ember has been used by many large companies, including Apple, Netflix, Microsoft, LinkedIn, Square, and Heroku.
Ember.js is known for its “convention over configuration” approach, which provides a clear and opinionated architecture for building web applications. This makes it easier for developers to get started with Ember, as they don’t have to spend as much time configuring the application.
Ember.js provides built-in two-way data binding, which means that changes in the model are automatically reflected in the view and vice versa. This can reduce the amount of boilerplate code that developers have to write and improves the efficiency of applications built with Ember.
Ember.js uses the Handlebars templating language, which provides a clean and easy-to-understand syntax for creating dynamic user interfaces. This can make it easier for developers to create complex UIs without having to write a lot of custom code.
Ember.js comes with the Ember CLI, a powerful command-line tool many consider the best of any JS framework that automates many common development tasks, such as creating new projects, generating components, and running tests. This can save developers a lot of time and effort and make the development process more streamlined.
Ember.js is well-suited for large-scale web applications due to its highly opinionated nature, convention-over-configuration approach, built-in two-way data binding, and powerful templating system. This makes it an excellent choice for companies and developers who want to build complex web applications that can scale over time.
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.
Gaining proficiency in Ember.js involves a steep learning curve compared to other popular front-end frameworks like React, Angular, and Vue.js. This can make it more challenging for new developers to get started with Ember, and has limited its appeal to companies and developers who want to quickly prototype and build web applications.
Ember.js is among the heaviest JS frameworks. The framework’s size is a result of its many built-in features and conventions. And while this can be beneficial for some projects, especially large, complex software, it may make the framework less suitable for smaller projects where speed and simplicity are more important.
Ember.js is an opinionated framework that provides a specific architecture and programming model. While this can be beneficial for some projects, it limits the flexibility and customisability of Ember, especially for projects with specific requirements or constraints.
Ember.js has been criticized for poor performance compared to other popular front-end frameworks like React and Vue.js, especially for large-scale applications.
Ember.js has a complex API, which can be challenging for developers who are not familiar with the framework. This may make it more challenging to integrate Ember.js into existing codebases or to hire developers who are experienced with the framework.
While Ember.js has a dedicated community of developers, it has not seen the same level of adoption as other popular front-end frameworks like React and Angular. This may limit the availability of resources and support for developers who use the framework.
The framework’s declining popularity can make finding good Ember developers tricky.
SolidJS – a technical overview
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 uses a lot of the ergonomic qualities of React while minimising confusion and the errors that can affect hooks code.
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 make 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.
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.
Alpine.js – technical overview
Alpine.js is a lightweight framework at only 8KB when minified and compressed. This makes it easy to use and integrate into existing projects.
Alpine.js is unopinionated and does not enforce any specific architecture or programming model. This makes it a flexible framework that can be used in a wide range of projects and with different development styles.
Alpine.js does not require a build step or complex setup process, which can make it easier for developers to get started with the framework.
Alpine.js is a relatively simple framework which means it may not be suitable for complex applications that require more advanced features or functionality.
Compared to larger, more established frameworks like Angular and Vue.js, Alpine.js has a smaller community of developers, meaning there are fewer resources and plugins available.
While Alpine.js’s documentation is not be as comprehensive or well-maintained as other more established frameworks. This can make it more challenging for developers to learn and use the framework effectively.
Lit – a technical overview
The framework is based on the Polymer library and is designed to make it easier for developers to build modular, reusable UI components that can be shared across different projects.
Lit is a lightweight framework with a small size of only 8KB when minified and compressed, making it easy to use and integrate into existing projects.
Focused on web components, Lit allows developers to build modular, reusable UI components that can be shared across different projects.
Lit’s declarative syntax for defining web components can make the code more readable and easier to understand for developers.
Lit is interoperable with other web component libraries and frameworks, which makes it a flexible solution for building web applications.
Lit is a relatively new framework and has not yet gained widespread adoption or a large community of developers, which may limit the availability of resources and support for developers who use the framework.
Lit is a relatively simple framework and may not have the same level of features or functionality as more established frameworks like React or Vue.js. This may make it less suitable for more complex projects or larger development teams.
Lit’s documentation may not be as comprehensive or well-maintained as other more mature frameworks, which can make it more challenging for developers to learn and use the framework effectively.
So finally, which of the popular front end JS frameworks and libraries would be the best fit for your next development project? 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 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 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 are a priority.
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 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 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 Ember if you like working with the framework, are not overly concerned about being able to easily hire Ember developers a couple of years from now and don’t consider future-proofing a strategic must.
SolidJS could be an option 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.
You might consider Alpine.js if you are looking for a lightweight and flexible framework that can be used to add interactivity to a web application without a heavy build process or a steep learning curve. However, its limited functionality, smaller community, and limited documentation may make it less suitable for more complex projects or larger development teams.
You might consider Lit if you are looking for a lightweight and flexible framework and web components are a priority.
And if you still can’t make up your mind, try them all out in different contexts. You’ll come to your own conclusions.
K&C – a Munich-based nearshore IT outsourcing provider
K&C is a Munich-based nearshore IT outsourcing company with over 20 years of experience and specialising in web development, DevOps and cloud technologies. 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 or 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.
K&C - Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?
Drop us a line to discuss your needs or next project