Updated October 14, 2018: Added CanJS
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. 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
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 was introduced as an open source project in May, 2013. The original author was Jordan Walke, an engineer at Facebook.
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.
- 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)
- Strong corporate support (Facebook)
- Abundance of choice can be overwhelming at first
- Best practices not always clear to newcomers
- Learning curve can be steep for building larger applications
- 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 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.
- 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
- Learning curve can be steep
- TypeScript may be a barrier to adoption
- Poor start up metrics in benchmarks
- 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
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.
- Easy to learn
- Good documentation
- Surging in popularity and usage
- Best performance of top three frameworks
- Current job market is less than that for React and Angular
- Comparison with Other Frameworks
- Why We Chose Vue.js
- Learn Vue 2: Step By Step (Free video course)
- Reactivity in Depth
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.
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.
- Abundant training resources
- Good documentation
- Very well established
- Full featured
- Two-way data binding, other technical issues that may not be desirable
- Declining popularity
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:
- Provides code structure
- Stable project
- Declining popularity
- Imperative programming style (as opposed to popular declarative style)
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 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.
- Clear best practices
- Very well established
- Full featured
- Large size
- Steep learning curve
- Declining popularity
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, 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.
- Complete solution
- Stable API
- Smaller community vs top frameworks
- Fewer job opportunities
- 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 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.
- Elimination of virtually all runtime errors
- Strong architecture
- Simplified refactoring
- Smaller commmunity
- Fewer job opportunties
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 has an API that is very similar to React and it's possible to port a React app directly to Inferno using the
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.
- Excellent performance
- Familiar API for React developers
- Good documentation
- Small community
inferno-compatmay impact performance
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.
- Strong corporate support (Google)
- Supports emerging web standards
- Community complaints around communication
- Poor browser support limits options/implementation of vision
- 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!
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.
- Good documentation
- Smaller community than React (but lots of overlap, intermingling)
preact-compatmay impact performance
- Getting Started
- Getting started with PreactJS — A Step By Step Guide
- Introduction to Preact — a smaller, faster React alternative
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!)
- Strong corporate support (Facebook)
- Good documentation
- Familiar for React developers
- Very new??
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:
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.
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.
- Fast and lightweight
- Good documentation
- Small community
- Very new (but promising!)
- Svelte Guide
- Svelte - The magical disappearing UI framework - Interview with Rich Harris
- 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.
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.
- Building Applications with AppRun
- Building Applications with AppRun, Part 1 - Getting Started (YouTube)
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.
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.
CanJS is from the same team that created DoneJS as well as the Bitovi consultancy. From the mission statement:
You shouldn’t have to rewrite your application to keep pace with technology. We constantly integrate new ideas and evolving best practices into CanJS libraries, but in a responsible way that makes it possible to upgrade gracefully. We aim to provide a stable and innovative platform, so you can block out noise and stay focused your app, not the tools.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Coming in at a very slender 1KB, Hyperapp is a library with a minimalist API. It does, however, support server rendering. The Hyperapp approach:
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.
- Pure programming with Hyper App
- HyperApp - Tiny Library for Frontend Applications - Interview with Jorge Bucaran
Formerly named, Plastiq, Hyperdom, is a "fast, feature rich virtual-dom framework for building dynamic browser applications." From the documentation:
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.
The Ivi documentation notes that, although Ivi is small, size is at the bottom of its list of priorities:
Library size in ivi library is at the bottom on the list of priorities:
- Consistency / Predictable Behavior
- Performance / Developer Experience
- Library Size
Using the MVVM pattern, Knockout is a library that has been around for a while. From the documentation:
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.
Although it's not the default, you can use TypeScript with Maquette.
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.
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.
- Isomorphic web application with Mithril.js
- Mithril - The Best Little Framework You've Never Heard Of (YouTube)
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.
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.
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.
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
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.
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.
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).
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.
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.
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):
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.
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.
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).
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.
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.
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.
Stimulus is a framework from the folks that brought you Basecamp.
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.
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.
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.
TSERS stands for Transform-Signal-Executor framework for Reactive Streams. From the documentation:
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.
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.
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.
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.
Until next time, happy coding…