Ajax & JSON

Transcript

1. AJAX Data Transfer Client-Server Apps - The Easy Way Saturday, February 4, 2012
2. Agenda JSON Modify DOM by Server Data Web Sockets Saturday, February 4, 2012
3. Communication Different systems use different data formats Each platform has its own logic Need to decide on a language or protocol Saturday, February 4, 2012
4. Requirements What do we need from such a protocol ? Saturday, February 4, 2012
5. Requirements Wide server support Wide client support Easy to debug Pass firewalls Saturday, February 4, 2012
6. Meet JSON Saturday, February 4, 2012
7. JSON Stands for JavaScript Object Notation Text based Widely Supported Simple { name : “Bob”, age : 19, image : “zombie.png” } Saturday, February 4, 2012
8. JSON Stands for JavaScript Object Notation Text based Widely Supported Simple { name : “Bob”, age : 19, image : “zombie.png” } Complete Ruleset: http://www.json.org/ Saturday, February 4, 2012
9. JSON Values Simple Values Arrays Nested Hashes { name : “Bob”, age : 19, image : “zombie.png” } KEY VALUE Saturday, February 4, 2012
10. Simple Values “text” number true false null Saturday, February 4, 2012
11. Arrays A list of comma separated values enclosed in brackets [1, 2, 3] [“a”, “b”, “c”] [1, 2, [“a”, “b”], “hello”, true] Saturday, February 4, 2012
12. Objects A nested data object can also act as a value Example: { foo : { a : 1, b : 2 } } Saturday, February 4, 2012
13. JSON - Getting Better No need to write JSON by hand Here’s a partial list of languages which produce JSON objects for you: ASP, ActionScript, BlitzMax, C, C++, C#, Clojure, ColdFusion, Delphi, Eiffel, Erlang, Go, Haskell, Java, JavaScript, Lasso, Lisp, LotusScript, Lua, Objective C, Objective CAML, Perl, PHP, Python, Qt, Ruby, Tcl, Visual Basic, And More... Saturday, February 4, 2012
14. JSON Alternatives XML Dedicated Format Saturday, February 4, 2012
15. Using JSON Saturday, February 4, 2012
16. JSON Use Case Client Server Server App DB Flights To Paris Results { Flights: [ { departure: “02:00”, price: 600 }, { departure: “06:00”, price: 800 }, { departure: “00:00”, price: 999 } ]} Saturday, February 4, 2012
17. JSON Use Case Client request - “Paris” Server gets request Server performs DB query Server creates the response JSON object Server sends the response to client Saturday, February 4, 2012
18. Demo: Time Server Server returning time of day using Ruby & Sinatra App which shows the data Saturday, February 4, 2012
19. jQuery Functions $.get - sends a get request to the server. Takes a url, optional data, success handler and data type. $.post - sends a post request to the server. Takes a url, optional data, success handler and data type. Saturday, February 4, 2012
20. get/post Examples $.get(‘test.php’); $.post(‘test.php’, { name : ‘john’, time: ‘2pm’ }); $.get(‘test.php’, function(data) { alert(data); }); Saturday, February 4, 2012
21. $.ajax Gain full control over the request Can handle errors get/post are actually just shortcuts for this one Takes url and settings object Saturday, February 4, 2012
22. $.ajax Settings error: error handler callback success: success handler callback context: the ‘this’ pointer of callbacks data: data object to send url: the url to use Full docs: http://api.jquery.com/jQuery.ajax/ Saturday, February 4, 2012
23. $.ajax Example $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); Saturday, February 4, 2012
24. Q & A Saturday, February 4, 2012
25. Practice Use your favorite Server Side Technology Implement a mobile wall: App displays a long list of sentences (the wall) Each user can add a sentence to the wall Everyone shares the same wall Saturday, February 4, 2012
26. Handlebar Mustache JS Templating lib that rocks Saturday, February 4, 2012
27. Concepts Create parts of the DOM dynamically by using JavaScript, based on data that is stored as JS objects Template + Data = HTML Saturday, February 4, 2012
28. Use Cases Data is collected from the server Data is retrieved form local storage Data is aggregated from multiple sources Translations http://loveandasandwich.deviantart.com/art/Mustache- Monsterssss-201209873 Saturday, February 4, 2012
29. Selected Libraries mustache.js handlebars ejs pure.js underscore.js And many more... Saturday, February 4, 2012
30. The How A template looks like normal html code Special placeholders are inserted in the template <div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span> </div> Saturday, February 4, 2012
31. The How Each template is rendered with a context. The context is a JavaScript object that provides values for the placeholders { name: "Jimmy Jones", details: "A friend of Ghandi" } Saturday, February 4, 2012
32. Combined <div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span> </div> { name: "Jimmy Jones", details: "A friend of Ghandi" } + <div class="entry"> <h1>Jimmy Jones</h1> <span> A friend of Ghandi </span> </div> Saturday, February 4, 2012
33. Demo Using a template embedded inside the html file as a script Code: ajax/ Handlebars/Demo1/ Saturday, February 4, 2012
34. Using Handlebars Rendering Objects Rendering Arrays Conditional Rendering (if) Helpers Saturday, February 4, 2012
35. Rendering Objects Can use a block expression in the template This will use a different context for the rendering Example: With <div class="entry"> <h1>{{title}}</h1> {{#with author}} <span>By: {{first}} {{last}}</span> {{/with}} </div> var ctx = { title: "Alice's Adventures in Wonderland", author: { first: 'Lewis', last: 'Carrol' } }; Saturday, February 4, 2012
36. Rendering Arrays The each block helper renders each element in an array in its own entry Inside the block, this refers to the current element <ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul> { people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } Saturday, February 4, 2012
37. Conditional Rendering Renders a portion of the template based on a condition If the argument is falsy, the block won’t be rendered <div class="entry"> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{/if}} </div> Saturday, February 4, 2012
38. Helpers Run JS Code and put its result inside the mustache The code is predefined as a helper Demo: ajax/ Handlebars/Demo2 Saturday, February 4, 2012
39. Demo: Handlebars data from server Saturday, February 4, 2012
40. Exercise Write a simple todo manager using Handlebars Use a form to add a todo item Use localStorage to save all items Use a handlebar template to create the todo list from the local storage Saturday, February 4, 2012
41. Server To Client HTTP is only one way client to server protocol How can the server tell all clients that something new has happened ? Saturday, February 4, 2012
42. Server To Client Client frequent refreshes Web Comet Coined as a play on Ajax Saturday, February 4, 2012
43. Web Sockets Demo: http://rumpetroll.com/ Saturday, February 4, 2012
44. Web Sockets New Feature of HTML5 Needs a dedicated server supporting web sockets Server-Side implementations: Socket.IO, Jetty (Java), Ruby, Python, Perl Client Side: Native support on iPhone. Full Solution: Socket.IO Saturday, February 4, 2012
45. Web Socket Arch Socket Server (Node.js) Application Server Client Browser MQ / DB WEB SOCKETS HTTP Saturday, February 4, 2012
46. Web Sockets Paradigm Use a dedicated node.js or other server for communicating with clients Use a MQ server to connect node.js to your application server juggernaut does this for you Saturday, February 4, 2012
47. Web Sockets Client var connection = new WebSocket('ws://foo.org/wall'); connection.onopen = function () { connection.send('Ping'); }; connection.onerror = function (error) { console.log('WebSocket Error ' + error); }; connection.onmessage = function (e) { console.log('Server: ' + e.data); }; Saturday, February 4, 2012
48. Web Sockets Today Currently, Web sockets are not widely supported socket.io is a node.js implementation overriding this problem by providing good fallbacks socket.io also provides a lot of extra functionality over existing web sockets Let’s modify our code to work with socket.io Saturday, February 4, 2012
49. Web Sockets Client var socket = io.connect('http://localhost:8080'); socket.on(‘connect’, function () { connection.send('Ping'); }); socket.on(‘disconnect’, function () { console.log(‘socket down’); }; socket.on(‘message’, function (data) { console.log('Server: ' + data); }; Saturday, February 4, 2012
50. Demo: Echo Socket Saturday, February 4, 2012
51. Q & A Saturday, February 4, 2012
52. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Saturday, February 4, 2012