Interoperable JavaScript-Based Client/Server Web Applications Kris Zyp

Kris Zyp

Overview Service oriented client/server web application Tools of interoperability REST Defines interoperable web architecture JSON Referencing/JSON Hyperlinking JSON Schema JSONQuery Comet - Bayeux & REST Channels Consistent programming and data model on client and server Dojo & Persevere - see it in action!

Service oriented client/server web application

Tools of interoperability

REST

Defines interoperable web architecture

JSON Referencing/JSON Hyperlinking

JSON Schema

JSONQuery

Comet - Bayeux & REST Channels

Consistent programming and data model on client and server

Dojo & Persevere - see it in action!

SOA-Based Client/Server Model Distribution of Processing User response latency Programming model Vector of attack State management on server vs client Offline capabilities Interoperability

Distribution of Processing

User response latency

Programming model

Vector of attack

State management on server vs client

Offline capabilities

Interoperability

Service Oriented Architecture on the Web Web Service Provider CS Web Client Web Client Desktop Client Methods Methods Methods

REST Basics It is an architectural style not a format or API The web has leveraged REST Web applications can choose to leverage the benefits of REST or not Implications for how we develop the internal architecture http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

It is an architectural style

not a format or API

The web has leveraged REST

Web applications can choose to leverage the benefits of REST or not

Implications for how we develop the internal architecture

REST Basics The REST Style Constraints Client-Server Stateless Cacheable Uniform Interface Layered Code-On-Demand http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

The REST Style Constraints

Client-Server

Stateless

Cacheable

Uniform Interface

Layered

Code-On-Demand

Interoperability Basics HTTP REST GET - query and get by id PUT - update an object POST - create an object DELETE - delete an object

HTTP REST

GET - query and get by id

PUT - update an object

POST - create an object

DELETE - delete an object

Uniform Interface One interface for all applications Manipulation of resources, standard methods: PUT, POST, DELETE From a single URL data can be discovered via hyperlinks Data can be accessed without out-of-band API documentation

One interface for all applications

Manipulation of resources, standard methods:

PUT, POST, DELETE

From a single URL data can be discovered via hyperlinks

Data can be accessed without out-of-band API documentation

Standard Conventions Objects/records accessible by /table/id /Product/12 GET, PUT, and DELETE this resource Sub object URLs determined by object identity properties GET /Product/ [{“id”:”11”, “name”:”Dérailleur”}, {“id”:”12”, “name”:”Handle Bar”}]

Objects/records accessible by /table/id

/Product/12

GET, PUT, and DELETE this resource

Sub object URLs determined by object identity properties

GET /Product/ [{“id”:”11”, “name”:”Dérailleur”}, {“id”:”12”, “name”:”Handle Bar”}]

HTTP/REST + JSON = Database interaction for the web REST Architecture recommends UI - data separation On the wire: On-demand code Data (resource representations)

REST Architecture recommends UI - data separation

On the wire:

On-demand code

Data (resource representations)

Tools/Frameworks Client Side Dojo Jester Persevere Futon Server Side CouchDB Persevere SimpleDB ...

Client Side

Dojo

Jester

Persevere

Futon

Server Side

CouchDB

Persevere

SimpleDB

...

The post-ORM realm

Referencing Hyperlinking + JSON Cyclic Multiple references Cross-message references Cross-site references http://www.sitepen.com/blog/2008/06/17/json-referencing-in-dojo/

Hyperlinking + JSON

Cyclic

Multiple references

Cross-message references

Cross-site references

JSON Referencing Example { “ name”:”Kris Zyp”, “id”:”kriszyp”, “ children”:[ {“id”:”jennikazyp”,“name”:”Jennika Zyp”} ], “ spouse”:{ “ name”:”Nicole Zyp”, “ spouse”:{“$ref”:”kriszyp”}, “ children”:[ {“$ref”:”jennikazyp”} ] } } }

