What are the best JavaScript libraries for building a UI?

Question

DevelopmentFrontend Development

What are the best JavaScript libraries for building a UI?

30

Options
Considered

642

User
Recs.

Nov 8, 2023

Last
Updated

24 Options Considered

Best JavaScript libraries for building a UI	Price	GZipped size	Repository
74 Vue.js	-	~30KB	https://github.com/vuejs/vue
57 Aurelia	-	~67kB	https://github.com/aurelia/aurelia
52 React	-	45K	-
51 Polymer	-	-	-
51 Riot	-	10.39KB	-

See Full List

Kendo UI

Inferno

Built By the Slant team

Find the best product instantly.

4.7 star rating

Try it now - it's free

score 145 · Answer 1

Vue.js

Top Pro

Lightweight

55kb (25KB gzipped), less than half that of AngularJS. See More

Top Con

It is not detailed against enterprise level frameworks, but at all the time you dont need that scale. If you insist, you can use Typesscript for it.

abi akindele's Experience

Versatile, Fast and easy to use See More

Specs

GZipped size:~30KB

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

Top Pro

Easy to start

Excellent documentation with a Human Face! See More

Top Con

It doesn't have controls, only syntax

It is not a replacement for a control library, although you could probably author your own in Vue.js if you felt like learning a new language. See More

Nathaniel Blackburn's Experience

Used it since pre 1.x and have deployed several production-grade applications. See More

Top Pro

Simple API

The API is well documented and easy to learn. See More

Top Con

Poor typescript support

Very basic typescript support. See More

Florian Gaul's Experience

Fast, stable and most importantly easy to learn. See More

Top Pro

Performance

Compares well with other js frameworks like React and Angular performance-wise. This is discussed in an in-depth article on the Vue js website. See More

Top Con

Lip service only to script tag development. The rest of the community assumes you need an opinionated build tool.

EnthusiasticAnput's Experience

I have used vue for a little time, but even in a limited time i have builded a complete REST API. See More

Top Pro

Good documentation

The documentation is pretty good and thorough. Everything is explained thoroughly and in a complete manner. See More

Sébastien DEGLIAME's Experience

Une bonne documentation et une communauté très reactive rendent sont apprentissage et son intégration facile. Par la suite sa puissance font qu'il est adaptable à une grande diversité de projets. See More

Top Pro

Can be made even lighter

Since the template-to-virtual-DOM and compiler can be separated, you can compile the templates in your machine and then deploying only the interpreter which is 12KB minified and gzipped. See More

Top Pro

Supports inline templating

Although you can build components in JavaScript files, you can also use inline handlebars-like templating in your HTML views where simplicity is often a more sane choice. See More

Top Pro

Can be used with any frontend stack

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

Top Pro

Single-file components

.vue files collocate template, styling, and behavior. See More

Top Pro

CLI and Webpack integration

Top Pro

Choose your favorite preprocessor in components

Pug templates, Stylus stylesheets, CoffeeScript behavior, and more. See More

Top Pro

Support for both templates and JSX

You can choose to use either a templating language, or if you feel it's necessary to drop on a lower virtual-dom level, you can use JSX. This is simply done by replacing the template option with a render function. Or alternatively, you can embed functions inside templates by using the <render> tag. See More

Top Pro

Responsive server-side rendering

Since most of the mainstream server-side rendering implementations are synchronous, they can block the server's event loop when the application is complex. Vue implements streaming server-side rendering, which allows you to render your component, get a readable stream and directly pipe that to the HTTP response. This allows you to have a responsive server and decreases the time your users have to wait before they get your rendered content. See More

Top Pro

Separation of concerns in very definite and clear

Top Pro

Reactivity system

Top Pro

SEO friendly

Starting with Vue 2.0, Vue supports server-side rendering. This helps with SEO a lot, since the views are rendered directly on the server, which are indexed by search engines. 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 40 · Answer 2

Aurelia

Top Pro

Conventions over configurations

Configured to give you the most common use cases by convention, which means you only need to change the default configuration for edge cases. This means that for normal cases far less boiler plate code has to be written. See More

Top Con

Needs more support from the community

It would be great to have a lot of plugins made by the community, or video tutorials from experiences when using it. Hopefully in the near term future. See More

ReveredOmoikane's Experience

I've used Aurelia on a couple of large commercial projects and its been a great success. You can potentially build a whole application and only reference Aurelia libraries to do the initial bootstrapping. It's so unobtrusive! See More

Specs

