© 2014 IBM Corporation

AD205: Creating State-of-the-Art Web Applications with IBM Domino REST ServicesAkira Sudoh, IBMDave Delay, IBM

22

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.

Please Note

The content reflects the presenters' own views and does not necessarily represent IBM's positions, strategies or opinions. No official endorsement should be inferred.

3

Trademarks and Registered TrademarksTo be used in this presentation

IBM ® Domino ® Chrome™ Firefox ® Internet Explorer ® Safari ® OSGi™

44

IBM Domino REST Services

5

Why Domino REST Services?

Separation of UI, data and business logic

Enable access from any device / OS

Extend reach beyond traditional Domino ecosystem

API

Rich Client

Appliance

Rich Client

Web Browser

Tablet

Phone

Server

6

Overview of REST in DominoMultiple services; multiple data models

Service name Root resource 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 /api/freebusy Busy time, Free room

7

Overview of REST in DominoMultiple data representations

JavaScript Object Notation (JSON)– Default representation for all services– Easy to use from web applications

{ "events": [ { "id": "8A3941390301436885257AD700661DAE", "summary": "Super Bowl XLVIII", "location": "East Rutherford, NJ", "start": { "date": "2014-02-02", "time": "23:30:00", "utc": true }, "end": { "date": "2014-02-03", "time": "03:00:00", "utc": true } } ]}

{ "events": [ { "id": "8A3941390301436885257AD700661DAE", "summary": "Super Bowl XLVIII", "location": "East Rutherford, NJ", "start": { "date": "2014-02-02", "time": "23:30:00", "utc": true }, "end": { "date": "2014-02-03", "time": "03:00:00", "utc": true } } ]}

BEGIN:VCALENDARVERSION:2.0PRODID:-//Lotus ... //NONSGML ...BEGIN:VEVENTDTSTART:20140202T233000ZDTEND:20140203T030000ZLAST-MODIFIED:20121217T183957ZDTSTAMP:20121217T184244ZSUMMARY:Super Bowl XLVIIILOCATION:East Rutherford, NJUID:8A3941390301436885257AD700661DAEEND:VEVENTEND:VCALENDAR

BEGIN:VCALENDARVERSION:2.0PRODID:-//Lotus ... //NONSGML ...BEGIN:VEVENTDTSTART:20140202T233000ZDTEND:20140203T030000ZLAST-MODIFIED:20121217T183957ZDTSTAMP:20121217T184244ZSUMMARY:Super Bowl XLVIIILOCATION:East Rutherford, NJUID:8A3941390301436885257AD700661DAEEND:VEVENTEND:VCALENDAR

Other representations– iCalendar for calendar entries and

notices– MIME for mail messages– Allows reuse of existing parsers &

generators (e.g. ical4j & mime4j)

8

Overview of REST in DominoConsistent syntax

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)

9

Overview of Domino REST ServicesDecoupled from XPages and Domino Designer

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

10

Domino Access Services Framework

Domino Access Services (DAS) is a framework for adding REST services to Domino

Built with OSGi and Apache Wink

IBM delivers each service first to OpenNTF; then to a supported release

Customers and business partners may eventually be able to add services too

Domino Server

DAS Servlet

Domino Web Engine(native code)

...Mail

Service Plug-in

Calendar Service Plug-in

Apache Wink Runtime

BrowserServer

TabletPhone

11

Domino REST Services by Release

Service name 8.5.3 UP1 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

No No No Yes

12

Sample Applications on OpenNTF

Dojo calendar application– http://extlib.openntf.org/– Don't forget to install updateSiteOpenNTFSamples.zip!

Web components sample (data service)– http://www.openntf.org/internal/home.nsf/project.xsp?

action=openDocument&name=Web%20Components%20Samples%20for%20Domino%20Access%20Services

Discussion application for Android (data service)– http://www.openntf.org/Internal/home.nsf/project.xsp?

action=openDocument&name=DomDisc%20for%20Android

13

More Domino REST Service Resources

Integration with Social Business Toolkit (SBT)– SBT API Explorer on

