Using Cool New Frameworks in (Mobile) Domino Apps

USING COOL NEW FRAMEWORKS IN
(MOBILE) DOMINO APPS

Dec. 16, 2015

Courtney Carter

@Teamstudio

Howard Greenberg

@TLCC

Paul Della-Nebbia

@PaulDN

Theo Heselmans

@TheoHeselmans

Asking Questions

Use the “Questions” pane to ask questions.

AboutTeamstudio

•  Manage, analyze, modernize, and mobilize Notes applications with
software and services from Teamstudio.

•  1600+ active customers, 53 countries

•  Ofﬁces in US, UK, and Japan

Teamstudio NotesTools

•  Manage your Notes applications faster, better, and more easily.

Teamstudio Unplugged

•  Mobile application platform that provides organizations with the capability to extend
their desktop and Web-based applications to mobile devices, giving users access to data
anywhere, anytime, even when they’re ofﬂine.

•  Template applications: Continuity, CustomerView, OneView, Doc Library, Journal,
TeamRoom

Teamstudio XControls

•  Set of controls for IBM Domino developers working on XPages apps and
Notes app modernization projects

•  Full support for PC browser-based user interfaces, as well as mobile interfaces

Teamstudio Services

•  Professional services for Web enablement, development, and
administration

–  Assistance Programs

–  Catalog Scan, Complexity Analysis, Usage Auditor

–  Training

–  Modernization Services

Using Cool New Frameworks in
(Mobile) Domino Apps

1
#XPages
Your Hosts Today:
Howard Greenberg
TLCC
@TLCCLtd
(Mobile) Domino Apps!
Paul Della-Nebbia
TLCC
@PaulDN

How can TLCC Help YOU!
2
• Private classes at
your location or
virtual
•XPages Development
•Support Existing Apps
•Administration
• Let us help you
become an expert
XPages developer!
• Delivered via Notes
• XPages
• Development
• Admin
• User
Self-
Paced
Courses
Mentoring
Instructor-
Led
Classes
Application
Development
and
Consulting
Free
Demo
Courses!

3
 Save hundreds and even
Thousands of Dollars on the most
popular courses and packages
 Through December 31st
Click here for more information

Upcoming and Recorded Webinars
4
www.tlcc.com/xpages-webinar
View Previous Webinars
(use url above)
• To Be Announced – Watch for upcoming webinars at:

5
 Session Preview Tool is Now available!
 $100 discount for previous attendees
 Attend my session on XPages Performance!
More information at the Connect 2016 site!

Asking Questions – Q and A at the end
6
Use the Orange Arrow button to
expand the GoToWebinar panel
Then ask your questions in the
Questions pane!
We will answer your questions
verbally at the end of the
webinar

7
#XPages
Theo Heselmans
@theoheslemans
(Mobile) Domino Apps!

Using Cool New
Frameworks
in (Mobile) Domino® Apps!
Theo Heselmans, Xceed / Engage
@TheoHeselmans

@TheoHeselmans
Pull your head
out of the sand!

@TheoHeselmans
๏ About myself
๏ What this session is not about
๏ The Domino® 'Stack'
๏ Frameworks & Libraries
Agenda
๏ Bootstrap
๏ Ratchet
๏ Backbone
๏ Knockout 
๏ Links & More info
๏ Parting words 
๏ Q&A

@TheoHeselmans
๏ Doing IBM® Notes® Development & 
Project Mgt. for over 20 years!
๏ Independent consultant since 2001 for Xceed
๏ Coordinator of Engage (BLUG) past 6 years
About myself
@theoheselmans
๏ 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
@TheoHeselmans

@TheoHeselmans
๏ Hard core development
๏ XPages
๏ 1000 different Frameworks / Libraries
๏ Mega big applications
What this is NOT about

@TheoHeselmans
๏ 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
What this IS about

@TheoHeselmans
๏ 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)
The Domino 'Stack'
& HTML5 dev.
๏ Mobile HTML5 apps easy to create/test
๏ Android Chrome & iOS Safari remote debugging is a godsend
๏ Off line use of your apps is possible using manifest & localStorage

@TheoHeselmans
๏ 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
๏ Split 
design - code - navigation - data
What's a Framework / Library
UI
Architecture
DOM๏ Layered schema:
๏ UI - Architecture - DOM
๏ Design - MVC - Supporting libs

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

@TheoHeselmans
๏ Tough to choose
๏ Impossible to read/try them all
๏ 'Best of' lists are a good start and # of stars on GitHub
๏ Peers and Social Media are (often) your friends
๏ Keep your eyes open
๏ Don't dive into something new headfirst
๏ Let it mature and prove its value first
๏ Many die out after a year
๏ Do use 'helper' JS tools: jQuery, Underscore.js, Zepto.js
A Gazillion frameworks
and Libraries

@TheoHeselmans
The IBM Notes App:
Content Management System
➡Quick Demo of the Website and the Notes App

@TheoHeselmans
๏ 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 typography, forms, buttons, 
navigation and other interface components, as well as optional JavaScript extensions
๏ Examples & Demo:
๏ EY Topics
๏ Engage website
๏ Countries
๏ Screenshots and HTML
๏ The Good & the Bad
Bootstrap
➡Bootstrap getbootstrap.com

