What are the best JavaScript libraries for building a UI with data binding support?

Question

DevelopmentFrontend DevelopmentLibraryWeb Framework

What are the best JavaScript libraries for building a UI with data binding support?

12

Options
Considered

161

User
Recs.

Jan 27, 2024

Last
Updated

12 Options Considered

Best JavaScript libraries for building a UI with data binding support	Price	GZipped size	Repository
62 Vue.js	-	~30KB	https://github.com/vuejs/vue
-- Riot	-	10.39KB	-
-- Knockout	Free	-	-
50 React	-	45K	-
-- RxDB	0	-	-

See Full List

Built By the Slant team

Find the best product instantly.

4.7 star rating

Try it now - it's free

score 30 · Answer 1

Vue.js

Top Pro

VueRouter

Top Con

Very enterpris-ey in design and tooling

Codehell's Experience

Actualmente trabajo en 2 proyectos con Vue y mi experiencia es bastante buena. Con el cli de vue puedes construir nuevos projectos a medida, algo que React no tiene. El único pero que le encuentro es que no se integra bien con typescript y en una aplicación grande con bastantes componentes no está claro como desacoplar estos componentes. See More

Specs

GZipped size:~30KB

Repository:https://github.com/vuejs/vue

Top Pro

Good documentation and resources

The official Vue docs are very informative and comprehensive. Vue has also become very popular over the last couple of years and so there are a lot of other resources available as well. See More

Top Con

Poor typescript support

Very basic typescript support. See More

Top Pro

Minimal setup and boilerplate

Unlike some other frameworks, Vue is very quick and simple to get up and running. See More

Top Pro

Fast rendering with virtual DOM

Vue uses a virtual DOM which means rendering is very fast. Compared to other frameworks, Vue beats most in benchmark tests. See More

Top Pro

Single file component

Very useful. See More

Top Pro

CLI and Webpack integration

Top Pro

Compact size and scope

The core Vue library is only 18kb and focuses on the view layer only. See More

Top Pro

Lightweight

Vue.js weighs in at 16kb min+gzip. See More

Top Pro

Vuex store, events system

Top Pro

Reactivity system

Top Pro

Easily extensible

There are many plugins and supporting libraries that work well with Vue, allowing you to build more complicated systems that include things like state management, routing, event handling, ajax, and much more. See More

Top Pro

Can be used with any front-end stack

Vue can easily be integrated with other front-end libraries. This makes it an extremely versatile tool and it's easy to fix its shortcomings or missing features by just plugging in another library. See More

See All

score 11 · Answer 2

Riot

Top Con

Not a web standard

Not a web standard. See More

Top Pro

Components use familiar HTML tags

Riot components use custom tags which are nothing more than familiar HTML tags coupled with JavaScript. This eliminates the need to learn another templating language or syntax. For example: <todo> <h3>TODO</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ handleSubmit }> <input> <button>Add #{ items.length + 1 }</button> </form> this.items = [] handleSubmit(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </todo> Riot tries to separate HTML and JavaScript, while still keeping them inside the component. This way, the HTML can also be neatly mixed with JavaScript expressions. See More

Specs

GZipped size:10.39KB

Platforms:Android, iOS, Web, Linux, macOS, Windows, Electron

License:free open-source software

Search:yes

See All Specs

Top Pro

Lightweight

Riot is made to be used with websites of any kind, so it's built to be easy and lightweight, but still maintaining all the needed features for a UI library. It's only 2.5 KB in size when minified. So it can also be used for mobile web apps without requiring much bandwidth to download. See More

Top Pro

Minimal DOM operations

Riot takes the expressions from a DOM tree and stores them in an array. Each of these expressions points to a DOM node. On each cycle these expressions are compared to the values in the DOM. So when a value has changed, Riot automatically updates the corresponding node. This way the operations are kept to a minimal amount and since the expressions can be cached, going through 1000 of them takes less than 1ms. See More

Top Pro

Separation of concerns with RiotControl

RiotControl is inspired by Facebook's Flux Architecture Pattern and it's a simple Central Event Controller/Dispatcher for Riot. It's extremely lightweight (like Riot itself) but unfortunately passes up on some features in favor of performance and simplicity. RiotControl helps with storing the stater of the application, by passing events from views to stores and vice-versa. Stores can communicate with many views and views can do the same with many stores, this enables to clearly separate concerns and inter-component communication. See More