JSON Referencing Example (Fragments and Remote) { “ name”:”Kris Zyp”, “ children”:[ {“name”:”Jennika Zyp”} ], “ spouse”:{“name”:”Nicole Zyp”, “ spouse”:{“$ref”:”#”}, “ children”:{“$ref”:”#children”}}, “ friends”:[ {“$ref”:” http://anothersite.com/jesse ”} ] }

Dojo Data

ServiceStore Adapts web services to dojo.data API Plug services directly into widgets Supports lazy loading

Adapts web services to dojo.data API

Plug services directly into widgets

Supports lazy loading

JsonRestStore Full Read/Write API Create, Read/Query, Update Delete Standards Based (HTTP compliant)

Full Read/Write API

Create,

Read/Query,

Update

Delete

Standards Based (HTTP compliant)

Read/Write REST Services REST Services can plugin for full read/write ORM-style functionality: GET - query and get by id PUT - update an object POST - create an object DELETE - delete an object

REST Services can plugin for full read/write ORM-style functionality:

GET - query and get by id

PUT - update an object

POST - create an object

DELETE - delete an object

JsonRestStore Lazy loading JSON Referencing Transactional Offline Support

Lazy loading

JSON Referencing

Transactional

Offline Support

Persevere Built for Client-side MVC, UI - Data separation JSONQuery/JSONPath JSON Referencing Comet Live Data Notifications JSON Schema with evolutionary constraints JSON-RPC Built-in Security Standards based REST interface http://sitepen.com/labs/persevere.php

Built for Client-side MVC, UI - Data separation

JSONQuery/JSONPath

JSON Referencing

Comet Live Data Notifications

JSON Schema with evolutionary constraints

JSON-RPC

Built-in Security

Standards based REST interface

JSON Schema schema: { "description":"A person", "type":"object", "properties": { "name": {"type":"string"}, "age" : {"type":"integer","maximum":125} } } instance: { “ name”: ”Kris”, “ age”: 30 }

JSON Schema Schema: { "description":"A person", "type":"object", "properties":{ "name": {"type":"string"}, "age": { "type":["integer",”string”], “ friends”: { “ type”:”array”, “ items”:{“type”:”object”} } } } } instance: { “ name”:”Kris”, “ age”:”old”, “ friends”:[{“name”:”Nikki”}] }

JSON Schema Schema: { “ id”:”marriedperson”, "description":"A married person", "extends": {“$ref”:”marriedperson”}, "properties": {"spouse": {"$ref":"marriedperson"}} } instance: { “ name”:”Kris”, “ age”:”old”, “ friends”:[{“name”:”Bill”}], “ spouse”:{$”ref”:”nikki”} }

Schemas DB defined schema - Relational DBs Schema free – Document DBs Evolutionary schema - Persevere

DB defined schema - Relational DBs

Schema free – Document DBs

Evolutionary schema - Persevere

JSON Schema based evolutionary schema Start without a schema Add constraints as application evolves

JSON Schema driven UI Start with schema http://javascript.neyric.com/inputex/examples/json-schema2.html http://javascript.neyric.com/inputex/examples/base-schema.js

JSON Schema Support Validate JSON/object-style data Enforce data constraints on the client side in JsonRestStore Document interfaces and provide API contracts Can be used in SMDs Generate schema-driven UI with generic clients

Validate JSON/object-style data

Enforce data constraints on the client side in JsonRestStore

Document interfaces and provide API contracts

Can be used in SMDs

Generate schema-driven UI with generic clients

Server side JavaScript + web storage http://sitepen.com/labs/persevere.php "schema":{ “ name”:”Friend”, “ properties”:{ “ firstName”:{“type”:”string”}, “age”:{“type”:”integer”}, } "staticCreateMethod":function(arg1){ var friend = new Friend(); friend.age = 0; }, "prototype":{ “ myMethod”:function(){ return this.firstName + ‘ ‘ + this.lastName; } } "extends":{"$ref":"../Person"} }

JSON Schema + JavaScript Adds typing/classes to JavaScript Unobtrusive Flexible Dynamic Portable Can be integrated with data storage

Adds typing/classes to JavaScript

Unobtrusive

Flexible

Dynamic

Portable

Can be integrated with data storage

JSON-RPC RPC in JSON Widely adopted Example: { “id”:”1”, “method”:”addAge”, “params”:[“3”] }

RPC in JSON

Widely adopted

Example:

{ “id”:”1”, “method”:”addAge”, “params”:[“3”]

}

ServerJS Interoperable JS Modules Defines module loader via “require” function Various modules in the works File I/O HTTP request handling interface Promises

Interoperable JS Modules

Defines module loader via “require” function

Various modules in the works

File I/O

HTTP request handling interface

Promises

Querying Web-safe portability important SQL extremely hard to make secure and too complicated in the browser JSONPath JavaScript-style syntax Language agnostic Easy to secure http://goessner.net/articles/JsonPath/

Web-safe portability important

SQL extremely hard to make secure and too complicated in the browser

JSONPath

JavaScript-style syntax

Language agnostic

Easy to secure

JSONPath http://goessner.net/articles/JsonPath/ XPath like query language for JSON Filters - [?expr] Properties/paths (like JS) - .prop Recursive descent - ..prop Slice operator – [3:10:2] Union operator - [3,4,5]

JSONPath querying in requests JSONPath + REST URLs = Web querying /Table/ - All the objects in a table /Table/[?@.price < 10] – all items with a price under $10 /Table/..name – A list of the name property values /Table/.length – A count of the items in the table

JSONQuery http://www.sitepen.com/blog/2008/07/16/jsonquery-data-querying-beyond-jsonpath/ Lenient Syntax - ?price<10 Sorting - [/price,
ating] Mapping - [=firstName+' '+lastName] Wildcarding [?description='*fun*'] Recursive object filter - ..[?name='Bar'] Example URL: /Table/[?price<10] [={name:name, rating: rating}] [
ating]

Push/Comet Open Protocols for Comet Bayeux XMPP REST Channels

Open Protocols for Comet

Bayeux

XMPP

REST Channels

Bayeux Service Negotiation Publish/Subscribe Protocol

Service Negotiation

Publish/Subscribe Protocol

Live Data Notifications with REST Channels http://cometdaily.com/2008/05/13/http-channels-2/

REST Channels Push Protocol to augment REST architectural style Based on HTTP standard semantics

Push Protocol to augment REST architectural style

Based on HTTP standard semantics

HTTP Channels (REST Channels over HTTP) HTTP/1.1 200 OK X-Event: PUT Content-Location: /foo/bar New content of /foo/bar

REST Channels in JSON Accompanied by Demo { “ event”: “put” “ source”: “/foo/bar” “ content”: “New content of /foo/bar” }

Offline + REST REST + Thin Server = Easy Offline Going offline requires a “capable” client Dojo’s support for Offline SOA Applications Accompanied by Demo

REST + Thin Server = Easy Offline

Going offline requires a “capable” client

Dojo’s support for Offline SOA Applications

Security in SOA Security clearly distinct from UI code Assume users are directly accessing services Improved isolation of security

Security clearly distinct from UI code

Assume users are directly accessing services

Improved isolation of security

Security with web accessible data storage Typical databases behind the application Web DBs are directly accessible User authorization becomes integrated with data Allows separation of application and security concerns

Typical databases behind the application

Web DBs are directly accessible

User authorization becomes integrated with data

Allows separation of application and security concerns

Transactions

REST/Ajax JSON Databases Standards based interoperable web database interaction More direct, cleaner model for creating web applications Leverage the web's REST model Caching, proxying, etc.

Standards based interoperable web database interaction

More direct, cleaner model for creating web applications

Leverage the web's REST model

Caching, proxying, etc.

Persevere JSONQuery/JSONPath JSON Referencing Comet Live Data Notifications JSON Schema with evolutionary constraints JSON-RPC Built-in Security Standards based REST interface http://sitepen.com/labs/persevere.php

JSONQuery/JSONPath

JSON Referencing

Comet Live Data Notifications

JSON Schema with evolutionary constraints

JSON-RPC

Built-in Security

Standards based REST interface

Characteristics of good client/server application Clean client/server interface Interchangeability Increased presentation on the client Business logic on the server http://www.sitepen.com/blog/2008/07/18/clientserver-model-on-the-web/

Clean client/server interface

Interchangeability

Increased presentation on the client

Business logic on the server

Dojo’s SOA Service auto configuration Integration into Dojo Data model Full REST interaction support Comet and Offline capabilities All based on standards, easy to switch to something else

Service auto configuration

Integration into Dojo Data model

Full REST interaction support

Comet and Offline capabilities

All based on standards, easy to switch to something else

REST/ Ajax databases Develop for the future

The Open Web is more than just licensing GPL LGPL BSD

Web Application Development Technical Advice Support Services Training Simple. Fast. Extraordinary. For clients including: Providing: http://sitepen.com/

Web Application Development

Technical Advice

Support Services

Training