45
BTE101: Yes, you can use those modern frameworks for mobile Domino® development
Theo Heselmans, Xceed / Engage
Pull your head out of the sand!
Agenda
▪ About myself ▪ What this session is not about ▪ The Domino® 'Stack' ▪ Frameworks & Libraries
▪ Bootstrap ▪ Ratchet ▪ Backbone ▪ Knockout
▪ Links & More info ▪ Parting words
▪ Q&A
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
▪ 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
@theoheselmans
What this is NOT about
▪ Hard core development ▪ XPages ▪ 1000 different Frameworks / Libraries ▪ Mega big applications
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
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 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
What's a Framework / Library
▪ 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
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 – Notes:
– Formula language – LotusScript – XPages – Domino Access Service
– REST / JSON
A Gazillion frameworks and Libraries
▪ 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
Bootstrap
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 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 getbootstrap.com
Bootstrap: Demo Screenshots
▪ EY Topics ▪ Engage.ug
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>
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>
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>
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.1 – Many interface components – Excellent documentation, and many
templates – Easy to get started and implement – Broadly used ▪ Tip: Bootstrap for XPages
Ratchet.js
Ratchet.js
▪ 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 goratchet.com
Ratchet.js: Demo Screenshots
▪ Kemin Industries: Lysoforte ®
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>
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>
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>
Ratchet.js: the good and the bad
▪ The Good – GitHub: over 10,000 stars
and more than 1,000 forks – 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
Backbone.js
▪ A JavaScript library Backbone.js is a JavaScript library with a RESTful JSON interfaceand 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
▪ Why I changed my mind! ▪ Screenshots, Code and HTML ▪ The Good & the Bad
▪ Backbone.js backbonejs.org
Model
Controller
View
Updates User Events
Events Updates
Backbone.js: Demo Screenshot
▪ Countries
Backbone.js: Code (Part 1)// MODELvar Country = Backbone.Model;
// COLLECTIONvar 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});
Backbone.js: Code (Part 2)// VIEWvar 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; } });
Backbone.js: Code (Part 3)// RUN IT
var countryList = new CountryCollection(); //create the collection
var countryView = new CountryView(); //create the view
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>
Backbone.js: the good and the bad
▪ The Good – GitHub: over 20,000 stars
and more than 4,500 forks – 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
Knockout.js
▪ A JavaScript FrameworkKnockout is a standalone JavaScript implementation of the Model-View-ViewModel patternwith 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: – mSurvey – Countries – Wine Tasting CRUD
▪ Screenshots, Code and HTML ▪ The Good & the Bad ▪ Knockout.js knockoutjs.com
Model
ViewModel
View
Data
Binding Commands
Knockout.js: Demo Screenshots
▪ Countries ▪ Tastings
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) <!-- Tab panes -->
<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 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
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
Parting words
▪ 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
Be productive and have fun !
Engage Online
▪ SocialBiz User Group socialbizug.org – Join the epicenter of Notes and Collaboration user groups
▪ Social Business Insights blog ibm.com/blogs/socialbusiness – Read and engage with our bloggers
▪ Follow us on Twitter – @IBMConnect and @IBMSocialBiz
▪ LinkedIn http://bit.ly/SBComm – Participate in the IBM Social Business group on LinkedIn
▪ Facebook https://www.facebook.com/IBMConnected – Like IBM Social Business on Facebook
Notices and DisclaimersCopyright © 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.
