Cross Platform Mobile application development

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

89 views

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