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	

•  Offices 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 offline.	

•  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
Using Cool New Frameworks in
(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
Using Cool New Frameworks in
(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
Bootstrap
@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
Bootstrap: Basic HTML (Part 2)
<!-- Fixed navbar -->
<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
Bootstrap: Basic HTML (Part 3)
<!-- Begin page content -->
<div class="container">
Main Content goes here
</div>
<!-- Bootstrap & JQuery core JavaScript -->
<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
Ratchet.js
@TheoHeselmans
๏ A Front-End framework

Ratchet.js is used to build mobile apps with simple HTML‚ CSS‚ and
JS components
๏ Examples & Demo:
๏ Kemin Industries: Lysoforte
๏ Countries
๏ Why I changed my mind!
๏ Screenshots and HTML
๏ The Good & the Bad
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>
<!-- Include the compiled Ratchet CSS -->
<link href="/mydb.nsf/css/ratchet.min.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS-->
<script src="/mydb.nsf/js/ratchet.min.js"></script>
</head>
<body>
@TheoHeselmans
Ratchet.js: Basic HTML (Part 2)
<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>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
Main Content here
</div>
@TheoHeselmans
Ratchet.js: Basic HTML (Part 3)
<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
Backbone.js
@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))
๏ Examples & Demo:
๏ mSurvey for a major Navy
๏ Countries
๏ Did it stick ?
๏ Screenshots, Code and HTML
๏ The Good & the Bad
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
Backbone.js: Code (Part 2)
// 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
Backbone.js: Code (Part 3)
// RUN IT
var countryList = new CountryCollection(); //create the collection
var countryView = new CountryView(); //create the view
@TheoHeselmans
Backbone.js: HTML (Part 4)
<!-- Target DIV -->
<div id="countrydiv></div>
<!-- Template -->
<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
๏ GitHub: over 23,000 stars

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
Knockout.js
@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
๏ Examples & Demo:
๏ Countries
๏ mSurvey
๏ Wine Tasting CRUD
๏ Screenshots, Code and HTML
๏ The Good & the Bad
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)
<!-- Tab panes -->
<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
๏ GitHub: over 7,000 stars

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

  • 1.
    USING COOL NEWFRAMEWORKS IN (MOBILE) DOMINO APPS Dec. 16, 2015
  • 2.
    Courtney Carter @Teamstudio Howard Greenberg @TLCC PaulDella-Nebbia @PaulDN Theo Heselmans @TheoHeselmans
  • 3.
    Asking Questions Use the“Questions” pane to ask questions.  
  • 4.
    AboutTeamstudio •  Manage, analyze,modernize, and mobilize Notes applications with software and services from Teamstudio. •  1600+ active customers, 53 countries •  Offices in US, UK, and Japan
  • 5.
    Teamstudio NotesTools •  Manageyour Notes applications faster, better, and more easily.
  • 6.
    Teamstudio Unplugged •  Mobileapplication 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 offline. •  Template applications: Continuity, CustomerView, OneView, Doc Library, Journal, TeamRoom
  • 7.
    Teamstudio XControls •  Setof 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
  • 8.
    Teamstudio Services •  Professionalservices for Web enablement, development, and administration –  Assistance Programs –  Catalog Scan, Complexity Analysis, Usage Auditor –  Training –  Modernization Services
  • 9.
    Using Cool NewFrameworks in (Mobile) Domino Apps
  • 10.
    1 #XPages Your Hosts Today: HowardGreenberg TLCC @TLCCLtd Using Cool New Frameworks in (Mobile) Domino Apps! Paul Della-Nebbia TLCC @PaulDN
  • 11.
    How can TLCCHelp 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!
  • 12.
    3  Save hundredsand even Thousands of Dollars on the most popular courses and packages  Through December 31st Click here for more information
  • 13.
    Upcoming and RecordedWebinars 4 www.tlcc.com/xpages-webinar View Previous Webinars (use url above) • To Be Announced – Watch for upcoming webinars at:
  • 14.
    5  Session PreviewTool is Now available!  $100 discount for previous attendees  Attend my session on XPages Performance! More information at the Connect 2016 site!
  • 15.
    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
  • 16.
    7 #XPages Theo Heselmans @theoheslemans Using CoolNew Frameworks in (Mobile) Domino Apps!
  • 17.
    Using Cool New Frameworks in(Mobile) Domino® Apps! Theo Heselmans, Xceed / Engage @TheoHeselmans
  • 18.
  • 19.
    @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
  • 20.
    @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
  • 21.
    @TheoHeselmans ๏ Hard coredevelopment ๏ XPages ๏ 1000 different Frameworks / Libraries ๏ Mega big applications What this is NOT about
  • 22.
    @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
  • 23.
    @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
  • 24.
    @TheoHeselmans ๏ My Definition:
 Anyset 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
  • 25.
    @TheoHeselmans ๏ Frameworks ๏ Asmuch 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
  • 26.
    @TheoHeselmans ๏ Tough tochoose ๏ 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
  • 27.
    @TheoHeselmans The IBM NotesApp: Content Management System ➡Quick Demo of the Website and the Notes App
  • 28.
  • 29.
    @TheoHeselmans ๏ A Front-Endframework
 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
  • 30.
    @TheoHeselmans ๏ EY Topics Bootstrap:Demo Screenshots ๏ Engage.ug
  • 31.
    @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>
  • 32.
    @TheoHeselmans Bootstrap: Basic HTML(Part 2) <!-- Fixed navbar --> <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>
  • 33.
    @TheoHeselmans Bootstrap: Basic HTML(Part 3) <!-- Begin page content --> <div class="container"> Main Content goes here </div> <!-- Bootstrap & JQuery core JavaScript --> <script src="/mydb.nsf/js/jquery-1.11.1.min.js"></script> <script src="/mydb.nsf/js/bootstrap.min.js"></script> </body> </html>
  • 34.
    @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
  • 35.
  • 36.
    @TheoHeselmans ๏ A Front-Endframework
 Ratchet.js is used to build mobile apps with simple HTML‚ CSS‚ and JS components ๏ Examples & Demo: ๏ Kemin Industries: Lysoforte ๏ Countries ๏ Why I changed my mind! ๏ Screenshots and HTML ๏ The Good & the Bad Ratchet.js ➡Ratchet.js goratchet.com
  • 37.
  • 38.
    @TheoHeselmans Ratchet.js: Basic HTML(Part 1) <!DOCTYPE HTML><html> <head> <title>ConnectED 2015</title> <!-- Include the compiled Ratchet CSS --> <link href="/mydb.nsf/css/ratchet.min.css" rel="stylesheet"> <!-- Include the compiled Ratchet JS--> <script src="/mydb.nsf/js/ratchet.min.js"></script> </head> <body>
  • 39.
    @TheoHeselmans Ratchet.js: Basic HTML(Part 2) <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> <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --> <div class="content"> Main Content here </div>
  • 40.
    @TheoHeselmans Ratchet.js: Basic HTML(Part 3) <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>
  • 41.
    @TheoHeselmans Ratchet.js: the goodand 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
  • 42.
  • 43.
    @TheoHeselmans ๏ A JavaScriptlibrary
 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)) ๏ Examples & Demo: ๏ mSurvey for a major Navy ๏ Countries ๏ Did it stick ? ๏ Screenshots, Code and HTML ๏ The Good & the Bad Backbone.js ➡Backbone.js backbonejs.org Model Controller View Updates User Events Events Updates
  • 44.
  • 45.
    @TheoHeselmans Backbone.js: Code (Part1) // 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 });
  • 46.
    @TheoHeselmans Backbone.js: Code (Part2) // 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; } });
  • 47.
    @TheoHeselmans Backbone.js: Code (Part3) // RUN IT var countryList = new CountryCollection(); //create the collection var countryView = new CountryView(); //create the view
  • 48.
    @TheoHeselmans Backbone.js: HTML (Part4) <!-- Target DIV --> <div id="countrydiv></div> <!-- Template --> <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>
  • 49.
    @TheoHeselmans Backbone.js: the goodand the bad ๏ The Good ๏ GitHub: over 23,000 stars
 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
  • 50.
  • 51.
    @TheoHeselmans ๏ A JavaScriptFramework
 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 ๏ Examples & Demo: ๏ Countries ๏ mSurvey ๏ Wine Tasting CRUD ๏ Screenshots, Code and HTML ๏ The Good & the Bad Knockout.js ➡Knockout.js knockoutjs.com Model ViewModel View Data Binding Commands
  • 52.
  • 53.
    @TheoHeselmans Knockout.js: Country CodeVMMV (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());
  • 54.
    @TheoHeselmans Knockout.js: Country CodeHTML (Part 2) <!-- Tab panes --> <div class="tab-content" data-bind="template: { name: 'continent-template', foreach: continents }"> </div>
  • 55.
    @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>
  • 56.
    @TheoHeselmans Knockout.js: Tasting Code //triggeran 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); }
 });} };

  • 57.
    @TheoHeselmans Knockout.js: the goodand the bad ๏ The Good ๏ GitHub: over 7,000 stars
 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
  • 58.
    @TheoHeselmans ๏ 12 UsefulJavaScript 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
  • 59.
    @TheoHeselmans ๏ Try outdifferent 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 !
  • 60.
    Questions???? 8 Use the OrangeArrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
  • 61.
    #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!!!!