Interoperable JavaScript-Based Client/Server Web

Applications

Kris Zyp

© SitePen, Inc. 2008. All Rights Reserved

© SitePen, Inc. 2008. All Rights Reserved

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!

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

Service Oriented Architecture on the Web

© SitePen, Inc. 2008. All Rights Reserved

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

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

© SitePen, Inc. 2008. All Rights Reserved

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

REST Basics  The REST Style Constraints  Client-Server   Stateless  Cacheable  Uniform Interface   Layered  Code-On-Demand

© SitePen, Inc. 2008. All Rights Reserved

Interoperability Basics

 HTTP REST

  GET - query and get by id

  PUT - update an object

  POST - create an object

 DELETE - delete an object

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

HTTP/REST + JSON =Database interaction for

the web   REST Architecture recommends UI - data separation

 On the wire:

 On-demand code

 Data (resource representations)

© SitePen, Inc. 2008. All Rights Reserved

Tools/Frameworks

 Client Side  Dojo   Jester   Persevere   Futon

 Server Side  CouchDB   Persevere   SimpleDB   ...

© SitePen, Inc. 2008. All Rights Reserved

The post-ORM realm

© SitePen, Inc. 2008. All Rights Reserved

http://www.sitepen.com/blog/2008/06/17/json-referencing-in-dojo/

Referencing  Hyperlinking + JSON  Cyclic  Multiple references  Cross-message references  Cross-site references

© SitePen, Inc. 2008. All Rights Reserved

JSON Referencing Example

© SitePen, Inc. 2008. All Rights Reserved

JSON Referencing Example (Fragments and Remote)

© SitePen, Inc. 2008. All Rights Reserved

Dojo Data

© SitePen, Inc. 2008. All Rights Reserved

ServiceStore

 Adapts web services to dojo.data API

 Plug services directly into widgets

 Supports lazy loading

© SitePen, Inc. 2008. All Rights Reserved

JsonRestStore

 Full Read/Write API

  Create,

  Read/Query,

  Update

 Delete

 Standards Based (HTTP compliant)

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

JsonRestStore

 Lazy loading

  JSON Referencing

 Transactional

 Offline Support

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

JSON Schema

© SitePen, Inc. 2008. All Rights Reserved

JSON Schema

© SitePen, Inc. 2008. All Rights Reserved

JSON Schema

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

JSON Schema based evolutionary schema

Start without a schema

Add constraints as application

evolves

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

Server side JavaScript + web storage

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

}

© SitePen, Inc. 2008. All Rights Reserved

ServerJS   Interoperable JS Modules  Defines module loader via “require” function   Various modules in the works

  File I/O   HTTP request handling interface   Promises

© SitePen, Inc. 2008. All Rights Reserved

http://goessner.net/articles/JsonPath/

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

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

JSONPath querying in requests

© SitePen, Inc. 2008. All Rights Reserved

http://www.sitepen.com/blog/2008/07/16/jsonquery-data-querying-beyond-jsonpath/

Lenient Syntax - ?price<10 Sorting - [/price, \rating] Mapping - [=firstName+' '+lastName] Wildcarding [?description='*fun*'] Recursive object filter - ..[?name='Bar'] Example URL: /Table/[?price<10] [={name:name, rating: rating}] [\rating]

JSONQuery

© SitePen, Inc. 2008. All Rights Reserved

Push/Comet  Open Protocols for Comet   Bayeux   XMPP   REST Channels

© SitePen, Inc. 2008. All Rights Reserved

Bayeux  Service Negotiation  Publish/Subscribe Protocol

© SitePen, Inc. 2008. All Rights Reserved

Live Data Notifications with REST Channels

http://cometdaily.com/2008/05/13/http-channels-2/

© SitePen, Inc. 2008. All Rights Reserved

REST Channels  Push Protocol to augment REST architectural

style  Based on HTTP standard semantics

© SitePen, Inc. 2008. All Rights Reserved

HTTP/1.1 200 OK X-Event: PUT Content-Location: /foo/bar

New content of /foo/bar

HTTP Channels (REST Channels over HTTP)

© SitePen, Inc. 2008. All Rights Reserved

Accompanied by Demo

{ “event”: “put” “source”: “/foo/bar” “content”: “New content of /foo/bar” }

REST Channels in JSON

© SitePen, Inc. 2008. All Rights Reserved

Accompanied by Demo

Offline + REST  REST + Thin Server = Easy Offline  Going offline requires a “capable” client

 Dojo’s support for Offline SOA Applications

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

Transactions

© SitePen, Inc. 2008. All Rights Reserved

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.

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

http://www.sitepen.com/blog/2008/07/18/clientserver-model-on-the-web/

Characteristics of good client/server application

 Clean client/server interface   Interchangeability   Increased presentation on the client  Business logic on the server

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved

REST/ Ajax databasesDevelop for the future

© SitePen, Inc. 2008. All Rights Reserved

The Open Web is more than just licensing

GPL LGPL BSD

© SitePen, Inc. 2008. All Rights Reserved

Simple. Fast. Extraordinary.

For clients including: Providing:  Web Application

Development  Technical Advice  Support Services  Training

http://sitepen.com/