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.

1. AD205: Creating State-ofthe-Art Web Applications
with IBM Domino REST
Services
Akira Sudoh, IBM
Dave Delay, IBM
© 2014 IBM Corporation

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

3. Trademarks and Registered Trademarks
To be used in this presentation







3
IBM ®
Domino ®
Chrome™
Firefox ®
Internet Explorer ®
Safari ®
OSGi™

4. IBM Domino REST Services
4

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

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

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

8. 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)

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

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

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

12. Sample Applications on OpenNTF



12
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


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
–
http://www-10.lotus.com/ldd/ddwiki.nsf/xpAPIViewer.xsp?
lookupName=IBM+Domino+Access+Services+9.0.1#action=openDocument&
content=catcontent&ct=api

14. Web Components?
14

15. What if you want...


15
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>
16

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

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

19. Web Components
<your-element>
Custom Elements
New vocabulary for HTML you can define
19

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

21. HTML Templates
21

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

23. HTML Templates


23
Supported by:
– Chrome (Latest)
– Firefox (Latest)
But not (yet) by:
– IE (But seems supportive)
– Safari

24. Shadow DOM
24

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

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

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

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

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

30. Shadow DOM


30
Supported by:
– Chrome (Latest vendor prefixed)
– Firefox (Nightly)
But not (yet) by:
– IE
– Safari

31. Custom Elements
31

32. 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()

33. 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...";
};
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 box
myElement.foo();
//// Or you can do...
// var myElement = new clz();
33

34. Custom Elements


34
Supported by:
– Chrome (Latest behind a flag, Canary by default)
– Firefox (Latest behind a flag)
But not (yet) by:
– IE
– Safari

35. HTML Imports
35

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

37. HTML Imports

37
Supported by:
– No browser (yet) :(

38. Template Binding
(Formerly Model Driven View)
38

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

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

41. 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)

42. Bringing them all together
42

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

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

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

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

47. Demo
Discussion database and calendar examples
47

48. Demo
Discussion database and calendar examples (Cont'd)
48

49. Demo
Discussion database and calendar examples (Cont'd)
49

50. To learn more...








50
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. 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?

52. Engage Online

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
52

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

54. 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, 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.
54