Learn how to use CSS and JS frameworks in mobile Domino apps. This edited ConnectED presentation shows real world applications using some of these powerful frameworks inside Domino. Learn the integration of Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js, Zepto.js and more!
The full slide deck is available for free download in our IBM ConnectED community on SocialBiz User Group; make sure to be signed in to your free account to get download access here https://reg.socialbizug.org/wispubs/socbizwidgets.nsf/homepage.xsp.
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Tip from ConnectED 2015: How to Use Those Cool New Frameworks in Mobile Domino Apps!
1. BTE101: Yes, you can use
those modern frameworks
for mobile Domino®
development
Theo Heselmans, Xceed / Engage
2. 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
▪ IBM® Champion since 2011
@theoheselmans
▪ 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
3. 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
Let's have a quick look at it
4. 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)
5. HTML5 / CSS3 Development
▪ HTML5 is stable, powerful and broadly supported
▪ CSS3 is very flexible
▪ Mobile apps are easy to create and test
– Android Chrome & iOS Safari remote debugging is a godsend
– Chrome's Device Mode is brilliant
▪ Off line use of your apps is possible using Manifest & localStorage
▪ Turning HTML5 websites into Apps is possible
– e.g. PhoneGap or Appcelerator Titanium
6. What's a Framework / Library
▪ 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
– HTML - design - code - navigation - data
UI
Architecture
DOM▪ Layered schema:
– UI - Architecture - DOM
– Design - MVC - Supporting libs
7. 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
– REST / JSON
– Notes:
– Formula language
– LotusScript
– XPages
– Domino Access Service
8. 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 grids, typography, forms, buttons,
navigation and other interface components, as well as optional JavaScript extensions
▪ Examples & Demo:
– Countries
– EY: Topics
– Engage: website
▪ Screenshots and HTML
▪ The Good & the Bad
▪ Bootstrap getbootstrap.com
11. 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>
12. 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.2
– Many interface components
– Excellent documentation, and many
templates
– Easy to get started and implement
– Broadly used ▪ Tip: Bootstrap for XPages
13. Ratchet.js
▪ A Front-End framework
Ratchet.js is used to build mobile apps with simple HTML‚ CSS‚ and JS components
▪ Examples & Demo:
– Countries
– Kemin Industries: Lysoforte
▪ Why I changed my mind!
▪ Screenshots and HTML
▪ The Good & the Bad
▪ Ratchet.js goratchet.com
14. 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>
15. 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</h1>
</a>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
Main Content here
</div>
17. 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
18. Backbone.js
▪ 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:
– Countries
– A major Navy: mSurvey
▪ 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
19. Backbone.js: Code (Part 1)
// MODEL
var Country = Backbone.Model;
// COLLECTION
var CountryCollection = Backbone.Collection.extend({
model: Country,
url: '../api/data/collections/name/countries?count=300' //use a view via DAS
});
20. 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; }
});
21. Backbone.js: Code (Part 3)
// RUN IT
var countryList = new CountryCollection(); //create the collection
var countryView = new CountryView(); //create the view
23. 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
24. Knockout.js
▪ 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 knockoutjs.com
Model
ViewModel
View
Data
Binding Commands
25. 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());
28. 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); }
});}
};
29. Knockout.js: the good and the bad
▪ The Good
– GitHub: close to 6,000 stars
and almost 1,000 forks
– Good documentation and
Interactive tutorials
– 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
30. 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