Top Pro

Supports server side rendering

Riot has support for server side rendering. The views and data are rendered on the server, then those views are sent as HTML to the browser when a user requests them. This helps with initial loading time and is very useful for SEO purposes because the web app is indexed by search engines same as other static websites that have their HTML on the server. See More

See All

score 12 · Answer 3

Knockout

Top Pro

Easy data binding

Knockout uses HTML5 data attributes to bind HTML elements to data objects in javascript. This allows more work to be done by the framework rather than requiring you to specify where data should be bound in the javascript. The data binding is very intuitive as the bindings are done within the HTML itself in the location it should be bound. See More

Top Con

Slower than others when amount of objects grows

Knockout has a bad performance when the dealing with large amount of objects. You can see more here. See More

ColorfulSwayxtix's Experience

Very Easy to Learn. Very Flexible. If you have your own opinions about how you want to structure your application and you're willing to do optimizations yourself, this is the library for you. See More

Top Pro

Easy to learn

Has a low entry barrier and an easy learning curve. It's especially easy to learn for beginners. See More

Top Pro

Dynamic models help with keeping the code simple and clean

Models in Knockout can be watched to keep the page data up to date by using observable objects. The observables notify Knockout when data is changed and automatically updates the page when this happens. By having Knockout maintain this relation, it keeps the front end code cleaner and simpler, and by enforcing a consistent pattern with observables the methodology can be more robust. See More

Top Pro

Built-in templating

Bindings in Knockout can also be used to control the generated structure of the HTML. There are bindings provided to allow for iteration and conditionals. The structure of the html reflects the structure of the data so iterative elements are bound to arrays in the data model. Having the HTML structure maintained by bindings keeps the templating simple, easy to read, and maintain. Knockout also allows for string based templating so you can use whatever templating library you prefer. See More

Top Pro

Browser support

All mainstream browsers are supported. See More

See All

score 15 · Answer 4

React

Top Con

Recommends JSX

While not required to write React apps, JSX is a popular choice and it promotes poor separation of concerns. HTML does not belong in JavaScript. See More

Top Pro

Debugging tools

React has an official Chrome Extension which is used as a developing and debugging tool. It can be used to quickly and painlessly debug your application or view the whole application structure as it's rendered. See More

Specs

GZipped size:45K

Top Con

Verbose

React gets a little verbose as applications get more complicated with more components. It's simply not as straightforward as simply writing HTML and JavaScript would be. See More

Top Pro

Tested on Facebook itself

React is used on one of the most visited websites on the planet, Facebook. With stellar results and with million of people experiencing it every day. See More

Top Con

Not a web standard

Not a web standard See More

Top Pro

Keep control over your app's logic

React is just a view library, so you still have (almost) full control over how your app behaves. See More

Top Con

Large file size

React's react.min.js is 145.5KB in size. It's much larger than some other libraries that offer roughly the same features and it's almost the same size as some MV* frameworks such as Angular or Ember that offer more features out of the box. Although, it should be mentioned that sometimes having a smaller library may force developers to reinvent the wheel and write inefficient implementations on features that React already has. Ending up with a larger application that's harder to maintain and/or that has bad performance. See More

Top Pro

Virtual DOM support

Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself. See More

Top Con

You have to learn a new syntax

Requires to learn a custom syntax, JSX that has some gotchas and introduce complexity, a steeper learning curve, and incompatibility with other tools. Though you can opt out from JSX and use vanilla JS instead. But that is not recommended since it adds a lot of unneeded complexity which JSX tries to avoid. See More

Top Pro

Server side rendering

React can render it's components and data server side, then it sends those components as HTML to the browser. This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines. See More

Top Con

Too much boilerplate code

React components tend to have a lot of boilerplate code to do simple things See More

Top Pro

Easy to reuse components

Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them. See More

Top Pro

Can be used with different libraries

ReactJS can be used independently as the only library for building the front-end, or it can be used alongside JavaScript libraries such as jQuery, or even Angular. See More

Top Pro

Template engine independent

React provides a template engine (JSX) which is easy to use. But it's not mandatory. See More

Top Pro

Supported by Facebook and Instagram

