Friday, September 4, 2015

HTTP/2 - Powered by SPDY (speedy) and inspired by evolutionary web

While driving back home, I was listening to Mark Nottingham's (who chairs IETF HTTP working group) podcast on HTTP/2 and it was very interesting to know about the upcoming changes in HTTP protocol. Post that I did some research and sharing some interesting findings with respect to HTTP/2.

It's been a long time the backbone of Internet, HTTP has not gone through major revision (1.1 was released 1997) & came to know through the podcast that usually standards have a very longer cycle (even in today's agile world). HTTP/2 RFC 7540 got published in May 2015 and it is open for all. 

"Very interesting fact is it is based on SPDY (pronounced speedy), which was developed by Google and after many discussions Google decided to contribute it for HTTP/2 (great for industry)"

I have summarized key findings based on my research & study on this subject:

What's not changing?


HTTP/2 - What is not changing

HTTP/2 vs. HTTP 1.1 - What's not changing?


a) No New Verbs/Methods - There are no new verbs (aka methods) and it will keep its current sub-set  - POST, GET, HEAD, OPTIONS, PUT, DELETE, TRACE and CONNECT. Interestingly the last 5 methods got added in HTTP 1.1.
b) No change in approach for Cookies 
Because of compatibility concerns, there was no proposal on changing state related mechanisms.
c) HTTP 1.1 will LIVE - there is no force to replace HTTP 1.1 with HTTP/2 and it will let industry decide on its future. Implementers will play bigger role in this.

What's changing (major ones)?


HTTP/2 - Major Changes
HTTP/2 Major Changes

a) TEXT to BINARY - Easy guess, text is more user friendly but binary will always be faster (I heard that it is largely dependent on implementation providers but performance improvement can be in the range of 10-15%). Also, it decreases verbosity of the protocol.

b) Head-of-line blocking (HOL blocking) or HTTP pipelining tfully multiplexed
If you have used Firebug, you would have noticed that a typical web page makes many HTTP requests to server to load page faster and that causes many connections to server. Multiplexing will help in opening just a single connection per page from one origin. Fantastic News!!

c) Many Connections to Single Connection
Explained in the point above, but this is worth mentioning again :-)

d) Verbose Header to Header Compression (HPACK)
HPACK is a compression format, which will be used to represent HTTP Headers. It will be easier for programmers to leverage headers now that it is compressed (less data to travel). There was a consideration to use GZIP but it was discarded because of security concerns. 

e) PULL ONLY to PULL-N-PUSH
Server push will be allowed to clients and yes, that can give birth to many new design patterns. There will be a choice to client to turn it off.

As per h2check, 16% of websites (including twitter, google, facebook) support HTTP/2 + SPDY:

Web Usage of HTTP/2
Source: https://www.h2check.org/stats


Google Chrome Canary, Internet Explorer 11, Safari 9 & Firefox 36 provides full support for HTTP/2. Best of luck for its future!!


Disclaimer:

All data and information provided on this site is for informational purposes only. This site makes no representations as to accuracy, completeness, correctness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.This is a personal weblog. The opinions expressed here represent my own and not those of my employer or any other organization.


Monday, August 3, 2015

Understanding Backbone.js from the lens of a Java programmer



Let me start this blog in favor of backend or server-side programmers by making the following statement:
"A server-side programmer (Java or similar) can understand nuances of javascript client or server-side frameworks or libraries much more quickly than an html developer". 
There are two key reasons behind the above statement:
  • Client-side development is not limited to HTML/CSS rather it has evolved to contain programming & design paradigms, which is complex for an html programmer.
  • Design paradigms including patterns needs to be applied to front-end code to keep it maintainable, performant & scalable - which is greenfield for programmers but not for HTML developers.
Having said that, I am writing this blog to exhibit that how easy it is for java programmers to co-relate concepts from java to javascript. I have chosen Backbone.js for the same, which is a popular library for developing singe-page web applications.

There is a major difference between Backbone and AngularJS, which is a framework & Backbone is a library. Frameworks impose more constraints & assumptions and are considered to make life easier but at the cost of being more restrictive and heavy (particularly from size of javascript). 

"From a java programmer perspective, a JavaScript library is similar to Apache CommonUtils Library (distributable as JAR) whereas framework is Apache Wicket or Spring framework (distributable as set of JARs)."

Backbone.js is an implementation of MVP pattern (similar to MVC pattern with slight deviation), which is not a new concept for a java programmer (might be for an HTML developer).

A matrix below can be handy for co-relating conceptual elements between Java & Backbone based components:

