AJAX Data TransferClient-Server Apps - The Easy Way

Agenda

JSON

Modify DOM by Server Data

Web Sockets

Communication

Different systems use different data formats

Each platform has its own logic

Need to decide on a language or protocol

Requirements

What do we need from such a protocol ?

Requirements

Wide server support

Wide client support

Easy to debug

Pass firewalls

Meet JSON

JSON

Stands for JavaScript Object Notation

Text based

Widely Supported

Simple

{! “name” : “Bob”,! “age” : 19,! “image” : “zombie.png” }

JSON

Stands for JavaScript Object Notation

Text based

Widely Supported

Simple

{! name : “Bob”,! age : 19,! image : “zombie.png” }

Complete Ruleset: http://www.json.org/

JSON Values

Simple Values

Arrays

Nested Hashes

{! name : “Bob”,! age : 19,! image : “zombie.png” }

KEY VALUE

Simple Values

“text”

number

true

false

null

Arrays

A list of comma separated values enclosed in brackets

[1, 2, 3]

[“a”, “b”, “c”]

[1, 2, [“a”, “b”], “hello”, true]

Objects

A nested data object can also act as a value

Example: { foo : { a : 1, b : 2 } }

JSON - Getting BetterNo 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...

JSON Alternatives

XML

Dedicated Format

Using JSON

JSON Use Case

Client ServerServer App

DB

Flights To Paris

Results

{ Flights: [ { departure: “02:00”, price: 600 }, { departure: “06:00”, price: 800 }, { departure: “00:00”, price: 999 } ]}

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

Demo: Time Server

Server returning time of day using Ruby & Sinatra

App which shows the data

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.

get/post Examples

$.get(‘test.php’);

$.post(‘test.php’, { name : ‘john’, time: ‘2pm’ });

$.get(‘test.php’, function(data) { alert(data);});

$.ajax

Gain full control over the request

Can handle errors

get/post are actually just shortcuts for this one

Takes url and settings object

$.ajax Settingserror: 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/

$.ajax Example

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

Same Origin Policy

Cross origin writes: Allowed

Cross origin embeds: Allowed

Cross origin reads:Denied

But I Want To Implement an API

Use JSONP

Use CORS

JSONP Explained

Use cross origin embeds:<script src="http://www.myapi.com/places"></script>

Script returns function, not data:callback(['home', 'work', 'mobile']);

What’s wrong with JSONP ?

Need to specify a callback as global function

Need to add <script> tag dynamically

Can’t post

CORS To The Rescue

CORS Goal

Differentiate good cross origin request from a malicious one

CORS How

I come from www.friend.com

Please send me /contacts/all.json

CORS How

Browser sends Origin: request header

Server checks Origin to check it’s allowed

Server sends Access-Control-Allow-Origin to let browser know the request was OK

CORS Keep In Mind

Be sure to verify Origin on the server

ASP.NET Howto:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Q & A

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

Handlebar MustacheJS Templating lib that rocks

Concepts

Create parts of the DOM dynamically by using JavaScript, based on data that is stored as JS objects

Template + Data = HTML

Use CasesData is collected from the server

Data is retrieved form local storage

Data is aggregated from multiple sources

Translationshttp://loveandasandwich.deviantart.com/art/Mustache-Monsterssss-201209873

Selected Librariesmustache.js

handlebars

ejs

pure.js

underscore.js

And many more...

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>

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"}

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>

Demo

Using a template embedded inside the html file as a script

Code: ajax/Handlebars/Demo1/

Using Handlebars

Rendering Objects

Rendering Arrays

Conditional Rendering (if)

Helpers

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'  }};

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"  ]}

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>!

Helpers

Run JS Code and put its result inside the mustache

The code is predefined as a helper

Demo: ajax/Handlebars/Demo2

Demo: Handlebars data from server

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

Server To Client

HTTP is only one way client to server protocol

How can the server tell all clients that something new has happened ?

Server To Client

Client frequent refreshes

Web Comet

Coined as a play on Ajax

Web Sockets

Demo: http://rumpetroll.com/

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

Web Socket Arch

Socket Server(Node.js)

Application Server

ClientBrowser

MQ / DB

WEB SOCKETS HTTP

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

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);!};!

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

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);!};!

Demo: Echo Socket

Q & A

Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com