React is built by Facebook engineers initially to be used only for their inner projects especially to solve the problem of building large complex applications with constantly changing data. See More

Top Pro

Flux architecture pattern

Flux is a platform agnostic pattern which can technically be used with any application or programming language. One of Flux' main features is that it enforces uni-directional data flow which means that views do not change the data directly. With React this is useful because this way it's easier to understand an application as it starts getting more complicated. By having two-way data binding, lead to unpredictable changes, where changing one model's data would end up updating another model. By using the Flux architecture, this can be avoided. See More

Top Pro

Easy to write tests

SInce React's virtual DOM system is implemented completely in JavaScript, it's very easy to write UI test cases. See More

Top Pro

One-way data flow

React's one-way data binding (or one-way data flow) means that it's easy to see where and how your UI is updated and where you need to make changes. It's also very easy to keep everything modular, fast and well-organized. See More

See All

score 15 · Answer 5

RxDB

Top Pro

good example project

there are example projects on how to use RxDB in different stacks See More

Top Con

Build size is over average

Top Pro

You can subscribe to queries

You can get an observable from queries instead of manually handling events. See More

See All

score 5 · Answer 6

slim.js

Top Pro

Easy to learn and use

Leverages web components, uses the platform, reduced weight. See More

Avichay Eyal's Experience

Automatic binding, native API support See More

Specs

GZipped size:5KB

Platforms:All

License:MIT

Repository:https://github.com/eavichay/slim.js

See All Specs

See All

score 7 · Answer 7

Polymer

Top Pro

Various basic components

It provides a base component. See More

Top Con

No server-side rendering

Polymer does not support server-side rendering. This results in higher loading times, more HTTP requests and it's not very SEO friendly, since search engines have no way of indexing a page if it's not rendered in the server. See More

Specs

v2.0 GZipped size (Firefox):32K

v2.0 GZipped size (Safari):13K

v1.0 GZipped size:53K

v2.0 GZipped size (Chrome):10K

See All Specs

Top Pro

HTML markup is not string

HTML markup as it can be a non-string. See More

Top Pro

Flex layout components

It provides Flex layout components. See More

Top Pro

CSS is easy to apply

CSS can be applied far more comfortably than React. See More

Top Pro

No need for special debugging tools

The presence od specialized debugging tools are advertised by competitors. The all features of web components are natively supported by browser embedded development tools. See More

Top Pro

Excellent routing

The router is embedded into CLI for project creation and covers as web as Progressive web app, also fused with Polymer layouts out of the box. The shop template for CLI has a complete solution including the routing. See More

Top Pro

Complete web app stack support

Full app stack from data tier to routing, progressive web app, responsive layouts makes no need to seek outside of Polymer ecosystem for application features. In addition to waste set of mature web components in Polymer Elements along with Vaadin Elements there are thousands of web components in the wild comparable to jQuery plugins set. See More

Top Pro

Excellent documentation

Polymer guides you as with tools (cli, build environment, app templates,..) as with complimentary documentation on all phases of app development from creation of app as progresive web app to production deployment instructions. As Polymer is standards based, the whole community around those standards also helping in documentation and support. See More

Top Pro

Based on web components

Web Components are a collection of specifications released by W3C as a way to reduce the complexity of web apps by creating reusable components. Browser support is currently poor for web components, however Polymer is developed to make web components compatible with modern browsers. See More

Top Pro

API is easy to understand, based on standard

The Polymer APIs are split on application layers and follow standards on all possible ways: Web Components, CSS variables, async API via Promises and so on. See More

See All

score 3 · Answer 8

Webix UI library

Top Pro

A lot of widgets

Webix is one of the most extensive UI component libraries, second only to Sencha ExtJS. Not only considering the number of widgets, but also the API methods for manipulating these widgets. See More

Top Con

Commercial license

It's not free for commercial applications. See More

Top Pro

Views can be constructed using JavaScript without HTML

The most common way of working with webix is to create a JSON configuration of your view in JavaScript. When you use TypeScript, you get complete typechecking and intellisense in your IDE. See More

Top Pro

Extremely simple to implement

To get started is extremely simple. It has a low learning curve. See More

See All

score 2 · Answer 9

Deku

Top Pro

Easy to learn

