We’re going to review the most used JavaScript frameworks and libraries to help you choose the right frontend technology for your own web app development. We’ll consider not only ReactJS and AngularJS in this article but also several other top JS frameworks for 2017. This review should help you understand the differences between frameworks and their respective advantages and disadvantages. As our review is intended to be unbiased, we’ll present our list of JS technologies in ascending order by name.
1. Angular 2 (Angular 3)
Angular 2 was released by Google in September 2016. This latest frontend framework offers a complete redesign of AngularJS. Arguably, the emergence of React, a popular JS library (which we’ll discuss later), has influenced the development of AngularJS by revealing what Angular must improve in order to get back to the top spot on the list of best JavaScript frameworks. With the latest release, Angular looks like a completely different frontend instrument. Angular 2 now uses one-way data binding, just like React, to improve the performance of single-page applications. But Angular has also retained two-way data binding for form elements. With the ngModel directive and banana-in-a-box syntax, your web app can simultaneously update the View and the Model, just like you did before with AngularJS. Another great feature of Angular 2 is its friendly relationship with Polymer.js – another Google invention, and one of the first libraries that implemented the Web Components specifications. You can wrap Polymer components into Angular 2 components and use them in your app. This is quite convenient. So if you’re coming from the Polymer community, pay attention to Angular 2. We also mentioned Angular 3 in the heading, and for good reason: Google has promised to issue a huge update to Angular each year. Just wait until March 2017, and you’ll be able to build single-page applications (SPAs) with Angular 3. It’s also nice to know that Angular 3 won’t be a complete redesign of the framework, but will simply build on the substantial improvements introduced with Angular 2. The bottom line: Given the immense support that Angular gets from Google and developers all over the world, Angular 2 could easily be your top choice for developing client-side web apps. There’s no need to even consider AngularJS (1.x versions) unless you need to support a legacy app.
2. Aurelia.js
Aurelia.js is another open-source JavaScript framework you might want to consider for your application. Aurelia works with many modern versions of JavaScript – ECMAScript 2016, TypeScript, and CoffeeScript are all supported. The Aurelia framework also comes with a custom Command Line Interface, which you can use to launch Aurelia-based applications. But those aren’t the biggest strengths of Aurelia, as many other modern frameworks support ES6 and TypeScript. Aurelia’s real selling point is that you can learn it faster than Angular. If you aren’t interested in learning Angular 2’s directives and – at times – strange syntax, you can switch to Aurelia and focus on vanilla JavaScript, which frontend programmers generally prefer. Although Aurelia does bring JavaScript into HTML – you can write JS expression directly into HTML attributes – code is still a bit cleaner than with Angular 2.
3. Ember.js
Ember.js is a relatively old combatant on the battlefield of JavaScript frameworks. With its Handlebars template engine, routing, and components, Ember is a solid JavaScript framework for frontend development. Ember, like Aurelia, is similar to Angular in how you create frontend apps. With Ember, you insert JS values into Handlebars templates by using double curly braces, add the ‘binding’ command to an HTML attribute, and then Ember will automatically update both the View and Model of your application. In other words, two-way data binding is also an essential part of Ember. But Ember isn’t a simple MVC framework like Aurelia: you’ll need to grasp such notions as routers, components, adapters, serializers, and the store. So why learn Ember and not a simpler JS framework? One of the key developers of the Ruby on Rails framework – Yehuda Katz – participated in the development of Ember. If you’re a Rubyist – as we are at RubyGarage – you’ll quickly get used to the Ember way of doing things. Most notably, you’ll work according to the familiar Convention over Configuration principle. Ember restricts your creativity, but the reason why is commendable: it allows you to write code and structure your application more quickly than you could with a highly flexible JavaScript framework such as Aurelia. In short, Ember.js is very opinionated and might be considered the equivalent of Ruby on Rails for the browser.
4. Knockout.js
Knockout.js implements a rather old-school approach to creating client-side applications. With Knockout, you can benefit most from your knowledge of jQuery – jQuery templates (jquery.tmpl) are the main format for Views in Knockout.js. Having no dependencies on other libraries and weighing less than 60kb, Knockout is an efficient, light-weight solution for frontend development. Knockout implements the Model-View-ViewModel architecture. ViewModels in Knockout are just JavaScript classes, where you define a set of object properties that will be written in the ‘this’ identifier. As you might have guessed, the ‘this’ identifier will become the element that you connect to the class using the data-bind attribute. This approach to developing client-side applications is very similar to writing vanilla JavaScript. If you need to create a single-page application for old browsers in 2017, Knockout is essentially your only choice. The library still supports the ancient Internet Explorer 6 and Firefox 3.5, while Ember, Angular, and React work only on IE9 and higher.
5. Marionette.js (Backbone.js)
If you still develop frontend applications with Backbone.js, you should definitely switch to Marionette.js in 2017. With the Marionette library, you can use all components from Backbone except Views. For Views, Marionette.js has its own base class that implements all functions to work with DOM API and events. While Backbone is a skeleton for building JS frameworks, Marionette is a library that makes Backbone simpler to use. Backbone’s main problem is a lot of boilerplate code, which we generally write in views. One of the advantages of Marionette is that you can avoid writing this boilerplate code. The latest version of Marionette – 3.0, presented in 2016 – now has a full-fledged View component and provides support for LoDash 4 and Underscore. Given these and many other important updates, Marionette is a safe choice for 2017.
6. Meteor.js
Meteor.js also among the most popular JavaScript frameworks. Why is that? Using Meteor.js, unlike most other JS frameworks, you can build both frontend and backend components for an application. Meteor is designed for full-stack developers who know JavaScript and want to write their client-side and server-side code using the same language. If you’re dreaming of developing your first mobile application, you might also use this framework. The Meteor Development Group, the main supporter of Meteor, has even created a Platform as a Service hosting solution that is available specifically for Meteor-based applications. Other than the Meteor PaaS offering, there’s also Atmosphere, a dedicated public repository for Meteor.js extensions. The atmosphere contains thousands of ready Meteor components, so you can spend less time writing boilerplate code. If you’ve ever worked with the MEAN stack that consists of MongoDB, Express.js, Angular, and Node.js, you’ll find Meteor very similar. Meteor allows you to use Node.js and save data to a Mongo database. Meteor is a multi-purpose machine, which has its advantages and disadvantages in comparison to Angular, React, and other JS-based technologies. While Meteor provides many features out of the box, it’s still questionable why the entire JS community would switch to this framework. Why use Blazer – a proprietary template engine, when there’s Handlebars? Why use Atmosphere when you can find everything on npm? Why use a proprietary module bundler, when there are Webpack and Gulp? Meteor’s developers promise to address these concerns, which is why the development of Meteor has become very aggressive. In 2017, we’ll definitely see many drastic changes in the architecture of this full-stack framework. Meteor will likely move closer to JS standards and become more friendly overall to the JavaScript community.
7. Polymer.js
Shadow DOM, templates, custom elements, and imports – all this was first implemented by Polymer, the most progressive JavaScript library that was released in 2015. We use Web Components (the four things we mentioned in the first sentence) to freely build custom HTML elements and insert them into layouts – which is precisely what Polymer allows us to do. Google is actively developing the next version of Polymer – 2.0 – to be released in 2017 with the support of Shadow DOM v1. Polymer is similar in some aspects – like the two-way data binding feature – to Angular and other JS frameworks. But Polymer also provides its own unique solutions, namely the Polymer App Toolbox. Using this toolbox, you can develop modern applications that are component-based, offer responsive design, and benefit from the Shadow DOM. And you’ll be able to use already built custom HTML elements. Another compelling facet of Polymer is that you can pair it with any modern framework, just like React. As we mentioned earlier, you can use a Polymer custom element and wrap it with Angular 2. After that, you just need to insert this element as a web component into your layout – and it’s done! Polymer is certainly worth a look. Perhaps it’s not the most used JS library, but it’s up-to-date. And Polymer will be even better in 2017, when the 2.0 version comes out.
8. React + Flux
React is one of the top JavaScript technologies for frontend. But React is just a library, so it’s not on par with, say, Angular or Ember. To make React a bit closer to the MVC architecture, Facebook, the developer and chief supporter of React, has introduced an approach to building application architecture and called it Flux. Flux consists of several components – a dispatcher (which controls the flow), stores (similar to the M in MVC frameworks), controller-views (which react to events triggered by the user), and actions (event objects that are addressed by the dispatcher). That’s a lot to learn, but the standard Flux structure is simpler than the MVC model in Ember, for example. But besides Flux, there’s something else you’ll have to understand: JSX. Actually, using JSX is simple. You write HTML layouts into React components and use interpolation to insert values, which are calculated in JS. You don’t need to make your HTML dirty with non-standard attributes like you do with Ember or Angular. React is similar to Aurelia in terms of syntax – that is to say, it’s close to JavaScript. React will get more updates in 2017 to separate ReactDOM from the main library and to get rid of bugs. Learning React.js is almost a must. But whether you use React for production or not depends on your preferences.
Comparison of JavaScript Frameworks and Libraries
For a quick recap of what we’ve discussed, take a look at the following comparison table: To settle on a technology among our list of the best JS frameworks for web development, we recommend that you try at least two of them to start – Angular and React. It’s always simpler to code in vanilla JavaScript, because you already know it. But even if you start with Angular and React, make sure to pay attention to the other top JavaScript frameworks for 2017 that we’ve mentioned. It’s true that you’ll have to grasp many new conventions, terms, approaches, and custom attributes to employ any JavaScript framework or library. Very soon, however, you’ll be able to create high-quality client-side and even server-side applications faster than ever before.
