wireless wednesdays: part 1

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


  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


 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


10


 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


 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


 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


 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


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


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

wireless wednesdays: part 1

Technology