GZipped size:~67kB

Repository:https://github.com/aurelia/aurelia

Minified size:~237K

Top Pro

Easy to learn

Learning Aurelia basically means learning EcmaScript and HTML, since Aurelia is designed for standards compliance. Also, Aurelia embraces upcoming ES language features by convention, such as ES class decorators for dependency injection, encouraging clean architecture and future-proof code. See More

Top Con

No big success stories yet

There are no notable big web products built with Aurelia yet. See More

SuccinctTishpak's Experience

Best overall experience when using the framework for mid-size to large enterprise solutions where you have to be sure that all pieces are supported longterm and where you will never have legal issues. See More

Top Pro

Out of the box Typescript support

Full support for Typescript built in. See More

Top Con

Two-way data binding is often considered an anti-pattern

Two-way data-binding means that a HTML element in the view and an Angular model are binded, and when one of them is changed so is the other. One-way data-binding for example does not change the model when the HTML element is changed. This is a rather controversial subject and many developers consider two-way data binding an anti-pattern and something that is useless in complex applications because it's very easy to create complex situations by using it and being unable to debug them easily or understand what's happening by just looking at the code. See More

Top Pro

Good binding system

Clear, intuitive and HTML/SVG compliant binding syntax. Examples: Default binding => value.bind One Way binding => value.one-way Two Way binding => value.two-way One Time binding => value.one-time See More

Top Pro

Data binding choices with sane defaults

Aurelia defaults to one-way data binding, alining with conventional wisdom. However, there are times when two-way data binding proves useful, such as binding an input widget with a view-model. Aurelia makes two-way data binding available to developers and uses it by convention when appropriate. See More

Top Pro

Growing community

The Aurelia community is growing at a great pace. Still doesn’t rival the big players line Angular or React, but the answer to an Aurelia issue is a quick question away on their Discourse. See More

Top Pro

Structure

Aurelia.js consists of modules that can be used as a full framework or separately. See More

Top Pro

Provides dependency injection

With dependency injection, you can load in extra javascript and new functionality just when you need it. This is particularly helpful with testing as you can swap out services for test services. It also means in single page apps you can load dependencies only as you need them instead of loading them up all up at the start. See More

Top Pro

Standards compliant

Aurelia developers always try to keep within existing and emerging Web Standards, making it easier for developers to follow best practices in web development. See More

Top Pro

Agnostic code

Most of the code you write is Aurelia-agnostic. That way you can easily test it, switch to another implementation and make it look clean (business-oriented). Even the HTML. See More

Top Pro

Variable binding helps with self-documenting the code

The syntax used to bind variables within the application class is very similar to Javascript itself. You can specify the type of the binding you are using explicitly, which practically self-documents your code and makes it easy to understand whether a value is one-way or two-way binded. See More

Top Pro

Out of the box ES6 support

Aurelia includes native support for ES6 and even comes with a Gulpfile which helps with transpiling ES6 code to ES5. See More

Top Pro

Powerful helper CLI available

See here. The CLI helps rapid creation of projects with generators, building, deploying and hot reloads. Webpack should be coming soon. See More

Top Pro

Plays well with other frameworks

Aurelia can be used alongside of React and Polymer, since it is designed for interoperability. In practice, this means Aurelia developers can use React components by including an Aurelia custom element. It also works well with Polymer, since they are both based on the WebComponents standards. See More

Top Pro

Full commercial support

Aurelia is officially backed by Durandal Inc. and has commercial and enterprise support is available. See More

Top Pro

Allows developers to build their application however they want

Aurelia is extremely unopinionated and was designed to be highly modular. This gives the developer the freedom to develop their application however they want, without forcing them in paradigms or rules predefined by the framework. Likewise, any of the individual components can be swapped out if so desired. See More

Top Pro

Great documentation

One of the most crucial pieces of any new technology or framework is the documentation. At present even though Aurelia is pre-beta, the documentation is pretty complete. There are code examples missing and whatnot, but for the most part it is concise and makes the main parts of the application easy to understand. See More

See All

score 96 · Answer 3

React

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 Con

Heavy on memory

React's virtual DOM is fast, but it requires storing elements in the virtual and real DOM increasing memory usage for the page. This can be a real problem for single-page webapps designed to be left running in the background. See More

SuccinctMithra's Experience

1 year See More

Specs

GZipped size:45K

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 Con

Template(view) mixed into code

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

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

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 learning 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

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

Top Con

Not a complete solution

