2. #engageug 2
• What are hybrid apps?
• What is Ionic?
• How can Ionic help to build a hybrid app?
• How do I make Ionic talk to Domino?
What you’ll learn
(a.k.a. “Agenda”)
3. #engageug 3
• You have some experience in using HTML, CSS
and JavaScript
• Maybe you know some AngularJS
• Your undivided attention :-)
What I expect from you
4. #engageug 4
• Long-time Domino/ XPages/ web developer
• Co-owner of Viaware
• Freelance web developer
• Fan of everything web dev (Angular, Bootstrap, MeteorJS)
• Open source dev, blogger, StackOverflow
• IBM Champion 2011-2015
/Me
6. #engageug
6
Three types of apps
Mobile browser
<html>
function() {
foo = bar;
}
Native container
<html>
function() {
foo = bar;
}
Device API
Native app
10101011101
01011001010
11010101010
11010101010
10101101010
10101101010
Device API
Mobile web Hybrid app Native app
7. #engageug 7
• Build using HTML, CSS, JavaScript
• Responsive UI
• Quick (cheap) to develop
• Not installable from app stores
• “Add to homescreen”
• Can’t access all device capabilities
• camera, contacts, sharing options, …
Mobile web
8. #engageug 8
• Best in terms of performance, UI, look & feel
• Access all device capabilities
• Installable from app stores
• Expensive (time/ money) to build for multiple platforms
• Requires specific toolset for every supported platform
• Objective C, Swift, Java, C#
Native
9. #engageug 9
• Best of both worlds
• Native application that uses mobile platform’s WebView
• Think of a WebView as an embedded browser
• In general, takes less time to develop.
• Cross platform
• Installable from app stores
• Can use native components
Hybrid
14. #engageug 14
• Platform to build hybrid apps
• Tries to overcome common problems
• Optimized UI components
• Publication/ updating apps
• Development workflow
• Push notifications
Ionic
15. #engageug 15
• Built on top of AngularJS
• Can be deployed to the app stores
• For iOS, Android, Windows Phone
• V2 in the making
Ionic
16. #engageug 16
• Based on Apache Cordova
• Open sourced PhoneGap version
• Managed by Apache Foundation
Ionic
17. #engageug 17
• Platform that provides a consistent set of JavaScript
APIs to access device capabilities through plug-ins
• Allows Ionic to build for multiple platforms
• Access to device functionality
• Plugin eco-system, can be added to Ionic
• https://cordova.apache.org/plugins/
Cordova
23. #engageug 23
• Ionic comes with a couple of boilerplate apps
(blank, sidemenu, tabs)
• Give you a basic app/ folder structure
• ionic start <yourApp> <template>
Getting started
35. #engageug 35
• Get some real data using REST
• http://www.assono.de/blog/d6plinks/
ibmconnect2016-ad1238
• Authentication
• Make updates (save, delete)
• https://github.com/markleusink/ionic-demo
Extending the demo
36. #engageug 36
• When viewing an Ionic app in a browser you’ll run into
CORS issues
• Can be solved by using the built-in proxy function
• Means you need to update your API’s endpoint (when
developing)
• And change it back when deploying…
• Alternative is to add the headers to your Domino server
CORS
37. #engageug 37
• The ExtLib REST service provides pagination of
results out-of-the box.
• Use start and count parameters
• Response has a header called Content-Range
Infinite scroll
38. #engageug 38
• Basic- or session authentication
• For session: Domino returns login form when login
unsuccessful
• While you where expecting JSON
• But if you know that it should be JSON, you can
check for that.
• Create login form, post to “.nsf?login”, handle response
Authentication
39. #engageug 39
• Save
• HTTP PATCH to ExtLib REST Service
• /api.xsp/users/<unid>
• Can perform field validations
• Delete
• HTTP DELETE to ExtLib REST Service
Updates
40. #engageug 40
• Hybrid apps are a great way to get started building apps
• Ionic is stable, but still in beta
• Cross-platform
• Ionic gives your near-native look & feel and performance
• But if you want (need) more, go for native
• Keep an eye on the pricing model (when out of beta)
Wrap up