Greenhouse– JavaScript library in SBT SDK

(coming soon)

Documentation on the Application Development wiki– http://www-10.lotus.com/ldd/ddwiki.nsf/xpAPIViewer.xsp?

lookupName=IBM+Domino+Access+Services+9.0.1#action=openDocument&content=catcontent&ct=api

1414

Web Components?

15

What if you want...

A slider UI as well as a text box in your application, and... Let them talk each other?

16

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>

17

The DOM becomes...Stuffed with lots of elements that UI components create

18

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>

1919

Web Components<your-element>

Custom ElementsNew vocabulary for HTML you can define

20

Under the umbrella of Web Components

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

2121

HTML Templates

22

HTML TemplatesInert 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 thendocument.querySelector("div").appendChild(template.content.cloneNode(true));

23

HTML Templates

Supported by:– Chrome (Latest)– Firefox (Latest)

But not (yet) by:– IE (But seems supportive)– Safari

2424

Shadow DOM

25

Shadow DOMBefore diving into it...

If you click on the gear icon in Chrome Developer Tools, you'll see a check box to show Shadow DOM

26

Shadow DOMExposing 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>

27

Shadow DOMCreate functional boundary between widget UI and application UI

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

28

<style type="text/css"> .highlight { color: red; }</style><div class="highlight"> Important items: <ul> <content select=".important-item"></content> </ul></div><div> Regular items: <ul><content></content></ul></div>

<div id="my-items"> <li>Upgrade my PC</li> <li class="important-item"> Talk about future web standard </li> <li>Get trip approval</li></div>

Content in Shadow DOM

Shadow Host's content

Insertion points<content> works as a insertion point, puts Shadow Host's content into Shadow DOM

29

<div id="my-items"> #shadow-root <style type="text/css">.highlight { color: red; }</style> <div class="highlight"> Important items: <ul> <li class="important-item"> 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>

Insertion pointsCreates a render tree having Shadow Host's content in Shadow DOM

Shadow Host's content

30

Shadow DOM

Supported by:– Chrome (Latest vendor prefixed)– Firefox (Nightly)

But not (yet) by:– IE– Safari

3131

Custom Elements

32

Custom ElementsCreate your own element

Defined by document.register("my-element", {prototype: proto});

Custom element tag name needs “-” to avoid name collision

Once it's defined, you can use:– <my-form></my-form>– document.createElement("my-element")– new Class()

Has lifecycle callbacks– createdCallback()– enteredViewCallback()– leftViewCallback()– attributeChangedCallback()

33