Since Deku is very lightweight and has a rather small API, there's not much to learn. It's pretty easy to get started and build something with it. See More

Top Con

Not a lot of learning resources

Since it's a rather new library and has a small community, there are not many examples where you can learn from out there. There are also few guides and the documentation is not amazing and has some parts that should be covered better. See More

Top Pro

Can use JSX

Developers using Deku can choose to also use JSX if they want to. This is especially helpful for people who are moving from React to Deku. See More

Top Con

No support for legacy browsers

Deku does not support legacy browsers, or relatively old browsers for that matter. They only support the latest versions of the major web browsers. See More

Top Pro

Good performance

Deku's diffing algorithm is considerably faster and performs better than most libraries. The dbmonster performance mini-app written in Deku renders roughly 16% faster than other libraries. See More

Top Pro

Server side rendering

Deku can render it's components and data server side, then it sends those components as HTML to the browser. This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines. See More

See All

score 9 · Answer 10

Marko Widgets

Top Pro

Very fast on the server

Using Marko and Marko Widgets to render UI components on the server was shown to be 10x faster than React. A benchmark application was built using both Marko+Marko Widgets and React and the results of rendering a page of 100 search results on the server was measured and compared. Both the Marko Widgets code and the React code used a very similar UI components-based appraoch. See More

Top Con

Not a web standard

Not a web standard. See More

Specs

GZipped size:39.1 kB

Top Pro

Marko templating engine for the view

Marko is a fast and lightweight, general purpose HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. Marko is used for rendering UI components and Marko Widgets is used to bind client-side behavior to rendered UI components. Marko can be used independently of Marko Widgets and this makes it suitable in all situations where HTML rendering is needed. See More

Top Con

Not very popular

Marko Widets doesn't seem to be very popular yet. With only ~ 400 stars on GitHub. This may be a problem for beginners because there are not many learning resources outside the official documentation. See More

Top Pro

Simple JavaScript API for rendering a UI component

The following code illustrates how the render(input) method exported by a UI component's JavaScript module can be used to render a UI component and insert the resulting HTML into the DOM: require('./app-hello') .render({ name: 'John' }) .appendTo(document.body) See More

Top Pro

Very fast in the browser

Marko Widgets utilizes the morphdom module for updating the DOM and that module was shown to be very competitive with React and virtual-dom. See More

Top Pro

UI components can be embedded in a Marko template using a custom tag.

The following code illustrates how a UI component can be embedded in a Marko template: <div> <app-hello name="Frank"/> </div> See More

Top Pro

Easily reference nested DOM elements and nested widgets

