What are the best client-side JavaScript MV* frameworks?

Question

23

Options
Considered

815

User
Recs.

Feb 21, 2023

Last
Updated

Here’s the Deal

The Best 1 of 20 OptionsWhy?

Best client-side JavaScript MV* frameworks	Price	GZipped size	Repository
90 Vue.js	FREE	~30KB	https://github.com/vuejs/vue
76 Knockout	-	-	-
75 Backbone	-	-	-
74 Ember.js	-	-	-
73 Aurelia	Free	~67kB	https://github.com/aurelia/aurelia

See Full List

19 Other Options Considered

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

Luís Gonçalves's Experience

After implementing UI in MVVM I found very easy to implement the same philosophy in HTML/JavaScript with the help of KnockoutJS. The framework is simple and transparent. 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 Con

Can become complex once the application grows large

Knockout leaves the application structure to the developer and it can become quite complex and unmanageable in the hands of a beginner once the application grows large and complex. 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 Con

Two way binding requires a little extra work

When allowing users to edit existing data, the two-way binding of observables means you'll need to have to save original values before they're edited, to make comparisons or revert if the user cancels the action. See More

Top Pro

Legacy browser support

Supports a large number of browsers, including IE6. See More

Top Pro

Great documentation

The excellent tutorials with built-in exercises are a great learning experience, even for people without prior MVVM and data binding experience. See More

Top Pro

Lightweight and plays nicely with other libraries

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

Very flexible

One can do a lot of things and it keeps self references and other types of loops under control. See More

Top Pro

It's only a library

Knockout does one thing, and does it well. It doesn't try to take on more than one area. It does MVVM data binding and that is it. See More

Top Pro

Simple manageable modules

Using components is a great way of breaking up large modules into simpler ones. See More

See All

Backbone

Top Con

Requires more coding compared to other frameworks

Because many features are not provided out of the box, you either have to write more base class code to get those features, or find a plugin that provides them in a way you like. It does not provide much structure either, things like memory management must be kept in mind by the developer, also the lack of view lifecycle management makes state changes prone to memory leaks. See More

Top Pro

Gives you the freedom to implement views however you want

A lightweight view class is provided but there is no default templating method implemented. Because views are minimal it allows for much more freedom to implement views however you would like, and because of this freedom it's possible to write views to more uniquely adapt to a problem. User interactions are done within an events object that allows these interactions to be segregated from the rest of the view code which makes the behavioral aspect of the view easier to read and manage. See More

Top Con

Can easily lead you to spaghetti code

Heavy event-binding can lead to unmanageable spaghetti mess. BB tempts users to overuse it for no reason. See More

Top Pro

Can be combined with any library you want

Backbone can be combined with any library of your choosing, giving you the ultimate flexibility in creating customized solutions for unique projects. Even the only two backbone requirements, jQuery and underscore can be replaced with equivalent libraries like zepto or lo-dash. See More

Top Con

No data binding

Backbone does not have data binding support. However, there are some libraries that can be implemented in order to have data binding in Backbone. Such as Epoxy See More

Top Pro

Large community

Backbone has existed longer than most frameworks, and has a large following of users and projects using it as a framework. See More

Top Pro

You can call underscore.js methods directly on Backbone objects

Backbone collections and models are extended by underscore.js method allowing you to call underscore methods directly on the Backbone objects. See More

Top Pro

Easy to interface with the API

Backbone provides Model and Collection classes that provide strong analogs to restful resources. These strong analogs allow you to interface more naturally with the API, and makes it easier to write custom behaviors for more complicated API interactions. Collections provide a variety of powerful manipulation methods that are integrated from the underscore library, that allow you to manipulate, sort, and filter collection data easily. See More

Top Pro

Easy to implement complex user interaction

Because all the state is managed by Models and Controllers, and they are extendable objects, you can isolate all the state logic onto those objects allowing the rest of the application to not worry about it. The app is simplified to just taking in input to modify the Models and Controllers, and updating the views to reflect them, but none of the state needs to be a concern outside of the Model and Controller classes. See More

Top Pro

Doesn’t force you into a particular coding style or paradigm

There is no “magic” happening below the surface: the source code is clear, readable and well commented. Backbone is also “lightweight” in the sense that it doesn’t require a ton of buy-in to use. It can be easily integrated into an existing page, and you can choose to only use certain components of the library (Views without Models or Collections, for example). While there are many frameworks that seem to be faster to get started with, Backbone’s lack of surprises, clear documentation, speed & flexibility make it a good fit for all types of apps. See More

Top Pro

Extendable with plugins

Because Backbone is so simple, and the different components are very well isolated, it is very easy to extend the functionality of Backbone. If you're writing your own extended code it's easy to keep it separated out, and share with the community. The community also has many plugins already available, which you can pick and choose to use to fit your programming style. See More

