Your business users want to access their Notes & Domino applications on their mobile devices. Join our first free webinar in a four-part series and have two experienced experts, Matt White and Rich Sharpe, guide you through what you need to know. The first webinar takes a look at the tools and frameworks that can help you, with follow-on sessions taking a deeper dive into the 3 main alternatives: IBM XPages mobile controls, Unplugged Mobile Controls and JQuery Mobile. Matt and Rich will pick out the good, the bad, and the ugly stories from their Domino development experience. In Part 1, learn: -Why to mobilize a Domino application -Mobile development options for Domino developers -The basics of mobile app performance tuning -7 tips for a successful mobile business app

1. Getting Started with Mobile
Development

2. Who are we?
 Matt White
– Domino web developer since 1996
– XPages developer since 2008
– Consultant with London Developer Co-op
 Rich Sharpe
– Developer/Manager since 1998
– Originally Java, More recently focused on
mobile web development using XPages
– Worked on Mobile Apps/Architecture on
and off since 2000
2

3. What’s the point of Wireless
Wednesdays?
 Mobile is coming fast
– Web or native
 We want to talk about the options from the point of view of
the Domino developer
– What frameworks can we use?
– What are the pros and cons of different frameworks
 Talk about mobile development in more detail
– Based on our “real world” experience
– Learn from our mistakes!
3

4. What will we be covering?
 January / February
– At IBM Connect, Rich and Matt will be presenting a session
about the Unplugged Mobile Controls.
– BP201- Tuesday 28th January - 3pm
 March
– Deep dive into Dojo Mobile Controls
 April
– Deep dive into jQuery Mobile
 May
– Deep dive into Unplugged Mobile Controls
4

5. Agenda
1 Why mobilize your application?
2 Mobile development options for Domino developers
3 The basics of mobile app performance tuning
4 6 tips for a successful mobile business app
5

6. Why mobilize your application?
 Increased user base
– Often users use their mobile device before their PC
– Users aren’t tied to the office
 Extend the life of your application
– A chance to re-invigorate your application
– If it can be used in more places will it get more use?
 Extend the potential uses for your application
– Offline mobile support?
6

7. Why mobilize your application?
 Your application will be
competing with 1m apps from
the app store
 If you do mobilize your
application you must…
– Make it easy to use
– Pay significant attention to
user interface design
7

8. Mobile development options for
Domino developers
 Dojo Mobile Controls
– Ships with Domino
 jQuery Mobile
– The populist choice
 Other popular options:
– Sencha Touch
– Kendo UI
 Unplugged Controls
– The mystery third option 
8

9. Dojo Mobile Controls
 Integrated into XPages
 Started out as an OpenNTF project in 2010
 Fed back into the main Domino product in 8.5.3
– as part of the Extension Library
– or via Upgrade Pack 1
 Supported by IBM and no extra install required
– In 9.0.1 we use Dojo 1.8.3
 Tries to provide a “native” UI for each mobile device
9

10. Dojo Mobile Controls
10

11. Dojo Mobile Controls
 Built into Domino
– no approvals or installation required so your admins are
happy!
– Very little coding required, just drag and drop controls
 Very quick to develop a basic application
 Is being worked on actively by both IBM and Dojo
11

12. Dojo Mobile Controls
 Poor user experience on tablets
– Targeting phones and tablets can be quite challenging to get
a nice looking result
 iOS UI is still iOS 6
– Though you can style this yourself
 Gets much more difficult quite quickly
– If you want to support editing
– If you go below 3 levels of breadcrumb history
 Performance not the best
12

13. jQuery Mobile
 One of the most popular mobile web frameworks
 Very simple to change theme to match your corporate style
 Creating more complex applications is easier than Dojo
Mobile Controls
– It’s more like creating a multi page XPages application
13

14. jQuery Mobile
14

15. jQuery Mobile
 You get the choice of single page app (like Dojo Mobile
Controls) or to load full pages for complex functions
– Single page app == speed
– Multi page app == complexity
 Can be used in Mobile Web or offline with Teamstudio
Unplugged
 Huge developer community so lots of resources, plugins etc
 Very easy to pick up and get started with
15

16. jQuery Mobile
 Potentially slow performance over 3g networks
