Tuesday, February 12, 2013

OAuth2 - In a Simple Way

Last week I started playing with OAuth 2.0. I started with a github project called spring-security-oauth. I checked the sample OAuth 2 provider sparklr and OAuth 2 client tonr. But I could not get much from the sample example and the documentation provided. I explored a bit in the internet and finally could able to conclude some thing. I created a sample provider and checked all authorization on that. Now, I am here to explain different aspects of OAuth 2.0 from the practical point of view. I will try my best to present a modular and easy explanation here.


Many services such as Facebook, Github, and Google have already implemetated OAuth 2.0. That is why today most of the web sites using google/ facebook for authentication and authorization. They work as resource server, from where other clients fetch profile informations.

This post is an attempt to describe OAuth 2.0 in a simplified format to help developers and service providers implement the protocol.

I will be covering the following topics in this article.

1. Entities
2. Creating an Application
3. Authorization
a. Web Server Apps
b. Browser-Based Apps
c. Mobile Apps
d. Others
4. Accessing Resources
5. Resources


OAuth 2 Entities
OAuth 2 Entites


Entities:

OAuth Server:
This is also known as OAuth Provider. It's whole responsibility is to authenticate and authorize user/ client and manage the tokens. 

The Third-Party Application:
Third-Party Application popularly known as client, is going to attempt to get access to the user's account. It needs to get permission from the user, before it can do so. This could be a web server based application, browser based application, desktop application, mobile/tablet application or some smart devices like google Goggles and smart televisions. 

Resource Server:
The API popularly known as Resource Server, from where the data will be fetched out or served. This could be the SOAP or REST based service providers.

The User:
The User popularly known as Resource Owner, who gives access to access the resource.

Creating an Application:

Before you can begin the OAuth process, you must first register a new app with the service/provider. When registering a new app, you usually register basic information such as application clint id, secret, authorized-grant-types etc. In addition, you must register a redirect URI to be used for redirecting users to for web server, browser-based, or mobile apps.

Redirect URIs:
The service will only redirect users to a registered URI, which helps prevent some attacks. Any HTTP redirect URIs must be protected with SSL security, so the service will only redirect to URIs beginning with "https". This prevents tokens from being intercepted during the authorization process.

Client ID and Secret:
After registering your app, you will be having your client ID and a client secret. The client ID is considered public information, and is used to build login URLs, or included in Javascript source code on a page. The client secret must be kept confidential. If a deployed app cannot keep the secret confidential, such as Javascript or native apps, then the secret is not used.

Authorization:

The first step of OAuth 2 is to get authorization from the user. For browser-based or mobile apps, this is usually accomplished by displaying an interface provided by the service to the user.

OAuth 2 provides several grant types for different use cases. The grant types defined are:

Authorization Code for apps running on a web server
Implicit for browser-based or mobile apps
Password for logging in with a username and password
Client credentials for application access

Web Server Apps
Web apps are written in a server-side language and run on a server where the source code of the application is not available to the public.

Authorization request:

http://localhost:8080/oauth2/oauth/authorize?response_type=code&client_id=easylocate&scope=read&redirect_uri=http://localhost:8080/web

After accepting the access. the page will be redirected to the redirect uri with the authorization code.

http://localhost:8080/web/?code=t7ol7D

Now it is time to exchange the authorization code to get the access token.

http://localhost:8080/oauth2/oauth/token?grant_type=authorization_code&code=t7ol7D&redirect_uri=http://localhost:8080/web&client_id=easylocate&client_secret=secret

The OAuth server replies with the access token

1
2
3
4
5
6
7
{
  "access_token": "372c3458-4067-4b0b-8b77-7930f660d990",
  "token_type": "bearer",
  "refresh_token": "ce23c924-3f28-456c-a112-b5d02162f10c",
  "expires_in": 37364,
  "scope": "read"
}

In case of wrong authorization code, Oauth server replies error.

1
2
3
4
{
  "error": "invalid_grant",
  "error_description": "Invalid authorization code: t7olD"
}

Security: Note that the service should require apps to pre-register their redirect URIs. Or else there will be a mismatch.

Browser-Based Apps & Mobile Apps:
Browser-based apps run entirely in the browser after loading the source code from a web page. Since the entire source code is available to the browser, they cannot maintain the confidentiality of their client secret, so the secret is not used in this case.

Authorization request:

http://localhost:8080/oauth2/oauth/authorize?response_type=token&client_id=easylocate&redirect_uri=http://localhost:8080/web&scope=read

After accepting the access. the page will be redirected to the redirect uri with the token.

http://localhost:8080/web/#access_token=372c3458-4067-4b0b-8b77-7930f660d990&token_type=bearer&expires_in=37026

That's it, there's no other steps! At this point, some Javascript code can pull out the access token from the fragment (the part after the #) and begin making API requests.

If there is an error, you will instead receive an error in the URI fragment, such as:

http://localhost:8080/web/#error=invalid_scope&error_description=Invalid+scope%3A+rea&scope=read+write

Password Based:
OAuth 2 also provides a password grant type which can be used to exchange a username and password for an access token directly. Since this obviously requires the application to collect the user's password, it should only be used by apps created by the service itself. For example, the native Twitter app could use this grant type to log in on mobile or desktop apps.

To use the password grant type, simply make a POST request like the following. I am using the curl tool to demonstrate the POST request. You may use any rest client.

curl -i -X POST -d "client_id=easylocate&grant_type=password&username=admin&password=admin&client_secret=secret" http://localhost:8080/oauth2/oauth/token

The server will get back with the token

1
2
3
4
5
6
7
{
  "access_token": "4e56e9ec-2f8e-46b4-88b1-5d06847909ad",
  "token_type": "bearer",
  "refresh_token": "7e14c979-7039-49d0-9c5d-854efe7f5b38",
  "expires_in": 36133,
  "scope": "read write"
}

Client Credential Based:
Client credentals based authorization is used for server to server application access. I am just showing a POST request using the curl tool.

curl -i -X POST -d "client_id=easylocate&grant_type=client_credentials&client_secret=secret" http://localhost:8080/oauth2/oauth/token

Server will get back with the access token

1
2
3
4
5
6
{
  "access_token": "9cd23bef-ae56-46b0-82f5-b9a8f78da569",
  "token_type": "bearer",
  "expires_in": 43199,
  "scope": "read write"
}

Accessing Resources:

Once you are been authenticated and got the access token, you can provide the the access token to access the protected resources.

1
curl -i -H "Authorization: Bearer 4e56e9ec-2f8e-46b4-88b1-5d06847909ad" http://localhost:8080/oauth2/users

I have created my OAuth2 server/provider using spring oauth2 api. I will be creating deferent types of clients and services to demonstrate more. I am not that good in mobile app development, appreciate if some one fork the project and add sample mobile applications. I have shared the code at GitHub.

Resources:

Tuesday, December 25, 2012

@RequestParam - JAX-RS

For this tutorial, I will be using the workspace created in my tutorial RESTful Web Service with Spring 3.1. So I suggest you to read RESTful Web Service with Spring 3.1, before start reading this tutorial. In JAX-RS, you can use @RequestParam annotation to inject URI query parameter into Java method and in this tutorial I will demonstrate how to use this using Spring 3.1.0.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package com.techiekernel.service;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.techiekernel.model.FooBar;
import com.techiekernel.model.FooBarSet;

/**
 * This exmaple has been created to demonstrate the @RequestParam for JAX-RS
 * 
 * @author satish
 * 
 */
@Controller
@RequestMapping("/foobaresample3")
public class FooBarServiceExample3 {

 static FooBarSet fooBarSet;

 static {
  fooBarSet = new FooBarSet();
  FooBar foobar = null;
  for (int i = 0; i < 10; i++) {
   foobar = new FooBar(i, "TechieKernel" + i);
   fooBarSet.add(foobar);
  }
 }

 @RequestMapping(method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
   "application/json", "application/xml" })
 @ResponseBody
 public FooBar getFoobar(@RequestParam int foobarId) {
  for (FooBar foobar : fooBarSet) {
   if (foobar.getId() == foobarId)
    return foobar;
  }
  return null;
 }
 
 @RequestMapping(value= "/name" ,method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
   "application/json", "application/xml" })
 @ResponseBody
 public FooBar getFoobar(@RequestParam int foobarId, @RequestParam String name) {
  for (FooBar foobar : fooBarSet) {
   if (foobar.getId() == foobarId && foobar.getName().equalsIgnoreCase(name))
    return foobar;
  }
  return null;
 }
}

Now it is time to test the web service for different inputs..

1
2
3
curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample3?foobarId=1" -X GET 

curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample3/name?foobarId=1&name=techiekernel1" -X GET

I have deployed the application in cloud space and it is available for you to test. You can use the above URLs to test from your side..

Source Code:

You can pull the source code from GitHub

@PathParam - JAX-RS

For this tutorial, I will be using the workspace created in my tutorial RESTful Web Service with Spring 3.1. So I suggest you to read RESTful Web Service with Spring 3.1, before start reading this tutorial. In JAX-RS, you can use @PathParam to inject the value of URI parameter that defined in @Path expression, into Java method and in this tutorial I will demonstrate how to use this using Spring 3.1.0


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package com.techiekernel.service;

import java.util.Iterator;

import org.springframework.stereotype.Controller;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.techiekernel.model.FooBar;
import com.techiekernel.model.FooBarSet;

/**
 * This exmaple has been created to demonstrate the @path for JAX-RS
 * 
 * @author satish
 * 
 */
@Controller
@RequestMapping("/foobaresample2")
public class FooBarServiceExample2 {

  static FooBarSet fooBarSet;

  static {
    fooBarSet = new FooBarSet();
    FooBar foobar = null;
    for (int i = 0; i < 10; i++) {
      foobar = new FooBar(i, "TechieKernel" + i);
      fooBarSet.add(foobar);
    }
  }

  /**
   * Normal URI Mapping with parameter
   * @param foobarId
   * @return
   */
  @RequestMapping(value = "/{foobarId}", method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
      "application/json", "application/xml" })
  @ResponseBody
  public FooBar getFoobar(@PathVariable int foobarId) {
    for (FooBar foobar : fooBarSet) {
      if (foobar.getId() == foobarId)
        return foobar;
    }
    return null;
  }
  
  @RequestMapping(value = "/{foobarId}/{name}", method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
      "application/json", "application/xml" })
  @ResponseBody
  public FooBar getFoobar(@PathVariable int foobarId, @PathVariable String name) {
    for (FooBar foobar : fooBarSet) {
      if (foobar.getId() == foobarId && foobar.getName().equalsIgnoreCase(name))
        return foobar;
    }
    return null;
  }
}

Now it is time to test the web service for different inputs..

1
2
3
curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample2/1" -X GET 

curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample2/1/techiekernel1" -X GET

I have deployed the application in cloud space and it is available for you to test. You can use the above URLs to test from your side..

Source Code:

You can pull the source code from GitHub

@Path - JAX-RS

For this tutorial, I will be using the workspace created in my tutorial RESTful Web Service with Spring 3.1. So I suggest you to read RESTful Web Service with Spring 3.1, before start reading this tutorial. In JAX-RS, you can use @Path to bind URI pattern to a Java method and in this tutorial I will demonstrate how to use this using Spring 3.1.0. In this example, I will show you how to write normal URI mapping, URI mapping with parameter and also show you the use of regular expression to validate the inputs.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package com.techiekernel.service;

import java.util.Iterator;

import org.springframework.stereotype.Controller;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.techiekernel.model.FooBar;
import com.techiekernel.model.FooBarSet;

/**
 * This exmaple has been created to demonstrate the @path for JAX-RS
 * 
 * @author satish
 * 
 */
@Controller
@RequestMapping("/foobaresample1")
public class FooBarServiceExample1 {

  static FooBarSet fooBarSet;

  static {
    fooBarSet = new FooBarSet();
    FooBar foobar = null;
    for (int i = 0; i < 10; i++) {
      foobar = new FooBar(i, "TechieKernel" + i);
      fooBarSet.add(foobar);
    }
  }

  /**
   * Normal URI Mapping with parameter
   * @param foobarId
   * @return
   */
  @RequestMapping(value = "/{foobarId}", method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
      "application/json", "application/xml" })
  @ResponseBody
  public FooBar getFoobar(@PathVariable int foobarId) {
    for (FooBar foobar : fooBarSet) {
      if (foobar.getId() == foobarId)
        return foobar;
    }
    return null;
  }

  /**
   * Normal URI Mapping
   * @return
   */
  @RequestMapping(method = RequestMethod.GET, headers = "Accept=application/xml, application/json", produces = {
      "application/json", "application/xml" })
  @ResponseBody
  public FooBarSet getFoobars() {
    return fooBarSet;
  }

  /**
   * URI mapping and regular expression
   * @param foobarId
   * @return
   */
  @RequestMapping("/id/{foobarId:\\d+}")
  @ResponseBody
  public FooBar getFoobarById(@PathVariable int foobarId) {
    for (FooBar foobar : fooBarSet) {
      if (foobar.getId() == foobarId)
        return foobar;
    }
    return null;
  }

  /**
   * URI mapping and regular expression
   * @param foobarName
   * @return
   */
  @RequestMapping("/name/{foobarName:[a-zA-Z_0-9]+}")
  @ResponseBody
  public FooBar getFoobarByName(@PathVariable String foobarName) {
    for (FooBar foobar : fooBarSet) {
      if (foobar.getName().equalsIgnoreCase(foobarName))
        return foobar;
    }
    return null;
  }
}