Top Pro

Easy to abstract interaction

All Backbone classes extend an events class that allows for listening and triggering functionality. Because all classes implement events by default it is easier to provide asynchronous communication between objects, and it allows better abstraction of interaction so the event emitting object does not need to know the structure or existence of the receiving object. See More

See All

Ember.js

Top Pro

Excellent routing

Route handlers for the URLs can see a wide range of possible application states, asynchronous logic in the router makes sure of Promises. And implementing makes sense. See More

Top Con

Steep learning curve

Ember.js has a rather steep learning curve for beginners. See More

Mark Wolfe's Experience

I have written two enterprise level web applications now using Ember. Angular was the other consideration at the time. Ember was chosen for its well-defined framework, conventions, data layer, and scalability. As with any framework, there are some annoyances, but overall, it has been a great experience. I highly recommend Ember. See More

Specs

Price:Free

Top Pro

Increased performance because similar tasks are processed in one go

It batches bindings and DOM updates to increase performance; if similar tasks are added to a batch, the browser would only need to process them in one single go, as compared to re-computing for each task one at a time. See More

Top Con

Too large for small projects

At 69Kb gzipped, it is one of the largest JavaScript frameworks. This means Ember might be an overkill to use on simpler projects. See More

Top Pro

The API is easy to understand

Ember's API are really easy to understand and work with. It has methods which allow you to harness complicated functionalities in an easy to understand way. See More

Top Con

More Ruby than JavaScript

It was written as a Ruby on Rails for JavaScript. Ends up being very frameworky and having tons of polyfills and unneeded abstractions. See More

Top Pro

Helps with writing simple and modular code by using Promises

Promises represent an eventual state in asynchronous logic. Having promises everywhere (almost) means you could write simple and modular code, using almost any API that Ember provides. See More

Top Pro

Easy to understand documentation

The Ember Guides are well structured and very well written. The API documentation is also fantastic. See More

Top Pro

Complete front-end stack

Ember is practically a complete full-stack front-end framework. It comes with it's own asset pipeline, router, services etc... See More

Top Pro

Minimal need for configuration

Ember follows the philosophy of "convention over configuration" meaning that it already has almost everything configured for you, so you just have to start coding and developing your project right away. See More

Top Pro

Built-in router

Ember comes with built-in routing capabilities. There's no need to install third-party plugins to be able to use routes. See More

Top Pro

Debugging tool for almost every web browser

Ember also has a debugging tool called Ember Inspector which is used for debugging the client side of your app. See More

Top Pro

Helps developers with keeping the structure of the application clean and simple

Ember already defines the general application structure and organization for you. This was done to prevent developers from making mistakes which would needlessly over-complicate their application. While it's still possible to go out of these practices forced to developers by the Ember authors, you still have to go out of your way to force them. See More

Top Pro

Out-of-the-box CLI tool which scaffolds a new project

Ember-CLI is a very useful tool. With just a couple of commands it scaffolds the code, installs dependencies and finally compiles everything itself. It's very useful to quickstart an Ember project. See More

Top Pro

Uses a relatively clean and easy to understand templating engine

Ember's preferred templating language is Handlebars. This is mainly because Handlebars is a logic-less templating language and Ember tries to keep it's logic outside the view. Another reason why Ember benefits from Handlebars is mostly aesthetic as Handlebar's clean syntax makes for easier to read and understand templates. Finally, Handlebars templates are compiled instead of interpreted, which means that they are much faster to load. See More

Top Pro

Works great with jQuery

You can use any of jQuery’s features. See More

Top Pro

Useful bindings

EmberJS provides with an extremely handy feature of advanced bindings. With this you can not only set the path to the binding value in your app but also set in which direction you want the changes to propagate to (oneway, single, multiple etc). See More

Top Pro

Can render the page according to any of the developer's needs because of computed properties

Having custom properties in your templates is itself a huge plus but having custom computed properties is an even greater benefit, since now you can code your custom function as a property and call it from your template. Hence rendering your page exactly according to your needs. See More

Top Pro

Auto-updating templates

