yes, you can use those modern frameworks for...
TRANSCRIPT
#engageug
Yes, you can use those modern frameworks for
mobile Domino® developmentTheo Heselmans, Xceed / Engage
#engageug 2
Pull your headout of the sand!
#engageug 3
๏ 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
#engageug 4
๏ 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
#engageug 5
๏ Hard core development ๏ XPages ๏ 1000 different Frameworks / Libraries ๏ Mega big applications
What this is NOT about
#engageug 6
๏ 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
#engageug 7
๏ 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
#engageug 8
๏ 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
What's a Framework / Library
UI
Architecture
DOM๏ Layered schema: ๏ UI - Architecture - DOM ๏ Design - MVC - Supporting libs
#engageug 9
๏ 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
Requirements๏ Your Skills
๏ HTML(5) ๏ CSS(3) ๏ JavaScript ๏ Notes:
๏ Formula language ๏ LotusScript ๏ XPages ๏Domino Access
Service ๏ REST / JSON
#engageug 10
๏ 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
#engageug 11
Bootstrap
#engageug 12
๏ 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
#engageug 13
๏ EY Topics
Bootstrap: Demo Screenshots
๏ Engage.ug
#engageug 14
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>
#engageug 15
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>
#engageug 16
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>
#engageug 17
๏ 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.4 ๏ 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
#engageug 18
Ratchet.js
#engageug 19
๏ 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
#engageug 20
Ratchet.js: Demo Screenshots
๏ Kemin Industries: Lysoforte ®
#engageug 21
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>
#engageug 22
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>
#engageug 23
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>
#engageug 24
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
#engageug 25
Backbone.js
#engageug 26
๏ 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
➡Backbone.js backbonejs.org
Model
Controller
View
Updates User Events
Events Updates
#engageug 27
Backbone.js: Demo Screenshot
๏ Countries
#engageug 28
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 });
#engageug 29
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; } });
#engageug 30
Backbone.js: Code (Part 3)
// RUN IT
var countryList = new CountryCollection(); //create the collection
var countryView = new CountryView(); //create the view
#engageug 31
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>
#engageug 32
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
๏ The Bad ๏ Totally different concept ๏ Steeper learning curve ๏ Decent knowledge of JS
required ๏ No data binding ๏ MVC model only: no UI
#engageug 33
Knockout.js
#engageug 34
๏ 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
➡Knockout.js knockoutjs.com
Model
ViewModel
View
Data
Binding Commands
#engageug 35
Knockout.js: Demo Screenshots
๏ Countries ๏ Tastings
#engageug 36
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());
#engageug 37
Knockout.js: Country Code HTML (Part 2)
<!-- Tab panes -->
<div class="tab-content" data-bind="template: { name: 'continent-template', foreach: continents }"> </div>
#engageug 38
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>
#engageug 39
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); } });} };
#engageug 40
Knockout.js: the good and the bad
๏ The Good ๏ GitHub: close to 6,000
stars and almost 1,000 forks
๏ Good documentation andInteractive examples
๏ Data binding (including attributes)
๏ The Bad ๏ Different concept ๏ Steeper learning curve ๏ Decent knowledge of JS
required ๏ Routing not provided ๏ MVVM model only: no UI
#engageug 41
๏ 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 few interesting Links
#engageug 42
๏ 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 !