Post on 09-Jan-2017
Courtney Carter @Teamstudio
Howard Greenberg @TLCC
Paul Della-Nebbia @PaulDN
Theo Heselmans @TheoHeselmans
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 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
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
@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
๏ 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
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
๏ 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: 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
๏ 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: 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
๏ 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: 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!!!!