Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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]