var proto = Object.create(HTMLDivElement.prototype);proto.createdCallback = function(){ // Lifecycle callback var root = this.createShadowRoot(); root.textContent = "My text...";};proto.foo = function(){ alert("Foo!"); }var clz = document.register("my-element", {prototype: proto}); // Custom tag name needs "-"var myElement = document.createElement("my-element");// Shows an alert boxmyElement.foo();//// Or you can do...// var myElement = new clz();

Custom ElementsYou can use it in the exact same way as regular HTML elements

34

Custom Elements

Supported by:– Chrome (Latest behind a flag, Canary by default)– Firefox (Latest behind a flag)

But not (yet) by:– IE– Safari

3535

HTML Imports

36

HTML ImportsLoad external HTML content, in a similar manner as JavaScript or CSS

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

37

HTML Imports

Supported by:– No browser (yet) :(

3838

Template Binding(Formerly Model Driven View)

39

<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>

TemplateBindingAutomatic binding, two-way

document.getElementById("main-template").model = { red: 0, green: 0, blue: 0};

Instantiating <template> with data

<template> with data binding ({{property}})

40

TemplateBindingAuto-repeat

<template id="main-template" bind> <ul> <template repeat="{{list}}"> <li>{{name}}</li> </template> </ul></template> var list = [

{name: "Anne"}, {name: "Ben"}, {name: "Chad"}];document.getElementById("main-template").model = { list: list};// John will be added as <li>list.push({name: "John"});

<template> with auto-repeat definition (repeat="{{property}}")

Instantiating <template> with repeating data

41

Template Binding

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)

4242

Bringing them all together

43

<polymer-element name="my-fader" extends="div" attributes="faded"> <!-- Template content automatically goes in Shadow DOM --> <template> <style type="text/css"> /* Only affects <div> in Shadow DOM */ div { transition: opacity 2s linear 0; } </style> <div><content></content></div> </template> <script type="text/javascript"> // Internally calls document.register Polymer("my-fader", { // Called when faded is changed fadedChanged: function(){ this.shadowRoot.querySelector("div").style.opacity = this.faded ? "0" : ""; } }); </script></polymer-element>

Declarative custom element definitionBy <polymer-element>, sugar layer on top of Web Components

<!-- Import <my-fader> definition --><link rel="import" href="./my-fader.html"><template id="main-template" bind> Fade out: <input type="checkbox" checked="{{faded}}"> <my-fader faded="{{faded}}"> Text </my-fader></template>

Custom element definition

Using custom element

44

What is with Domino REST Services and Web Components, by the way?

45

Custom element reflecting REST dataBasic form example

<polymer-element name="my-form" extends="div" attributes="Subject Body" noscript> <template> <div> <input type="text" value="{{Subject}}"> <textarea value="{{Body}}"></textarea> </div> </template></polymer-element>

<link rel="import" href="./my-form.html"><template id="main-template" bind> <my-form Subject="{{Subject}}" Body="{{Body}}"> </my-form></template>

// Let MyStore be a class fetching REST data from servervar store = new MyStore();store.get(uniqueId).then(function(data){ // data is like: // { // Subject: "Hi", // Body: "Hi, Anne!" // } document.getElementById("main-template").model = data;});

Custom element definition

Using custom element

Instantiating <template> with data

46

Custom element reflecting REST dataRepeating 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> </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 servervar store = new MyStore();store.query().then(function(data){ // data is like: // [{Who: "Anne", Subject: "Hello, Anne"}, ...]; [].push.apply(list, data); // UI updated automatically});

Instantiating <template> with data

Custom element definition

Using custom element

47

DemoDiscussion database and calendar examples

48

DemoDiscussion database and calendar examples (Cont'd)

49

DemoDiscussion database and calendar examples (Cont'd)

50

To learn more...

Introduction to Web Components: http://w3c.github.io/webcomponents/explainer/ HTML Templates:

https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html Shadow DOM: http://w3c.github.io/webcomponents/spec/shadow/ Custom Elements: http://w3c.github.io/webcomponents/spec/custom/ HTML Imports: http://w3c.github.io/webcomponents/spec/imports/ Object.observe() and Array.observe():

http://wiki.ecmascript.org/doku.php?id=harmony:observe DOM Mutation Observers:

https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers Polymer: http://www.polymer-project.org/

51

SaaS / Public Cloud Dedicated Cloud On Premises

Agility and Price Advantage

Pay per use, standard terms of use

Automatic updates

Shared infrastructure and ops

Instant scale

Customization, Flexibility

You own the license or capital

Choice of where and how data is managed

Completely customizable

Dedicated infrastructure

ConsiderationsHow 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?

Business Considerations Drive the Way Customers Consume Software

5252

SocialBiz User Group socialbizug.org– Join the epicenter of Notes and Collaboration user groups

Follow us on Twitter– @IBMConnect and @IBMSocialBiz

LinkedIn http://bit.ly/SBComm– Participate in the IBM Social Business group on LinkedIn:

Facebook https://www.facebook.com/IBMSocialBiz– Like IBM Social Business on Facebook

Social Business Insights blog ibm.com/blogs/socialbusiness– Read and engage with our bloggers

Engage Online

53

Access Connect Online to complete your session surveys using any:– Web or mobile browser – Connect Online kiosk onsite

53

5454

© 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, ibm.com, 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 www.ibm.com/legal/copytrade.shtml

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.

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.

Acknowledgements and Disclaimers