Java Script Based Client Server Webapps 2
-
Upload
kriszyp -
Category
Technology
-
view
3.932 -
download
0
Transcript of Java Script Based Client Server Webapps 2
Interoperable JavaScript-Based Client/Server Web
Applications
Kris Zyp
© SitePen, Inc. 2008. All Rights Reserved
© SitePen, Inc. 2008. All Rights Reserved
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!
© 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
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
© SitePen, Inc. 2008. All Rights Reserved
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
© SitePen, Inc. 2008. All Rights Reserved
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
© 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
http://www.sitepen.com/blog/2008/06/17/json-referencing-in-dojo/
Referencing
Hyperlinking + JSON
Cyclic
Multiple references
Cross-message references
Cross-site references
© SitePen, Inc. 2008. All Rights Reserved
{{““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
© SitePen, Inc. 2008. All Rights Reserved
{{““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)
© 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
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}
}}}}
instance:instance:{{
““name”: ”Kris”,name”: ”Kris”,““age”: 30age”: 30
}}
JSON Schema
© SitePen, Inc. 2008. All Rights Reserved
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”}
}}}}
}}}}
instance:instance:{{
““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”}
}}}}
}}}}
instance:instance:{{
““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Nikki”}]friends”:[{“name”:”Nikki”}]
}}
JSON Schema
© SitePen, Inc. 2008. All Rights Reserved
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"}}
}}
instance:instance:{{
““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"}}
}}
instance:instance:{{
““name”:”Kris”,name”:”Kris”,““age”:”old”,age”:”old”,““friends”:[{“name”:”Bill”}],friends”:[{“name”:”Bill”}],““spouse”:{$”ref”:”nikki”}spouse”:{$”ref”:”nikki”}
}}
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 schema
Add constraints
as application
evolves
© SitePen, Inc. 2008. All Rights Reserved
JSON Schema driven UI
Start with schema
http://javascript.neyric.com/inputex/examples/json-schema2.htmlhttp://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
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"}}
"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
© 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
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
© SitePen, Inc. 2008. All Rights Reserved
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
© SitePen, Inc. 2008. All Rights Reserved
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
© SitePen, Inc. 2008. All Rights Reserved
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
© 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/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)
© SitePen, Inc. 2008. All Rights Reserved
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
© SitePen, Inc. 2008. All Rights Reserved
Accompanied by Demo
Offline + REST
REST + Thin Server = Easy Offline
Going offline requires a “capable” client
Dojo’s support for Offline SOA Applications
© 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
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
© 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 databasesDevelop for the future
© SitePen, Inc. 2008. All Rights Reserved
The Open Web is more than just licensing
GPLLGPLBSD
© SitePen, Inc. 2008. All Rights Reserved
Simple. Fast. Extraordinary.
For clients including:Providing:
Web Application Development
Technical Advice
Support Services
Training
http://sitepen.com/