Now it is time to test the web service for different inputs..


1
2
3
4
5
6
7
curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample1/" -X GET 

curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample1/1" -X GET

curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample1/id/1" -X GET

curl -i "http://springmvc-rest.cloudfoundry.com/foobaresample1/name/techiekernel1" -X GET


If the inputs will be failed as per the regular expression, you will get a HTTP 404 response. I have deployed the application in cloud space and it is available for you to test. You can use the above URL to test from your side..

Source Code:

You can pull the source code from GitHub

Thursday, December 20, 2012

List and Set implementations are not marshalled with JAXB?

Snap of code what I was doing:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@XmlRootElement
public class FooBar {
  public String title;
  public FooBar(String t) {
    this.title = t;
  }
}
@XmlRootElement
@XmlSeeAlso({FooBar.class})
public class FooBarSet extends ArrayList<FooBar> {
  public FooBarSet() {
    this.add(new FooBar("FooBar"));
  }
}

Then, while marshaling:

1
2
3
JAXBContext ctx = JAXBContext.newInstance(FooBar.class);
Marshaller msh = ctx.createMarshaller();
msh.marshal(new FooBar(), System.out);

This is what I saw:

1
2
<?xml version="1.0"?>
<FooBarSet/>

Why I am not getting the list of FooBar ??????

The Answer is the elements to be marshalled must be public, or have the @XMLElement anotation. The ArrayList class and my class FooBarSet do not match any of these rules. I have to define a method to offer the FooBar values, and anotate it.


So the modified class is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@XmlRootElement
@XmlSeeAlso({FooBar.class})
public class FooBarSet extends ArrayList<FooBar> {
  public FooBarSet() {
    this.add(new FooBar("FooBar"));
  }

  @XmlElement(name = "FooBar")
 public List<FooBar> getFooBarSet() {
     return this;
 }
}

Now the output:

1
2
3
4
5
<fooBarSet>
 <FooBar>
  <title>FooBar</title>
 </FooBar>
</fooBarSet>

Wednesday, December 19, 2012

Architecture of a Modern Web Application

Some time in my career, I was working in a RFID tracking system and I was designing the real time event notification web application for that, I was using Google Map API to show the activities on a particular facility/ floor map, where RFID sensors were mounted. I tried lot of techniques and APIs and finally, I could able to push messages to the clients.. Now the question is “how did I do that???” It was a long back and at that time there were very few APIs available, which were providing server side pushing. I took the DWR Reverse AJAX and in a layman’s way to explain, clients were subscribing for the messages for a particular criteria with the server. But  to be very honest, let’s say after some 7 - 8 hours, the browsers used to be almost inactive and user couldn't even do anything, may be because of memory. Few years back, when I started using the TweetDesk a Chrome app, I realized it uses the same technique to get the messages and it is damn good and efficient. I was always very eager to know what exactly and how they are doing that.. Today facebook.com, amazon.com are very popular and they also follow some kind of the same approach… One more thing, I noticed with firebug, that for most of the operations, there is a AJAX call and only the data is flowing in terms of JSON/ text; there is no form submit to any action.. And the biggest advantage is that they are user-friendly, interactive and kick ass fast.
Long time back, there was a standard approach for all the web applications. Most of the cases, everyone was following the MVC or MVC 2 design with a service layer and DAO layer. And those days one application means a huge and fat war or an ear. Companies were using heavy application containers like weblogic and jboss, with lot of dependency. It was like a fat ugly man needs an extremely customized environment to live his life, or else he will die in no time. After that some time back companies were moving towards the SOA. A big application was further divided in to small chunks and they were interacting with each other by messages.. SOAP based web services were very powerful technique to interact with services, but now the world is going towards RESTful web services as it is simple and easy to develop. With the SOA the applications were really simple and maintaining a low cohesion. The applications used to be light weight and the servers used to be healthy all the time. But still there was a room for improvement, why the UI elements are getting streamed from server and consuming a major band width of the network.. In order to answer this question, designers moved the MVC to front-end and back end is now only the services.. If you are a back-end developer, you will be thinking, how it is possible and may be feeling insecurity about your job.. But believe me, now it is time to adapt the so called ugly JavaScript to develop beautiful and interactive applications. As the MVC concerned with front-end, there are lot of JavaScript APIs are available. So I can now conclude something that all the modern web sites like facebook.com, amazon.com and some Chrome apps like TweetDesk are using the same concept.

