Cross Platform Mobile application development HTML5 and JavaScript

Chris Connor

Introduction – What you will learn• Background

• The issues with traditional approaches• What is a Mobile Web App?

• Approaches / Architectures• Supporting technologies

• Demonstration of Application• Review of further technology options

• Resources and Next Steps

Background – The issues• Explosion of devices and demand

• Started with – we need an iphone app• Then android / blackberry• Then ipad / android tablet / blackberry tablets

• What does this mean with native approaches?• iOS• WebOS• WinPhone• Android (various)• QNX• BBX

Introduction – Multi Platforms to target• Platforms to target• IBM 2011 tech trends report (from edbrill.com)

• 4000 people• 93 countries• 1 Question on “Planned mobile development platforms”

Introduction – The issue?• Manufactures changing strategy by the minute• Virtually impossible to keep up to speed with APIs• To support all devices you would need skills in the

following languages• Java• .Net• J2ME• Objective C• And then all the APIs …

• Other factors• Changes in RIM strategy• Adobe dropping Mobile Flash Support• Silverlight..• Oracle / Google / Open Source issues around Java

Introduction – What is a Mobile Web App?• Most modern devices now support webkit at an

acceptable level• Develop with one set of tools (the ones we know) for all

devices• All major vendors are backing HTML 5 now

• Even Microsoft!• Additional Frameworks and Libraries are available to

help take advantage of more native features of devices• Built on the 3 Main skills of the developer

• HTML (5)• CSS• JavaScript

• Web Apps!

Approaches• 100% Web based

• Uses current web infrastructure• (XPages / HTML, Server side Java, Authentication /

Security etc)• Can still use local storage• Can use local storage / Local Caching

• Can even be 100% offline• Relational Database support in HTML 5• Pages / Resources can be stored locally

• Hybrid (Mix of Web / Native) • Can use device features

• PhoneGap / Webworks• Or Natively

• 100% Native• Perhaps calls to data using API rest type requests

Introduction – Adopters for this? Why?• Who are adopting this approach over native?

• Facebook• Financial Times• Bank of America• Edinburgh Council Bus Tracking App

• Development Cost / Speed• Roughly half the time for one platform(even bigger

savings if multi device)• Easier to manage application deployment lifecycle

• Dynamic Updates without vendor (such as Apple) approval

• Not constrained by the rules (financial) of the vendor• Can be “indexable” on google etc• Can run from site, on device or hybrid

• Depending on what YOU want

Mobile Web App Examples – Mobile Dojo

Mobile Web App Examples – Mobile jQuery

Mobile Web App Examples– Sencha Touch

Our example – Web based• Quick and easy to build using XPages

• Uses Mobile Dojo Toolkit JavaScript Framework• Demonstrates

• Optimisation to behave like iPhone/iPad/Android application

• Some aspects can be loaded as required• Use web services / JSON / cross domain

Ajax Requests

Our example – Our demo• Use of native features for device for navigation etc• News feed for scrolling searching• Action Tracking Process to show

• Searching / Navigation (native look and feel)• Native forms based processes can be built

• Features like date pickers, drop downs, validation etc

• Geolocation• HTML 5 version• Not device specific – no different API knowledge

• Charting• Twitter

• Social Media Stream• Cross Document Communication

Demo• Demonstrate sample apps

• Based on MobileSample.nsf from OpenNTF• Customised using Mobile Dojo and HTML5

Offline Applications• Ability to go offline

• Local Storage in RDBMS• Replicate / Post Data using JavaScript / Web Services

Notes or Notes Notes Data• Cache Presentation Framework and Resources

• Describe resources to be cached in Manifest file• Downloaded and kept

Need to remember to be able to “re-provision” / upgrade

Other Capabilities to consider review

• Access other mobile resources• Phone Gap

• Camera, Files, Accelerometer, Alerts• Supports IOS, BlackBerry,WebOS, Windows Phone 7,

Android• WebView (Embedded browser in native app)

Other Capabilities to consider review

• WebWorks (by RIM)• Optimised for BlackBerry

• Tablet and Phone• HTML5 based• WebField (Embedded browser in native app)• JavaScript calls to underlying Java API

Focus Today - Mobile Controls – The code

Mobile Controls – Overview and Intro

• Why use Mobile Controls• Implement Mobile dojo

• Dojo Closely tied to XPages• Provides an underlying framework to simulate native

devices• Any other js framework can be used depending on

needs• Available for download from OpenNTF

• Easy to get up and running• Customise / Extend using HTML5 / Mobile Dojo

• Also standard JavaScript / HTML / CSS

Mobile Controls – Overview and Intro

• Framework is based around “Single Page App”• Single Page App Defines

• Front Screen• Navigation Methods between pages• “Calls” to other pages as required

• Old method required you to hand write Web Services and Ajax calls

• New method has tools to do this

• Try to minimize the amount of loading• Performance!

Introduction – Back to the Start..• Icon on front Screen

• Bookmarked by user

• Launching a “Splash Screen” – Take Note!!• Whilst loading• More professional • Informs user that something is happening

Introduction – Structure• Defined as follows

• Then links are defined as follows

Introduction – Structure• Destination Pages are defined as follows

Introduction – Native Application Features• Scrolling, swiping, fields, buttons etc

Introduction – View / Searching Code• Split into 4 sections

• Heading• Search Bar• DataView• Pager (More Button)

• Heading

Introduction – Native Application Features• Search Bar

Introduction – Native Application Features• DataView

Introduction – Native Application Features• DataView / Load More Link

Action Detail Page

Action Detail Page – Areas of Interest

• Submit Button, formRows, fields, binding

Action Detail Page – HTML 5 Inputs

• <Input>Tag in HTML (5) has some useful attributes• Type = “Date”

• Drives how IOS picks up the date• Email / Number etc

Summary / Next Steps......

• Got a taster of where java fits and why / where to use

• Some real life examples• More in-depth for discussion in next session

• Looked at Web Applications / Mobile Controls• Look at Extension Library Stuff Designer Wiki

• http://www-10.lotus.com/ldd/ddwiki.nsf/• Especially around Libraries

• Mobile Dojo Website• Mobile Jquery• Excellent books on iPad / iPhone techniques

Contact Me..

• Business Site - www.bssuk.net• Blog – www.XSPTalk.com• LinkedIn – chrisjconnor• Twitter - ChrisJConnor• Skype – ChrisJConnor1• Email – Chris@bssuk.net