Itemscript, a specification for RESTful JSON integration


Published on

a briefing on the Itemscript project and a demonstration of the Item Lens proof of concept.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Itemscript, a specification for RESTful JSON integration

  1. 1. Itemscript A declarative language based on JSON
  2. 2. Vision Simple schema  data store application markup Applications from components De-couple technical details Lean development Business agility
  3. 3. Itemscript is Declarative <ul><ul><li>Separates design ( what )  from construction  ( how ) </li></ul></ul><ul><ul><ul><li>Simple API </li></ul></ul></ul><ul><ul><ul><li>Lends itself to iterative development </li></ul></ul></ul><ul><ul><ul><li>Technical details are hidden </li></ul></ul></ul><ul><ul><ul><li>Controls are exposed </li></ul></ul></ul><ul><ul><ul><li>Swap components without breaking the API </li></ul></ul></ul>
  4. 6. Itemscript Philosophy <ul><ul><li>Applications are multi-layered </li></ul></ul><ul><ul><li>Core is compiled code </li></ul></ul><ul><ul><li>Wrapped around that are configuration files </li></ul></ul><ul><ul><li>Wrapped around that are user settings     </li></ul></ul><ul><ul><li>Compiled settings are the hardest to change </li></ul></ul><ul><ul><li>Configuration files help, but only offer limited access </li></ul></ul><ul><ul><li>User settings are usually very limited </li></ul></ul><ul><ul><li>Applications should expose all useful settings </li></ul></ul>Core Configuration User settings
  5. 7. Itemscript is JSON <ul><ul><li>JSON is simple </li></ul></ul><ul><ul><li>JSON has widespread support </li></ul></ul><ul><ul><li>JSON is an ideal data-interchange language </li></ul></ul>
  6. 8. JSON easily maps to native objects <ul><ul><li>JSON Objects </li></ul></ul><ul><ul><li>Native objects & packages </li></ul></ul><ul><ul><li>Nested object graphs </li></ul></ul><ul><ul><li>Maps/hashes/dictionaries </li></ul></ul><ul><ul><li>Databases </li></ul></ul><ul><ul><li>Key-value stores </li></ul></ul><ul><ul><li>Cloud databases       </li></ul></ul><ul><ul><li>JSON Arrays </li></ul></ul><ul><ul><li>Lists/arrays/sets </li></ul></ul><ul><ul><li>Query results </li></ul></ul>
  7. 9. Extending JSON <ul><ul><li>Deal with more data than fits in memory </li></ul></ul><ul><ul><ul><li>Databases </li></ul></ul></ul><ul><ul><ul><li>Queries </li></ul></ul></ul><ul><ul><li>Handle references </li></ul></ul><ul><ul><li>Manage local and remote data </li></ul></ul><ul><ul><li>Handle identifiers </li></ul></ul><ul><ul><li>Support schemas </li></ul></ul><ul><ul><li>Manage persistence </li></ul></ul><ul><ul><li>Handle events </li></ul></ul>
  8. 10. Semantics <ul><ul><li>Itemscript Schema </li></ul></ul><ul><li>     JSON Schema language         </li></ul><ul><ul><li>Itemscript JAM   JSON Application Markup </li></ul></ul>
  9. 11. Itemscript schema Dog Type &quot;com.example.petstore.SCHEMA&quot; : { &quot;Dog&quot; : { &quot;ID name&quot; : &quot;&quot;, &quot;weight&quot; : 0, &quot;REQUIRED owner&quot; : &quot;&quot;, &quot;breed&quot; : &quot;&quot;, &quot;isFixed&quot; : true, } } item of type Dog: &quot;com.example.petstore.dogs.Bella&quot; : { &quot;TYPE&quot; : &quot;com.example.petstore.SCHEMA.Dog&quot;, &quot;name&quot; : &quot;Bella&quot;, &quot;weight&quot; : 9.2, &quot;owner&quot; : &quot;Vera&quot;, &quot;breed&quot; : &quot;Cavalier King Charles&quot;, &quot;isFixed&quot; : true }
  10. 12. Itemscript JAM {            &quot;widget&quot; : &quot;GWT.Image&quot;,            &quot;title&quot; : &quot;Itemscript Logo&quot;,            &quot;width&quot; : &quot;100px&quot;,            &quot;height&quot; : &quot;100px&quot;,            &quot;url&quot; : &quot;./itemscript-logo.jpg&quot;          }
  11. 14. Business agility <ul><ul><li>Lean development using declarations </li></ul></ul><ul><ul><ul><li>Developer & user iterate together </li></ul></ul></ul><ul><ul><ul><li>Discover needs as you develop solutions </li></ul></ul></ul><ul><ul><li>Iterate applications as requirements develop </li></ul></ul><ul><ul><ul><li>Add elements & event handlers as you need them </li></ul></ul></ul><ul><ul><ul><li>Trade up as better options arrive </li></ul></ul></ul>
  12. 15. Proof of Concept <ul><ul><li>Item Lens ( JAM animator ) </li></ul></ul><ul><ul><ul><li>rich web UI based on Google GWT </li></ul></ul></ul><ul><ul><li>Item Store ( Column store ) </li></ul></ul><ul><ul><ul><li>persistence based on Apache Derby            </li></ul></ul></ul><ul><ul><li>Item Hash (Model application) </li></ul></ul><ul><ul><ul><li>item tracker built using Itemscript JAM </li></ul></ul></ul>
  13. 17. Itemscript execution Itemscript Item Lens Item Store Schema JAM Item Store Protocol SQL MQ Cache XML
  14. 18. Itemscript Applications <ul><ul><li>“ Small pieces loosely joined” </li></ul></ul><ul><ul><li>a collection of Lego bricks </li></ul></ul><ul><ul><li>Compiled objects are managed in libraries, by type </li></ul></ul><ul><ul><li>All &quot;wiring-up&quot; is done using JSON declarations </li></ul></ul><ul><ul><li>No sharp distinction between </li></ul></ul><ul><ul><li>application-building, </li></ul></ul><ul><ul><li>configuration, or </li></ul></ul><ul><ul><li>user settings </li></ul></ul>http://www. smallpieces .com
  15. 19. How we built it <ul><ul><li>Build objects that can be configured using JSON. </li></ul></ul><ul><ul><li>Use semantics that describe the domain             widget, handler, page </li></ul></ul><ul><ul><ul><ul><ul><li>ticket, priority, status </li></ul></ul></ul></ul></ul><ul><li>white  </li></ul><ul><ul><li>For each object type, build a factory that trades JSON for an object instance. </li></ul></ul><ul><ul><li>For each class of object ( e.g. widget ), combine the factories into a foundry. </li></ul></ul><ul><ul><li>Factor out common code. </li></ul></ul>
  16. 20. Itemscript System <ul><ul><li>Each system has one &quot;root&quot; JSON object </li></ul></ul><ul><ul><ul><li>Acts as shared in-memory database for your application. </li></ul></ul></ul><ul><ul><ul><li>Application configuration </li></ul></ul></ul><ul><ul><ul><li>Application state </li></ul></ul></ul><ul><ul><li>You can load additional Items - hold as long as needed, natively-garbage-collected. </li></ul></ul><ul><ul><ul><li>Load system and initial configuration </li></ul></ul></ul><ul><ul><ul><li>Load Item from remote datastore </li></ul></ul></ul><ul><ul><ul><li>Copy part of Item to current application state </li></ul></ul></ul><ul><ul><ul><li>Discard Item </li></ul></ul></ul>
  17. 21. The Item <ul><ul><li>The smallest unit of transferrable data. </li></ul></ul><ul><ul><li>Guaranteed to be transmitted as a whole. </li></ul></ul><ul><ul><li>Guaranteed to be fully navigable locally/synchronously.       </li></ul></ul><ul><ul><li>Consists of a JSON Object, including nested other objects. </li></ul></ul><ul><ul><li>Metadata and data live together in the JSON Object. </li></ul></ul><ul><ul><li>_ prefix denotes metadata . _CONNECTION key tells you where this Item came from. _ID key gives you the GUID key for an Item. </li></ul></ul><ul><ul><li>_PARENT_ID key gives you the GUID key for a parent </li></ul></ul>
  18. 22. Item Lens applications <ul><ul><li>Application </li></ul></ul><ul><ul><ul><li>a set of nested Widgets. </li></ul></ul></ul><ul><ul><ul><li>usually includes a PagePanel. </li></ul></ul></ul><ul><ul><li>PagePanel shows the Pages that have been defined. </li></ul></ul><ul><ul><ul><li>Each Page is a set of nested Widgets. </li></ul></ul></ul><ul><ul><li>Popups are also a set of nested Widgets. </li></ul></ul><ul><ul><ul><li>Dialog boxes </li></ul></ul></ul><ul><ul><ul><li>Error boxes   </li></ul></ul></ul>
  19. 23. Item Lens bootstrap <ul><ul><li>Item Lens starts an application: </li></ul></ul><ul><ul><ul><li>loads modules (using GWT module system), </li></ul></ul></ul><ul><ul><ul><li>modules register Foundries containing Factories, or register additional Factories in existing Foundries. e.g. WidgetFoundry   </li></ul></ul></ul><ul><ul><li>Item Lens loads and stores the script file. </li></ul></ul><ul><ul><ul><li>Reads script file for more definitions - widgets, pages, popups </li></ul></ul></ul><ul><ul><ul><li>stores them in the corresponding Foundry.   </li></ul></ul></ul><ul><ul><li>Item Lens reads script file to build the application.   </li></ul></ul>
  20. 24. Item Store <ul><ul><li>The Item Store is a key-value store of Items. </li></ul></ul><ul><ul><li>  </li></ul></ul><ul><ul><li>Any Item can be the root of another key-value store. </li></ul></ul><ul><ul><ul><li>May map to: database-table-row. </li></ul></ul></ul><ul><ul><ul><li>Or to: database-table-row-subTable-rowset. </li></ul></ul></ul><ul><ul><li>  </li></ul></ul><ul><ul><li>Easily replaced with SQL tables, key/value stores </li></ul></ul><ul><ul><li>  </li></ul></ul><ul><ul><li>Maps Item Store namespace locations to connect to remote locations and services. </li></ul></ul>
  21. 25. Item Store <ul><ul><li>Item Store RPC </li></ul></ul><ul><ul><ul><li>Simple data store </li></ul></ul></ul><ul><ul><ul><ul><li>Get </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Put </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Remove </li></ul></ul></ul></ul><ul><ul><ul><li>Simple proxy for the service provider </li></ul></ul></ul><ul><ul><ul><ul><li>Connect services when your application is ready </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Swap out services without changing applications </li></ul></ul></ul></ul>
  22. 26. Developing Itemscript applications <ul><ul><li>Client side </li></ul></ul><ul><ul><ul><li>Wrap widgets and components in Itemscript </li></ul></ul></ul><ul><ul><ul><li>Wire up components to build interfaces </li></ul></ul></ul><ul><ul><li>Server side </li></ul></ul><ul><ul><ul><li>Declare Itemscript data types  </li></ul></ul></ul><ul><ul><ul><li>Assign types to locations </li></ul></ul></ul><ul><ul><ul><li>Connect locations to services </li></ul></ul></ul>
  23. 27. Item Hash <ul><ul><li>Building the model application  </li></ul></ul><ul><ul><ul><li>item hash use case </li></ul></ul></ul><ul><ul><ul><li>item hash design process </li></ul></ul></ul><ul><ul><ul><li>pulldown list example </li></ul></ul></ul><ul><ul><ul><li>date picker example </li></ul></ul></ul><ul><ul><ul><li>event example </li></ul></ul></ul><ul><ul><ul><li>adding a new field </li></ul></ul></ul><ul><ul><ul><li>adding a new event handler </li></ul></ul></ul>
  24. 28. Item Hash Page Nesting
  25. 29. New Case Page Nesting
  26. 30. Editing the Form                   {                                &quot;widget&quot; : &quot;GWT.VerticalPanel&quot;,                                    &quot;contents&quot; : [                         {                           &quot;widget&quot; : &quot;GWT.Html&quot;,                           &quot;html&quot; : &quot;<small>Priority</small>&quot;                           &quot;id&quot; : &quot;Priority&quot;                         },                         {                          &quot;widget&quot; : &quot;GWT.ListBox&quot;,                          &quot;width&quot; : &quot;200px&quot;,                          &quot;height&quot; : &quot;20px&quot;                          &quot;data&quot; : &quot;ItemHash.db/priorities&quot;                         }                      ]                   }
  27. 31. Item Lens &quot;Can I set the date picker to tomorrow?&quot;
  28. 32. Changing the Date Picker What would the JSON look like? {      &quot;widget&quot; : &quot;ItemLens.DatePickerTextBox&quot;      &quot;width&quot; : &quot;200px&quot;,      &quot;height&quot; : &quot;25px&quot;,    &quot;date&quot; : &quot;tomorrow&quot; }
  29. 33. Changing the Date Picker When the &quot;date&quot; declaration says &quot;tomorrow&quot;, what logic do we need to add? if (params.hasOptionalString( &quot;date&quot; )) {      String dateStr = params.getString( &quot;date&quot; );      if (dateStr.equalsIgnoreCase( &quot;tomorrow&quot; )) {          Date tomorrow = new Date( new              Date().getTime()+ DAY_AS_MILLISECONDS );          box.setValue(tomorrow);      } }
  30. 34. Event Handling &quot;Let's make the login box pop up.&quot;
  31. 35. Event Handling What would the JSON look like? {      &quot;widget&quot; : &quot;GWT.Html&quot;        &quot;cellHorizontalAlignment&quot; : &quot;right&quot;        &quot;html&quot; : &quot;<small><b>login</b></small>&quot;        &quot;clickHandlers&quot; : {          &quot;clickHandler&quot; : &quot;ItemLens.PopupPanelShowClickHandler&quot;,          &quot;popup&quot; : &quot;loginPrompt&quot;    } }
  32. 36. Event Handling Implementing a &quot;clickHandler&quot; <ul><ul><li>Register a factory to create an action. </li></ul></ul>Animating &quot;popup&quot; : &quot;loginPrompt&quot; <ul><ul><li>Read the &quot;loginPrompt&quot; object in &quot;popups&quot; section. </li></ul></ul><ul><ul><li>Parse loginPrompt for the parameter needed. </li></ul></ul><ul><ul><li>Build a popup widget. </li></ul></ul>
  33. 37. Event Handling &quot;popups&quot;: {     &quot;loginPrompt&quot; : {       &quot;widget&quot; : &quot;GWT.DialogBox&quot;,       &quot;id&quot; : &quot;Login&quot;,       &quot;title&quot; : &quot;user login&quot;,       &quot;showRelativeTo&quot; : &quot;searchbox&quot;,       &quot;width&quot; : &quot;100px&quot;,       &quot;cellHorizontalAlignment&quot; : &quot;center&quot;,       &quot;cellVerticalAlignment&quot; : &quot;bottom&quot;,       &quot;html&quot; : &quot;<strong>User Login</strong>&quot;,       &quot;autohide&quot; : false,       &quot;contents&quot; : {       &quot;widget&quot; : &quot;GWT.VerticalPanel&quot;,       &quot;cellSpacing&quot; : 5       &quot;contents&quot; : [                ...
  34. 38. Adding Widget Libraries <ul><li>GChart </li></ul>{   &quot;widget&quot; : &quot;GChart.Chart&quot; ,    &quot;canvas&quot; : true ,    &quot;chartHeight&quot; : 200,    &quot;chartWidth&quot; : 300,    &quot;chartTitle&quot; : &quot;&lt;h3&gt;2008 Sales by Pie    Flavor&lt;br&gt;(Puny Pies, Inc.) &lt;/h3&gt;&quot; ,    &quot;legendVisible&quot; : false ,    &quot;initialPieSliceOrientation&quot; : 0.425,    &quot;curves&quot; : [       {        &quot;symbol&quot; : &quot;pieSliceOptimalShading&quot; ,        &quot;modelWidth&quot; : 6,        &quot;backgroundColor&quot; : &quot;green&quot; ,        &quot;borderColor&quot; : &quot;white&quot; ,        &quot;height&quot; : 0,        &quot;fillSpacing&quot; : 0,        &quot;fillThickness&quot; : 3,        &quot;hoverText&quot; : &quot;Apple, 65%&quot; ,        &quot;pieSliceSize&quot; : 0.65,        &quot;points&quot; : [          {            &quot;point&quot; : &quot;5,5&quot; ,            &quot;annotationText&quot; : &quot;Apple&quot; ,            &quot;annotationLocation&quot; : &quot;outsidePieArc&quot;          }          ... <ul><ul><li>Designers learn a few new declarations, not a new API </li></ul></ul><ul><ul><li>Full demo at </li></ul></ul>
  35. 39. Downloads <ul><ul><li>Item Lens </li></ul></ul><ul><li>          AJAX using Google GWT </li></ul><ul><li>         Components from Google Maps, Gchart, GWT Widget library </li></ul><ul><ul><li>Itemscript Core Libraries </li></ul></ul><ul><li>         Convenient JSON library for Java & GWT applications </li></ul>
  36. 40. What's Next? <ul><ul><li>Item Store </li></ul></ul><ul><ul><li>Itemscript schema validator </li></ul></ul><ul><ul><li>Declarative security model    </li></ul></ul><ul><ul><li>Hosted Service </li></ul></ul><ul><ul><li>Application exchange </li></ul></ul>
  37. 41. Working with Itemscript Project pages Twitter updates FAQ