– 860kb for jQuery Mobile vs 150k for Dojo for same page
functionality
 Very JavaScript heavy, every element needs to be processed
once downloaded
– For older phones this slows things down
– Becoming less of an issue with iPhone 5S for example
 Harder to integrate into Domino from v1.3 and later
– http://notesin9.com/index.php/2013/04/20/jquery-mobileseems-incompatible-with-xpages-in-domino-9-0/
16

17. Unplugged Controls
 Created by us specifically for XPages developers
 A suite of 18 Custom Controls which allow you to quickly
create a simple application
– And also allow the creation of more complex apps as well
 Easy to change the UI using our Restyler website
– http://restyler.teamstudio.com
 Under active development for XPages developers
 Designed to work well with tablets and phones
17

18. Unplugged Controls
18

19. Unplugged Controls
 We’re aiming to offer the best of both Dojo Mobile Controls
and jQuery Mobile worlds
– Easy to create XPages applications of both simple and
complex varieties
– Easy to change UI
– Performs well
– High quality tablet and phone user experience
– Easy to add offline capability
• With Teamstudio Unplugged
19

20. Unplugged Controls
 Framework has to be added manually to Domino Designer
 Small development team and community compared to other
frameworks
 At the moment requires use of XPages rather than other
more modern server technologies
20

21. Mobile App Performance Tuning
 Best solution for good performance is good design
 Know your audience
– Which devices
• Phones or tablets / iOS or Android / both or all?
– Which use cases
• Online or offline?
 Know your application
– Identify key features
– Reduce screen sizes
– Progressive disclosure
21

22. Mobile App Performance Tuning
 Make a decision about the balance between initial page load
times and in app performance
 If you can load a page via Ajax do it
– Even if it’s not faster you can provide feedback to the user
 Optimize your code
– Minify JS and CSS
– Do you really need to use graphics?
• Maybe use font icons instead?
– We use Font Awesome in Unplugged Controls
 Write good code!
– Code reviews are a wonderful (if scary) thing
22

23. Mobile App Performance Tuning
 Understand from the outset what your targets are:
– Page load times need specifics
• Which device(s)
– Latest iOS devices are significantly faster than even the
previous generation
• Amount of data
– For initial page load vs. subsequent pages
• Network conditions
– Wi-Fi vs. 3G or 4G
– Network Latency
23

24. 6 tips for a successful mobile app
 Developing applications for mobile users is a different
experience for us as developers than with the desktop which
we’re used to, so here are some tips we have picked up…
1. Be selective in project scope
Pick the most important functions of your application to
mobilize. Not everything is needed by people away from
their desktop
2. Less is more
Screens on mobile devices are smaller than the desktop,
reduce the amount of data you expect users to input to the
base minimum
24

25. 6 tips for a successful mobile app
3. Imitation is the sincerest form of flattery
Your users all use other mobile apps on a daily basis. Don’t
try to reinvent the wheel. Make use of common design
patterns.
4. Get a second opinion
We’re developers not designers (well most of us). Design is
a skill and it’s worth getting an expert in to help with your
UI.
25

26. 6 tips for a successful mobile app
5. Keep ‘em separated
Mobile and desktop are not the same. Generally you will
want to implement different interfaces for each one.
Merged designs will be compromised on one or both
environments.
6. Ask, Listen, Edit, Repeat
Make sure your users are involved from day 1 of the
project, it will give them ownership but also head off any
last minute “could you just…” moments
26

27. Further Resources
 Dojo Mobile Controls
– http://dojotoolkit.org/features/mobile
 jQuery Mobile
– http://jquerymobile.com
 Unplugged Controls
– http://unplugged.openntf.org
– http://restyler.teamstudio.com
27

28. IBM Connect Sessions
 BP201 - Creating a Mobile Application Framework with XPages
– Tuesday 28th Jan 3pm
– If you create a lot of mobile web applications, you may notice other
frameworks such as JQuery Mobile and the XPages Mobile Controls just don't
do exactly what you need. So we created our own, specifically designed for
XPages. In this session you'll learn about the open source framework that's
been have created. We'll show how it allows you to quickly drag and drop
standard custom controls into an XPage to create a mobile application. We'll
also talk about the process of creating an open source project and future plans.
 BOF - Creating an Unplugged Controls Virtual User Group
– Please come along!
28

29. 29