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.  

About Teamstudio •  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 GreenbergTLCC

@TLCCLtd

Using Cool New Frameworks in (Mobile) Domino Apps!

Paul Della-NebbiaTLCC

@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

• UserSelf-

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 headout 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 codethat 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 frameworksand Libraries

@TheoHeselmans

The IBM Notes App:Content Management System

➡Quick Demo of the Website and the Notes App

@TheoHeselmans

Bootstrap

@TheoHeselmans

๏ A Front-End frameworkBootstrap 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 forksover 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 frameworkRatchet.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 libraryBackbone.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 FrameworkKnockout 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 GreenbergCourtney Carter

Theo HeselmansPaul Della-Nebbia

Save Hundreds with TLCC’s End of Year Sale!!!!