Tweet
Tweet

Slide 1

Slide 1 text

AJAX Data Transfer Client-Server Apps - The Easy Way Saturday, February 4, 2012

Slide 2

Slide 2 text

Agenda JSON Modify DOM by Server Data Web Sockets Saturday, February 4, 2012

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Requirements What do we need from such a protocol ? Saturday, February 4, 2012

Slide 5

Slide 5 text

Requirements Wide server support Wide client support Easy to debug Pass firewalls Saturday, February 4, 2012

Slide 6

Slide 6 text

Meet JSON Saturday, February 4, 2012

Slide 7

Slide 7 text

JSON Stands for JavaScript Object Notation Text based Widely Supported Simple { name : “Bob”, age : 19, image : “zombie.png” } Saturday, February 4, 2012

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

JSON Values Simple Values Arrays Nested Hashes { name : “Bob”, age : 19, image : “zombie.png” } KEY VALUE Saturday, February 4, 2012

Slide 10

Slide 10 text

Simple Values “text” number true false null Saturday, February 4, 2012

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Objects A nested data object can also act as a value Example: { foo : { a : 1, b : 2 } } Saturday, February 4, 2012

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

JSON Alternatives XML Dedicated Format Saturday, February 4, 2012

Slide 15

Slide 15 text

Using JSON Saturday, February 4, 2012

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Demo: Time Server Server returning time of day using Ruby & Sinatra App which shows the data Saturday, February 4, 2012

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

get/post Examples $.get(‘test.php’); $.post(‘test.php’, { name : ‘john’, time: ‘2pm’ }); $.get(‘test.php’, function(data) { alert(data); }); Saturday, February 4, 2012

Slide 21

Slide 21 text

$.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

Slide 22

Slide 22 text

$.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

Slide 23

Slide 23 text

$.ajax Example $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); Saturday, February 4, 2012

Slide 24

Slide 24 text

Q & A Saturday, February 4, 2012

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Handlebar Mustache JS Templating lib that rocks Saturday, February 4, 2012

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Selected Libraries mustache.js handlebars ejs pure.js underscore.js And many more... Saturday, February 4, 2012

Slide 30

Slide 30 text

The How A template looks like normal html code Special placeholders are inserted in the template

{{name}}

{{details}}
Saturday, February 4, 2012

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Combined

{{name}}

{{details}}
{ name: "Jimmy Jones", details: "A friend of Ghandi" } +

Jimmy Jones

A friend of Ghandi
Saturday, February 4, 2012

Slide 33

Slide 33 text

Demo Using a template embedded inside the html file as a script Code: ajax/ Handlebars/Demo1/ Saturday, February 4, 2012

Slide 34

Slide 34 text

Using Handlebars Rendering Objects Rendering Arrays Conditional Rendering (if) Helpers Saturday, February 4, 2012

Slide 35

Slide 35 text

Rendering Objects Can use a block expression in the template This will use a different context for the rendering Example: With

{{title}}

{{#with author}} By: {{first}} {{last}} {{/with}}
var ctx = { title: "Alice's Adventures in Wonderland", author: { first: 'Lewis', last: 'Carrol' } }; Saturday, February 4, 2012

Slide 36

Slide 36 text

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
    {{#each people}}
  • {{this}}
    • {{/each}}
{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } Saturday, February 4, 2012

Slide 37

Slide 37 text

Conditional Rendering Renders a portion of the template based on a condition If the argument is falsy, the block won’t be rendered
{{#if author}}

{{firstName}} {{lastName}}

{{/if}}
Saturday, February 4, 2012

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Demo: Handlebars data from server Saturday, February 4, 2012

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Server To Client Client frequent refreshes Web Comet Coined as a play on Ajax Saturday, February 4, 2012

Slide 43

Slide 43 text

Web Sockets Demo: http://rumpetroll.com/ Saturday, February 4, 2012

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Web Socket Arch Socket Server (Node.js) Application Server Client Browser MQ / DB WEB SOCKETS HTTP Saturday, February 4, 2012

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Demo: Echo Socket Saturday, February 4, 2012

Slide 51

Slide 51 text

Q & A Saturday, February 4, 2012

Slide 52

Slide 52 text

Thank You Ynon Perek [email protected] ynonperek.com Saturday, February 4, 2012