Jan 21, 2015

First day with JavaScript and maze of JS frameworks

Welcome 2015 and welcome to whole new level of milestones to be achieved by JavaScript, after a very successful 2014. Being a server side developer, I was hesitant initially starting with Javascript and was waiting for one monolithic Javascript framework to start with. I was looking at comparisons and understood few months back that Backbone is library and Angular is framework, and both are doing same providing a Client side MVC framework.

If you don't have a background of Javascript, then its a long but not lonely road. Probably you can get a Javascript book and start developing some pages and get familiar with HTML, CSS, and JavaScript combination. I did this long time back but multiple times and left, but desire to learn was not strong enough until Javascript got so popular and currently ranked second after Java, according to RedMonk.
If you are a Java developer and new to Javascript, you will be most probably going through same questions in mind as mine. Lets see the answers and I will be glad if they help to a first time Javascript developer.
I was really confused looking at some xxxJS frameworks, unless I found some really good applications written using these frameworks. I was very much impressed by AngularJS was willing to a full time AngularJS developer but not really got time to learn so much and also unless untill I read this post-
https://andywalpole.me/#!/blog/142134/2015-the-end-the-monolithic-javascript-framework
In the year 2014, I was part of a project: and online banking system. The complete system was rewritten from client to server. Server side changes were upgrading the Spring MVC, exposing REST services, microservices architecture, etc. And Client side changes were replacing the complete JSF with JavaScript frameworks, REST clients, HTML5, etc.
When we talk about Javascript frameworks we got plethora of choices. And many comparisons already done, but it can be concluded that Angular and Ember require steep learning curve, instead Backbone which is more considered as library (rather than framework) is easy to learn and suits more to develop a single page application. Such comparisons can be found like https://www.airpair.com/js/javascript-framework-comparison.
Also there are many Javascript libraries that are required, unless you are using monolithic JavaScript framework like AngularJS. If you are using Backbone.js, you will need more .js libraries for different purposes.

If you are coming from Java EE background, then you will like this project:
http://www.jboss.org/ticket-monster/
And below is the list of libraries used with explanation:

RequireJS is a JavaScript file and module loader.
We can ecapsulate a piece of code into useful unit (module), register it, and export a value.
A module can refer other units (modules).
Typically a Javascript code is immediately executed function, and dependencies are done via global variable names loaded via script tag.  Developer should know the right dependency order, which means Backbone can't come before jQuery.
A JavaScript code like below -
Manager object is derived from Employee object. Employee can't be loaded asynchronously because code will not work, and loading synchronously will kill performance. Solution is we should know the dependencies and load them before executing the script. Below is the way-
(Source: http://requirejs.org/)

jQuery : jQuery is a powerful JavaScript API which makes it a lot easier to perform various standard JavaScript actions in your HTML page. jQuery also takes care of cross browser compatibility issues, so you can focus on getting your page to work as intended.
Some of the things we can do with jQuery:

  • Select HTML elements in various ways, easing access to the elements to be enhanced.
  • Style the HTML elements dynamically, by manipulating their CSS properties or classes.
  • Manipulate the DOM (Document Object Model) of your page, (copy, move, modify etc.)
  • Animate the DOM elements, e.g. fading in / out, sliding, change color, change size etc.
  • Respond to events like mouse-over, mouse-out, change etc.
  • AJAX enable your web pages using jQuery's smart AJAX features.
  • Use the many jQuery plugins (incl. jQuery UI), which contains all kinds of smart widgets.
  • Create advanced web application user interfaces, which resemble desktop user interfaces.

(Source: http://tutorials.jenkov.com/jquery/index.html)

Backbone: Backbone is the client side MVC framework. But first we should look at why we need JavaScript MVC framework.
Below are some examples which explain why we need JavaScript MVC framework -


We can conclude we need Backbone

"With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves." - http://backbonejs.org/

Underscore: 
"Underscore provides over 100 functions that support both your favorite workaday functional helpers: mapfilterinvoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on." - http://underscorejs.org/
Also important is Backbone has hard dependency on Underscore. So we have to include Underscore.

Bootstrap: Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
"Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions." - wiki
Share:

No comments

Post a Comment

Comment

© Shift, ShEkUP, Shape, and Surprise | All rights reserved.
Blogger Template Crafted by pipdig