Cross Platform Mobile application development HTML5 and JavaScript

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 issuesExplosion 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!

Approaches100% 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 basedQuick 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 demoUse 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

DemoDemonstrate 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 – [email protected]