React does not do everything for the developer, it's merely a tool for building the UI of a web app. It does not have support for routing or models, at least not out of the box. While some missing features can be added through libraries, to start using React and use it in production, you still would need to have experience, or at least a good grasp on what the best libraries to use would be. 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 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

Template engine independent

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

Top Con

Renders too frequently

Top Pro

Widely used

The framework is widely used in the industry. See More

Top Con

No support for legacy browsers

React has recently dropped support for Internet Explorer 8. While the library may still work on IE8, issues that affect only IE8 will not be prioritized and/or solved. See More

Top Pro

Functional programming style leads to less buggy UIs

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

Good 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

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

Extensive SVG support

Since React v0.15, SVG is fully supported. React supports all SVG attributes that are recognized by today's browsers. 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 Pro

Supported by ClojureScript libraries

Reagent, Om, Rum, etc. 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 millions of people experiencing it every day. See More

See All

score 24 · Answer 4

Polymer

Top Pro

Component based

Polymer apps are component based. You have to break down the layout of your UI into components, which makes it easier to understand how every part of the application works and how they relate with each other. This way it's also easier to maintain the application. 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

Uses web standards

Polymer is per-design very attached to web standards, this means that when the developer team wants to choose a new feature vs the W3C standard, they will always choose the W3C. This way they change own things into native forms always it's possible. See More

Top Con

Not many third party component libraries

Top Pro

Based on W3C's 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 Con

Compatible with only some of the latest browsers

Polymer is still very much in development and it yet doesn't support some older browsers. It doesn't even support IE 10. See More

Top Pro

Easy access to material design components and other web components

Top Con

Slow performance in mobile

Since most mobile web browsers don't have a very powerful JS engine, Polymer can be a little slow for mobile devices. See More

Top Pro

Fast

Top Pro

Shallow learning curve

With Polymer you will use a lot of native code to do what you want to do. Only on the things that's still not possible with the current platform, you will use custom code. See More

Top Pro

HTML markup is not a string

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

Top Pro

Various basic components

It provides a base component. See More

Top Pro

CSS is easily applied

CSS is applied far more comfortably than React. See More

Top Pro

Flex layout components

It provides Flex layout components. See More

Top Pro

Seamless interoperability

As Polymer use the platform, always when it is possible, the web components built with Polymer are compatible with any other library, web-component, custom-element or framework. If you want to use a web-component you only have to import the web components spec polyfills (web-components-lite). 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

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

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

Full featured

See All

score 63 · Answer 5

Riot

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

FantasticJowangsin's Experience

Easiest FE framework to learn by far. Extends existing DOM standards and doesn't implement a DSL. 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

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

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

Top Pro

Easily pluggable with JS/HTML/CSS preprocessors

It is very easy to use your favorite preprocessors with the Riot compiler. Riot comes with CoffeeScript, ES6 (Babel), TypeScript, LiveScript and Jade support. You can also add your own parsers. See More

Top Pro

Very simple

It makes React look confusing as hell. Nothing against React - It's just that easy to implement! See More

Top Pro

Scoped CSS available in components

Riot supports scoped CSS inside components for every browser by rewriting stylesheet rules. See More

Top Pro

Lives well with any other library, framework and usage pattern

Since it's not opinionated, even the scripting can be in anything that can be transpired to JavaScript. 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

See All

score 9 · Answer 6

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 11 · Answer 7

Ractive.js

Top Pro

Supports a true templating language

Ractive fully supports a templating language. To be more precise, views are written with a variant of Mustache, which is also extended to support inline JavaScript expressions. Soon it will be able to support other templating languages. See More

Top Con

Ractive's two way binding can be a source of bugs

Two-way data-binding means that a HTML element in the view and an Ractive model are binded, and when one of them is changed so is the other. One-way data-binding for example does not change the model when the HTML element is changed. This is a rather controversial subject and many developers consider two-way data binding an anti-pattern and something that is useless in complex applications because it's very easy to create complex situations by using it and being unable to debug them easily or understand what's happening by just looking at the code. However, this is the default behaviour which can be changed to have one-way data binding. See More

Specs

GZipped size:12K

Top Pro

Makes it possible to handle user interaction in a readable, declarative fashion

Ractive has a concept of proxy events, which translate a user action (e.g. a mouseclick) defined via an event directive into an intention (e.g. 'select this option'). This allows you to handle user interaction in a readable, declarative fashion. on-click='activate' with arguments: on-click = 'activate: {{a}}, {{b}}' It's activate (and not click, nor your function name) that is the name of the handler event that will be fired for any registered handlers created via ractive.on('activate', your_handler) ractive.on('activate', your_another_handler) Of course, Ractive also supports method calls like on-click='toggle(foo)' See More

