Java Script Based Client Server Webapps 2

5,617 views

Published on

Published in: Technology
  • Be the first to comment

Java Script Based Client Server Webapps 2

  1. Interoperable JavaScript-Based Client/Server Web Applications <ul><li>Kris Zyp </li></ul>
  2.  
  3. Overview <ul><li>Service oriented client/server web application </li></ul><ul><li>Tools of interoperability </li></ul><ul><ul><li>REST </li></ul></ul><ul><ul><ul><li>Defines interoperable web architecture </li></ul></ul></ul><ul><ul><li>JSON Referencing/JSON Hyperlinking </li></ul></ul><ul><ul><li>JSON Schema </li></ul></ul><ul><ul><li>JSONQuery </li></ul></ul><ul><ul><li>Comet - Bayeux & REST Channels </li></ul></ul><ul><li>Consistent programming and data model on client and server </li></ul><ul><li>Dojo & Persevere - see it in action! </li></ul>
  4. SOA-Based Client/Server Model <ul><li>Distribution of Processing </li></ul><ul><li>User response latency </li></ul><ul><li>Programming model </li></ul><ul><li>Vector of attack </li></ul><ul><li>State management on server vs client </li></ul><ul><li>Offline capabilities </li></ul><ul><li>Interoperability </li></ul>
  5. Service Oriented Architecture on the Web Web Service Provider CS Web Client Web Client Desktop Client Methods Methods Methods
  6. REST Basics <ul><li>It is an architectural style </li></ul><ul><ul><li>not a format or API </li></ul></ul><ul><li>The web has leveraged REST </li></ul><ul><li>Web applications can choose to leverage the benefits of REST or not </li></ul><ul><li>Implications for how we develop the internal architecture </li></ul>http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
  7. REST Basics <ul><li>The REST Style Constraints </li></ul><ul><ul><li>Client-Server </li></ul></ul><ul><ul><li>Stateless </li></ul></ul><ul><ul><li>Cacheable </li></ul></ul><ul><ul><li>Uniform Interface </li></ul></ul><ul><ul><li>Layered </li></ul></ul><ul><ul><li>Code-On-Demand </li></ul></ul>http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
  8. Interoperability Basics <ul><li>HTTP REST </li></ul><ul><ul><li>GET - query and get by id </li></ul></ul><ul><ul><li>PUT - update an object </li></ul></ul><ul><ul><li>POST - create an object </li></ul></ul><ul><ul><li>DELETE - delete an object </li></ul></ul>
  9. Uniform Interface <ul><li>One interface for all applications </li></ul><ul><li>Manipulation of resources, standard methods: </li></ul><ul><ul><li>PUT, POST, DELETE </li></ul></ul><ul><li>From a single URL data can be discovered via hyperlinks </li></ul><ul><ul><li>Data can be accessed without out-of-band API documentation </li></ul></ul>
  10. Standard Conventions <ul><li>Objects/records accessible by /table/id </li></ul><ul><ul><li>/Product/12 </li></ul></ul><ul><ul><li>GET, PUT, and DELETE this resource </li></ul></ul><ul><li>Sub object URLs determined by object identity properties </li></ul><ul><ul><li>GET /Product/ [{“id”:”11”, “name”:”Dérailleur”}, {“id”:”12”, “name”:”Handle Bar”}] </li></ul></ul>
  11. HTTP/REST + JSON = Database interaction for the web <ul><ul><li>REST Architecture recommends UI - data separation </li></ul></ul><ul><ul><li>On the wire: </li></ul></ul><ul><ul><ul><li>On-demand code </li></ul></ul></ul><ul><ul><ul><li>Data (resource representations) </li></ul></ul></ul>
  12. Tools/Frameworks <ul><li>Client Side </li></ul><ul><ul><li>Dojo </li></ul></ul><ul><ul><li>Jester </li></ul></ul><ul><ul><li>Persevere </li></ul></ul><ul><ul><li>Futon </li></ul></ul><ul><li>Server Side </li></ul><ul><ul><li>CouchDB </li></ul></ul><ul><ul><li>Persevere </li></ul></ul><ul><ul><li>SimpleDB </li></ul></ul><ul><ul><li>... </li></ul></ul>
  13. The post-ORM realm
  14. Referencing <ul><li>Hyperlinking + JSON </li></ul><ul><ul><li>Cyclic </li></ul></ul><ul><ul><li>Multiple references </li></ul></ul><ul><ul><li>Cross-message references </li></ul></ul><ul><ul><li>Cross-site references </li></ul></ul>http://www.sitepen.com/blog/2008/06/17/json-referencing-in-dojo/
  15. JSON Referencing Example { “ name”:”Kris Zyp”, “id”:”kriszyp”, “ children”:[ {“id”:”jennikazyp”,“name”:”Jennika Zyp”} ], “ spouse”:{ “ name”:”Nicole Zyp”, “ spouse”:{“$ref”:”kriszyp”}, “ children”:[ {“$ref”:”jennikazyp”} ] } } }
  16. 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 ”} ] }
  17. Dojo Data
  18. ServiceStore <ul><li>Adapts web services to dojo.data API </li></ul><ul><li>Plug services directly into widgets </li></ul><ul><li>Supports lazy loading </li></ul>
  19. JsonRestStore <ul><li>Full Read/Write API </li></ul><ul><ul><li>Create, </li></ul></ul><ul><ul><li>Read/Query, </li></ul></ul><ul><ul><li>Update </li></ul></ul><ul><ul><li>Delete </li></ul></ul><ul><li>Standards Based (HTTP compliant) </li></ul>
  20. Read/Write REST Services <ul><li>REST Services can plugin for full read/write ORM-style functionality: </li></ul><ul><ul><li>GET - query and get by id </li></ul></ul><ul><ul><li>PUT - update an object </li></ul></ul><ul><ul><li>POST - create an object </li></ul></ul><ul><ul><li>DELETE - delete an object </li></ul></ul>
  21. JsonRestStore <ul><li>Lazy loading </li></ul><ul><li>JSON Referencing </li></ul><ul><li>Transactional </li></ul><ul><li>Offline Support </li></ul>
  22. Persevere <ul><li>Built for Client-side MVC, UI - Data separation </li></ul><ul><li>JSONQuery/JSONPath </li></ul><ul><li>JSON Referencing </li></ul><ul><li>Comet Live Data Notifications </li></ul><ul><li>JSON Schema with evolutionary constraints </li></ul><ul><li>JSON-RPC </li></ul><ul><li>Built-in Security </li></ul><ul><li>Standards based REST interface </li></ul>http://sitepen.com/labs/persevere.php
  23. JSON Schema schema: { &quot;description&quot;:&quot;A person&quot;, &quot;type&quot;:&quot;object&quot;, &quot;properties&quot;: { &quot;name&quot;: {&quot;type&quot;:&quot;string&quot;}, &quot;age&quot; : {&quot;type&quot;:&quot;integer&quot;,&quot;maximum&quot;:125} } } instance: { “ name”: ”Kris”, “ age”: 30 }
  24. JSON Schema Schema: { &quot;description&quot;:&quot;A person&quot;, &quot;type&quot;:&quot;object&quot;, &quot;properties&quot;:{ &quot;name&quot;: {&quot;type&quot;:&quot;string&quot;}, &quot;age&quot;: { &quot;type&quot;:[&quot;integer&quot;,”string”], “ friends”: { “ type”:”array”, “ items”:{“type”:”object”} } } } } instance: { “ name”:”Kris”, “ age”:”old”, “ friends”:[{“name”:”Nikki”}] }
  25. JSON Schema Schema: { “ id”:”marriedperson”, &quot;description&quot;:&quot;A married person&quot;, &quot;extends&quot;: {“$ref”:”marriedperson”}, &quot;properties&quot;: {&quot;spouse&quot;: {&quot;$ref&quot;:&quot;marriedperson&quot;}} } instance: { “ name”:”Kris”, “ age”:”old”, “ friends”:[{“name”:”Bill”}], “ spouse”:{$”ref”:”nikki”} }
  26. Schemas <ul><li>DB defined schema - Relational DBs </li></ul><ul><li>Schema free – Document DBs </li></ul><ul><li>Evolutionary schema - Persevere </li></ul>
  27. JSON Schema based evolutionary schema Start without a schema Add constraints as application evolves
  28. 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
  29. JSON Schema Support <ul><li>Validate JSON/object-style data </li></ul><ul><li>Enforce data constraints on the client side in JsonRestStore </li></ul><ul><li>Document interfaces and provide API contracts </li></ul><ul><ul><li>Can be used in SMDs </li></ul></ul><ul><li>Generate schema-driven UI with generic clients </li></ul>
  30. Server side JavaScript + web storage http://sitepen.com/labs/persevere.php &quot;schema&quot;:{ “ name”:”Friend”, “ properties”:{ “ firstName”:{“type”:”string”}, “age”:{“type”:”integer”}, } &quot;staticCreateMethod&quot;:function(arg1){ var friend = new Friend(); friend.age = 0; }, &quot;prototype&quot;:{ “ myMethod”:function(){ return this.firstName + ‘ ‘ + this.lastName; } } &quot;extends&quot;:{&quot;$ref&quot;:&quot;../Person&quot;} }
  31. JSON Schema + JavaScript <ul><li>Adds typing/classes to JavaScript </li></ul><ul><ul><li>Unobtrusive </li></ul></ul><ul><ul><li>Flexible </li></ul></ul><ul><ul><li>Dynamic </li></ul></ul><ul><ul><li>Portable </li></ul></ul><ul><ul><li>Can be integrated with data storage </li></ul></ul>
  32. JSON-RPC <ul><li>RPC in JSON </li></ul><ul><li>Widely adopted </li></ul><ul><li>Example: </li></ul><ul><li>{ “id”:”1”, “method”:”addAge”, “params”:[“3”] </li></ul><ul><li>} </li></ul>
  33. ServerJS <ul><li>Interoperable JS Modules </li></ul><ul><ul><li>Defines module loader via “require” function </li></ul></ul><ul><ul><li>Various modules in the works </li></ul></ul><ul><ul><ul><li>File I/O </li></ul></ul></ul><ul><ul><ul><li>HTTP request handling interface </li></ul></ul></ul><ul><ul><ul><li>Promises </li></ul></ul></ul>
  34. Querying <ul><li>Web-safe portability important </li></ul><ul><li>SQL extremely hard to make secure and too complicated in the browser </li></ul><ul><li>JSONPath </li></ul><ul><ul><li>JavaScript-style syntax </li></ul></ul><ul><ul><li>Language agnostic </li></ul></ul><ul><ul><li>Easy to secure </li></ul></ul>http://goessner.net/articles/JsonPath/
  35. 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]
  36. 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
  37. JSONQuery http://www.sitepen.com/blog/2008/07/16/jsonquery-data-querying-beyond-jsonpath/ Lenient Syntax - ?price<10 Sorting - [/price, ating] Mapping - [=firstName+' '+lastName] Wildcarding [?description='*fun*'] Recursive object filter - ..[?name='Bar'] Example URL: /Table/[?price<10] [={name:name, rating: rating}] [ ating]
  38. Push/Comet <ul><li>Open Protocols for Comet </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>XMPP </li></ul></ul><ul><ul><li>REST Channels </li></ul></ul>
  39. Bayeux <ul><li>Service Negotiation </li></ul><ul><li>Publish/Subscribe Protocol </li></ul>
  40. Live Data Notifications with REST Channels http://cometdaily.com/2008/05/13/http-channels-2/
  41. REST Channels <ul><li>Push Protocol to augment REST architectural style </li></ul><ul><li>Based on HTTP standard semantics </li></ul>
  42. HTTP Channels (REST Channels over HTTP) HTTP/1.1 200 OK X-Event: PUT Content-Location: /foo/bar New content of /foo/bar
  43. REST Channels in JSON Accompanied by Demo { “ event”: “put” “ source”: “/foo/bar” “ content”: “New content of /foo/bar” }
  44. Offline + REST <ul><li>REST + Thin Server = Easy Offline </li></ul><ul><ul><li>Going offline requires a “capable” client </li></ul></ul><ul><li>Dojo’s support for Offline SOA Applications </li></ul>Accompanied by Demo
  45. Security in SOA <ul><li>Security clearly distinct from UI code </li></ul><ul><li>Assume users are directly accessing services </li></ul><ul><li>Improved isolation of security </li></ul>
  46. Security with web accessible data storage <ul><li>Typical databases behind the application </li></ul><ul><li>Web DBs are directly accessible </li></ul><ul><ul><li>User authorization becomes integrated with data </li></ul></ul><ul><li>Allows separation of application and security concerns </li></ul>
  47. Transactions
  48. REST/Ajax JSON Databases <ul><li>Standards based interoperable web database interaction </li></ul><ul><li>More direct, cleaner model for creating web applications </li></ul><ul><li>Leverage the web's REST model </li></ul><ul><ul><li>Caching, proxying, etc. </li></ul></ul>
  49. Persevere <ul><li>JSONQuery/JSONPath </li></ul><ul><li>JSON Referencing </li></ul><ul><li>Comet Live Data Notifications </li></ul><ul><li>JSON Schema with evolutionary constraints </li></ul><ul><li>JSON-RPC </li></ul><ul><li>Built-in Security </li></ul><ul><li>Standards based REST interface </li></ul>http://sitepen.com/labs/persevere.php
  50. Characteristics of good client/server application <ul><li>Clean client/server interface </li></ul><ul><li>Interchangeability </li></ul><ul><li>Increased presentation on the client </li></ul><ul><li>Business logic on the server </li></ul>http://www.sitepen.com/blog/2008/07/18/clientserver-model-on-the-web/
  51. Dojo’s SOA <ul><li>Service auto configuration </li></ul><ul><li>Integration into Dojo Data model </li></ul><ul><li>Full REST interaction support </li></ul><ul><li>Comet and Offline capabilities </li></ul><ul><li>All based on standards, easy to switch to something else </li></ul>
  52. REST/ Ajax databases Develop for the future
  53. The Open Web is more than just licensing GPL LGPL BSD
  54. <ul><li>Web Application Development </li></ul><ul><li>Technical Advice </li></ul><ul><li>Support Services </li></ul><ul><li>Training </li></ul>Simple. Fast. Extraordinary. For clients including: Providing: http://sitepen.com/

×