ajaxifying legacy web applica ons
TRANSCRIPT
![Page 2: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/2.jpg)
Topics
• Overview:LegacyvsRIA• DataFormats
• Tools• Prerequisites• DesignApproach• Demo
• QA
![Page 3: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/3.jpg)
Web1.0Applica2ons
• Pagesarerenderedserver‐side• Client‐sideisstateless• Server‐sideMVC
• Full‐pagerefresh
Browser
RenderPagesMVCFramework
Server
HTML/Images/CSS
Get/PostRequest
![Page 4: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/4.jpg)
AjaxApplica2ons
• Statefulclient• Client‐sidesession• Server‐sideprovidesdataservices• Client‐sideMVCframework
• Nofull‐pagerefresh
Browser
AjaxDataServices
Server
XML/JSON
![Page 5: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/5.jpg)
SuggestedApproach
• Pagesarerenderedserver‐side• Server‐sideMVC
• Ajaxcontrols/grids/formsonclient‐side
• Exchangedatawithserver‐side
Browser
RenderPagesMVCFramework
Server
HTML/Images/CSS
Get/PostRequest
DataExchange AjaxDataServices
![Page 6: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/6.jpg)
SuggestedModel
Client
DynamicPageRender
AjaxDataServices
2me
![Page 7: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/7.jpg)
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>
![Page 8: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/8.jpg)
JSON
• JSONisbuiltontwostructures:– Acollec2onofname/valuepairs.
– Anorderedlistofvalues.
![Page 9: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/9.jpg)
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”
![Page 10: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/10.jpg)
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
![Page 11: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/11.jpg)
Prerequisites
• CleanyourHTML‐‐HTMLValidator• SelectappropriateJSONlibrary:(h\p://json.org)– SOJO– JSON‐LIB
• SelectappropriateAjaxframework:– ExtJS– YahooUI– GWT
![Page 12: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/12.jpg)
DesignApproach
• IncorporateAjaxdataserviceslayer• IntegrateAjaxlayerwithbusinessdelegates
BusinessDelegate
DAO
ViewRenderServices
AjaxDataServices
XML/JSONOverHTTP
HTTP/HTML
![Page 13: Ajaxifying Legacy Web Applica ons](https://reader033.vdocuments.site/reader033/viewer/2022052906/558d3aa1d8b42a5f688b4693/html5/thumbnails/13.jpg)
Demo&CodeWalk‐thru