Sunteți pe pagina 1din 54

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/