If you've used handlebars (Ember.js's templating is powered by HandleBars) helper tags in your code (like {{#each}}) you won't have to worry about updating your template each time you add/remove data from your page, Handlebars will auto update your template for you. See More

Top Pro

Stunning developer experience

You build products instead of constantly configuring the stuff. See More

Top Pro

Clear and organized documentation

With so many amazing tools out there, a framework with a good documentation has become a distinguishing feature in choosing it for your next project. Forunately Ember.js does provide you with a very readable, extensive and easy-to-understand documentation. See More

Top Pro

Uses Glimmer 2, a very fast template rendering engine

Glimmer 2, a new and very fast template rendering engine written in TypeScript, is fast due to smaller precompiled template sizes, faster parsing and initial render, and compiles at runtime to extremely efficient assembly-like append opcodes. See More

Top Pro

Ember's Object model makes the framework extremely consistent

Most of Ember's components come from the Ember Object Model. It's the basis for views, controllers, models and even the framework itself. This means that the framework is extremely consistent since almost every component shares the same core functionalities and properties since they are all derived from the same object. See More

Top Pro

Excellent data layer

Ember provides a built-in data layer, which makes it super simple to keep the UI in sync with the back end. See More

Top Pro

Continually evolving

Ember has a great core team and community of developers who are continually improving, updating and evolving the framework. The Ember team is always planning ahead and implementing the best of the latest technologies and practices, while ensuring backwards compatability. See More

See All

Aurelia

Top Pro

Out of the box Typescript support

Full support for Typescript built in See More

Top Con

No big success stories yet

There are no notable big web products build with aurelia yet See More

rascal's Experience

Excellent framework. Complete although modular. Full compliance with html standards, therefore easy to learn. Code is straightforward without boilerplate. Building large applications without (almost) no bug in Aurelia is a pleasure. See More

Specs

GZipped size:~67kB

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

Minified size:~237K

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

Daniel Meza's Experience

You can do anything ! See More

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

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

David Morris's Experience

I have tried several options and Aurelia is the most intuitive. Much less boiler plate and setup. 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

EmpatheticSupay's Experience

Have used it for 3 years. Considered vue, react and angular 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

ruud jansen's Experience

Excelent framework, produces clean code and easy to learn 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. It's one of the closest libraries that you'll find to basically write plain-old, vanilla Javascript or TypeScript code (classes) and doesn't polluate your HTML/SCSS. 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

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

Structure

Aurelia.js consists of modules that can be used as a full framework or separately. 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

Top Pro

Full commercial support

Aurelia is officially backed by Durandal Inc. and has commercial and enterprise support is available. 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

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: https://github.com/Vheissu/aurelia-react-example/blob/master/README.md It also works well with Polymer, since they are both based on the WebComponents standards: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/integrating-with-polymer See More

Top Pro

Powerful helper CLI available

https://github.com/aurelia/cli The CLI helps rapid creation of projects with generators, building, deploying and hot reloads. Webpack should be coming soon. 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

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

See All

Mithril

Top Pro

Small, easy to learn API

Most other frameworks either offer a huge API to deal with model and view synchronization, or defer to other libraries & plugins to cater for relatively simple use cases. Mithril's API is tiny but complete. The natural reaction is to assume something is missing, but as you build you realise you incredibly fast, powerful and rich applications can be built using nothing but Mithril. See More

Top Con

Small API can make it unsuitable for larger more complex projects

Mithril's small API and small number of functions while helpful for small projects and applications where speed is needed, can add another layer of complexity in larger more complex applications where a more extensive API is needed out of the box. See More

CaffeinatedCarmanor's Experience

After using Mithril I have been unable to force myself to use any other JavaScript front-end frameworks. It forces you to become good at JavaScript instead of just being good at a framework. I would like to see it more widely adopted. See More

Specs

GZipped size:8kb

Top Pro

Fast rendering

Mithril's loading times are very fast. This is because it's templates are compiled first and then served to the browser and because it uses a virtual DOM. The virtual DOM is a virtual tree containing all the nodes of the real DOM, every time anything changes in the virtual DOM, Mithril does not re-render the entire (real) DOM, instead it just searches and applies the differences. See More

Top Pro

No need to learn another syntax to write views

Most MVC frameworks use HTML templates to render their views. They are good and useful because they are easy to read and understand. But they add more complication to an app because it's practically a new language and syntax that needs to be learned. Mithril argues that separating markup from logic is just a separation of technologies and not concerns, so you can write Mithril views in JavaScript. Writing them in JavaScript also makes it easier to debug them (HTML templates can't be debugged). See More

Top Pro

Familiar to people used to MVC

Doesn't lock you into any complicated conventions or structures, only one function is required to create either a Controller or a View. You're free to implement your architecture exactly as you want, so you can focus on the purpose of MVC, making connections between computer data and stuff in the end user's head. See More

Top Pro

Small size

Weights just 8Kb gzipped and has no dependencies. A reactive stream module can be added for one extra Kb. See More

Top Pro

Great documentation

Mithril has a large and expansive documentation despite it's relatively small API. Mithril's GitHub repo has more documentation than actual source code. None of that documentation is auto-generated See More

Top Pro

Allows a smooth transition from other UI frameworks

One thing you need to start using Mithril is just a DOM node. With Mithril a developer is able to introduce the library step by step. See More

Top Pro

Allows you to choose which JavaScript libraries to integrate in your project

Mithril gives to the developer the flexibility to chose the best JavaScript library to use for a specific task. A huge framework like Angular instead forces you to use their API, which does not necessarily evolve as fast as the JavaScript ecosystem. Therefore you may end up in case when you are stuck using an API which is just not the best in terms of performance See More

Top Pro

Can be used without build systems

It's plain old JavaScript, can be used without webpack, gulp or grunt, just include it into your HTML and start writing your app. See More

Top Pro

Does not force you into a predefined structure

Mithril's API is pretty small compared to other frameworks. It forces developers to solve problems in JavaScript rather than in Mithril. Other frameworks with massive APIs force you to think in a way that suits the framework. Mithril doesn't do that. See More

See All

React

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 Con

Template(view) mixed into code

WorthyStheno's Experience

One of the best thing I have ever worked with. It is super easy to learn if you are familiar with Javascript. See More

Specs

GZipped size:45K

Top Pro

Large support from the community

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

Horace Keung's Experience

Terrible developer experience. Built a site using React, took me 2 months, couldn't cope with it, then decided to refactor the whole site using Vue.js, took me 2 weeks. See More

Top Pro

Currently the most popular JavaScript UI framework

Popularity results in a very large and active plug-in ecosystem. 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

Easy templating with JSX

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

Top Pro

Easily scalable

Entire instagram.com is built in reactJS. It is backed by developers at Facebook and has a large community base. It works with the components and has many already built helper libraries in NPM which you can use by importing them in different parts of your code. Also, new Skype for android is built using React Native. 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

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

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

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

Top Con

Too frequent breaking changes

Introduction of backwards incompatible changes happens frequently forcing you to review-revise-rewrite your code if you want to keep up with the latest version. 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 Con

Renders too frequently

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

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

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

JSX - another language to learn

Top Pro

Functional programming style leads to less buggy UIs

Top Pro

Out of the box support for Android and iOS with React native

ReactJS follow "learn once write anywhere" concept. IE after learning ReactJS, you will be able to built web app (ReactJS), server side (with nodeJS and ReactJS virtual DOM), android app (React Native), and iOs (React Native) app with ease. 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

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

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

See All

None

Top Pro

Save yourself from added complexity

By adding another layer of abstraction between your code and the browser you might gain powerful features such as ready made UI components, an event binding framework or a more reliable UI layout mechanism. However the cost of these features is often that overall complexity of the system must increase. For this reason a call has to be made as to whether the extra power given to you is really needed, or whether you can build what you need with what the browsers provide you. As support for HTML, JavaScript and CSS is becoming more standard and predictable across modern browsers, using a framework simply to cover up browser inconsistencies is no longer reason enough, especially when some frameworks are dropping support for older browsers anyway. Your code must also remain compatible with the framework you are using, which may mean code changes in order to upgrade to the latest version. An alternative might be to use libraries that don't wrap dom objects or otherwise form a layer between your code and the browser. Signals.js is an example of a library that allows you to add custom events to your objects, simplifying flow and decreasing coupling between modules. However, this is not a framework, it's just a library that does one thing and does it well. See More

Top Con

Sometimes there is no need to reinvent the wheel

Sometimes there is no need to create something for which a framework already exists. Time is valuable and spending time to do something that someone else has already solved is wasted time. See More

Top Pro

Learn the Language; not the Framework

When programming in a language, you should learn the language well regardless of whether or not you learn any frameworks. However a number of frameworks give you shortcuts which cause you to avoid needing to learn the language's solution, thus limiting your understanding of the language. The effort required to learn a framework can be significant in itself, making learning it an investment of your time. Should the framework become deprecated, or you find / are forced to work with an alternate framework this will impact your productivity. Had you learnt the underlying language you would be safer (as frameworks live on top of languages, so are by definition outlived by those languages), and more adaptable. See More

Top Con

Significantly increased ramp-up time when bringing on new developers

For complex frontend-heavy applications and UI's, you'll find yourself writing your own framework. The disadvantage of this is that nobody knows your framework but you. If another team needs to adopt the project it will significantly increase the ramp-up time. See More

Top Pro

Not tied to framework lifespan

If a framework wanes in popularity when you rely on the community to make it better, or the developers who made it you are in trouble. If you build in house and document and opensource it you can gain all of the benefits with lower risk. See More

Top Con

Cross Site Caching & CDNs

By making use of existing frameworks which are hosted in common repositories (e.g. Google Code and CloudFlare CDN JS) any visitors to your site who have previously visited a site using the same framework/library will not need to download the code again, as the browser will see the same files are required as were previously downloaded & cached. Even when your site is the first site visited, as this common code is hosted by the likes of Google and CloudFlare, you take advantage of their infrastructure for delivering this content to your end users, reducing the overhead on both your infrastructure and the download time for your users. See More

Top Pro

Short learning curve

Almost all newbie developer knows JS, just do good practices and you and your team will be grateful for this decision, just take a look on what happened on shopify they created a framework(batman), but it could not scale and it was taking too long for new engineers to code something, and at the end when they remove it and solve their problems. See More

See All

Angular 2

Top Pro

Uses TypeScript

Extends JavaScript and allows compilation time type checking which is almost necessary once your project grows. See More

Top Con

It is hard to use another language other than Typescript

It is almost mandatory to code with TS, so the team needs to learn the framework and the language at the same time. All the resources on the internet are with TS. See More

Alexander Nathanail's Experience

Relatively quick to learn, looks and runs beautifully. Plenty of community support See More

Top Pro

Great Community and resources

Angular have huge learning resource and amazing community + ecosystem. See More

Top Con

Steep learning curve

Angular is a very opinionated framework and has a very steep learning curve. It starts out simple enough, but it starts getting steeper and steeper as you keep learning. See More

Top Pro

Easy to understand component based API

Angular 2 adopts a component-based UI. This is a concept that is used in other libraries/frameworks too (for example React) and many people will already be familiar with this. In Angular 1, controllers and directives kind of blurred into the component and played that role. But in Angular 2 there are no directives or controllers. Instead, an Angular component has a selector which corresponds to a HTML tag that is represented by the component and also a @View to specify the HTML template for that component. See More

Top Con

Unintuitive binding syntax

The syntax used in templates for one-way, two-binding is convoluted See More

Top Pro

Backed by Google

Top Con

Terribly over-engineered

Angular has to be the worst, most over-engineered JavaScript framework to date. Angular makes simple things hard and hard things hair-reducing. See More

Top Pro

Templates are easier to read and write (compared to Angular 1.x) because of the powertful event system

Angular 2 applications respond to user input through the useful event system. The syntax for events is denoted by an action surrounded by parenthesis. Furthermore, element references can be made available to other parts of the template as local variables using the #var syntax. This makes templates much easier to read, write and understand because with the new event syntax you avoid ng-model and ng-click clogging up the code. For example: Angular 1: <input ng-model=”thing.item” type=”text”> <button ng-click=”thing.submit(item)” type=”submit”> Angular 2: <input #item type=”text”> <button (click)=”submit(item)” type=”submit”> See More

Top Con

Boilerplate code requirement

The amount of boilerplate code required for even the most simple application is excessive. See More

Top Pro

Huge ecosystem of third party components

Angular is an extremely popular JavaScript framework. Because of this, developers have developed a myriad of components which can be downloaded and integrated into any Angular application. See More

Top Con

HTML template does not comply to standards

Attributes are case-sensitive, which is against the HTML standards. See More

Top Pro

All best practices

Top Con

Explicit configuration

Users will usually need to specify stuff that is very obvious (template location, providers etc. ). 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 Con

Naming inconsistency

Modern Angular is frequently confused with AngularJS. Even at this page, the image belongs to AngularJS, which is entirely different than Angular or Angular 2 or Angular X. One looking for Angular support ends up in AngularJS pages. See More

Top Pro

Easy and straightforward data-binding

Data bindings are done on the DOM, which allows you to easily sync data between various parts of the DOM in a very succint matter. <body ng-app> <span>Insert your name:</span> <input type="text" ng-model="user.name" /> <h3>Echo: {{user.name}}</h3> </body> This snippet shows how the model attribute "name" is easily bound across different parts of the DOM without having to set up any extra boilerplate. See More

Top Con

It is almost mandatory to use Typescript

Although ES standard can be used, most of the documentation and resources are with Typescript. See More

Top Pro

Consistancy

Given that they provide the CLI, this provides some consistency in the way people code. This brings a huge advantage when someone enters an existing project, the ramp-up is quicker See More

Top Pro

Support for a composable component oriented architecture with directives

Angular uses the existing HTML structure and builds on top of it instead of requiring you to learn a new templating language. Because it's just vanilla HTML, it is more familiar, and easier for beginners to learn. Directives let Angular know which HTML elements are under its control, and how to use them. Being directly on the HTML it's more transparent what's going on, and it's possible to get a good idea of what the page is doing just by looking at the template. Also, it makes embedding possible, as you could have an angular app within an existing site so you don't have to rewrite everything at once. See More

See All

Svelte

Add Video or Image

Cycle.js

Sencha Ext JS

Top Pro

Supports Web and Mobile deployment out of the one framework or codebase

Top Con

Too often breaking changes between versions. They have little concept of backwards compatibility

Compounded by the fact that there are now two "toolkits" in the same "version" of ExtJS, with certain components not existing in one vs the other. See More

Johan Van de Merwe's Experience

I am a Sencha Ext JS programmer for almost 10 years now and I still love it very much. See More

Top Pro

Comprehensive documentation

The Sencha documentation is comprehensive, with detailed documentation and a number of examples displaying the various widgets, tools and themes. See More

Top Con

The IDE tools are not sold separately - you must purchase the appropriate license pack

You get all the IDE plugins, even if you only need one. They should offer sell them individually, or continue to bundle them with a dev license pack. See More

Top Pro

Great model (M) layer

Compared to quite some libraries that could represent the M in MVC or MVVM, the data layer in Ext JS really stands out. It is easy to understand and logically build up in stores with a proxy (Ajax) and models (records). With a ton of options and methods. See More

Top Con

Can be expensive

The framework is a commercial package, and the recent decision to start with a minimum of 5 users may rule out smaller developer teams or startups. Recently, they have started a program that allow essentially what are contractors to purchase single licenses, but not individual, independent developers. See More

Top Pro

Support for easy theming of applications

Top Con

Difficult to integrate with 3rd party software

Any third party library you wish to include has to be wrapped in some sort of component adapter. You have to do a lot of tweaking to get the build process right if you want the 3rd party lib to be bundled into your application in the right order. See More

Top Pro

Supports MVC and MVVM development

Top Con

Sencha CMD is bloated and frustrating to work with

To do any meaningful development, you are stuck with CMD. There is a gulp task that will handle the JS concatenation, but there is nothing outside of CMD that can handle theming in their ecosystem. In addition, CMD is based on Java, and is very heavy to run (600MB+ on Windows 10 to watch for changes in the application and recompile). See More

Top Pro

Visual Design tool available

The Sencha Architect product allows you to visually build your application, or rapidly prototype a system. See More

Top Con

They use proprietary extensions to SASS, making it incompatible with anything but their Fashion processor

On the plus side, you do not have to install ruby alongside CMD for more recent versions of ExtJS. However, their Fashion processor seems to only be available through CMD. See More

Top Pro

Charting package included

Top Pro

IDE Plugins available

A number of plugins are available for some of the commonly used IDEs (eg: JetBrains, Eclipse, Visual Studio), providing templates, refactoring support, hinting and code completion/generation, as well as management of includes and other time-saving features. See More

Top Pro

It is RAD - (Rapid Application Development) - minimal setup to get started

See All

Polymer

v1.0 GZipped size:53K

v2.0 GZipped size (Edge):36K

v2.0 GZipped size (Firefox):32K

v2.0 GZipped size (Chrome):10K

See All Specs

Webix

Add Video or Image

Ember

Top Pro

Excellent routing

Route handlers for the URLs can see a wide range of possible application states, asynchronous logic in the router makes sure of Promises. And implementing makes sense. See More

Top Con

Very opinionated

Ember (and many extensions, like Ember Data) force the implementation down specific architectural paths. These paths are what Ember believes is best practice and typically are fine, but not in all cases. This can occasionally lead to fighting with your framework which is never productive. See More

Top Pro

Uses Handlebars

Ember's preferred templating language is Handlebars. This is mainly because Handlebars is a logic-less templating language and Ember tries to keep it's logic outside the view. Another reason why Ember benefits from Handlebars is mostly aesthetic as Handlebar's clean syntax makes for easier to read and understand templates. Finally, Handlebars templates are compiled instead of interpreted, which means that they are much faster to load. See More

Top Con

Large library size

At 69Kb gzipped, it is one of the largest JavaScript frameworks. This means Ember might be an overkill to use on simpler projects. See More

Top Pro

Opinionated in terms of application structure

Ember already defines the general application structure and organization for you. This was done to prevent developers from making mistakes which would needlessly over-complicate their application. While it's still possible to go out of these practices forced to developers by the Ember authors, you still have to go out of your way to force them. See More

Top Pro

Excellent API

Ember's API are really easy to understand and work with. It has methods which allow you to harness complicated functionalities in an easy to understand way. See More

See All

Marko

Top Pro

Easy to integrate with express.js

Easy Integration with Express and Node See More

Top Pro

Lightweight runtime (~4 KB gzip)

Top Pro

Short learning curve

It is easy to get up to speed and understand what is going on in a very short period of time. See More

Top Pro

Simple and readable syntax

Marko has a HTML-like syntax which should be easy to read and understand for everyone who has even minimal experience in web development. See More

Top Pro

Streaming

Streaming allows progressive HTML rendering and reduces time to first byte. See More

Top Pro

Asynchronous rendering

Marko makes additional asynchronous calls after the view rendering has begun. See More

Top Pro

Server-side rendering

Marko supports both server-side and client-side rendering. See More

Top Pro

Custom tags

Custom tags provide a simple mechanism for embedding more complex components into a template by extending the HTML grammar with support for new tags. For example: <div> <say-hello name="World"/> </div> Custom tags are easy to create since they just map to a JavaScript "renderer" function as shown below: module.exports = function sayHelloRenderer(input, out) { out.write('Hello ' + input.name + '!'); } Custom tags support nested content: <fancy-overlay title="My Title"> This will be the body content of the overlay </fancy-overlay> Custom tags can also have parent/child relationships to support more complex use cases such a "tabs" component with nested "tab" components: <fancy-tabs> <fancy-tabs:tab label="Home"> Content for Home </fancy-tabs:tab> <fancy-tabs:tab label="Profile"> Content for Profile </fancy-tabs:tab> <fancy-tabs:tab label="Messages"> Content for Messages </fancy-tabs:tab> </fancy-tabs> See More

Top Pro

Compiled templates are readable CommonJS modules

Avoids ugly globals and "named" templates. var template = require('./template.marko'); var html = template.renderSync({name: 'Frank'}); See More

Top Pro

Extremely fast

Marko consistently outperforms other alternatives in code benchmarks, both on rendering speed and compilation time. See More

See All

ExtJS

Top Pro

Provides built in support for UI widgets

Huge amount of widgets available, also easy to build custom widgets by extending the available components. See More

Top Con

Completely unreliable with regard to licensing and pricing

That ExtJs is expensive is not the problem, but what they did is started completely free, then switched the licensing model when they had profited from the community. Also, they suddenly switched from a single user license to a minimum of 5 users. See More

VigorousHatepuna's Experience

Ext-JS is like a Swiss Army Knife: it contains everything that a developer would need to develop an application, in one product. It is, in same time, a huge collection of visual components (widgets) and a solid development framework, implementing well-known MVC (and more recently) MVVM patterns. Unlike Angular or React JS, where one project provides the framework and another project (or projects) provide(s) components. This is not to say that there arent third party providers for Ext JS, but the need for them is very limited. See More

Top Pro

Professional support available

If you buy a license you can get professional support and premium forums. Support has short contact times and solutions are of great value. See More

Top Con

License

Ext-JS is not for free, it comes with a license. See More

LoveableTalos's Experience

Robust framework See More

Top Pro

Well documented

ExtJS' documentation is very detailed and helpful. All concepts and parts of the framework are thoroughly explained. See More

Top Con

Large footprint

The library is almost 500Kb in size hence significantly affects your page load time. See More

Top Pro

IDE plugins available

Plugins are available for JetBrains, Eclipse and Visual Studio. See More

Top Con

Expensive licensing

ExtJS is free for use in open source projects, but you have to use the unstable version which is riddled with bugs. Furthermore, to build a project (even if it's open source), you have to buy their proprietary tools. For commercial projects, it costs $665 for a license. See More

Top Pro

Easy reusability of code

By using the packages and custom components, code can be reused very simply. See More

Top Con

No real support

You only get a limited premium questions that could be answered via the support and if the issue is too large then you might lose all your credits (it has a credit system for support) in one question. In addition the replies in premium forum are sometimes less thought of than you would get in stackoverflow. See More

Top Pro

Flat learning curve

Anyone with basic JavaScript knowledge can start using this framework. See More

Top Con

Lots of bugs

The community is very small and this is because the licencing is very expensive. Therefore not many people to test the framework and give feedback in order to fix. They try to do everything in house which means that a small company (linkedin shows about 100 employees) tries to imitate something very large. The scaling problems lead to lots of bugs and instability. See More

Top Pro

Forum support

Forum support is available. See More

Top Con

No web-workers

ExtJS does not take into account the asynchronous nature of todays web browsers where you can do heavy stuff on the background. See More

Top Pro

Excellent design tools

Eg: Sencha Architect. See More

Top Con

Tooling is poor

They had a GUI architect tool, but that tool never was up to date with the current framework version. Now they even seem to have abandoned the whole architect app. Also, to build a ExtJs app you have to use their tool (and then you have to pay, from that moment ExtJs is no longer GPL). But this tool also has lots of bugs. See More

Top Pro

Developer friendly integrated tools

Sencha Cmd, Sencha Inspector and some IDE plugins etc., are the tools which helps developers to speed up their development. See More

Top Con

Steep learning curve

ExtJs is a very opinionated framework. You have to do it the ExtJs way or it's the highway. So, a lot of time, things in your own opinion doesn't make sense or don't work in the way you expect it. See More

Top Con

Quantity yes, quality no

There is a large amount of source code that can be useful and indeed all the samples works flawlessly. When you try to get into more complex scenarios you will find yourself in situations where things just do not work as expected. You will have to do manual work. See More

See All

See flagged products

I Recommend...

Built By the Slant team

Find the best product instantly.

4.7 star rating

Try it now - it's free

score 107 · Accepted Answer

Vue.js

Top Pro

Easy learning curve

Complements existing technology instead of trying to reinvent it. See More

Top Con

Confusing architectural patterns

Documentation is unclear here on best practices. Do you put an API call in the component, in the app, in the router? edt... In store See More

John Furr's Experience

I have integrated Vue.js on several traditional sights. Our ecommerce site: https://teaquinox.com/ was originally a standard django application. I was able to seamlessly integrate Vue.js into the application and start working. Once I saw the power of Vue I started integrating npm and webpack in so I could get minified bundles... Now as the lead engineer for Harvards HBX platform I have started the process of bringing Vue js into our stack here as well. Honestly I love Vue. It's dead simple to learn, it's unopinionated, it's faster than react, and its' far far better for integrating into traditional web sites. See More

Specs

GZipped size:~30KB

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

Top Pro

Lightweight

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

Top Con

Poor typescript support

Very basic typescript support. See More

jtag's Experience

Solves your UI binding problems, without forcing you into a bunch of other complexity. See More

Top Pro

Single file components

Top Con

Component boilerplate is overcomplicated looking and ugly

's Experience

After testing during months Angular and React, I now use Vue in all my application. With Nuxt.js, I can easly build awsome apps... See More

Top Pro

Fastest

With the latest updates Vue has become faster and faster, becoming one of the fastest JavaScript frameworks. See More

Top Con

Lack of Services as a part of the framework

Daniel Spagnoli's Experience

Lightweight, easy to set up and use. Not so ridged, so you can work the way you want to, unlike a lot of other frameworks. Doesn't overcomplicate simple projects like Ember, React and Angular tend to. See More

Top Pro

Server Side Rendering

Out of the box SSR rendering support as well as SSR responsive JavaScript code (can both run simultaneously on a client and a server) See More

Top Pro

Reactivity system

Top Pro

VueRouter

Top Pro

Simple component API

Top Pro

Vue documentation is easy to read

Users does not really need alot of JavaScript knowledge to make use of it, even tho it is not recommended to use a JS framework before being familiar with vanilla. SInce all frameworks have their own quirks in how they works. See More

Top Pro

No dependencies

This does depend on what you are building, a must have for some builds would be VueRouter and Vuex but they are all driven forward by the community. See More

Top Pro

CLI and Webpack integration

Top Pro

Vuex store, events system

Top Pro

Community driven

Vue is driven by the Community as opposed to being driven by a big corporation e.g. React for Facebook and Angular for Google 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

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

Top Pro

Client side debugging

Vue provides a Chrome and Firefox browser plugin to help client side debugging 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

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

Immensely powerful

There is so much power in such a small library you cannot believe it. 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

See All

The Best 1 of 20 OptionsWhy?

My Recommendation for Vue.js

My Recommendation for Vue.js

Easy learning curve

Confusing architectural patterns

Lightweight

Poor typescript support

Single file components

Component boilerplate is overcomplicated looking and ugly

Fastest

Lack of Services as a part of the framework

Server Side Rendering

Reactivity system

VueRouter

Simple component API

Vue documentation is easy to read

No dependencies

CLI and Webpack integration

Vuex store, events system

Community driven

Support for both templates and JSX

SEO friendly

Can be used with any front-end stack

Client side debugging

Supports inline templating

Responsive server-side rendering

Immensely powerful

Can be made even lighter

19 Other Options Considered

My Recommendation for Knockout

My Recommendation for Knockout

Easy data binding

Slower than others when amount of objects grows

Easy to learn

Can become complex once the application grows large

Built in templating

Two way binding requires a little extra work

Legacy browser support

Great documentation

Lightweight and plays nicely with other libraries

Dynamic models help with keeping the code simple and clean

Very flexible

It's only a library

Simple manageable modules

My Recommendation for Backbone

My Recommendation for Backbone

Requires more coding compared to other frameworks

Gives you the freedom to implement views however you want

Can easily lead you to spaghetti code

Can be combined with any library you want

No data binding

Large community

You can call underscore.js methods directly on Backbone objects

Easy to interface with the API

Easy to implement complex user interaction

Doesn’t force you into a particular coding style or paradigm

Extendable with plugins

Easy to abstract interaction

My Recommendation for Ember.js

My Recommendation for Ember.js

Excellent routing

Steep learning curve

Increased performance because similar tasks are processed in one go

Too large for small projects

The API is easy to understand

More Ruby than JavaScript

Helps with writing simple and modular code by using Promises

Easy to understand documentation

Complete front-end stack

Minimal need for configuration

Built-in router

Debugging tool for almost every web browser

Helps developers with keeping the structure of the application clean and simple

Out-of-the-box CLI tool which scaffolds a new project

Uses a relatively clean and easy to understand templating engine

Works great with jQuery

Useful bindings

Can render the page according to any of the developer's needs because of computed properties

Auto-updating templates

Stunning developer experience