Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domino Apps!

BTE101: Yes, you can use
those modern frameworks
for mobile Domino®
development
Theo Heselmans, Xceed / Engage

About myself
▪ Doing IBM® Notes® Development & 
Project Mgt. for over 20 years!
▪ Independent consultant since 2001 for Xceed
▪ Coordinator of Engage (BLUG) past 6 years
▪ IBM® Champion since 2011
@theoheselmans
▪ My 20th Lotusphere, 1st time speaker
▪ Head in the sand for too long
▪ Discovering there's a big world out there, 
and it's cool
▪ I like wine and other beverages too

What this IS about
▪ IBM® Notes/Domino® as the ultimate CMS
▪ Building Responsive Hybrid Websites & Mobile Apps
▪ Real live implementations of a few Frameworks/Libraries
▪ Lessons learned
▪ A free Notes CMS database for you to experiment with 
Let's have a quick look at it

The Domino 'Stack'
▪ IBM Notes & Domino is a cool 'Stack'
– Powerful (no-SQL) database
– Top-notch security
– Domino Access Service (DAS) for RESTful interfaces
– Flexible development platform
– Great Notes Client
– Proven and out of the box solution (but not free vs open source solutions)

HTML5 / CSS3 Development
▪ HTML5 is stable, powerful and broadly supported
▪ CSS3 is very flexible
▪ Mobile apps are easy to create and test
– Android Chrome & iOS Safari remote debugging is a godsend
– Chrome's Device Mode is brilliant
▪ Off line use of your apps is possible using Manifest & localStorage
▪ Turning HTML5 websites into Apps is possible
– e.g. PhoneGap or Appcelerator Titanium

What's a Framework / Library
▪ My Definition: 
Any set of CSS and/or JS code 
that do the dirty work for you
– Deal with cross-browser issues
– Responsive & mobile first design in mind
– Reusable components
– HTML - design - code - navigation - data
UI
Architecture
DOM▪ Layered schema:
– UI - Architecture - DOM
– Design - MVC - Supporting libs

Requirements
▪ Frameworks
– As much tailored to your (current) needs
as possible
– Well documented
– Well maintained
– Broadly used
– If MVC: REST support 
see John Dalsgaard REST services
▪ Your Skills
– HTML(5)
– CSS(3)
– JavaScript
– REST / JSON
– Notes:
– Formula language
– LotusScript
– XPages
– Domino Access Service

Bootstrap
▪ A Front-End framework 
Bootstrap is a free collection of tools for creating websites and web applications. 
It contains HTML and CSS-based design templates for grids, typography, forms, buttons, 
navigation and other interface components, as well as optional JavaScript extensions
▪ Examples & Demo:
– Countries
– EY: Topics
– Engage: website
▪ Screenshots and HTML
▪ The Good & the Bad
▪ Bootstrap getbootstrap.com

Bootstrap: Basic HTML (Part 1)
<!DOCTYPE HTML><html>
<head>
<title>ConnectED 2015</title>
<link rel="stylesheet" href="/mydb.nsf/css/bootstrap.min.css">
</head>
<body>


<nav id="nav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/mydb.nsf/">ConnectED 2015</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/mydb.nsf/pages/-home">Home</a></li>
<li><a href="/mydb.nsf/pages/bootstrapabout">About</a></li>
</ul>
</div>
</div>
</nav>


<div class="container">
Main Content goes here
</div>

<script src="/mydb.nsf/js/jquery-1.11.1.min.js"></script>
<script src="/mydb.nsf/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap: the good and the bad
▪ The Bad
– Broadly used
– Not an MVC model: only UI
▪ The Good
– August 2010: Twitter released Bootstrap
as open source.
– GitHub: over 75,000 stars 
and more than 28,000 forks
– Regular updates: current version 3.3.2
– Many interface components
– Excellent documentation, and many
templates
– Easy to get started and implement
– Broadly used ▪ Tip: Bootstrap for XPages

Ratchet.js
▪ A Front-End framework 
Ratchet.js is used to build mobile apps with simple HTML‚ CSS‚ and JS components
– Countries
– Kemin Industries: Lysoforte
▪ Why I changed my mind!
▪ Screenshots and HTML
▪ Ratchet.js goratchet.com

