IBM Connect 2014 - AD205: Creating State-of-the-Art Web Applications with Domino REST Services
Upcoming SlideShare
Loading in...5

IBM Connect 2014 - AD205: Creating State-of-the-Art Web Applications with Domino REST Services



By clearly separating IBM Domino data from the web page, Domino REST services can open the door to a new world of interactive web applications. Learn about emerging web standards, including Web ...

By clearly separating IBM Domino data from the web page, Domino REST services can open the door to a new world of interactive web applications. Learn about emerging web standards, including Web Components, that reflect new paradigms and help you create more interactive web applications. Find out what's new in Domino REST services and see examples of state-of-the-art applications that combine emerging web standards and REST.



Total Views
Slideshare-icon Views on SlideShare
Embed Views



2 Embeds 13 12 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    IBM Connect 2014 - AD205: Creating State-of-the-Art Web Applications with Domino REST Services IBM Connect 2014 - AD205: Creating State-of-the-Art Web Applications with Domino REST Services Presentation Transcript

    • AD205: Creating State-ofthe-Art Web Applications with IBM Domino REST Services Akira Sudoh, IBM Dave Delay, IBM © 2014 IBM Corporation
    • Please Note IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion. Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. The content reflects the presenters' own views and does not necessarily represent IBM's positions, strategies or opinions. No official endorsement should be inferred. 2
    • Trademarks and Registered Trademarks To be used in this presentation        3 IBM ® Domino ® Chrome™ Firefox ® Internet Explorer ® Safari ® OSGi™
    • IBM Domino REST Services 4
    • Why Domino REST Services?  Separation of UI, data and business logic Rich Client Phone  API  Tablet Appliance Server 5 Web Browser Enable access from any device / OS Extend reach beyond traditional Domino ecosystem
    • Overview of REST in Domino Multiple services; multiple data models Service name Resource types Data service /api/data Database, View, View entry, Document Calendar service /api/calendar Calendar entry, Calendar notice Mail service /api/mail Mail message, Delegate, Quota Freebusy service 6 Root resource /api/freebusy Busy time, Free room
    • Overview of REST in Domino Multiple data representations  JavaScript Object Notation (JSON) – Default representation for all services – Easy to use from web applications {{ }} 7 BEGIN:VCALENDAR BEGIN:VCALENDAR VERSION:2.0 VERSION:2.0 PRODID:-//Lotus ... //NONSGML ... PRODID:-//Lotus ... //NONSGML ... BEGIN:VEVENT BEGIN:VEVENT DTSTART:20140202T233000Z DTSTART:20140202T233000Z DTEND:20140203T030000Z DTEND:20140203T030000Z LAST-MODIFIED:20121217T183957Z LAST-MODIFIED:20121217T183957Z DTSTAMP:20121217T184244Z DTSTAMP:20121217T184244Z SUMMARY:Super Bowl XLVIII SUMMARY:Super Bowl XLVIII LOCATION:East Rutherford, NJ LOCATION:East Rutherford, NJ UID:8A3941390301436885257AD700661DAE UID:8A3941390301436885257AD700661DAE END:VEVENT END:VEVENT END:VCALENDAR END:VCALENDAR "events": [[ "events": { { "id": "8A3941390301436885257AD700661DAE", "id": "8A3941390301436885257AD700661DAE", "summary": "Super Bowl XLVIII", "summary": "Super Bowl XLVIII", "location": "East Rutherford, NJ", "location": "East Rutherford, NJ", "start": {{ "start": "date": "2014-02-02", "date": "2014-02-02", "time": "23:30:00", "time": "23:30:00", "utc": true "utc": true }, }, "end": {{ "end": "date": "2014-02-03", "date": "2014-02-03", "time": "03:00:00", "time": "03:00:00", "utc": true "utc": true } } } } ] ]  Other representations – iCalendar for calendar entries and notices – MIME for mail messages – Allows reuse of existing parsers & generators (e.g. ical4j & mime4j)
    • Overview of REST in Domino Consistent syntax     8 Correct use of GET, POST, PUT & DELETE verbs (HTTP uniform interface) Consistent JSON property names – href, displayName, email, etc. Consistent query parameters – format, count, sortcolumn, sortorder, etc. Navigate between resources using href properties (see HATEOAS)
    • Overview of Domino REST Services Decoupled from XPages and Domino Designer      9 Compliments, but doesn't require Xpages Access Domino from a web application, native mobile app, embedded system, etc. Build your application in any IDE Use any web application framework – Dojo, jQuery, Web components, etc. Strategically important for integrating with other IBM products
    • Domino Access Services Framework     Domino Access Services (DAS) is a framework for adding REST services to Domino Domino Server Built with OSGi and Apache Wink DAS Servlet IBM delivers each service first to OpenNTF; then to a supported release ... Apache Wink Runtime Domino Web Engine (native code) Customers and business partners may eventually be able to add services too Phone 10 Calendar Service Plug-in Mail Service Plug-in Tablet Server Browser
    • Domino REST Services by Release Service name 9.0 9.0.1 Extlib on OpenNTF DAS framework Yes Yes Yes Yes Data service Yes Yes Yes Yes Calendar service No No Yes Yes Mail service No No No Yes Freebusy service 11 8.5.3 UP1 No No No Yes
    • Sample Applications on OpenNTF    12 Dojo calendar application – – Don't forget to install! Web components sample (data service) – action=openDocument&name=Web%20Components%20Samples%20for%20Domino %20Access%20Services Discussion application for Android (data service) – action=openDocument&name=DomDisc%20for%20Android
    • More Domino REST Service Resources   13 Integration with Social Business Toolkit (SBT) – SBT API Explorer on Greenhouse – JavaScript library in SBT SDK (coming soon) Documentation on the Application Development wiki – lookupName=IBM+Domino+Access+Services+9.0.1#action=openDocument& content=catcontent&ct=api
    • Web Components? 14
    • What if you want...   15 A slider UI as well as a text box in your application, and... Let them talk each other?
    • Lots of stuff... To reuse UI components      You bring in a (or more) JavaScript library/framework(s) You bring in code for the UI components You bring in CSS required for the UI components You understand specifics of JavaScript library/framework(s) More code to let them talk each other <html> <head> <link rel="stylesheet" type="text/css" href="../dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" href="../dijit/themes/claro/claro.css"> <script type="text/javascript" src="../dojo/dojo.js" data-dojo-config="parseOnLoad: 1, async: 1, deps: ['dojo/parser']"></script> </head> <body class="claro"> <input data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value: 0"> <input data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="value: 0"> </body> </html> 16
    • The DOM becomes... Stuffed with lots of elements that UI components create 17
    • What if...    It's as simple as using newer HTML5 components You can create them and application can import and use them You can let them talk each other as simple as binding attributes? <html> <body> <input type="range" max="255" value="{{thenumber}}"> <input type="number" value="{{thenumber}}"> </body> </html> 18
    • Web Components <your-element> Custom Elements New vocabulary for HTML you can define 19
    • Under the umbrella of Web Components      20 HTML Templates – Inert DOM, can be cloned and put it to active DOM Shadow DOM – Encapsulation of DOM ● CSS boundary Custom Elements – Create new HTML element - New vocabulary for HTML you can define – Extend existing elements with new programmatic APIs HTML Imports – Import HTML in a similar manner as CSS Template Binding (Not yet standardized) – Connect components automatically
    • HTML Templates 21
    • HTML Templates Inert DOM, can be cloned and put it to active DOM <template id="my-template"> <!-- Image not fetched until it goes in active DOM --> <img src="my-image.png"> <!-- Script not executed until it goes in active DOM --> <script type="text/javascript" async> alert("Foo"); </script> </template>     HTML in it is parsed, and DOM is created for the inner content, but... template.childNodes is empty, as the content is in a separate DOM (template.content, a document fragment) The content is not rendered (<img> is not fetched, <script> is not executed, etc.) The content can be cloned, and put to regular DOM. It's rendered then document.querySelector("div").appendChild(template.content.cloneNode(true)); 22
    • HTML Templates   23 Supported by: – Chrome (Latest) – Firefox (Latest) But not (yet) by: – IE (But seems supportive) – Safari
    • Shadow DOM 24
    • Shadow DOM Before diving into it... If you click on the gear icon in Chrome Developer Tools, you'll see a check box to show Shadow DOM 25
    • Shadow DOM Exposing something browser vendors have been using already... <input type="range"> has inner UI in HTML, but:  <input type="range"> does not have any child nodes  Such inner UI cannot be accessed from regular DOM tree  Other examples: <video>, <textarea> 26
    • Shadow DOM Create functional boundary between widget UI and application UI   27 Rendered, but separate DOM tree – Can be created by shadowHost.createShadowRoot() and accessed by shadowHost.shadowRoot (Note: These two are currently vendor-prefixed) – Shadow DOM content cannot be accessed via document.getElementById(), document.querySelector(), etc. – To access Shadow DOM content, use shadowRoot.querySelector(), shadowRoot.getElementById(), etc. Encapsulates style – Style sheet in Shadow DOM only affects shadow DOM – Page's style does not affect Shadow DOM ● Can be changed by applyAuthorStyles property in Shadow Root
    • Insertion points <content> works as a insertion point, puts Shadow Host's content into Shadow DOM <style type="text/css"> .highlight { color: red; } Content in Shadow DOM </style> <div class="highlight"> Important items: <ul> <content select=".important-item"></content> </ul> </div> <div> Regular items: <ul><content></content></ul> <div id="my-items"> </div> <li>Upgrade my PC</li> <li class="important-item"> Talk about future web standard </li> <li>Get trip approval</li> Shadow Host's content </div> 28
    • Insertion points Creates a render tree having Shadow Host's content in Shadow DOM <div id="my-items"> #shadow-root <style type="text/css">.highlight { color: red; }</style> <div class="highlight"> Important items: <ul> <li class="important-item"> Shadow Host's Talk about future web standard </li> </ul> </div> <div> Regular items: <ul> <li>Upgrade my PC</li> <li>Get trip approval</li> </ul> </div> </div> 29 content
    • Shadow DOM   30 Supported by: – Chrome (Latest vendor prefixed) – Firefox (Nightly) But not (yet) by: – IE – Safari
    • Custom Elements 31
    • Custom Elements Create your own element  Defined by document.register("my-element", {prototype: proto});  Custom element tag name needs “-” to avoid name collision   32 Once it's defined, you can use: – <my-form></my-form> – document.createElement("my-element") – new Class() Has lifecycle callbacks – createdCallback() – enteredViewCallback() – leftViewCallback() – attributeChangedCallback()
    • Custom Elements You can use it in the exact same way as regular HTML elements var proto = Object.create(HTMLDivElement.prototype); proto.createdCallback = function(){ // Lifecycle callback var root = this.createShadowRoot(); root.textContent = "My text..."; }; = function(){ alert("Foo!"); } var clz = document.register("my-element", {prototype: proto}); // Custom tag name needs "-" var myElement = document.createElement("my-element"); // Shows an alert box; //// Or you can do... // var myElement = new clz(); 33
    • Custom Elements   34 Supported by: – Chrome (Latest behind a flag, Canary by default) – Firefox (Latest behind a flag) But not (yet) by: – IE – Safari
    • HTML Imports 35
    • HTML Imports Load external HTML content, in a similar manner as JavaScript or CSS    36 Adds rel="import" support to <link> – Default content type will become HTML No refetch: If the content has been imported already, content is reused Can be nested: Content from <link rel="import"> can have <link rel="import">, too
    • HTML Imports  37 Supported by: – No browser (yet) :(
    • Template Binding (Formerly Model Driven View) 38
    • TemplateBinding Automatic binding, two-way document.getElementById("main-template").model = { red: 0, Instantiating green: 0, blue: 0 <template> }; <template id="main-template" bind> <div> Red: <input type="range" max="255" value="{{red}}"> <input type="number" value="{{red}}"> </div> <div> Green: <input type="range" max="255" value="{{green}}"> <input type="number" value="{{green}}"> </div> <div> Blue: <input type="range" max="255" value="{{blue}}"> <input type="number" value="{{blue}}"> </div> <input type="color" value="{{rgb:red,green,blue}}"> </template> <template> with data binding ({{property}}) 39 with data
    • TemplateBinding Auto-repeat <template id="main-template" bind> <template> with auto<ul> repeat definition <template repeat="{{list}}"> (repeat="{{property}}") <li>{{name}}</li> </template> </ul> </template> var list = [ {name: "Anne"}, {name: "Ben"}, {name: "Chad"} Instantiating <template> with repeating data ]; document.getElementById("main-template").model = { list: list }; // John will be added as <li> list.push({name: "John"}); 40
    • Template Binding  41 Not standardized yet – Standardization effort for now is around more lower-level APIs, like: ● Object.observe() (Supported by latest Chrome behind a flag) ● Array.observe() (Supported by latest Chrome behind a flag) ● DOM Mutation Observers (Supported by IE11, latest Firefox/Chrome/Safari) ● HTML Templates (Supported by latest Firefox/Chrome)
    • Bringing them all together 42
    • Declarative custom element definition By <polymer-element>, sugar layer on top of Web Components <polymer-element name="my-fader" extends="div" attributes="faded"> <!-- Template content automatically goes in Shadow DOM --> <template> <style type="text/css"> <!-- Import <my-fader> definition --> /* Only affects <div> in Shadow DOM */ <link rel="import" div { href="./my-fader.html"> transition: opacity 2s linear 0; <template id="main-template" bind> } Fade out: </style> <input type="checkbox" <div><content></content></div> checked="{{faded}}"> </template> <my-fader faded="{{faded}}"> <script type="text/javascript"> Text // Internally calls document.register </my-fader> Using Polymer("my-fader", { </template> // Called when faded is changed custom fadedChanged: function(){ element this.shadowRoot.querySelector("div").style.opacity = this.faded ? "0" : ""; } }); Custom element definition </script> </polymer-element> 43
    • What is with Domino REST Services and Web Components, by the way? 44
    • Custom element reflecting REST data Basic form example <polymer-element name="my-form" extends="div" <link rel="import" href="./my-form.html"> attributes="Subject Body" noscript> <template id="main-template" bind> <template> <my-form Using <div> Subject="{{Subject}}" <input type="text" value="{{Subject}}"> Body="{{Body}}"> custom <textarea value="{{Body}}"></textarea> </my-form> element </div> </template> Custom element definition </template> </polymer-element> // Let MyStore be a class fetching REST data from server var store = new MyStore(); store.get(uniqueId).then(function(data){ Instantiating // data is like: // { <template> // Subject: "Hi", with data // Body: "Hi, Anne!" // } document.getElementById("main-template").model = data; }); 45
    • Custom element reflecting REST data Repeating view row example <polymer-element name="my-listview-row" extends="div" attributes="Who Subject" noscript> <template> <div class="listview-row"> <div>{{Who}}</div> <div>{{Subject}}</div> </div> Custom element definition </template> </polymer-element> <link rel="import" href="./my-listview-row.html"> <template id="main-template" bind> <template repeat="{{list}}"> <my-listview-row Who="{{Who}}" Subject="{{Subject}}"> </my-listview-row> </template> </template> var list = []; document.getElementById("main-template").model = { list: list }; // Let MyStore be a class fetching REST data from server var store = new MyStore(); Instantiating store.query().then(function(data){ <template> with data // data is like: // [{Who: "Anne", Subject: "Hello, Anne"}, ...]; [].push.apply(list, data); // UI updated automatically }); 46 Using custom element
    • Demo Discussion database and calendar examples 47
    • Demo Discussion database and calendar examples (Cont'd) 48
    • Demo Discussion database and calendar examples (Cont'd) 49
    • To learn more...         50 Introduction to Web Components: HTML Templates: Shadow DOM: Custom Elements: HTML Imports: Object.observe() and Array.observe(): DOM Mutation Observers: Polymer:
    • Business Considerations Drive the Way Customers Consume Software SaaS / Public Cloud Dedicated Cloud On Premises Agility and Price Advantage Customization, Flexibility Pay per use, standard terms of use You own the license or capital Automatic updates Choice of where and how data is managed Shared infrastructure and ops Completely customizable Instant scale Dedicated infrastructure Considerations 51  How do I buy?  How quickly can I get new features?  Does it matter where data resides?  How important is price?  Do I need to scale up and down rapidly ?  Who manages?  Do I need to customize? Special integrations?
    • Engage Online  SocialBiz User Group – Join the epicenter of Notes and Collaboration user groups  Follow us on Twitter – @IBMConnect and @IBMSocialBiz  LinkedIn – Participate in the IBM Social Business group on LinkedIn:  Facebook – Like IBM Social Business on Facebook  Social Business Insights blog – Read and engage with our bloggers 52
    •  Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite 53
    • Acknowledgements and Disclaimers Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. © Copyright IBM Corporation 2014. All rights reserved.  U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.  IBM, the IBM logo,, and IBM Domino are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at  Chrome is a trademark of Google Inc.  Firefox is a registered trademark of the Mozilla Foundation.  Internet Explorer is a registered trademark of Microsoft Corporation.  Safari is a registered trademark of Apple Inc.  OSGi is a trademark of the OSGi Alliance.  Other company, product, or service names may be trademarks or service marks of others. 54