Interoperable JavaScript-Based Client/Server Web Applications

Interoperable JavaScript-Based Client/Server Web

Applications

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!


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


Service Oriented Architecture on the Web


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


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


Interoperability Basics

 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


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


HTTP/REST + JSON =Database interaction for

the web   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   ...


The post-ORM realm


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

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


JSON Referencing Example


JSON Referencing Example (Fragments and Remote)


Dojo Data


ServiceStore

 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)


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


JsonRestStore

 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


JSON Schema


Schemas  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



"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


JSON Schema + JavaScript  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”]

}


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

  File I/O   HTTP request handling interface   Promises


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


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


JSONPath + REST URLs = Web querying /Table/ - All the objects in a table /Table/[[email protected] < 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


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


Push/Comet  Open Protocols for Comet   Bayeux   XMPP   REST Channels


Bayeux  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


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

New content of /foo/bar

HTTP Channels (REST Channels over HTTP)


Accompanied by Demo

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

REST Channels in JSON


Accompanied by Demo

Offline + REST  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 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


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.


Persevere   JSONQuery/JSONPath   JSON Referencing  Comet Live Data Notifications   JSON Schema with evolutionary constraints   JSON-RPC  Built-in Security  Standards based REST interface



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


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


REST/ Ajax databasesDevelop for the future


The Open Web is more than just licensing

GPL LGPL BSD


Simple. Fast. Extraordinary.

For clients including: Providing:  Web Application

Development  Technical Advice  Support Services  Training

http://sitepen.com/

Interoperable JavaScript-Based Client/Server Web Applications

Documents

Transcript of Interoperable JavaScript-Based Client/Server Web Applications