Ajaxifying

 Legacy

 Web

 Applica ons

  • 449 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
449
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ajaxifying

 Legacy

 Web

 Applica2ons
 Anas
Mughal
 anas.mughal@bluenog.com

  • 2. Topics
 •  Overview:
Legacy
vs
RIA
 •  Data
Formats
 •  Tools
 •  Prerequisites
 •  Design
Approach
 •  Demo
 •  QA

  • 3. Web
1.0
Applica2ons
 •  Pages
are
rendered
server‐side
 •  Client‐side
is
stateless
 •  Server‐side
MVC

 •  Full‐page
refresh
 Get/Post
Request
 Render
Pages
 HTML/Images/CSS
 MVC
Framework
 Browser
 Server

  • 4. Ajax
Applica2ons
 •  Stateful
client
 •  Client‐side
session
 •  Server‐side
provides
data
services
 •  Client‐side
MVC
framework
 •  No
full‐page
refresh
 XML/JSON
 Ajax
Data
Services
 Browser
 Server

  • 5. Suggested
Approach
 •  Pages
are
rendered
server‐side
 •  Server‐side
MVC

 •  Ajax
controls/grids/forms
on
client‐side
 •  Exchange
data
with
server‐side
 Get/Post
Request
 Render
Pages
 HTML/Images/CSS
 MVC
Framework
 Browser
 Data
Exchange
 Ajax
Data
Services
 Server

  • 6. Client
 2me
 Ajax
Data
Services
 Dynamic
Page
Render
 Suggested
Model

  • 7. Data
Formats
 •  JSON
(JavaScript
Object
Nota2on)
 –  Na2ve
JavaScript
structure.
 –  Lightweight
data‐interchange
format
 –  Retains
type
informa2on
 {"names": ["Anna Maria", "Fitzwilliam", "Maurice"], "count": 3 } •  XML
 –  Suited
for
data
transforma2on
needs.
 –  Parsing
is
CPU
intensive.
 <xmldata> <names> –  DOM
may
require
large
memory

 <name>Anna Maria</name> <name>Fitzwilliam</name> on
client‐side.
 <name>Maurice</name> –  Does
not
retain
type
informa2on.
 </names> <count>3</count> <xmldata>
  • 8. JSON
 •  JSON
is
built
on
two
structures:
 –  A
collec2on
of
name/value
pairs.

 –  An
ordered
list
of
values.


  • 9. JSON
Support
in
Frameworks
 •  Spring
MVC
Framework
 –  Spring‐json
View
(hp://spring‐json.sourceforge.net)
 •  Set
data
in
the
model
and
pass
control
to
the
spring‐json
view
 •  Supports:
SOJO
and
JSON‐lib
 •  Struts
Framework
 –  Struts
2
JSON
Plugin
(hp://2nyurl.com/b87ndu)
 •  Serializes
en2re
ac2on
class
variables
 •  Provides
incoming
request
interceptor
 •  Example:
hp://localhost:9090/struts2json/
 •  Build
your
own
 –  Convert
data
structures
using
appropriate
JSON
library
 –  Set
content‐type
to
“applica2on/json”

  • 10. Tools
 •  JSON
 –  Serializer:
SOJO,
json‐lib

(For
other
libs:
hp://json.org)
 –  Formaer:
hp://jsonformaer.curiousconcept.com/
 –  Visualizer:
hp://chris.photobooks.com/json/default.htm
 –  Validator:
www.jsonlint.com
,

www.jslint.com
 –  Editor,
Minifier,
Formaer,
Tree
View:
jsoneditor.appspot.com
 •  Javascript
Editor
 –  SPKet
Eclipse
Plugin





(www.spket.com)
 •  Javascript
Debugger:
Firebug
 •  HTML
Validator

  • 11. Prerequisites
 •  Clean
your
HTML
‐‐
HTML
Validator
 •  Select
appropriate
JSON
library:

(hp://json.org)
 –  SOJO
 –  JSON‐LIB
 •  Select
appropriate
Ajax
framework:
 –  ExtJS
 –  Yahoo
UI
 –  GWT

  • 12. Design
Approach
 •  Incorporate
Ajax
data
services
layer
 •  Integrate
Ajax
layer
with
business
delegates
 View
Render
 HTTP/HTML
 Services
 Business
 DAO
 Delegate
 XML/JSON
 Ajax
Data
 Over
HTTP
 Services

  • 13. Demo
&

Code
Walk‐thru

  • 14. Q
&
A
 Anas
Mughal
 anas.mughal@bluenog.com