AjaxifyingLegacyWeb

Applica2ons

AnasMughalanas.mughal@bluenog.com

Topics

•  Overview:LegacyvsRIA•  DataFormats

•  Tools•  Prerequisites•  DesignApproach•  Demo

•  QA

Web1.0Applica2ons

•  Pagesarerenderedserver‐side•  Client‐sideisstateless•  Server‐sideMVC

•  Full‐pagerefresh

Browser

RenderPagesMVCFramework

Server

HTML/Images/CSS

Get/PostRequest

AjaxApplica2ons

•  Statefulclient•  Client‐sidesession•  Server‐sideprovidesdataservices•  Client‐sideMVCframework

•  Nofull‐pagerefresh

Browser

AjaxDataServices

Server

XML/JSON

SuggestedApproach

•  Pagesarerenderedserver‐side•  Server‐sideMVC

•  Ajaxcontrols/grids/formsonclient‐side

•  Exchangedatawithserver‐side

Browser

RenderPagesMVCFramework

Server

HTML/Images/CSS

Get/PostRequest

DataExchange AjaxDataServices

SuggestedModel

Client

DynamicPageRender

AjaxDataServices

2me

DataFormats

•  JSON(JavaScriptObjectNota2on)–  Na2veJavaScriptstructure.–  Lightweightdata‐interchangeformat

–  Retainstypeinforma2on

•  XML–  Suitedfordatatransforma2onneeds.

–  ParsingisCPUintensive.–  DOMmayrequirelargememory

onclient‐side.

–  Doesnotretaintypeinforma2on.

{"names": ["Anna Maria", "Fitzwilliam", "Maurice"], "count": 3 }

<xmldata> <names> <name>Anna Maria</name> <name>Fitzwilliam</name> <name>Maurice</name> </names> <count>3</count> <xmldata>

JSON

•  JSONisbuiltontwostructures:–  Acollec2onofname/valuepairs.

–  Anorderedlistofvalues.

JSONSupportinFrameworks

•  SpringMVCFramework–  Spring‐jsonView(h\p://spring‐json.sourceforge.net)

•  Setdatainthemodelandpasscontroltothespring‐jsonview•  Supports:SOJOandJSON‐lib

•  StrutsFramework–  Struts2JSONPlugin(h\p://2nyurl.com/b87ndu)

•  Serializesen2reac2onclassvariables•  Providesincomingrequestinterceptor•  Example:h\p://localhost:9090/struts2json/

•  Buildyourown–  ConvertdatastructuresusingappropriateJSONlibrary–  Setcontent‐typeto“applica2on/json”

Tools

•  JSON–  Serializer:SOJO,json‐lib(Forotherlibs:h\p://json.org)–  Forma\er:h\p://jsonforma\er.curiousconcept.com/

–  Visualizer:h\p://chris.photobooks.com/json/default.htm

–  Validator:www.jsonlint.com,www.jslint.com

–  Editor,Minifier,Forma\er,TreeView:jsoneditor.appspot.com

•  JavascriptEditor–  SPKetEclipsePlugin(www.spket.com)

•  JavascriptDebugger:Firebug•  HTMLValidator

Prerequisites

•  CleanyourHTML‐‐HTMLValidator•  SelectappropriateJSONlibrary:(h\p://json.org)– SOJO–  JSON‐LIB

•  SelectappropriateAjaxframework:– ExtJS– YahooUI– GWT

DesignApproach

•  IncorporateAjaxdataserviceslayer•  IntegrateAjaxlayerwithbusinessdelegates

BusinessDelegate

DAO

ViewRenderServices

AjaxDataServices

XML/JSONOverHTTP

HTTP/HTML

Demo&CodeWalk‐thru

Q&A

AnasMughalanas.mughal@bluenog.com