Java JavaScript (Backbone)
Model JPA Entity or POJO Class To create a Model class extend Backbone.Model.extend(). Backbone also has concept of Collection objects, which are nothing but collection of Model objects.
View JSP or XHTML (with scriplet) There are two parts to it:
  • Templates as HTMLs – Backbone leverages own templates or JS templating libraries like Handlebar
  • View Rendering Code as JavaScript – On change of model, invokes relevant code to lookup element in DOM and update HTML using Jquery.
Controller POJO Class manipulating Models & updating View A Backbone Router is similar component but not exactly the same. It maps URLs to Javascript functions.

A logical architecture for a single-page client application can be visualized as below:



I have created a very simple application, which lists employees along with few data elements. 

Source code in terms of javascript for above application is below, which demonstrates simplicity of using backbone library.
  // Namespace our app
   var app = {};

  // define employee model
  app.employee = Backbone.Model.extend({

    defaults: {
      company: "Lorem Ipsum",
    }

  });

  // define view rendering logic for employee
  app.employeeView = Backbone.View.extend({

    tagName: "article",
    template: _.template( $("#employeeElement").html() ),

    render: function() {
      var employeeTemplate = this.template(this.model.toJSON());
      this.$el.html(employeeTemplate);
      return this;
    }
  });

  // A group (array) of employee models
  app.employeeCollection = Backbone.Collection.extend({
    // What type of models are in this collection?
    model: app.employee
  });

  // defined rendering logic for employee collection
  app.employeeGroupView = Backbone.View.extend({

    tagName: "section",

    render: function() {
      this.collection.each(this.addEmployee, this);
      return this;
    },

    addEmployee: function(employee) {
      var employeeView = new app.employeeView ({ model: employee });
      this.$el.append(employeeView.render().el);
    }
  });

  // action for URLs
  app.Router = Backbone.Router.extend({

  routes :{
    "": "noCopy",
    "firstEmployee" : "firstEmployeeMessage",
    "secondEmployee": "secondEmployeeMessage"
  },

  noCopy: function() {
    $(".message").html("");
  },

  firstEmployeeMessage: function() {
    $(".message").html("

Message for First Employee

"); }, secondEmployeeMessage: function() { $(".message").html("

Message for Second Employee

"); } }); // create data for 2 employees var firstEmployee = new app.employee({ name: "Ankur Kumar", location: "Delhi", link: "firstEmployee" }); var secondEmployee = new app.employee({ name: "Jon Garton", location: "Melbourne", link: "secondEmployee" }); var employeeGroup = new app.employeeCollection([ firstEmployee, secondEmployee ]); // render employee view var employeeGroupView = new app.employeeGroupView({ collection: employeeGroup}); $(".allEmployees").html(employeeGroupView.render().el); var employeeRouter = new app.Router(); // for router Backbone.history.start();
All you need now is following HTML snippet in your page to render the view:



Disclaimer:
All data and information provided on this site is for informational purposes only. This site makes no representations as to accuracy, completeness, correctness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.This is a personal weblog. The opinions expressed here represent my own and not those of my employer or any other organization.

Saturday, March 14, 2015

Docker – A lightweight open-platform that works like a charm!!


Docker is not just a hyped technology, it is proving its metal and providing contemporary ways to manage distributed applications.

Most of the architects have either started leveraging Docker or planning to do it in near future – that’s the impact it has made in such a short time-frame and search on Google Trends says it all:

A simple analogy - Docker is like a ZIP archive (or EAR), which packages all dependencies in a single bundle to be shipped independently. It can be opened by any tool, which understands ZIP format.



The search on Google Trends says it all about it's popularity:


A quick glance at Docker's capabilities:




A quick set of instructions to get a container running locally with Tomcat using Docker to showcase it's ease-of-use.

·       Step 1 – Install Docker on your system
      Install Docker by following the link below based on the platform you are using (Yes, even Windows is supported) https://docs.docker.com/installation/#installation

·       Step 2 – Pull Tomcat Image from Docker repository (No need to download tomcat – docker magic of repository)
$sudo docker pull tomcat
·       Step 3 – Start Tomcat container
$sudo docker run –i –t tomcat /bin/bash
$cd /usr/local/tomcat/bin
$./startup.sh
$tail –f ../logs/catalina.out
·       Alternative Step (instead of step 3) – You can simply use following short-cut command:
$sudo docker run tomcat

It’s quite obvious that Docker is not just all words; action speaks louder than words!!

A simple consolidation of all Docker's use-cases & the list is expanding:


Disclaimer:

All data and information provided on this site is for informational purposes only. This site makes no representations as to accuracy, completeness, correctness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.This is a personal weblog. The opinions expressed here represent my own and not those of my employer or any other organization.