Getting Started with Mobile Development
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
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
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
Agenda
Why mobilize your application?
Mobile development options for Domino developers
The basics of mobile app performance tuning
6 tips for a successful mobile business app
1
2
3
5
4
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
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
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
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
Dojo Mobile Controls
10
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
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
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
jQuery Mobile
14
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
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-mobile-
seems-incompatible-with-xpages-in-domino-9-0/ 16
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
Unplugged Controls
18
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
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
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
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
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
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
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
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
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
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