Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Cool New Frameworks in (Mobile) Domino Apps

3,862 views

Published on

Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!

Published in: Technology
  • Be the first to comment

Using Cool New Frameworks in (Mobile) Domino Apps

  1. 1. USING COOL NEW FRAMEWORKS IN (MOBILE) DOMINO APPS Dec. 16, 2015
  2. 2. Courtney Carter @Teamstudio Howard Greenberg @TLCC Paul Della-Nebbia @PaulDN Theo Heselmans @TheoHeselmans
  3. 3. Asking Questions Use the “Questions” pane to ask questions.  
  4. 4. AboutTeamstudio •  Manage, analyze, modernize, and mobilize Notes applications with software and services from Teamstudio. •  1600+ active customers, 53 countries •  Offices in US, UK, and Japan
  5. 5. Teamstudio NotesTools •  Manage your Notes applications faster, better, and more easily.
  6. 6. 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
  7. 7. 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
  8. 8. Teamstudio Services •  Professional services for Web enablement, development, and administration –  Assistance Programs –  Catalog Scan, Complexity Analysis, Usage Auditor –  Training –  Modernization Services
  9. 9. Using Cool New Frameworks in (Mobile) Domino Apps
  10. 10. 1 #XPages Your Hosts Today: Howard Greenberg TLCC @TLCCLtd Using Cool New Frameworks in (Mobile) Domino Apps! Paul Della-Nebbia TLCC @PaulDN
  11. 11. 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 • User Self- Paced Courses Mentoring Instructor- Led Classes Application Development and Consulting Free Demo Courses!
  12. 12. 3  Save hundreds and even Thousands of Dollars on the most popular courses and packages  Through December 31st Click here for more information
  13. 13. Upcoming and Recorded Webinars 4 www.tlcc.com/xpages-webinar View Previous Webinars (use url above) • To Be Announced – Watch for upcoming webinars at:
  14. 14. 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!
  15. 15. 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
  16. 16. 7 #XPages Theo Heselmans @theoheslemans Using Cool New Frameworks in (Mobile) Domino Apps!
  17. 17. Using Cool New Frameworks in (Mobile) Domino® Apps! Theo Heselmans, Xceed / Engage @TheoHeselmans
  18. 18. @TheoHeselmans Pull your head out of the sand!
  19. 19. @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
  20. 20. @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
  21. 21. @TheoHeselmans ๏ Hard core development ๏ XPages ๏ 1000 different Frameworks / Libraries ๏ Mega big applications What this is NOT about
  22. 22. @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
  23. 23. @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
  24. 24. @TheoHeselmans ๏ 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 ๏ Split
 design - code - navigation - data What's a Framework / Library UI Architecture DOM๏ Layered schema: ๏ UI - Architecture - DOM ๏ Design - MVC - Supporting libs
  25. 25. @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
  26. 26. @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 frameworks and Libraries
  27. 27. @TheoHeselmans The IBM Notes App: Content Management System ➡Quick Demo of the Website and the Notes App
  28. 28. @TheoHeselmans Bootstrap
  29. 29. @TheoHeselmans ๏ 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
  30. 30. @TheoHeselmans ๏ EY Topics Bootstrap: Demo Screenshots ๏ Engage.ug
  31. 31. @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>
  32. 32. @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>
  33. 33. @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>
  34. 34. @TheoHeselmans ๏ The Good ๏ August 2010: Twitter released Bootstrap as open source. ๏ GitHub: over 90,000 stars
 more than 38,000 forks
 over 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
  35. 35. @TheoHeselmans Ratchet.js
  36. 36. @TheoHeselmans ๏ 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
  37. 37. @TheoHeselmans Ratchet.js: Demo Screenshots ๏ Kemin Industries: Lysoforte ®
  38. 38. @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>
  39. 39. @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>
  40. 40. @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>
  41. 41. @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
  42. 42. @TheoHeselmans Backbone.js
  43. 43. @TheoHeselmans ๏ 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: ๏ 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
  44. 44. @TheoHeselmans Backbone.js: Demo Screenshot ๏ Countries
  45. 45. @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 });
  46. 46. @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; } });
  47. 47. @TheoHeselmans Backbone.js: Code (Part 3) // RUN IT var countryList = new CountryCollection(); //create the collection var countryView = new CountryView(); //create the view
  48. 48. @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>
  49. 49. @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
  50. 50. @TheoHeselmans Knockout.js
  51. 51. @TheoHeselmans ๏ 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 ➡Knockout.js knockoutjs.com Model ViewModel View Data Binding Commands
  52. 52. @TheoHeselmans Knockout.js: Demo Screenshots ๏ Countries ๏ Tastings
  53. 53. @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());
  54. 54. @TheoHeselmans Knockout.js: Country Code HTML (Part 2) <!-- Tab panes --> <div class="tab-content" data-bind="template: { name: 'continent-template', foreach: continents }"> </div>
  55. 55. @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>
  56. 56. @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); }
 });} };

  57. 57. @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
  58. 58. @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
  59. 59. @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 !
  60. 60. 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
  61. 61. #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 Greenberg Courtney Carter Theo Heselmans Paul Della-Nebbia Save Hundreds with TLCC’s End of Year Sale!!!!

×