Java Script Based Client Server Webapps 2

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

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

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

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

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

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

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

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

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

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/

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, \rating] Mapping - [=firstName+' '+lastName] Wildcarding [?description='*fun*'] Recursive object filter - ..[?name='Bar'] Example URL: /Table/[?price<10] [={name:name, rating: rating}] [\rating]

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

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

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://sitepen.com/labs/persevere.php

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/

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

Java Script Based Client Server Webapps 2

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Java Script Based Client Server Webapps 2 (20)

Recently uploaded (20)

Java Script Based Client Server Webapps 2

Editor's Notes