Interoperable

JavaScript-Based
Client/Server Web
Applications

Kris Zyp
© 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

 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

© SitePen, Inc. 2008. All Rights Reserved

 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

© 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

 Referencing
  Hyperlinking + JSON
  Cyclic

  Multiple references

  Cross-message references

  Cross-site references

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

© 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 Add constraints
schema 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

 Server side JavaScript + web
storage
"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"}
}
http://sitepen.com/labs/persevere.php

© 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

 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/

© SitePen, Inc. 2008. All Rights Reserved

 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]

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

© SitePen, Inc. 2008. All Rights Reserved

 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

© SitePen, Inc. 2008. All Rights Reserved

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

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

© 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 Channels (REST Channels over
HTTP)
HTTP/1.1 200 OK
X-Event: PUT
Content-Location: /foo/bar

New content of /foo/bar

© SitePen, Inc. 2008. All Rights Reserved

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

Accompanied by Demo

© SitePen, Inc. 2008. All Rights Reserved

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

Accompanied by Demo

© 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

 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/

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

Develop for the future

© SitePen, Inc. 2008. All Rights Reserved

 The Open Web is more
GPL
than just licensing
LGPL
BSD

© SitePen, Inc. 2008. All Rights Reserved

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

© SitePen, Inc. 2008. All Rights Reserved http://sitepen.com/