I was part of the Spring One Conference India Dec, 2012 and there the things were got cleared with a talk from Jeremy Grelle. Jeremy is a Spring Source Staff Engineer and one of the open source contributor for many projects.. Next, I am going give a picture of what Jeremy presented in that conference. In this article, I will take you to “Where we’ve been”, “Where we’re going” and “How we will get there”.

Static Web Pages with HTML:

When the www started, all the pages were static and served from server. There used to be separate page for separate data. The world was with URL and links.
  • Pros:
  1. Low Computation: As they are static, there is hardly any computations from a programmer point of view.
  2. Highly Cacheable: They are very easy and perfect candidate for caching.
  3. Highly Indexable: They are easily get indexed by leading search engines for their static data content.
  • Cons:
  1. Hard to Update: If you need to change anything, you have to go to the HTML file and change that  and a developer is required for the same.. Bad dependency; Isn’t it?
  2. No Personalization: You can’t have something which you really looking for.. You have to see a generic view, even if you are not bothered about the rest 90% of the content.
  3. Poor UI: UI used to be poor with bad response from server.
Dynamic Web Pages with Scripting:

After some time, when the requirements and needs changed, pages were dynamic on user inputs. Users could able to get dynamic data on the same page.
  • Pros:
  1. Dynamic: Now the pages went dynamic depending on the user inputs and different other criteria’s.
  2. Selectively Cacheable : As the pages were dynamic, so dynamic contents were not applicable for caching.
  3. Highly Indexable: They were also well indexed by the search engines.
  4. Personalization: As the user is able to provide inputs, they could able get the user a view that user is looking for.
  • Cons:

  1. High Computation: To make a page dynamic, it required a computation overhead in different manner. Lot of scripting technologies had been adopted to create dynamic web pages.
  2. Hard to Create: Same page different data representations made very difficult for the browser to cache.
  3. Poor UI: Even though the pages went dynamic, the UI used to be poor, less interactive and less responsive.
Dynamic Pages with JavaScript:

Introduction to JavaScript to the web development made the pages bit more interactive and responsive. Developers started using JavaScript for basic form validation and other activities in DOM.
  • Pros:
  1. Enhanced Usability: With the help of JavaScript, developers could able to give a good response to some of the actions, where there is no back-end data involvement.
  2. Reduced Trips to Server: As most of the validations went front-end, there was a network band width save. Developers eliminated the validation calls from server-side.
  • Cons:

  1. Abused Annoyed Users: As JavaScript is a client-side technology, lot of users started misusing that.
  2. Business Logic Often Implemented Twice: With reference to validation, sometimes the validation logic and other business logic were implemented both at client side and server-side.
AJAX – Web 2.0:

Google came up with a new approach of interacting with server. With the help of Web 2.0, Google launched Map API and Gmail. Server interaction made possible both synchronously and asynchronously with out submitting an action to the server.
  • Pros:
  1. Killer UI: With the introduction of AJAX, the look and feel of the UI went out of the world with lot of UI components.
  2. More Responsive Apps: User were able to interact with application easily without much effort and as with AJAX only the data used to be get streamed the via network, the response for a particular action used to be very fast.
  • Cons:
  1. Difficult to Cache: As there are hardly any static content, at least, it was very difficult to cache the whole page.
  2. Impossible to Index: With dynamic data, indexing a page for a search engine was quite impossible.
  3. Required JavaScript: With introduction to AJAX, there was a need for skilled UI developers in industry.
Unobtrusive JavaScript:

After some time, JavaScript proved to be a clumsy language unsuitable for serious application development. This has been largely due to inconsistent implementations of the language itself and the Document Object Model in various browsers, and the wide spread use of buggy copy-and-paste code. Run time errors were so common (and so difficult to debug), that few programmers even tried to fix them, as long as the script behaved more or less the way it was supposed to, scripts often failed completely in some browsers. At that moment the industry was again fallen back to the basic HTML way of presenting the view. And this is the time when some MVC 2 frameworks were evolved. Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, its basic principles are generally understood to include Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation, best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability) and progressive enhancement to support user agents that may not support advanced JavaScript functionality.
Architecture of a Old Web Application
Architecture of a Old Web Application
  • Pros:
  1. Wider Compatibility: As again the UI started coming from server as a HTML, it has a better compatibility with wider range of browsers.
  2. Just as Rich UI: As the UI was getting streamed from server, it was a raw HTML with rich components.
  3. Just as Responsive: As designers were still stick to JavaScript for some non-business related activities, the response of some activities were still good.
  • Cons:
  1. Higher development cost: Generally to make a simple application, now you need a big team with developers, architects and some managers to make sure everything happening as per the plan, which is a time consuming process..
  2. Requires thoughtful engineering: As you can’t make changes to the final product as it would have lot of dependencies and you never know one change will break how many other things. So you have to have a very good design looking at the future scope.
Client Side Applications:

Over the time designers noticed one common thing in all approaches, i.e. there are unnecessary data like HTML are also flowing from server to client and that is a major problem for slowness of the application. Now there is a significant contribution to the JavaScript APIs from the open source contributors around the world.  Business logic is no more part of the server, all moved to the front-end along with the MVC. Application state was started storing in front-end, only the permanent state has been stored in back-end. As there are no more MVC and business logic in backend, the back-end part of the applications are turning to services. SOA also has a greater impact on the current design, instead of thick  fat web application, it is getting divided in to smaller chunks to make the back-end healthy and independent with each other. Introduction of RESTful web services made front-end directly interact with services. Recently Google announced the Chrome Laptops, which are totally on the browser, so looking at the current processor architecture and memory capacity of personal computers and laptops, the browser is capable of doing complex computations and also capable of storing significant data required for a particular page.
Architecture of a Modern Web Application
Architecture of a Modern Web Application
  • Pros:
  1. Reduce server workload : As the MVC and business logic is moving to the client side, there is minimal computation at the server side, may be the CRUD operation on a object. And again with service call only the data is flowing in network, so there is a significant save in network band width.
  2. Application is highly cacheable: As the business logic and MVC is moving to front-end, front-end is making use of system resources to store data.
  3. Extremely rich UI: As I explained above, there are lot of contribution to some of the open source projects and there are lot of light weight JavaScript APIs are available now.
  • Cons:
  1. Content not indexable: As the content is 100% dynamic, there is no scope for the search engines to index the page.
  2. JavaScript: Now it is the time to learn JavaScript and start using that. Lot of companies are recruiting dedicated UI developers.
  3. Often requires a modern browser: Along with JavaScript, there are some other technologies like HTML5 and CSS3 are also adopted with context to the new architecture.. So some time user need a updated browser to use the application.
So now the web application is moving from server side application to smart clients and services. Simple templates can render on client, JSP will no more render the client side. Some of the modern techniques like web socket(for subscribing messages from server), web worker(worker and job model like Executor Framework) and DOM event will be adopted for the web application to make it more responsive and interactive.

With the current configuration standard of a personal computer or a laptop, this approach is proving it’s capability.. As discussed about some of the web sites like facebook.com, amazon.com, ebay.com etc. and some of the browser apps like TweetDesk, RSS Readers etc. are very popular for their performance.

The definition of back-end and front end are shifting to front-end != client and back-end != server. There are lot technologies are evolving and there is a huge support from the open source contributors. Now it is the time for a java developers to take interest in JavaScript and start learning the new technologies like css3, HTML5 with some JavaScript libraries like jQuery, s2js, cujo.js, scripted, SockJS, monty-hall, monty-hall-ui etc.

Even though, I have drafted this article for you guys, I want to give the credit to Jeremy Grelle, SpringSource Staff Engineer and open source contributor. I would also like to thank VMWare for inviting me to SpringOne India 2012 Conference.

I will soon be developing some small applications using this architecture and will probably deploy those in the Cloud, so that you people can play around that.

 
Design by TECHIE KERNEL | Bloggerized by Satish Kumar - Java Developer | Satish Kumar, Travelogue, Photography