Cross Platform Mobile application development HTML5 and JavaScript
Transcript of Cross Platform Mobile application development HTML5 and JavaScript
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
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
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
•
•
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 – View / Searching Code
Split into 4 sections
Heading
Search Bar
DataView
Pager (More Button)
Heading
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]