Marko Widgets supports the concept of "scoped" IDs. With scoped IDs, a nested DOM element or nested widget can be given an ID that is unique within the scope of the containing widget. At runtime the actual ID will be the scoped ID prefixed with the ID of the parent widget. A reference nested widget can be obtained using the this.getWidget(scopedId) method and a reference to a nested DOM element can be obtained using the this.getEl(scopedId) method. For example: <div class="my-app" w-bind> <button type="button" w-onClick="handleButtonClick"> Click Me </button> <alert-overlay visible="false" w-id="alert"> This is a test alert. </alert-overlay> <div w-id="clickMessage" style="display: none;"> You clicked the button! </div> </div> And then in the JavaScript code: module.exports = require('marko-widgets').defineComponent({ // ... handleButtonClick: function(event, el) { var alertWidget = this.getWidget('alert'); // Call the `show()` function implemented by the alert widget: alertWidget.show(); var clickMessageEl = this.getEl('clickMessage'); clickMessageEl.style.display = 'block'; } }); See More

Top Pro

Declarative eventing binding

Marko Widgets offers a simple mechanism for declaratively binding DOM event and custom event listeners to widget handler methods. For example: <button type="button" w-onClick="handleClick"> Click Me </button> And then in the JavaScript: module.exports = require('marko-widgets').defineComponent({ // ... handleClick: function(event, el) { this.doSomething(); } }); See More

Top Pro

Efficient event delegation

Marko Widgets supports efficient event delegation to avoid attaching DOM event listeners to each DOM node. Instead, Marko Widgets attaches event listeners on the document.body event for events that bubble. Events captured at the root are efficiently delegated out to widgets. See More

Top Pro

Lightweight (~10 KB gzipped)

The runtime for Marko Widgets is extremely small. The runtime is very small and this makes Marko Widgets much simpler and easier to understand and debug. Marko Widgets offloads much of the work and complexity to compile time code so that the work required at runtime is minimal. See More

Top Pro

The real DOM is the source of truth

Marko Widgets does not rely on a virtual DOM abstraction. Instead, the real DOM is always the source of truth. When updating the DOM, the newly rendered DOM is compared with the real DOM. See More

Top Pro

Stateful UI components

Marko Widgets supports stateful UI components. Marko Widgets will automatically rerender a UI component if its internal state changes. A UI component's state is stored in the this.state property that is a vanilla JavaScript object. All changes to the state should go through the this.setState(name, value) method (or this.replaceState(newState)) See More

Top Pro

DOM diffing/patching

Marko Widgets updates the DOM using a DOM diffing/patching algorithm to minimize the number of changes to the DOM when rerendering a UI component due to state changes. The DOM diffing/patching is handled by the independent morphdom library. See More

Top Pro

Batched updates

Updates to the DOM are deferred until all state changes have completed for the current tick. That is, changing a widget's state will not cause the UI component's DOM to immediately be updated. See More

Top Pro

Efficient binding of behavior for UI components rendered on the server.

When utilizing server-side rendering of a UI, Marko Widgets does not require that the UI be rerendered again in the browser just to bind behavior. Instead, extra information is passed down from the server to the client to allow Marko Widgets to efficiently bind widgets to UI components rendered on the server. See More

See All

Answer 11

Rivets

Top Pro

Doesn't require special DOM declaration syntax like JSX

Rivets takes DOM element as input, which has special attributes prefixed with 'rv-'. So you may declare DOM element in whatever language you like, even in HTML. See More

Top Con

Seems to be abandoned

No new commits have been pushed since March 2015. See More

Specs

GZipped size:6.2K

See All

score 1 · Answer 12

Syncfusion JavaScript UI Controls

Top Pro

Built-in themes

All 4 major themes are available such as Google's Material, Bootstrap, High contrast and Office 365's Fabric themes. See More

Top Pro

Responsive and Touch friendly

All controls are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops. See More

Top Pro

Fast release cycle

4 major releases per year and weekly patch release. See More

Top Pro

Modular and written fully in TypeScript

All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application. See More

Top Pro

Free community license

See All

12 Options Considered

My Recommendation for Vue.js

My Recommendation for Vue.js

VueRouter

Very enterpris-ey in design and tooling

Good documentation and resources

Poor typescript support

Minimal setup and boilerplate

Fast rendering with virtual DOM

Single file component

CLI and Webpack integration

Compact size and scope

Lightweight

Vuex store, events system

Reactivity system

Easily extensible

Can be used with any front-end stack

My Recommendation for Riot

My Recommendation for Riot

Not a web standard

Components use familiar HTML tags

Lightweight

Minimal DOM operations

Separation of concerns with RiotControl

Supports server side rendering

My Recommendation for Knockout

My Recommendation for Knockout

Easy data binding

Slower than others when amount of objects grows

Easy to learn

Dynamic models help with keeping the code simple and clean

Built-in templating

Browser support

My Recommendation for React

My Recommendation for React

Recommends JSX

Debugging tools

Verbose

Tested on Facebook itself

Not a web standard

Keep control over your app's logic

Large file size

Virtual DOM support

You have to learn a new syntax

Server side rendering

Too much boilerplate code

Easy to reuse components

Can be used with different libraries

Template engine independent

Supported by Facebook and Instagram

Flux architecture pattern

Easy to write tests

One-way data flow

My Recommendation for RxDB

My Recommendation for RxDB

good example project

Build size is over average

You can subscribe to queries

My Recommendation for slim.js

My Recommendation for slim.js

Easy to learn and use

My Recommendation for Polymer

My Recommendation for Polymer

Various basic components

No server-side rendering

HTML markup is not string

Flex layout components

CSS is easy to apply

No need for special debugging tools

Excellent routing

Complete web app stack support

Excellent documentation

Based on web components

API is easy to understand, based on standard

My Recommendation for Webix UI library

My Recommendation for Webix UI library

A lot of widgets

Commercial license

Views can be constructed using JavaScript without HTML

Extremely simple to implement