AJAX, JSON, ANDCLIENT SIDE TEMPLATES
AJAX• Asynchronous Javascript And XML  • HTML and CSS  • Document Object Model  • XML and XSLT  • XMLHttpRequest  • JavaSc...
Web 1.0          Example: www.ebay.ca
Web 2.0!           Example: dhtmlxScheduler
JSON• JavaScript Object Notation   • Lightweight data-interchange format   • Easy for humans to read and write   • Easy fo...
JSON• Built on two structures:  • Name value pairs (aka object)       { Name: “Value”, Name2: 2, Name3: true }  • Ordered ...
JSON vs XML
JSON vs XML
Old HTML Way               Page,               ViewPerPage, ID               Search,               Name Search,           ...
AJAX Partial Rendering Way                ID Search,                Name Search,                SKU Search,               ...
Client Side Templates                                         GET /Products?Page=2   [ {Product}, {Product}, {Product} ]
Client Side Templates• Pros  • Separation of data and layout  • Faster page load    • No wait time on server, simply servi...
Client Side Templates• Cons  • Initial page load is essentially empty     • Bad idea for pages you want indexed by a searc...
Example!           http://localhost:8080/Playlists
Questions!?
Upcoming SlideShare
Loading in …5
×

AJAX, JSON, and Client-Side Templates

2,296 views
2,125 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,296
On SlideShare
0
From Embeds
0
Number of Embeds
83
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • DOM – represents the document as an object,used to create and manipulate elements on a webpageXML – initial standard for transmitting data to and from a web serviceXMLHttpRequest – component that allows a browser to send a web request independent of a page request
  • The blanks on the client side represent page loading, waiting on the server, and a locked UISystem processing includes processing the request input (viewstate, cookies, authentication, get & post vars), any database or other resource calls necessary to create the page, and the actual generation of the HTML to send to the client
  • Ajax allows a consistent and responsive user experienceAjax engine runs on a separate thread from the UI and sends and receives data in the backgroundServer is now only responsible for processing input, making any resource calls it needs, and sending data as output
  • Example result from twitter search APIExtra “fat” in XML:Schema definitionsTag syntaxEscaped XML characters
  • Same result from twitter search APIMorereadable, no unnecessary content
  • The entire form’s content is transmitted every request, and the entire page’s content is rendered on the server and transmitted every response
  • Only the required fields (or at least a subset of all the fields) is sent in the request, and only the affected area(s) of the page are rendered and sent in the response
  • Initially, the server only sends you the static controls for a page, as well as templates for how to represent the data it’s about to receiveThe browser, once loaded, makes a request for the data to displayThe server processes the request and sends back only the data requestedThe browser combines the data from the server with the client-side template to build the rest of the webpage
  • Client Side Templates is a good idea for dynamic, task-driven web applications. It’s not a good idea for blogs, corporate websites, or anything that is mostly static content that needs to be indexed.
  • Start website with debug attached to slow down requestsPoint out how fast initial page loaded (net panel)Show how we’re making three API calls after the page loadsDemonstrate client side template (view source), and then data received from API (catalog call), and finally how it looks on pageShow how categories works now that products are loaded locallyShow how loading a playlist worksShow how an add operation works (drag product to playlist)Show how a bulk operation might work
  • AJAX, JSON, and Client-Side Templates

    1. 1. AJAX, JSON, ANDCLIENT SIDE TEMPLATES
    2. 2. AJAX• Asynchronous Javascript And XML • HTML and CSS • Document Object Model • XML and XSLT • XMLHttpRequest • JavaScript
    3. 3. Web 1.0 Example: www.ebay.ca
    4. 4. Web 2.0! Example: dhtmlxScheduler
    5. 5. JSON• JavaScript Object Notation • Lightweight data-interchange format • Easy for humans to read and write • Easy for machines to parse and generate
    6. 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. 7. JSON vs XML
    8. 8. JSON vs XML
    9. 9. Old HTML Way Page, ViewPerPage, ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
    10. 10. AJAX Partial Rendering Way ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
    11. 11. Client Side Templates GET /Products?Page=2 [ {Product}, {Product}, {Product} ]
    12. 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. 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. 14. Example! http://localhost:8080/Playlists
    15. 15. Questions!?

    ×