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