Transcript What is a Mobile Web App?

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