Why AJAX, JSON, and Client-Side Templates are the new Web.

1. AJAX, JSON, AND
CLIENT SIDE TEMPLATES

2. AJAX
• Asynchronous Javascript And XML
• HTML and CSS
• Document Object Model
• XML and XSLT
• XMLHttpRequest
• JavaScript

3. Web 1.0
Example: www.ebay.ca

4. Web 2.0!
Example: dhtmlxScheduler

5. JSON
• JavaScript Object Notation
• Lightweight data-interchange format
• Easy for humans to read and write
• Easy for machines to parse and generate

6. JSON
• Built on two structures:
• Name value pairs (aka object)
{ Name: “Value”, Name2: 2, Name3: true }
• Ordered list of values (aka array)
[ “value”, 2, true ]
• Combination thereof
[ { Name: “Object 1”, Numbers: [1,2,3] },
{ Name: “Object 2”, Numbers: [4,5,6] } ]
• Virtually all languages support these structures

7. JSON vs XML

8. JSON vs XML

9. Old HTML Way
Page,
ViewPerPage, ID
Search,
Name Search,
SKU Search, Price
From,
Price To, Position
From, Position To

10. AJAX Partial Rendering Way
ID Search,
Name Search,
SKU Search,
Price From,
Price To, Position
From, Position To

11. Client Side Templates
GET /Products?Page=2
[ {Product}, {Product}, {Product} ]

12. Client Side Templates
• Pros
• Separation of data and layout
• Faster page load
• No wait time on server, simply serving up a HTML document
• Less content
• Less network traffic
• Smaller requests and responses
• Server doesn’t have to worry about generating HTML
• Able to maintain page state in JavaScript if needed
• Lots of opportunities to cache

13. Client Side Templates
• Cons
• Initial page load is essentially empty
• Bad idea for pages you want indexed by a search engine
• JavaScript heavy
• No canned controls
• Async can be tough on groups of objects or sequential operations

14. Example!
http://localhost:8080/Playlists

15. Questions!?