Top Pro

Two-way binding configuration

Two-way binding can be turned off by those that are concerned it may be a source of bugs. See More

Top Pro

Step by step tutorial

They have a great interactive tutorial which makes the learning process easy peasy. You will get into it within a couple of minutes. See More

Top Pro

Virtual DOM

Instead of relying on the DOM, Ractive 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

See All

score 23 · Answer 8

Webix

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

Yuri Kitin's Experience

Advansed GPL package. 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 Con

Not very popular

Not really a reason to not recommend it. But it has still a small user base. It deserves a lot more attention. See More

CourteousNanaya's Experience

Starting from scratch is so easy and fast See More

Top Pro

Seems to be quite stable

Even the most complicated GUIs are bug-free most of the time. See More

Top Con

Not modular

The library is not modular (except for some additional more complex widgets). If you only need a few widgets, you still need to include the entire library. See More

Top Pro

Webix Jet

The webix Jet library adds all the required features for SPA development (routing, template loading, ...) See More

Top Pro

Extremely simple to implement.

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

Top Pro

Mature project

Regular updates and releases. See More

Top Pro

Great support from the webix team

The company behind webix is really quick in answering any questions you have on their forum or via email. See More

Top Pro

Awesome responsive material skins

Great design and icons pack. See More

See All

score 3 · 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 3 · Answer 10

Blocks.js

Top Con

Deprecated

It is officially deprecated and replaced with Gem.js (from the same developer). See More

Top Pro

Small footprint

Blocks.js is just 16.5KB minified and gzipped. So it's pretty small. See More

Specs

GZipped size:16.5K

Top Con

Relatively new

Blocks.js is a relatively new library. It doesn't have much support and there are not many people who use it. So if you run into any problems it would be hard to get solutions. See More

Top Pro

Modular structure

Apps developed with blocks.js are modular in structure and make use of reusable objects. This makes these applications very maintainable. See More

See All

score 7 · Answer 11

W2UI

Top Pro

A set of UI components, not a framework

Top Con

Not much progress

Since version 1.4 there isn't much progress. Currently release candidate 1.5 is available, but that has been there since quite some time now. W2UI was really good a couple of years ago, but it would be nice to see it progress having more features like theming and no dependency of jQuery. See More

Top Pro

Small footprint, yet includes grid, layout, forms, sidebar, toolbar, tabs, popups

Top Pro

Rapid and easy development

See All

score 10 · Answer 12

CanJS

Top Pro

Great browser support

CanJS supports all modern browsers and IE9+. See More

Top Pro

CanJS can be used with any other library

CanJS is a collection of individual libraries, each separately available as npm packages. It's easy to use just what you need. See More

Top Pro

Real time support

CanJS's model layer (can-connect), support real-time updates to lists without adding any additional code. See More

See All

score 7 · Answer 13

CxJS

Top Pro

JSX Syntax

Specs

License: Creative Commons Attribution-NonCommercial License and Commercial

Site:https://cxjs.io/

Top Pro

Rich widget library

Top Pro

Built-in charts

Top Pro

Available in multiple visual themes

Top Pro

Support included

github email slack stack overflow See More

Top Pro

Typescript support

Top Pro

Formatting

date number url prefix/suffix custom formats See More

See All

score 6 · Answer 14

Preact

Top Pro

Lightweight

Specs

GZipped size:3.3kb

Site:https://preactjs.com

Current stable version:8.1.0

Top Pro

Same API as react

Avoids having to learn an entire new paradigm, and makes it easy to switch between the two libraries later on. See More

See All

score 11 · Answer 15

Marko Widgets

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

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

Specs

GZipped size:39.1 kB

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

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

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

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

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

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

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

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

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

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

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

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

See All

score 14 · Answer 16

JQuery

Top Pro

Flexible because of countless plugins

One of jQuery's main strengths is it's flexibility. It's very easy to find and add jQuery plugins for almost every problem you might have. This is extremely helpful in lowering development time and avoids the need to reinvent the wheel and find solutions that have already been found. See More

Top Con

Spaghetti code

