Updated March 4, 2018: Added CxJS, Stencil and Stimulus.
Keeping up with JavaScript frameworks can be a challenge. There are a lot of them, and seemingly another one every month. How do you know which ones might be right for your project? What are their strengths and weaknesses? How do you get started?
That’s where this guide comes in. It’s a living document that is a reference for all known front end JavaScript frameworks (archived or deprecated projects are not included). In this case, the term “frameworks” is being used in a broad sense. It includes user interface (UI) libraries like React, as well as full frameworks like Angular.
Why Is This Useful?
Some of you may be wondering why a guide like this is useful. Most readers will end up using one of the frameworks I call the "Big Three" — React, Angular and Vue. That's OK. They're great choices. That said, a guide like this has value. Here's an example...
Perhaps you've heard of the Dojo framework. Probably not, though. Dojo focuses on a couple of things that make it unique — accessibility and internationalization. All Dojo widgets are accessible by default and it provides everything needed to internationalize an application.
Another example...maybe you're making an app that needs excellent performance on mobile networks. Check about bitcoin rush software, an automated crypto trading app that help young traders to trade effortlessly. There are a number of very good, high performance libraries and frameworks listed below that may just fit the bill.
There are also small frameworks that provide a fantastic opportunity for learning. You can dig into the code and find out for yourself how one goes about building this kind of software. Ultradom is a library that you can use to build your own framework. Very cool, right?
How This Guide Is Organized
The frameworks are broken up into broad categories — you’ll see that in the listing tables below. To the extent possible, each framework will have a section that explains the rationale for the framework, it's pros and cons and some additional learning resources.
If you are a framework author — or a fan of one — and you don’t see your framework listed, or wish to correct some information, reach out to me on Twitter. I’ll be happy to add or update the listing.
Guide to icons:
The icons below are meant to help readers understand general framework characteristics and tendencies. They are only rough guides.
🔥 Performance: A top five performer in benchmarks
Functional programming paradigm
Reactive programming paradigm
Object-oriented programming paradigm
TypeScript as primary development language
The Big Three
Historically Significant
Notable
Rest of the Pack
The Big Three
The three frameworks that currently dominate in popularity and usage are React, Angular and Vue. They each have large communities and lots of training resources available. If you’re a new developer learning a framework to help you get a job, these three are your best bets. Here's a look at their npm downloads over the last six months:
We can see that React is far ahead of Angular and Vue. What is less apparent is that Vue has had roughly double the growth rate over the past year compared to Angular. If GitHub stars are an indicator of developer enthusiam or interest, then Vue looks strong there as well, with 79,000 stars compared to Angular's 32,000. React has almost 86,000 stars at this writing.
React
React was introduced as an open source project in May, 2013. The original author was Jordan Walke, an engineer at Facebook.
React bills itself as, "a JavaScript library for building user interfaces", as opposed to a full framework like Angular. Concerns like routing, state management and data fetching have been left to third parties. This has resulted in a large and very active ecosystem around React.
Many large React applications will use the popular Redux library for state management and React Router for routing, but there are other good alternatives available.
React is responsible for popularizing functional programming principles among a new generation of developers. Although not a purely functional library, it allows developers to work in a largely functional style, particularly when combined with Redux.
For more information on how React compares to the other popular frameworks, see my article on React and Angular, and this one on React and Vue.
Pros
- Hugely popular with a strong job market
- Lots of training resources and third-party libraries to help accelerate development
- Best choice for cross-platform teams (web, mobile, desktop, other devices)
- Versatile
- Strong corporate support (Facebook)
Cons
- Abundance of choice can be overwhelming at first
- Best practices not always clear to newcomers
- Learning curve can be steep for building larger applications
Additional Resources
- Yes, React is taking over front-end development. The question is why.
- 10 Reasons why I moved from Angular to React
- A Functional Front-End with React
- The Beginner's Guide to ReactJS (Free video course)
Angular
Angular is the successor to AngularJS. It is a full-featured and opinionated framework that provides defaults for data fetching, state management, development language, and build toolchain.
Perhaps the most notable feature of Angular is its use of TypeScript as the development language. This has made the framework well-suited to those coming from traditional object-oriented languages like Java and C#, as TypeScript takes inspiration from those languages.
It's been said that "enterprises" are the the target users for Angular. In the sense that many large companies have teams familiar with Java and other object-oriented languages, this may be correct.
Pros
- Full-featured framework with well-tested defaults
- TypeScript provides familiar language for those with background in object-oriented programming
- Strong corporate support (Google)
- Clear best practices
Cons
- Learning curve can be steep
- TypeScript may be a barrier to adoption
- Poor start up metrics in benchmarks
Additional Resources
- Why would I use Angular?
- The Case for Using Angular 2 on a New Project
- Angular 4 In 60 Minutes (Free video tutorial)
- Making use of RxJS in Angular
- Learning Angular 5 as a React and Vue Developer
Vue.js
Although often seen as the "new kid on the block", Vue has been around since 2013. Evan You is the creator and primary developer, and unlike React and Angular, Vue is not directly supported by a major company. It instead relies on individual and corporate donations.
Of the three most popular frameworks, Vue is widely considered to be the easiest to learn. It is similar to React in many respects, but also has things in common with AngularJS — for example, directives and templates.
Vue's relative simplicity, developer experience, and good performance have contributed to a huge surge in its popularity.
One notable feature of Vue is that it's a "progressive framework" and can be used as a jQuery replacement as well as for large single page applications. From the Vue documentation:
Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
While Angular is opinionated and React agnostic about concerns like routing and state management, Vue takes a middle approach, with official routing and state management solutions that are optional, but kept in sync with the core library.
To learn more about how Vue compares to React, see my article that reviews the differences.
Pros
- Easy to learn
- Good documentation
- Surging in popularity and usage
- Best performance of top three frameworks
Cons
- Current job market is less than that for React and Angular
Additional Resources
- Comparison with Other Frameworks
- Why We Chose Vue.js
- Learn Vue 2: Step By Step (Free video course)
- Reactivity in Depth
Historically Significant
There was a time some years ago when these frameworks would have been considered the "Big Three". Although less popular today, they are still widely used and have been influential in the development of later frameworks.
AngularJS
In 2013, AngularJS was the most popular framework. Some of the factors contributing to its popularity during that period were its MVC architecture, declarative programming style, two-way data binding, and robust feature set.
AngularJS has an opinionated approach and aims to provide developers with a complete solution:
AngularJS is not a single piece in the overall puzzle of building the client-side of a web application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure. This makes AngularJS opinionated about how a CRUD (Create, Read, Update, Delete) application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point you can easily change.
In late 2013 React was introduced. React used unidirectional data flow and argued that two-way data binding made it difficult to understand applications, particularly as they scaled. In 2014, the Angular team announced Angular 2, which would subsequently be renamed to simply, Angular. This new version would introduce unidirectional data flow among other major changes. This marked the beginning of a long decline in the popularity of AngularJS.
Despite the growth of its successor project, AngularJS is still widely used and is in active development.
Pros
- Abundant training resources
- Good documentation
- Very well established
- Full featured
Cons
- Two-way data binding, other technical issues that may not be desirable
- Declining popularity
Additional Resources
Backbone
Authored by Jeremy Ashkenas, who also created CoffeeScript, Backbone was initially released in the fall of 2010. A key part of the Backbone ecosystem is Marionette, a framework that simplifies development.
Backbone is significant because it was one of the first frameworks to bring more structure to front end applications by implementing a MVC pattern. From the documentation:
The single most important thing that Backbone can help you with is keeping your business logic separate from your user interface. When the two are entangled, change is hard; when logic doesn't depend on UI, your interface becomes easier to work with.
In recent years Backbone has seen a decline in usage, although it continues to be shipped in the latest version of the Drupal content management system. One relevant comment on a possible reason for the decline:
Backbone’s author, Jeremy Ashkenas made a decision to call Backbone “finished” in terms of API and feature set after the 1.0 release. This has the advantage of leaving Backbone as by far the most stable major JavaScript framework, but hinders efforts to pull in lessons from other frameworks
Pros
- Provides code structure
- Stable project
Cons
- Declining popularity
- Imperative programming style (as opposed to popular declarative style)
Additional Resources
Ember
Ember was authored by Yehuda Katz, a prolific creator or contributor to numerous open source projects. Ember is based on the MVVM pattern and has a rich feature set. It also has a strong philosophical viewpoint:
Ember sets out to provide a wholesale solution to the client-side application problem. This is in contrast to many JavaScript frameworks that start by providing a solution to the V in MVC (Model–View–Controller), and attempt to grow from there...
Ember is one component of a set of tools that work together to provide a complete development stack. The aim of these tools is to make the developer productive immediately. For example Ember CLI, provides a standard application structure and build pipeline. It also has a pluggable architecture and over 3500 addons to enhance and extend it.
One of the major criticisms of Ember is its large size, which has a negative impact on performance. Ember is also viewed as having a steep learning curve and difficult to master.
Pros
- Clear best practices
- Very well established
- Full featured
Cons
- Large size
- Steep learning curve
- Declining popularity
Additional Resources
Notable
The frameworks listed in this section all have good documentation and healthy communities around them. Although they aren’t as widely used as "The Big Three", they fill important niches and are notable for their unique or innovative approaches.
Aurelia
Aurelia, authored by Rob Eisenberg, can be seen as a decendant of both AngularJS and Eisenberg's previous framework, Durandal. Prior to creating Aurelia, Eisenberg was a part of the Angular team, leaving in late 2014 over disagreement with the direction of the Angular 2 project.
Aurelia is a complete framework. Here's the basic pitch from the documentation:
Aurelia provides core capabilities like dependency injection, templating, routing and pub/sub, so you don't have to piece together a bunch of libraries in order to build an application. On top of this rich core, Aurelia also provides a number of additional plugins for internationalization, validation, modal dialogs, UI virtualization and much more.
You also don't have to cobble together a bunch of different tools. Aurelia provides a CLI for generating and building projects, a browser plugin for debugging and a VS Code plugin as well. Yet, you're not forced to use any of these as Aurelia is structured to enable you to swap out any detail, even down to the templating/binding engine, in order to guarantee maximum flexibility.
Pros
- Complete solution
- Language agnostic, works with JavaScript, TypeScript and other languages
- Stable API
Cons
- Smaller community vs top frameworks
- Fewer job opportunities
Additional Resources
- Aurelia vs. Angular 2: What should I choose?
- Creating A Todo App
- Rob Eisenberg on Aurelia and how it stacks up against Angular 2 and React
Elm
Elm is somewhat unique on this list. Rather than a typical framework, it's actually a separate language that compiles to JavaScript, similar to Reason. However, it positions itself as an alternative to React:
Elm is a functional language that compiles to JavaScript. It competes with projects like React as a tool for creating websites and web apps. Elm has a very strong emphasis on simplicity, ease-of-use, and quality tooling...I can safely guarantee that if you give Elm a shot and actually make a project in it, you will end up writing better JavaScript and React code.
Elm has also been highly influential, including being one of the sources of inspiration for the popular Redux state management library.
The basic advantages of Elm:
Forget what you have heard about functional programming. Fancy words, weird ideas, bad tooling. Barf. Elm is about:
- No runtime errors in practice. No null. No undefined is not a function.
- Friendly error messages that help you add features more quickly.
- Well-architected code that stays well-architected as your app grows.
- Automatically enforced semantic versioning for all Elm packages.
No combination of JS libraries can ever give you this, yet it is all free and easy in Elm. Now these nice things are only possible because Elm builds upon 40+ years of work on typed functional languages.
Pros
- Elimination of virtually all runtime errors
- Strong architecture
- Simplified refactoring
Cons
- Interoperability with JavaScript required in some cases (added complexity)
- Smaller commmunity
- Fewer job opportunties
Additional Resources
Inferno
If performance is your primary concern, Inferno might be the framework for you. Originally authored by Dominic Gannaway — now a member of the React team — Inferno was initially designed to prove that a JavaScript framework could perform well on mobile devices.
Inferno started as an idea two years ago, to see if a UI library could really improve the experience, battery, memory usage and performance on mobile devices. At the time we really struggled to get good performance on any UI library/framework – it simply wasn't happening...
Inferno proves that it is possible to be fast on mobile...In terms of performance, Inferno is currently the fastest JavaScript UI library there is – both in benchmarks and actual real-world scenarios. It excels on the browser at initial page load, parse times, render times and update times. Inferno's server-side rendering is around 5x faster than React, around 3x faster than Angular 2 and around 1.5x faster than Preact and Vue.
Inferno has an API that is very similar to React and it's possible to port a React app directly to Inferno using the inferno-compat library.
Inferno also has it's own router, soon to be updated to match the API of React Router 4, and is compatible with the Redux and MobX state management libraries.
Pros
- Excellent performance
- Familiar API for React developers
- Good documentation
Cons
- Small community
- Using
inferno-compatmay impact performance
Additional Resources
Polymer
Polymer is a Google-backed libary focused on Web Components, a proposed group of technologies that are currently not well-supported in browsers. Polymer, along with the Polymer App Toolbox, helps developers use these technologies today to build web applications.
Polymer is a lightweight library that helps you take full advantage of Web Components.
With Web Components, you can create reusable custom elements that interoperate seamlessly with the browser’s built-in elements, or break your app up into right-sized components, making your code cleaner and less expensive to maintain.
Polymer sprinkles a bit of sugar over the standard Web Components APIs, making it easier for you to get great results.
A primary motivation of the Polymer project is to move the web platform forward. The Polymer team have a #UseThePlatform hashtag that they explain on their About page:
...there are real costs to doing too much outside and above the platform itself—costs that both developers and users pay. Developer costs come in the form of complexity and lock-in.
Over time, the stacks we’ve built on top of the platform have pushed web development further and further from the simplicity of view-source and shift-refresh, to a place where every project begins with an overwhelming sea of choices.
Thanks to new web platform primitives, many of the needs we’ve addressed by building over and around the platform can now be met by the platform itself...
We believe the patterns, libraries and tools we work on are beneficial, and we're happy to see them widely adopted. But our campaign to #UseThePlatform is ultimately not about driving people to use the stuff the Polymer Project builds. It’s about promoting the use of the web platform to deliver the best apps possible
If you've followed Google's much-appreciated efforts to promote the web platform over the years, much of this will sound familiar and in line with other efforts from the company.
Pros
- Strong corporate support (Google)
- Supports emerging web standards
Cons
- Community complaints around communication
- Poor browser support limits options/implementation of vision
Additional Resources
- Build a Real-Time Polymer To-Do App
- Polymer: Get Started
- Build Your First App with Polymer and Web Components
- The broken promise of Web Components
- Polymer Team - I'm really frustrated!
Preact
Authored by Jason Miller, Preact is a well-established React alternative that emphasizes small library size. Coming in at 3KB gzipped, Preact uses the same API as React and is compatible with much of the ecosystem.
Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is an thin layer over Preact that attempts to achieve 100% compatibility with React.
The reason Preact does not attempt to include every single feature of React is in order to remain small and focused - otherwise it would make more sense to simply submit optimizations to the React project, which is already a very complex and well-architected codebase.
Preact is used by a number of large organizations including Lyft, Pepsi and Uber. Although Preact has better start up performance (page load, for example) than React, in the latest benchmarks React is faster at updating the UI once the page is loaded.
Pros
- Lightweight
- Good documentation
- React-compatible
Cons
- Smaller community than React (but lots of overlap, intermingling)
- Using
preact-compatmay impact performance
Additional Resources
- Getting Started
- Getting started with PreactJS — A Step By Step Guide
- Introduction to Preact — a smaller, faster React alternative
Reason
In a way, Reason can be thought of as a part of the React ecosystem. However, it is much more than that. Reason is a syntax on top of the OCaml langauge. It can compile to JavaScript, but it can also compile to assembly and be used to build desktop and mobile applications. Here's some further explanation from the documentation:
Reason is not a new language; it's a new syntax and toolchain powered by the battle-tested language, OCaml. Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know...
Reason compiles to JavaScript thanks to our partner project, BuckleScript, which compiles OCaml/Reason into readable JavaScript with smooth interop. Reason also compiles to fast, barebone assembly, thanks to OCaml itself.
Reason (sometimes referred to as ReasonML) has a companion project, ReasonReact:
ReasonReact is a safer, simpler way to build React components, in Reason.
By leveraging the latter's great type system, expressive language features and smooth interoperability with JS, ReasonReact packs ReactJS' features into an API that is:
- Safe and statically typed
- Simple and lean
- Familiar and easy to insert into an existing ReactJS codebase
- Well thought-out (made by the creator of ReactJS himself!)
It is often said that writing ReactJS code feels like "just using JavaScript". The same applies to ReasonReact, but we push it further; writing routing, data management, component composition and components themselves feel like "just using Reason".
Pros
- Strong corporate support (Facebook)
- Good documentation
- Versatile
- Familiar for React developers
Cons
- Very new??
Additional Resources
Svelte
Authored by Rich Harris, Svelte takes a unique approach. It compiles your app at build time so that you ship the lightest weight code possible. From the documentation:
...Svelte has a crucial difference: rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.
And because there's no overhead, you can easily adopt Svelte in an existing app incrementally, or ship widgets as standalone packages that work anywhere.
An interesting project related to Svelte is Sapper, a framework similar in philosophy to Next.js, but with a greater emphasis on performance.
Sapper is a framework for building extremely high-performance web apps...There are two basic concepts:
- Each page of your app is a Svelte component
- You create pages by adding files to the routes directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over
Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. Sapper does all the boring stuff for you so that you can get on with the creative part.
Pros
- Fast and lightweight
- Good documentation
- Innovative
Cons
- Small community
- Very new (but promising!)
Additional Resources
- Svelte Guide
- Svelte - The magical disappearing UI framework - Interview with Rich Harris
- Slim, speedy Svelte framework puts JavaScript on a diet
- Frameworks without the framework: why didn't we think of this sooner?
The Rest of the Pack
There are a lot of interesting frameworks here. Some are the product of a single developer, while others have strong communities with a large number of contributors and corporate sponsorship.
If you're an author or contributor to one of these projects and you'd like to provide more or updated information, please reach out to me.
AppRun
Authored by Yiyi Sun, AppRun in a small (3KB) library that uses TypeScript as the development language and takes inspiration from Elm:
AppRun is a lightweight library...using the elm style model-view-update architecture and event publication and subscription.
Additional Resources
- Building Applications with AppRun
- Building Applications with AppRun, Part 1 - Getting Started (YouTube)
Binding.scala
Binding.scala is a one-way data-binding library written in Scala, although it targets both JavaScript and JVM. From the documentation:
Binding.scala can be used as a reactive templating language in both web and desktop GUI development. It enables you use native XHTML literal syntax to create reactive DOM nodes, which are able to automatically change whenever the data source changes...Binding.scala has more features and less concepts than other reactive web frameworks like ReactJS.
Additional Resources
Bobril
Bobril takes inspiration from React and Mithril. From the documentation:
It is fast, low size framework with rendering based on Virtual DOM. The main focus is on speed and simplicity of code generation...Content and behavior of any page can be defined simply by composing JavaScript objects.
The page content rendering is based on comparison of Virtual DOMs. The application has some state in time and bobril application generates the Virtual DOM according to this state. Virtual DOM is an object representation of the resultant DOM. If some state-changing event occurs and the previous Virtual DOM is different than currently generated Virtual DOM, the real DOM will change according to this change.
Additional Resources
Choo
Choo is a functional library for building user interfaces. It's small (4KB) and supports server rendering. The Choo philosophy:
We believe frameworks should be disposable, and components recyclable. We don't want a web where walled gardens jealously compete with one another. By making the DOM the lowest common denominator, switching from one framework to another becomes frictionless. Choo is modest in its design; we don't believe it will be top of the class forever, so we've made it as easy to toss out as it is to pick up...We want everyone on a team, no matter the size, to fully understand how an application is laid out. And once an application is built, we want it to be small, performant and easy to reason about. All of which makes for easy to debug code, better results and super smiley faces.
Additional Resources
CxJS
CxJS, or simply Cx, is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools, dashboards and admin apps. Modern frameworks such as React and Angular provide an excellent base for building UI components, however, component implementation and many other application aspects are left to the developer to figure out. CxJS tries to fill that gap and provide the all necessary ingredients required for modern web applications.
Additional Resources
Cycle.js
Billed as a "functional and reactive JavaScript framework for predictable code" Cycle.js is primarily the work of André Staltz. It has over 100 contributors and corporate sponsorship. From the documentation:
Cycle’s core abstraction is your application as a pure function main() where inputs are read effects (sources) from the external world and outputs (sinks) are write effects to affect the external world. These I/O effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, etc.
Additional Resources
- Cycle.js Fundamentals (free video course)
- A Gentle Introduction to Cycle.js
DIO
DIO is a lightweight (7KB), declarative UI library that offers an alternative to React:
There a lot of small details that give DIO its edge that don't realy touch on new API's but rather on creating a larger surface area of what React already supports and adding to this.
For example React can render strings, numbers, elements and components but what if it was able to render Promises or Thenables? This would help solve a lot of "problems" with data fetching and lazy loading that is possible with React but not declaratively incentivised at the library level.
Additional Resources
Dojo
One of the important principles behind Dojo is accessibility, which makes me think it's a potential candidate for projects in government and higher education, where there are often stringent compliance requirements. From the website:
Dojo 2 is grounded in the belief that accessibility is as important online as it is in our physical environments, and architects of both share a similar responsibility to provide access to all...all Dojo 2 widgets have been designed to be accessible by default, and any tools needed to meet WCAG standards have been integrated into @dojo/widget-core and @dojo/widgets.
Internationalization is another area of focus:
Internationalization, or i18n, is the process of decoupling an application from a particular language or culture, and is a major requirement of most enterprise applications. As such, internationalization is one of Dojo 2’s core concerns. @dojo/i18n, Dojo 2’s internationalization ecosystem, provides everything that is needed to internationalize and localize an application, from locale-specific messaging to date, number, and unit formatting.
Like Angular, Dojo uses TypeScript as its development language.
Additional Resources
Domvm
Domvm is a, "thin, fast, dependency-free vdom view layer". Like Vue, it can be used as a jQuery replacement. Similar to React, it leaves concerns beyond views to other libraries (but provides a good list of options). From the documentation:
domvm is a flexible, pure-js view layer for building high performance web applications. Like jQuery, it’ll happily fit into any existing codebase without introducing new tooling or requiring major architectural changes...As a view layer, domvm does not include some things you would find in a larger framework. This gives you the freedom to choose libs you already know or prefer for common tasks. domvm provides a small, common surface for integration of routers, streams and immutable libs.
Additional Resources
DoneJS
DoneJS is a successor to JavaScriptMVC, which was first released in 2008. From the website:
DoneJS offers everything you need to build a modern web app. It comes with a module loader, build system, MVVM utilities, full testing layer, documentation generator, server side rendering utilities, a data layer, and more. Its completeness is itself a feature.
Additional Resources
Etch
Although Etch can be used for front end web applications, its target usage is in Atom packages and the Electron desktop framework. From the documentation:
Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.
Additional Resources
Gruu
Gruu is a relatively new framework by Marek Łabuz. From Marek's article introducing Gruu:
I believe that none of the existing libraries is perfect. Each time a new library/framework is created, some new idea is revealed. No matter if the new library is good or bad. It always brings something unique that is valuable.
Many frontend libraries rely on a render function that is called each time something changes, no matter what the change affects. It leads to unnecessary renders of the parts of the application that has not changed, but still we have to check it because we don’t know for sure...Gruu gets rid of a render function. Instead, it renders only once at the beginning, then it changes only this parts of the view that have actually changed without rendering whole components.
Additional Resources
Glimmer
Glimmer is part of the Ember ecosystem and even uses the Ember CLI to manage projects. As mentioned when discussing Ember, it is a large framework. Glimmer provides Ember developers with a lighter weight option for building single page apps. If needed, Glimmer components can be dropped directly into Ember without a problem.
Additional Resources
Hyperapp
Coming in at a very slender 1KB, Hyperapp is a library with a minimalist API. It does, however, support server rendering. The Hyperapp approach:
Hyperapp is a JavaScript library for building web applications.
Minimal: Hyperapp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do.
Functional: Hyperapp's design is inspired by The Elm Architecture. Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.
Batteries-included: Out of the box, Hyperapp combines state management with a VDOM engine that supports keyed updates & lifecycle events — all with no dependencies.
Additional Resources
- Pure programming with Hyper App
- HyperApp - Tiny Library for Frontend Applications - Interview with Jorge Bucaran
Hyperdom
Formerly named, Plastiq, Hyperdom, is a "fast, feature rich virtual-dom framework for building dynamic browser applications." From the documentation:
Hyperdom applications are made of regular JavaScript objects that represent application state with render() methods that define how that state is represented in HTML. Hyperdom supports a simple event-update-render cycle, promises for asynchronous operations, JSX, non-JSX, client-side routing, SVG, two-way data binding, and optimises for performance, developer usability and simplicity of application architecture.
hyperHTML
Framework agnostic, hyperHTML was created to, "simplify DOM performance best practices...is 100% ECMAScript compliant and it weighs in at less than 4Kb". From the introductory article:
It’s nothing more than a function, that works bound with DOM nodes and fragments as context. You bind your target node once, or even more if you don’t care, and you render the same template literals over and over simply passing new data.
Additional Resources
Ivi
The Ivi documentation notes that, although Ivi is small, size is at the bottom of its list of priorities:
It seems that nowadays many people in javascript community were brainwashed that small library size is a synonym to fast performance and simple implementation. In reality it usually means that library is using different tricks to reduce code size by using inappropriate data structures (slower performance), initializing data structures at runtime (slower bootstrap performance), reusing code for many different data types (slower performance), etc.
Library size in ivi library is at the bottom on the list of priorities:
- Correctness
- Consistency / Predictable Behavior
- Performance / Developer Experience
- Library Size
Additional Resources
Knockout
Using the MVVM pattern, Knockout is a library that has been around for a while. From the documentation:
Knockout is a JavaScript MVVM (a modern variant of MVC) library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML. It uses observers to make your UI automatically stay in sync with an underlying data model, along with a powerful and extensible set of declarative bindings to enable productive development.
Additional Resources
Maquette
Maquette is a lightweight (3KB) library inspired by React, Mithril and Mercury:
Maquette is a virtual DOM implementation that excels in both speed and simplicity. It solves the problem of keeping the user interface in sync with underlying data.
Maquette allows you to specify the UI using plain Javascript. This makes maquette easy to learn, easy to debug and easy to deploy. Maquette is very unopionated by design, making integration with other frameworks and libraries as painless as possible.
Although it's not the default, you can use TypeScript with Maquette.
Additional Resources
Marko
A product of eBay Open Source, Marko is a reactive front end framework that emphasizes UI performance. Similar to Vue, you can use single file components that include component logic, template and CSS.
Here's a quote on Marko vs React from the lead developer, Patrick Steele-Idem:
While many of the features in Marko were inspired by React, Marko and React offer very different usability and performance characteristics. Marko was designed to avoid almost all boilerplate and is more closely aligned with HTML. In almost all cases, a Marko UI component will require less lines of code than its React JSX equivalent while maintaining readability and allowing the same expressiveness as JSX.
Additional Resources
Mithril
Mithril is a lighweight framework. Unlike React, it incudes functionality for routing, XHR and state management. The pitch for Mithril:
Why use Mithril? In one sentence: because Mithril is pragmatic. This 10 minute guide is a good example: that's how long it takes to learn components, XHR and routing - and that's just about the right amount of knowledge needed to build useful applications.
Mithril is all about getting meaningful work done efficiently. Doing file uploads? The docs show you how. Authentication? Documented too. Exit animations? You got it. No extra libraries, no magic.
Additional Resources
- Isomorphic web application with Mithril.js
- Mithril - The Best Little Framework You've Never Heard Of (YouTube)
Moon
A small (7KB) library, Moon positions itself as an alternative to React, Vue and Mithril.
Moon is a minimal, blazing fast library for building user interfaces. It combines the positive aspects of popular libraries into one small package. It's super lightweight, and includes advanced optimizations to ensure fast render times. The API is small and intuitive, while still remaining powerful. Moon is compatible with IE9+.
Yes, there have been a lot of front end libraries released lately, and many people prefer different parts about each of these libraries. For example, React provides the ability to use JSX and uses a virtual DOM, Angular provides easy to use directives, and Ember provides a nice templating engine built in.
Moon aims to combine the best parts of these libraries into a single, lightweight package, while providing improved performance.
Additional Resources
Nerv
Nerv is a new framework out of China. It bills itself as a, "blazing fast React alternative, compatible with IE8 and React 16." In fact, you can convert a React app to Nerv simply by adding an alias in your webpack config. All of that and a library size of 4.4 KB.
Because it is so new and makes claims of superior performance vs React — some members of the React community asked for clarification on those claims, as well as more information about Nerv. From the author's reply:
In my humble opinion, The biggest difference between preact, Inferno, and Nerv, is not some technical issue like what’s the right way to implementing a React feature. It is about the what does the library want to achieve. In preact, maybe they just want a lite library, Inferno want to be fast as they can, React compatibility just a bonus, they are both need a compat module to do that. But for Nerv, compatible with React is our main goal, by doing that, we can sacrifice performance and size.
Peter Mikitsh’s criticism is right. Nerv can’t pass React fiber(16) 100% unit test, which is predictable —— the React team takes whole year to achieve the target, how can two guys come from nowhere(says by some guy in Hacker news) be able to do that?
So, What’s the tradeoffs? Obviously, some third-party React component/library couldn’t work properly in Nerv. But which one? To be honest I don’t know. I’m glad to be heard that Next.js next-news worked on first try., but in the meantime, Benchmark tabs don't work in Firefox (fixed) —— All of this, We wouldn’t know if we don’t go public.
Rome wasn't built in a day. Nerv is not perfect, no library is, particularly in early stage, maybe there still tons of bug we don’t know. Therefore we decided to open source, to go public, we need the community’s help, we need your help.
Additional Resources
NX
NX is the work of Bertalan Miklos, JavaScript engineer at RisingStack. From the NX documentation:
NX is a modular front-end framework - built with ES6 and Web Components. The building blocks of NX are the core, the middlewares, the components and the utilities. These are all hosted in separate GitHub repos and npm packages.
The NX core is a tiny library, responsible for one thing only. It allows you to create dumb components and to augment them with middlewares. A component executes its middlewares when it is attached to the DOM and it gains all the extra functionalities from them. NX comes with some core middlewares out of the box, which you can find listed below.
Additional Resources
petit-dom
Authored by Yassine Elouafi and one of the fastest in performance benchmarks, petit-dom takes a minimalist approach:
Diff algroithm is based on pre-optimizations described at https://neil.fraser.name/writing/diff/ and the algorithm presented in the paper "An O(ND) Difference Algorithm and Its Variations. There is also an excellent article which explains how the algorithm works. The article includes a GUI application to play with the algorithm
Pux
Pux is a framework that uses PureScript, a strongly-typed, functional programming language that complies to JavaScript. There are currently problems with performance:
The slow performance arises from translating Pux's (smolder) virtual DOM to React's virtual DOM. The goal is to write a purescript virtual DOM module for smolder, which would avoid that translation step and could be optimized for a monadic datastructure. I suspect this would achieve performance on par with Halogen.
Additional Resources
Ractive.js
Originally created for use on the Guardian website, Ractive is a reactive, template-driven UI library:
Unlike other frameworks, Ractive works for you, not the other way around. It doesn't have an opinion about the other tools you want to use with it. It also adapts to the approach you want to take. You're not locked-in to a framework-specific way of thinking. Should you hate one of your tools for some reason, you can easily swap it out for another and move on with life.
Additional Resources
react-lite
Aiming to be a lighter-weight version of React, react-lite, is an "implementation of React that optimizes for small script size." From the documentation:
React-lite supports the core APIs of React, such as Virtual DOM, intended as a drop-in replacement for React, when you don't need server-side rendering in browser(no ReactDOM.renderToString & ReactDOM.renderToStaticMarkup).
Additional Resources
RE:DOM
Authored by Juha Lindstedt, RE:DOM is a small (2KB) and fast UI library. In fact, it's one of the best performers in the latest benchmarks. From the website:
RE:DOM is a tiny (2 KB) DOM library by Juha Lindstedt and contributors, which adds useful helpers to create DOM elements and keeping them in sync with the data.
Because RE:DOM is so close to the metal and doesn't use virtual dom, it's actually faster and uses less memory than almost all virtual dom based libraries, including React (benchmark).
It's also easy to create reusable components with RE:DOM.
Another benefit is, that you can use just pure JavaScript, so no complicated templating languages to learn and hassle with. Plus RE:DOM plays nicely with others. No need to write wrappers for things like Google Maps.
Additional Resources
Reflex
Authored by Irakli Gozalishvili of Mozilla, Reflex is a library heavily inspired by Elm:
Reflex is a functional reactive UI library that is heavily inspired by (pretty much is a port of) elm and it's amazingly simple yet powerful architecture where "flux" in react terms is simply a byproduct of a pattern. In order to keep a major attraction of elm — algebraic data types & type safety — the library uses flow, a static type checker for JS. All types are separated from implementation though, so it's your call if you want to take advantage of it or just ignore it.
Riot
The Riot documentation gets straight to the point:
The frontend space is indeed crowded, but we honestly feel the solution is still “out there”. We believe Riot offers the right balance for solving the great puzzle. While React seems to do it, they have serious weak points that Riot will solve.
A major feature of Riot is custom tags (which look a lot like a Vue single file component):
A custom tag glues relevant HTML and JavaScript together forming a reusable component. Think React + Polymer but with enjoyable syntax and a small learning curve.
And...
Riot is Web Components for everyone. Think React + Polymer but without the bloat. It’s intuitive to use and it weighs almost nothing. And it works today. No reinventing the wheel, but rather taking the good parts of what’s there and making the simplest tool possible.
Additional Resources
rxdomh
Although interesting, rxdomh has the look of an experimental project. It was inspired by Binding.scala and react-flyd.
San
San is another project from Chinese developers. The documenation is in Chinese, but Chrome does a pretty good job with the translation:
San, is a MVVM component framework. Its small size (12K), good compatibility (IE6), high performance is a reliable and dependable solution for implementing a responsive user interface.
San also supports data-to-view binding instructions, the most commonly used branches in business development, looping instructions, etc. in addition to supporting the syntax features of all native HTML through declarative HTML-like view templates that remain well-used on the basis of, based on the complete frame template string parsing, and build a view of layer node relation tree generated by the UI view of the quick view of a high-performance engine.
Additional Resources
Simulacra.js
It's fair to say that no other framework has a smaller API than Simulacra:
Simulacra.js returns a DOM Node that updates when an object changes. Its API is a single function, and it does not introduce any new syntax or a template language. It recursively adds metaprogramming features to vanilla data structures to work.
It is a fairly low cost abstraction, though it may not be quite as fast as hand-optimized code. The approximate size of this library is ~5 KB (minified and gzipped).
Slim.js
Authored by Avichay Eyal, Slim.js is a lightweight web component authoring library:
Slim.js is a lightning fast library for development of native web-components and custom-elements based modern applications. No black magic involved. It uses es6+DOM native API and boosts up HTML elements with superpowers.
Additional Resources
Stem JS
Authored by Mihai Ciucu, Stem JS is the framework that tries not to be a framework:
The syntax might look familiar, but Stem is designed to empower individual components and not the framework...
Stem was designed with code maintainability as a primary purpose, regardless if your project has 100 or 100k lines of code.
We also hate it when libraries force programmers to jump through hoops to make any non-standard change to it, so everything is designed to be easily modified.
Additional Resources
Stencil
From the Ionic team, Stencil is a "compiler that generates Web Components". But also a bit more than that:
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Additional Resources
Stimulus
Stimulus is a framework from the folks that brought you Basecamp.
Stimulus is a JavaScript framework with modest ambitions. Unlike other frameworks, Stimulus doesn’t take over your application’s entire front-end. Rather, it’s designed to augment your HTML by connecting elements to JavaScript objects automatically.
Additional Resources
Surplus
In performance benchmarks, Surplus was very fast. It also has a different approach, utilizing S.js:
Surplus is a compiler and runtime to allow S.js applications to create high-performance web views using JSX. Thanks to JSX, the views are clear, declarative definitions of your UI. Thanks to S, they update automatically and efficiently as your data changes.
Also...
Surplus is not a React “work-alike,” but it uses the JSX syntax popularized by React to define its views...JSX mitigates some of the risk of adopting (or abandoning) Surplus. Much Surplus JSX code already works as React stateless functional components, and vice versa. Surplus avoids arbitrary differences with React when feasible.
Differences with React:
- Surplus makes real DOM elements, not virtual, and they update automatically. This removes most of the React API.
- The ref property takes an assignable reference, not a function.
- Events are native events, not React's synthetic events.
- Surplus is a little more liberal in the property names it accepts, like onClick/onclick, className/class, etc.
Thermite
Thermite is another library that uses PureScript, the functional language that compiles to JavaScript. From the documentation:
It does not provide all of the functionality of React, but instead to provide a clean API to the most commonly-used parts of its API. It is possible to use purescript-react for more specialized use cases.
Additional Resources
TSERS
TSERS stands for Transform-Signal-Executor framework for Reactive Streams. From the documentation:
In the era of the JavaScript fatigue, new JS frameworks pop up like mushrooms after the rain, each of them providing some new and revolutionary concepts. So overwhelming! That's why TSERS was created. It doesn't provide anything new. Instead, it combines some old and well-known techniques/concepts and packs them into single compact form suitable for the modern web application development.
Technically the closest relative to TSERS is Cycle.js, but conceptually the closest one is CALM^2. Roughly it could be said that TSERS tries to combine the excellent state consistency maintaining strategies from CALM^2 and explicit input/output gates from Cycle - the best from both worlds.
Additional Resources
Ultradom
Ultradom (formerly picodom) is interesting in that it's authored by the same guy behind Hyperapp, Jorge Bucaran.
Ultradom is a minimal virtual DOM view layer for building browser-based applications and frameworks. Mix it with your favorite state solution architecture or use it standalone for maximum flexibility. Features include server-rendered DOM recycling, keyed updates & lifecycle events — all with no dependencies.
Vidom
Authored by Filatov Dmitry, Vidom is another React-inspired library:
Vidom is just a library to build UI. It's highly inspired from React and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React.
Additional Resources
Vuera
Vuera is an unusual library. It allows you to use React componets inside Vue and vice versa. The anticipated use cases are when migrating between React and Vue or when using both frameworks with a single project.
Additional Resources
Hey! You made it all the way down here! If you’ve enjoyed this post, sign up for my weekly newsletter. I curate the best JavaScript writing from around the web and deliver it to readers every Thursday. The sign up form is right below this article.
Until next time, happy coding…