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 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.
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.
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.
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.
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?
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
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.
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.
For a quick recap of what we’ve discussed, take a look at the following comparison table:
|JS Technology||Concept||Web Components||Data Binding||Rendering||Architecture||Type|
|Angular 2||JS into HTML||Supported||One-way and two-way||Server-side||MVC||Frontend framework|
|Aurelia||JS into HTML||Supported||Two-way||Server-side||MVC||Frontend framework|
|Ember||JS into HTML||Supported||Two-way||Server-side||MVC||Frontend framework|
|Knockout||JS into HTML||Supported||Two-way||Client-side||MVVM||Frontend framework|
|Marionette||HTML into JS||Supported||Two-way||Client-side||MVVM||JS library|
|Meteor||JS into HTML||Supported||One-way and two-way||Server-side||Full-stack architecture||Full-stack framework|
|Polymer||JS into HTML||Supported||Two-way||Client-side||View in MVC||JS library|
|React||HTML into JS||Supported||One-way||Server-side||View in MVC||JS library|
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.