jQuery's biggest strength is also one of it's biggest weaknesses. The fact that it's easy to use makes it also extremely easy to write long massive JavaScript files filled with spaghetti code. jQuery is designed to help with DOM transverses and CSS selectors. It's amazingly efficient at this. Unfortunately it's not designed to be used as a Framework for full client-side interaction. jQuery CSS selectors if used incorrectly can become impossible to maintain. If you consider callbacks, cosmetic changes and arbitrary names, it can become impossible to maintain a jQuery file. See More

Specs

GZipped size:18K

Top Pro

Great learning resources

JQuery is undoubtedly the largest JavaScript library and one of the most important tools in web development. As such. it has a massive number of guides and tutorials out there for almost every aspect of development using JQuery. The official documentations is also excellent for beginners and experienced users alike. See More

Top Con

Monoculture

jQuery is used by many web sites and applications. A functional bug or security issue has a large impact. Not all applications are always updated. This is risky. See More

Top Pro

Easy to use

Much easier to use than traditional JavaScript. Allows a lot of features and function to be completed with less lines of code. This is especially true for people who are not very experienced with JavaScript who find jQuery very easy to use. See More

Top Pro

Removes cross-browser compatibility issues

jQuery supports all modern browsers and some old but widely used ones, such as Internet Explorer 7. If a bug is found on a certain browser and reported, it's quickly patched up. See More

Top Pro

Strong community

The open source community has really embraced jQuery and it has many readily available plugins to help speed up the development process. In addition to this, it has great documentation and tutorials See More

Top Pro

Large library

JQuery is a rather large library. It has functions and solutions to countless problems that a front-end developer might find. See More

Top Pro

Cross-browser support

jQuery works on all modern browsers, although there may be some issues with old versions of each browser. See More

See All

Answer 17

Amber

Top Pro

One-to-one JS equivalent

Amber is written in itself, including the parser and compiler, and compiles into efficient JavaScript, mapping one-to-one with the JS equivalent. See More

Top Con

Very few learning resources

There are very little learning resources for Amber outside the official documentation. Which may not be enough for beginners, especially people that don't have much experience in programming. See More

Specs

Platforms:Windows Linux FreeBSD

Top Pro

Smalltalk is a simple, elegant, and powerful language

Top Pro

Includes an IDE

Amber includes an integrated development environment with a class browser, workspace, transcript, object inspector and debugger. See More

See All

score 2 · Answer 18

slim.js

Top Pro

Interops with other libraries

Specs

Site:http://slimjs.com

See All Specs

Top Pro

Based on modern web standards

Top Pro

Intuitive

Top Pro

Low footprint

See All

24 Options Considered

My Recommendation for Vue.js

My Recommendation for Vue.js

Lightweight

It is not detailed against enterprise level frameworks, but at all the time you dont need that scale. If you insist, you can use Typesscript for it.

Easy to start

It doesn't have controls, only syntax

Simple API

Poor typescript support

Performance

Lip service only to script tag development. The rest of the community assumes you need an opinionated build tool.

Good documentation

Can be made even lighter

Supports inline templating

Can be used with any frontend stack

Single-file components

CLI and Webpack integration

Choose your favorite preprocessor in components

Support for both templates and JSX

Responsive server-side rendering

Separation of concerns in very definite and clear

Reactivity system

SEO friendly

Can be used with any front-end stack

My Recommendation for Aurelia

My Recommendation for Aurelia

Conventions over configurations

Needs more support from the community

Easy to learn

No big success stories yet

Out of the box Typescript support

Two-way data binding is often considered an anti-pattern

Good binding system

Data binding choices with sane defaults

Growing community

Structure

Provides dependency injection

Standards compliant

Agnostic code

Variable binding helps with self-documenting the code

Out of the box ES6 support

Powerful helper CLI available

Plays well with other frameworks

Full commercial support

Allows developers to build their application however they want

Great documentation

My Recommendation for React

My Recommendation for React

Easy to reuse components

Heavy on memory

Supported by Facebook and Instagram

Template(view) mixed into code

Server side rendering

Verbose

Virtual DOM support

You have to learn a new syntax

One-way data flow

Not a complete solution

Can be used with different libraries

Large file size

Template engine independent

Renders too frequently

Widely used

No support for legacy browsers

Functional programming style leads to less buggy UIs

Easy to write tests

Good debugging tools

Flux architecture pattern

Extensive SVG support

Keep control over your app's logic

Supported by ClojureScript libraries

Tested on Facebook itself

My Recommendation for Polymer

My Recommendation for Polymer

Component based

No server-side rendering

Uses web standards

Not many third party component libraries

Based on W3C's web components

Compatible with only some of the latest browsers