AngularJS framework gives super powers to HTML by adding all the necessary features required to build dynamic views (interactive user interface). It gives option to extend HTML attributes by the use of Angular directives. Extending HTML with AngularJS is very simple, one can use standard AngularJS directive or develop a custom directive and mount it on any div.
When Angular compiler compiles and renders the HTML on user interface, it does the DOM manipulation and attaches all features provided by the directive used. Of course, this is just one aspect of how AngularJS can be used to empower web applications.
The reverse is true as well, if model gets updated, view is re-rendered. This essentially takes away all the pain of writing manual code for DOM manipulation.
Recently released Framework ReactJS is giving tough competition to AngularJs but Angular is holding the ground tight and growing in demand as ever before. The main reason behind Angular’s continuous growth is the improvements and advancements it brings in with every new release.
You can read more about Angular at the official website – angularjs.org.
ReactJS is best at rendering complex user interfaces with high performance. The basic fundamental behind React is the concept of virtual DOM. ReactJS utilizes a virtual DOM, which can be rendered either at client side or server side and communicate back and forth.
When the data manipulation is much more dynamic and complex, client side DOM manipulations become performance intensive.
The React approach to handle this is –
- Render the DOM at server side, the virtual DOM.
- Compare virtual DOM to the browser/actual DOM and figure out differences.
- Update only the selective/changed nodes of browser DOM instead of re-rendering the entire DOM.
Another biggest advantage of react is the re-usability it brings on the table in the form of reactive components. React component libraries can be created and used across applications or made available for public use.
Material-UI framework implements Google’s material design using react components, a great example.
If you want to get further inspiration then head straight to Instagram, its user interface is completely powered by React.JS.
You can know more about React at – facebook.github.io/react.
Ember also rides on the principal of two way data binding like AngularJS, i.e. update view when model changes and update model when the view changes, keeping both in sync all of the time.
You can read more about Ember at – emberjs.com.
AureliaJS is the creation of Rob Eisenberg and team who come mostly from the world of Angular and Durandal. Aurelia though is an open source product is officially managed by Durandal Inc., a startup company that creates libraries, tools and frameworks to support next generation of web development.
Aurelia is just released, in January 2015, and is ready for production use. It extends the capabilities of Durandal and is termed as NextGen version of it by Eisenberg. For the existing developers who work in Durandal or Angular1 and 2, Aurelia comes with a clear migration path.
A power fact about AureliaJS is that it is highly modularized and comprises of many independent small libraries. One can use entire framework in the project, use few of the required libraries, or extend the selected libraries to create custom framework.
Aurelia is self-contained package and doesn’t have any external dependencies except for polyfills.
You can read more about AureliaJs at official website – aurelia.io.
Ever since its release, the MeteorJS ecosystem has grown huge at rapid pace and the community too is vibrant and helpful. You would find tons of resources, tutorials and custom packages that give super powers to MeteorJS.
From Performance perspective, any changes in the database are reflected back on the UI in the real time and vice versa without the handshake between different languages or without major overhead of server response times.
You can read more about Meteor at – meteor.com.
The popularity and power of backbone can be judged from the fact that biggies like Pinterest, Foursquare, Walmart, Disqus and Delicious are using backone.js. This is just a small subset of backbone users and the actual list is really huge to be covered here.
Over the past few months or so, I see comparatively slow growth in Backbone usage as compared to the rivals Angular, Ember or the newly launched React.
The main reason for that appears to be the sluggish release cycle of backbone and lack of power features that other frameworks offer out of the box.
It of course is still useful but more as a side framework rather than the core framework of your web project.
You can read more about Backbone at – backbonejs.org.
Polymer.js is a different ball game altogether. Polymer was released by Google back in 2013. Polymer uses the concept of web components to extend HTML capabilities.
Web Components is the browser technology released by W3C using which new custom HTML elements can be created. For example <audio> is a standard HTML5 element but with the web components and related technologies you can create your own custom element – like <my-audio>.
Polymer gives powers and brings structure in building custom HTML elements using browser based technologies that includes web components.
You can read more about Polymer at – polymer-project.org.
Knockout has had its golden time but as of now it is growing at a much slower pace as compared to the earlier competitors like Angular, Ember or Backbone. The slow growth is simply because it lags way behind in terms of improvements and adding more features.
You can read more about Knockout at knockoutjs.com.
Vue.Js is the creation of Evan you. It was first released in 2014 as open source framework for public use under MIT license.
VueJs is relatively new and is gaining lot of traction among the community of developers. VueJs works with MVVM design paradigm and has a very simple API. VueJs demonstrate minimalism to the extreme and allows you to use selective modules, as required.
Vue is inspired by AngularJS, ReactiveJs, knockoutJS and RivetsJS and updates model and view via two way data binding.
You can know more about VueJs at – vuejs.org.
You can know more about MercuryJS at github.com/Raynos/mercury.
Different frameworks offer different concepts and methodology but attempt to solve the common underlying problem of rendering complex user interfaces dynamically and making single page applications much more useful and fast.