Download as PDF, PPTX
![@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());](https://image.slidesharecdn.com/usingcoolnewframeworksinmobiledominoapps-151218023833/75/Using-Cool-New-Frameworks-in-Mobile-Domino-Apps-53-2048.jpg)
Uploaded byTeamstudio
Using Cool New Frameworks in (Mobile) Domino Apps
The document covers the use of various frameworks and tools for mobile development in IBM Domino applications, showcasing solutions from Teamstudio and providing insights into their features and benefits. It highlights popular frameworks such as Bootstrap, Ratchet.js, Backbone.js, and Knockout.js, detailing their strengths and weaknesses for developers. The content is structured around presentations and demonstrations, aimed at enhancing the capabilities of IBM Notes and Domino applications through modernization and mobile extensions.
More Related Content
Similar to Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
- 1. USING COOL NEWFRAMEWORKS IN (MOBILE) DOMINO APPS Dec. 16, 2015
- 2. Courtney Carter @Teamstudio Howard Greenberg @TLCC PaulDella-Nebbia @PaulDN Theo Heselmans @TheoHeselmans
- 3. Asking Questions Use the“Questions” pane to ask questions.
- 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. Teamstudio NotesTools • Manageyour Notes applications faster, better, and more easily.
- 6. Teamstudio Unplugged • Mobileapplication 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. Teamstudio XControls • Setof 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. Teamstudio Services • Professionalservices for Web enablement, development, and administration – Assistance Programs – Catalog Scan, Complexity Analysis, Usage Auditor – Training – Modernization Services
- 9. Using Cool NewFrameworks in (Mobile) Domino Apps
- 10. 1 #XPages Your Hosts Today: HowardGreenberg TLCC @TLCCLtd Using Cool New Frameworks in (Mobile) Domino Apps! Paul Della-Nebbia TLCC @PaulDN
- 11. How can TLCCHelp 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. 3 Save hundredsand even Thousands of Dollars on the most popular courses and packages Through December 31st Click here for more information
- 13. Upcoming and RecordedWebinars 4 www.tlcc.com/xpages-webinar View Previous Webinars (use url above) • To Be Announced – Watch for upcoming webinars at:
- 14. 5 Session PreviewTool is Now available! $100 discount for previous attendees Attend my session on XPages Performance! More information at the Connect 2016 site!
- 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. 7 #XPages Theo Heselmans @theoheslemans Using CoolNew Frameworks in (Mobile) Domino Apps!
- 17. Using Cool New Frameworks in(Mobile) Domino® Apps! Theo Heselmans, Xceed / Engage @TheoHeselmans
- 18. @TheoHeselmans Pull your head outof the sand!
- 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. @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. @TheoHeselmans ๏ Hard coredevelopment ๏ XPages ๏ 1000 different Frameworks / Libraries ๏ Mega big applications What this is NOT about
- 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. @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. @TheoHeselmans ๏ My Definition: Anyset 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. @TheoHeselmans ๏ Frameworks ๏ Asmuch 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. @TheoHeselmans ๏ Tough tochoose ๏ 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. @TheoHeselmans The IBM NotesApp: Content Management System ➡Quick Demo of the Website and the Notes App
- 28.
- 29. @TheoHeselmans ๏ A Front-Endframework 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. @TheoHeselmans ๏ EY Topics Bootstrap:Demo Screenshots ๏ Engage.ug
- 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. @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. @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. @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.
- 36. @TheoHeselmans ๏ A Front-Endframework 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. @TheoHeselmans Ratchet.js: Demo Screenshots ๏Kemin Industries: Lysoforte ®
- 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. @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. @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. @TheoHeselmans Ratchet.js: the goodand 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.
- 43. @TheoHeselmans ๏ A JavaScriptlibrary 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.
- 45. @TheoHeselmans Backbone.js: Code (Part1) // 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. @TheoHeselmans Backbone.js: Code (Part2) // 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. @TheoHeselmans Backbone.js: Code (Part3) // RUN IT var countryList = new CountryCollection(); //create the collection var countryView = new CountryView(); //create the view
- 48. @TheoHeselmans Backbone.js: HTML (Part4) <!-- 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. @TheoHeselmans Backbone.js: the goodand 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.
- 51. @TheoHeselmans ๏ A JavaScriptFramework 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. @TheoHeselmans Knockout.js: Demo Screenshots ๏Countries ๏ Tastings
- 53. @TheoHeselmans Knockout.js: Country CodeVMMV (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. @TheoHeselmans Knockout.js: Country CodeHTML (Part 2) <!-- Tab panes --> <div class="tab-content" data-bind="template: { name: 'continent-template', foreach: continents }"> </div>
- 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. @TheoHeselmans Knockout.js: Tasting Code //triggeran 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. @TheoHeselmans Knockout.js: the goodand 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. @TheoHeselmans ๏ 12 UsefulJavaScript 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. @TheoHeselmans ๏ Try outdifferent 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. Questions???? 8 Use the OrangeArrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
- 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!!!!