Cross Platform Mobile application development HTML5 and JavaScript Chris Connor.
-
date post
19-Dec-2015 -
Category
Documents
-
view
224 -
download
3
Transcript of Cross Platform Mobile application development HTML5 and JavaScript Chris Connor.
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]