@TheoHeselmans
๏ EY Topics
Bootstrap: Demo Screenshots
๏ Engage.ug

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

@TheoHeselmans

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

@TheoHeselmans

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

@TheoHeselmans
๏ The Good
๏ August 2010: Twitter released
Bootstrap as open source.
๏ GitHub: over 90,000 stars 
more than 38,000 forks 
over 650 contributors
๏ Regular updates: current version 3.3.6
๏ Many interface components
๏ Excellent documentation, and many
templates
๏ Easy to get started and implement
๏ Broadly used
Bootstrap: the good and the bad
๏ The Bad
๏ Broadly used
๏ Not an MVC model: only UI
➡Tip: Bootstrap for XPages

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

@TheoHeselmans
Ratchet.js: Demo Screenshots
๏ Kemin Industries: Lysoforte ®

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

@TheoHeselmans
<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</span></h1>
</a>
</header>

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

@TheoHeselmans
<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>
<script src="/mydb.nsf/js/jquery-1.11.1.min.js"></script>
</body>
</html>

@TheoHeselmans
Ratchet.js: the good and the bad
๏ The Good
๏ GitHub: almost 12,000 stars 
and over 1,300 forks
๏ Easy to implement
๏ Current version 2.02
๏ Separate themes for Android
and iOS
๏ All basic mobile User Interface
components
๏ Nice documentation
๏ The Bad
๏ Relatively young (early 2013)
๏ Little evolution
๏ 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

@TheoHeselmans
๏ 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))
๏ mSurvey for a major Navy
๏ Countries
๏ Did it stick ?
๏ Screenshots, Code and HTML
Backbone.js
➡Backbone.js backbonejs.org
Model
Controller
View
Updates User Events
Events Updates

@TheoHeselmans
Backbone.js: Demo Screenshot
๏ Countries

@TheoHeselmans
Backbone.js: Code (Part 1)
// MODEL
var Country = Backbone.Model;
// COLLECTION
var CountryCollection = Backbone.Collection.extend({
model: Country,
url: '../GetCountries?openagent' //url that returns a correct JSON string
//url: '../api/data/collections/name/countries?count=300' //or use the view via DAS
});

@TheoHeselmans
// 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; }
});

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

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

@TheoHeselmans
Backbone.js: the good and the
bad
๏ The Good
and more than 5,000 forks
๏ Good documentation
๏ Tiny in size (<7 kb)
๏ Nice integration with
Underscore.js, 
especially for templates
๏ Routing is easy
๏ Widely used 
(e.g. AirBnb, USA Today, Rdio, Hulu, Foursquare)
๏ REST support
๏ The Bad
๏ Totally different concept
๏ Steeper learning curve
๏ Decent knowledge of JS
required
๏ No data binding
๏ MVC model only: no UI

@TheoHeselmans
๏ 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
Knockout.js
➡Knockout.js knockoutjs.com
Model
ViewModel
View
Data
Binding Commands

@TheoHeselmans
Knockout.js: Demo Screenshots
๏ Countries ๏ Tastings

@TheoHeselmans
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());

@TheoHeselmans
Knockout.js: Country Code HTML
(Part 2)

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

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

@TheoHeselmans
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); } 
});}
};

@TheoHeselmans
Knockout.js: the good and the bad
๏ The Good
and 1,200+ forks
๏ Good documentation and 
Interactive tutorials/examples
๏ 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

@TheoHeselmans
๏ 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
๏ The Most Trending JavaScript Frameworks & Libraries savedelete.com
๏ A Poll of Modern Frontend Web Developer’s Preferred Tools webdesignledger.com
A few interesting Links

@TheoHeselmans
๏ Try out different frameworks/Libraries
๏ None of them is ideal
๏ Use the best solution for the job
๏ (Major) version upgrades are usually not backwards compatible
๏ Frameworks/Libraries create code lock-ins
๏ Choose wisely 
๏ Don't bury your head in the sand 
Parting words
Be productive and have fun !

Questions????
8
Use the Orange Arrow button to
expand the GoToWebinar panel
Then ask your questions in the
Questions panel!
Remember, we will answer your
questions verbally

#XPages
@TheoHeselmans
@TLCCLtd
@Teamstudio
@PaulDN
Upcoming Events:
 Connect, Orlando – Jan. 31 to Feb. 3
 IBM InterConnect, Las Vegas, NV - Feb 21 to 25th
 Inform 2016 in Sydney, Australia – March 10 to 11th
 Engage, Eindhoven, the Netherlands – Mar. 23 to 24
 EntwicklerCamp, Gelsenkirchen, Germany – April 11 to 13
Question and Answer Time!
9
Teamstudio Questions?
contactus@teamstudio.com
978-712-0924
TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095
Howard Greenberg
Courtney Carter
Theo Heselmans
Paul Della-Nebbia
Save Hundreds with TLCC’s End of Year Sale!!!!

Using Cool New Frameworks in (Mobile) Domino Apps

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Using Cool New Frameworks in (Mobile) Domino Apps

Semelhante a Using Cool New Frameworks in (Mobile) Domino Apps (20)

Mais de Teamstudio

Mais de Teamstudio (18)

Último

Último (20)

Using Cool New Frameworks in (Mobile) Domino Apps