Ratchet.js: Basic HTML (Part 1)
<!DOCTYPE HTML><html>
<head>
<title>ConnectED 2015</title>

<link href="/mydb.nsf/css/ratchet.min.css" rel="stylesheet">

<script src="/mydb.nsf/js/ratchet.min.js"></script>
</head>
<body>

<header class="bar bar-nav">
<a class="icon icon-home pull-left" href="#"></a>
<a class="icon icon-compose pull-right"></a>
<a href="#myNavbar">
<h1 class="title">Welcome to Ratchet</h1>
</a>
</header>

<div class="content">
Main Content here
</div>

<nav class="bar bar-tab">
<a class="tab-item" href="home">
<span class="icon icon-home"></span><span class="tab-label">Home</span>
</a>
<a class="tab-item" href="about">
<span class="icon icon-person"></span><span class="tab-label">About</span>
</a>
<a class="tab-item" href="countries">
<span class="icon icon-list"></span><span class="tab-label">Countries</span>
</a>
</nav>
</body>
</html>

Ratchet.js: the good and the bad
▪ The Good
– Easy to implement
– Separate themes for Android and
iOS
– All basic mobile User Interface
components
– Nice documentation
▪ The Bad
– Relatively young (early 2013)
– Limited number of supported
browsers 
- Android: default and Chrome 
- iOS: Safari
– Only touch support: difficult to test in
desktop browsers
– Intercepts links
– Not an MVC model: only UI

Backbone.js
▪ A JavaScript library 
Backbone.js is a JavaScript library with a RESTful JSON interface 
and is based on the model–view–presenter (MVP) application design paradigm 
(MVP is a derivative of the model–view–controller (MVC))
– Countries
– A major Navy: mSurvey
▪ Why I changed my mind!
▪ Screenshots, Code and HTML
▪ Backbone.js backbonejs.org
Model
Controller
View
Updates User Events
Events Updates

Backbone.js: Code (Part 1)
// MODEL
var Country = Backbone.Model;
// COLLECTION
var CountryCollection = Backbone.Collection.extend({
model: Country,
url: '../api/data/collections/name/countries?count=300' //use a view via DAS
});

//VIEW
var CountryView = Backbone.View.extend ({
el: '#countrydiv',
template: _.template($('#country-template').html()),
initialize: function () {
countryList.fetch({ //fetch the data
success: function() { //if successful, render them in the DOM
countryView.render(); }
})
},
render: function () { //render the countries using the template
this.$el.html(this.template({countries: countryList.models}));
return this; }
});

// RUN IT
var countryList = new CountryCollection(); //create the collection
var countryView = new CountryView(); //create the view

Backbone.js: HTML (Part 4)

<div id="#countrydiv></div>

<script type="text/template" id="country-template">
<div class="table-responsive">
<table class="table table-striped">
<thead><tr><th>Country</th><th>Capital</th></tr></thead>
<tbody>
<% _.each(countries, function(Country) { %>
<tr>
<td><%= Country.get("country") %></td>
<td><%= Country.get("capital") %></td>
</tr>
<% }); %>
</tbody></table></div>
</script>

Backbone.js: the good and the bad
▪ The Good
– Good documentation
– Tiny in size (<7 kb)
– Nice integration with Underscore.js, 
especially for templates
– Routing is easy
– Widely used
– REST support
▪ The Bad
– Totally different concept
– Steeper learning curve
– Decent knowledge of JS required
– No data binding
– MVC model only: no UI

Knockout.js
▪ A JavaScript Framework 
Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern 
with templates. The underlying principles are therefore: 
• a clear separation between domain data, view components and data to be displayed 
• the presence of a clearly defined layer of specialized code 
to manage the relationships between the view components
– Countries
– mSurvey
– Wine Tasting CRUD
▪ Screenshots, Code and HTML
▪ The Good & the Bad ▪ Knockout.js knockoutjs.com
Model
ViewModel
View
Data
Binding Commands

