e-Zest members share technology ideas to foster digital transformation.

Difference between various view libraries with their reviews

Written by Komal Thamke | Dec 28, 2016 10:00:00 AM

Every other week there is evolution of new JavaScript library taking the web community by storm! The web community is increasingly getting energetic, diverse and is moving rapidly on multiple fronts. It would be very difficult to survey every major JavaScript framework and library. Instead, in the bellow document I’ll share some of the most famous and influential ones for front-end development. So here are some top JavaScript web front-end framework, libraries & tools and when to use them.

React

Advantages

  • Simple
  • Server side rendering
  • Shadow DOM
  • Avoids re-rendering
  • Uses JSX which gives free structure with attributes
  • Data changing over time
  • Extremely easy to write UI tests cases. This is due to the virtual DOMsystem implemented entirely in JS
  • Components can be reuse easily throughout your app. They can also becombined, and wireup together to create even more complex UIs
  • As an alternative, you can use reactJS along with various JS libraries such as angular, backbone and jQuery
  • React will automatically manage all UI updates when undergoing data changes
  • It has ease of debugging. There's a reactJS chrome extension that allows you to inspect the DOM to figure out what component is rendering a particular UI element
  • Works nicely with commonJS / AMD patterns
  • Best to increase the performance

Disadvantages

  • Renders single root node. Rest of the nodes should be its sub-nodes
  • Complex views can benefit from the immutability of React. But this is rarely needed

RIOT

Advantages

  • Riot updates only the elements that have changed resulting to less DOM operations
  • The HTML structure is fixed. Only the loops and conditions can add and remove elements
  • Updates only the expressions without complex sub-tree replacements

Polymer

Advantages

  • Speed of development
  • Uniform modules (color, style, effect, feel)
  • Pre-tested modules
  • Community support (like AngularJS)
  • Mobile ready, and same feel as the new Android L interface
  • Works with Chrome, Safari, Internet Explorer, and Firefox

Disadvantages

  • Rely on technologies that are still in progress by W3C
  • It uses web-components which are not supported by all browsers

Epoxy

Advantages

  • Computed model and view attributes
  • Declarative view binding
  • Automatic dependency mapping
  • Automatic view updates
  • Works with IE6+, Firefox 3+, Safari, Chrome

Meteor

Advantages

It supports all major browsers
Handles both server-side and client-side

Disadvantages

  • Faster for small number of changes
  • Complexity is increased
  • It supports mongoDB and Linux only

Vue

Advantages

  • Connects the view and model via two way bindings
  • You can use it alone for rapid prototyping or mix and match with other libraries for a custom front-end stack

Disadvantages

  • Programs with complex event models can benefit from Vue. But it is rarely needed

KnockOut

Advantages

  • Simplifies synchronization between the client UI and server is made more comprehensible
  • Leverages MVVM design pattern to increase modularity and provide for a clean separation of concerns and cohesive implementations
  • Keeps UI model state management on the client
  • Decreases (potentially) the size of server responses and client/server traffic in general (thereby speeding up our apps)

Disadvantages

  • Need to create two js View Models to ensure that the views get bound properly. This is a most unexpected problem with Knockout
  • Representing the same kind of data in different view formats
  • You have to completely rewrite your javascript models in order to make it work

Stapes

Advantages

  • Very tiny library nearly(2.1kb minified and zipped)
  • Easy to fit into existing codebase
  • Doesn’t force us to write code in a specific style
Disadvantages
  • Attributes are stored in an object internally. According to the Javascript special objects don't guarantee that properties are returned in order. However, all browsers return object properties in order except for chrome where numbered keys won't return in order

Rivets

Advantages

  • Automatically wiring up your views to your controllers

Disadvantages

  • The first time a view in each folder is downloaded, the browser has to make another (blocking) request to get the CSS file. Subsequent requests have no additional overhead as the CSS file is cached
  • It splits the CSS into files which aren’t named or organized according to their uses. For ex, other way to organize files would be by function (admin, public etc)

Metric

StackOverflow Questions

Github contributers

Stars on Github

File Size

Angular

112600

113

4608

39.5kb

Ember

16195

517

14433

90kb

Backbone

18432

269

22631

6.5kb

React

4335

476

26014  

127kb

Riot

14

112

446

6.7kb

Polymer

3366

58

12051

120kb

Uikit

4864

38

5299

44kb

Foundation

3384

707

20634

 

Meteor

14076

224

26983