Java Script Based Client Server Webapps 2

Interoperable JavaScript-Based Client/Server Web

Applications

Kris Zyp


OverviewService 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

Web Service ProviderWeb Service ProviderWeb Service ProviderWeb Service Provider

CS Web CS Web ClientClient

CS Web CS Web ClientClient

Web Web ClientClientWeb Web

ClientClientDesktop Desktop ClientClient

Desktop Desktop ClientClient

MethodsMethodsMethodsMethods MethodsMethodsMethodsMethodsMethodsMethodsMethodsMethods


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


{{““name”:”Kris Zyp”,name”:”Kris Zyp”,“id”:”kriszyp”,“id”:”kriszyp”,““children”:[children”:[

{“id”:”jennikazyp”,“name”:”Jennika Zyp”}{“id”:”jennikazyp”,“name”:”Jennika Zyp”}],],““spouse”:{spouse”:{

““name”:”Nicole Zyp”,name”:”Nicole Zyp”,““spouse”:{“$ref”:”kriszyp”},spouse”:{“$ref”:”kriszyp”},““children”:[children”:[

{“$ref”:”jennikazyp”}{“$ref”:”jennikazyp”}]]

}}}}}}

{{““name”:”Kris Zyp”,name”:”Kris Zyp”,“id”:”kriszyp”,“id”:”kriszyp”,““children”:[children”:[

{“id”:”jennikazyp”,“name”:”Jennika Zyp”}{“id”:”jennikazyp”,“name”:”Jennika Zyp”}],],““spouse”:{spouse”:{

““name”:”Nicole Zyp”,name”:”Nicole Zyp”,““spouse”:{“$ref”:”kriszyp”},spouse”:{“$ref”:”kriszyp”},““children”:[children”:[

{“$ref”:”jennikazyp”}{“$ref”:”jennikazyp”}]]

}}}}}}

JSON Referencing Example


{{““name”:”Kris Zyp”,name”:”Kris Zyp”,““children”:[children”:[

{“name”:”Jennika Zyp”}{“name”:”Jennika Zyp”}],],““spouse”:{“name”:”Nicole Zyp”,spouse”:{“name”:”Nicole Zyp”,““spouse”:{“$ref”:”#”},spouse”:{“$ref”:”#”},““children”:{“$ref”:”#children”}},children”:{“$ref”:”#children”}},““friends”:[friends”:[

{“$ref”:”{“$ref”:”http://anothersite.com/jesse”}”}]]

}}

{{““name”:”Kris Zyp”,name”:”Kris Zyp”,““children”:[children”:[

{“name”:”Jennika Zyp”}{“name”:”Jennika Zyp”}],],““spouse”:{“name”:”Nicole Zyp”,spouse”:{“name”:”Nicole Zyp”,““spouse”:{“$ref”:”#”},spouse”:{“$ref”:”#”},““children”:{“$ref”:”#children”}},children”:{“$ref”:”#children”}},““friends”:[friends”:[

{“$ref”:”{“$ref”:”http://anothersite.com/jesse”}”}]]

}}

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


schema:schema:{{

"description":"A person", "description":"A person", "type":"object", "type":"object", "properties": {"properties": {

"name": {"type":"string"}, "name": {"type":"string"}, "age" : {"type":"integer","maximum":125}"age" : {"type":"integer","maximum":125}

}}}}

instance:instance:{{

““name”: ”Kris”,name”: ”Kris”,““age”: 30age”: 30

}}

schema:schema:{{

"description":"A person", "description":"A person", "type":"object", "type":"object", "properties": {"properties": {

"name": {"type":"string"}, "name": {"type":"string"}, "age" : {"type":"integer","maximum":125}"age" : {"type":"integer","maximum":125}

}}}}


““name”: ”Kris”,name”: ”Kris”,““age”: 30age”: 30

}}

JSON Schema


Schema:Schema:{{

"description":"A person","description":"A person","type":"object","type":"object","properties":{"properties":{

"name": {"type":"string"}, "name": {"type":"string"}, "age": {"age": {

"type":["integer",”string”],"type":["integer",”string”],““friends”: {friends”: {

““type”:”array”,type”:”array”,““items”:{“type”:”object”}items”:{“type”:”object”}

}}}}

}}}}


““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Nikki”}]friends”:[{“name”:”Nikki”}]

}}

Schema:Schema:{{

"description":"A person","description":"A person","type":"object","type":"object","properties":{"properties":{

"name": {"type":"string"}, "name": {"type":"string"}, "age": {"age": {

"type":["integer",”string”],"type":["integer",”string”],““friends”: {friends”: {

““type”:”array”,type”:”array”,““items”:{“type”:”object”}items”:{“type”:”object”}

}}}}

}}}}


““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Nikki”}]friends”:[{“name”:”Nikki”}]

}}

JSON Schema


Schema:Schema:{{

““id”:”marriedperson”,id”:”marriedperson”,"description":"A married person", "description":"A married person", "extends": {“$ref”:”marriedperson”}, "extends": {“$ref”:”marriedperson”}, "properties": {"spouse": {"$ref":"marriedperson"}}"properties": {"spouse": {"$ref":"marriedperson"}}

}}


““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Bill”}],friends”:[{“name”:”Bill”}],““spouse”:{$”ref”:”nikki”}spouse”:{$”ref”:”nikki”}

}}

Schema:Schema:{{

““id”:”marriedperson”,id”:”marriedperson”,"description":"A married person", "description":"A married person", "extends": {“$ref”:”marriedperson”}, "extends": {“$ref”:”marriedperson”}, "properties": {"spouse": {"$ref":"marriedperson"}}"properties": {"spouse": {"$ref":"marriedperson"}}

}}


““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Bill”}],friends”:[{“name”:”Bill”}],““spouse”:{$”ref”:”nikki”}spouse”:{$”ref”:”nikki”}

}}

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.htmlhttp://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"}}

"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 JSONFilters - [?expr]Properties/paths (like JS) - .propRecursive descent - ..propSlice operator – [3:10:2]Union operator - [3,4,5]

XPath like query language for JSONFilters - [?expr]Properties/paths (like JS) - .propRecursive descent - ..propSlice 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 + 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<10Sorting - [/price, \rating]Mapping - [=firstName+' '+lastName]Wildcarding [?description='*fun*']Recursive object filter - ..[?name='Bar']Example URL: /Table/[?price<10] [={name:name, rating: rating}] [\rating]

Lenient Syntax - ?price<10Sorting - [/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 OKX-Event: PUTContent-Location: /foo/bar

New content of /foo/bar

HTTP/1.1 200 OKX-Event: PUTContent-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”}

{“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

GPLLGPLBSD


Simple. Fast. Extraordinary.

For clients including:Providing:

Web Application Development

Technical Advice

Support Services

Training

http://sitepen.com/

Java Script Based Client Server Webapps 2

Technology

Transcript of Java Script Based Client Server Webapps 2