Knockout.js: Country Code VMMV (Part 1)
function AppViewModel() { 
var self = this; 
self.countries = ko.observableArray([]); //create empty observable Array 
 
$.getJSON("../GetCountries?openagent", function(data) { //get JSON of all countries 
self.countries(data); 
}); 
self.continents = ... //removed the code to get the unique list of continents from the countries 
self.filteredCountries = function(cont) { //function to get countries for 1 continent only 
return ko.utils.arrayFilter(self.countries(), function(country) { 
return (country.continent === cont); 
}); 
}; 
} 
ko.applyBindings(new AppViewModel());

Knockout.js: Country Code HTML (Part 2)

<div class="tab-content"
data-bind="template: { name: 'continent-template', foreach: continents }">
</div>

Knockout.js: Country Code Templates (Part 3)
<script type="text/html" id="continent-template"> 
<div class="table-responsive"> 
<table class="table table-striped table-condensed"> 
<thead><tr><th>Country</th><th>Capital</th></tr></thead> 
<tbody data-bind="template: { name: 'country-template',
foreach: $root.filteredCountries($data) }">
</tbody> 
</table> 
</div> 
</script>
 
<script type="text/html" id="country-template"> 
<tr>
<td data-bind="text: country"></td><td data-bind="text: capital"></td>
</tr> 
</script>

Knockout.js: Tasting Code
//trigger an AJAX request to get tastings when the main country selection changes 
self.maincountry.subscribe( function(newValue) { 
$.getJSON('../api/data/collections/name/tastings?count=50&keys=' + newValue,
function(data) { 
var mappedTastings = $.map(data, function(item) { return new Tasting(item); }); 
self.tastings(mappedTastings); 
}); 
});
//part of Saving Code: existing record, so update it (use patch, not post!) 
self.saveTasting = function () {
$.ajax(thistasting.updatelink.href, { 
data: ko.toJSON(thistasting),  
type: "patch", contentType: "application/json", 
success: function(result) { void(0); } 
});}
};

Knockout.js: the good and the bad
▪ The Good
– GitHub: close to 6,000 stars 
and almost 1,000 forks
– Good documentation and 
Interactive tutorials
– Data binding (including attributes)
– Automatic UI refresh
– Built-in Templating
– Mapping via plugin
– REST support
▪ The Bad
– Different concept
– Steeper learning curve
– Decent knowledge of JS required
– Routing not provided
– MVVM model only: no UI

A few interesting Links
▪ 12 Useful JavaScript Resources and Tools smashingapps.com
▪ 35 Best HTML5 Development Tools To Save Your Time smashingapps.com
▪ Javascript Frameworks Comparison: 
Angular, Knockout, Ember and Backbone slideshare.net
▪ ToDoMVC (Helping you select an MV* framework) todomvc.com
▪ Rich JavaScript Applications (the 7 Frameworks) blog.stevensanderson.com
▪ Top 50 Developer Tools & Services of 2014 stackshare.io

Notices and Disclaimers
Copyright © 2015 by International Business Machines Corporation (IBM). No part of this document may be reproduced or transmitted in any form without written permission from IBM.
U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM.
Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include unintentional
technical or typographical errors. IBM shall have no responsibility to update this information. THIS DOCUMENT IS DISTRIBUTED "AS IS" WITHOUT ANY WARRANTY, EITHER EXPRESS OR IMPLIED. IN NO EVENT
SHALL IBM BE LIABLE FOR ANY DAMAGE ARISING FROM THE USE OF THIS INFORMATION, INCLUDING BUT NOT LIMITED TO, LOSS OF DATA, BUSINESS INTERRUPTION, LOSS OF PROFIT OR LOSS OF
OPPORTUNITY. IBM products and services are warranted according to the terms and conditions of the agreements under which they are provided.
Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice.
Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results they
may have achieved. Actual performance, cost, savings or other results in other operating environments may vary.
References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business.
Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for informational
purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation.
It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory
requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or products will
ensure that the customer is in compliance with any law.
Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products in connection with this
publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM EXPRESSLY DISCLAIMS ALL WARRANTIES,
EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right.
IBM, the IBM logo, ibm.com, BrassRing®, Connections™, Domino®, Global Business Services®, Global Technology Services®, SmartCloud®, Social Business®, Kenexa®, Notes®, PartnerWorld®, Prove It!®,
PureSystems®, Sametime®, Verse™, Watson™, WebSphere®, Worklight®, are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service names
might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml.

Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domino Apps!

More Related Content

Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domino Apps!