Mobile Web Apps Mobile Web Apps Development Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta 

Roadmap • Anatomy of a mobile web app • Anatomy of a mobile web app • Classes of Mobile web apps • PhoneGap 

What is a Web App? An application built with web technologies web technologies web technologies web technologies that is accessible via a mobile browser mobile browser mobile browser mobile browser and that is accessible via a mobile browser mobile browser mobile browser mobile browser and not exclusively through an app store The browser may be either the standard device browser or an embedded browser (Hybrid app) browser or an embedded browser (Hybrid app) 

Anatomy of a Web App 

Anatomy of a mobile web app This is why HTML5 Mobile Apps are hard hard hard hard! In many cases you will need to create create create create every part of this diagram If you don’t create it, you still need to test test test test and If you don’t create it, you still need to test test test test and debug debug debug debug each piece 

Setting up the Server As usual, it all starts with an http http http http request request request request Then you need: • Data Data Data Data • A A A A device device device device detection detection detection detection mechanism mechanism mechanism mechanism [optional] [optional] [optional] [optional] • The The The The app app app app itself itself itself itself 

Data Usually mobile apps do not talk directly with the database the database do not even think about JDBC, drivers, etc! They pass through an application application application application server server server server and communicate via: – standard HTTP requests for HTML content (eg PHP) – standard HTTP requests for HTML content (eg PHP) – REST-full services (XML, JSON, etc.) – SOAP 

Data 2 • Data can be stored in any classical way: – Relational – Relational – Graph – Key-value – Document-based www.parse.com www.kinvey.com Latest Latest Latest Latest trend: trend: trend: trend: backend-as-a-service – Data storage, users management, security, big files storage, scalability, push notifications… www.kinvey.com 

BaaS 1. Developers build a visual model of their DB model of their DB 2. The service generates APIs and client-side libraries(compatible with iOS, Android, Windows Phone 7, etc.) 3. The data produced/consumed 3. The data produced/consumed in the app can be pushed/pulled to their DB – Communication is handled via REST or other protocols 

Server-side device detection All devices are unique you have to know on which device your app is running you have to know on which device your app is running the app can adapt to the device capabilities Many techniques, the most used are: • Andy Moore’s browser detector – Works for PHP pages only – Works for PHP pages only • Javascript • External APIs – (DeviceAtlas, WURFL) • CSS3 media queries if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) { window.location.replace('/path/to/iphone/site/'); @media screen and (max-width: 980px) { } 

The HTML5 app Keep code very semantic Keep code very semantic Keep all the logic in Javascript Keep (most of) the presentation in CSS3 Remember that the user may go offline • Offline data storage, cache manifest • Offline data storage, cache manifest Progressive Progressive Progressive Progressive Enhancement Enhancement Enhancement Enhancement Write all your markup first without any CSS or JavascriptThe resulting markup should always be perfectly usable in its lowest form. 

Progressive Enhancement Key concept. Graceful Graceful Graceful Graceful degradation degradation degradation degradation 

Progressive Enhancement Techniques • Always code your markup Always code your markup Always code your markup Always code your markup semantically semantically semantically semantically – ensure that the page is always usable, even with no stylesheet ensure that the page is always usable, even with no stylesheet • Have a device Have a device Have a device Have a device plan plan plan plan – Know which device classes you intend to support before you start to code • Have both your Have both your Have both your Have both your LCD and LCD and LCD and LCD and high high high high- - - -end device designs before end device designs before end device designs before end device designs before you begin to you begin to you begin to you begin to code code code code – Try to visualize a way to create both versions from one code base. Test on different mobile devices Test on different mobile devices Test on different mobile devices Test on different mobile devices from the beginning from the beginning from the beginning from the beginning • Test on different mobile devices Test on different mobile devices Test on different mobile devices Test on different mobile devices from the beginning from the beginning from the beginning from the beginning – your incremental work must display correctly in the intended devices • If you plan to add a desktop layer, always create the If you plan to add a desktop layer, always create the If you plan to add a desktop layer, always create the If you plan to add a desktop layer, always create the mobile version mobile version mobile version mobile version first first first first 

Anatomy of a Web App 

Cache Manifest Problem Problem Problem Problem. Browsers have their own caches but they are unreliable and heterogenous are unreliable and heterogenous The Application Cache Application Cache Application Cache Application Cache allows a developer to specify which files the browser should cache and make available to offline users CACHE MANIFEST CACHE MANIFEST /main/features.js /main/settings/index.css http://files/images/scene.jpg http://files/images/world.jpg 

Cache Manifest A cache manifest gives you the following benefits: • Offline browsing Offline browsing Offline browsing Offline browsing users can navigate your full site when they're offline – users can navigate your full site when they're offline • Speed Speed Speed Speed – cached resources are local, and therefore load faster • Reduced server load Reduced server load Reduced server load Reduced server load – the browser will only download resources from the server that have changed This solution does not cover dynamic data caching In that case you can use javascript to get your data 

Javascript 

Hybrid Scripts These scripts bridge the gap between your These scripts bridge the gap between your These scripts bridge the gap between your These scripts bridge the gap between your core scripts and the device core scripts and the device core scripts and the device core scripts and the device SDK SDK SDK SDK core scripts and the device core scripts and the device core scripts and the device core scripts and the device SDK SDK SDK SDK – A necessary step if you plan to ship your HTML5 app in a native wrapper like a standard iOS UIWebView or Cordova – They may need to be distinct for each platform you plan to support • For example, the cordova.js file for Android is subtly different from the iOS’s one 

Core Scripts The The The The common components of your app common components of your app common components of your app common components of your app – they implement the internal logic that your app will require to assemble and render your HTML5 pages – they will be the same in every platform – examples of duties: • REST API access • REST API access • Domain entities representation • … – they include also JS libraries like JQuery and other microframeworks 

Device Scripts They work They work They work They work to emulate native behaviors of the to emulate native behaviors of the to emulate native behaviors of the to emulate native behaviors of the device with device with device with device with Javascript Javascript Javascript Javascript device with device with device with device with Javascript Javascript Javascript Javascript – these scripts may be unique to each platform you plan to support – examples: • JQueryMobile (JS part) • JQueryMobile (JS part) • JQTouch (JS part) • SenchaTouch (JS part) • iui-js 

A note on Mobile Web Frameworks Frameworks like JQueryMobile, JQTouch are useful since they give you the standard visual standard visual standard visual standard visual language language language language since they give you the standard visual standard visual standard visual standard visual language language language language the user is accustom to out-of-the-box However, evaluate carefully what framework you need, you may have issues issues issues issues about: – performance (the UI may get slow) – performance (the UI may get slow) – stability, debuggability – customization problems (you may be forced in doing everything the framework-way) – your app may look like many others 

CSS3 

Device Themes The The The The presentation elements that presentation elements that presentation elements that presentation elements that will be will be will be will be required to mimic the platform required to mimic the platform required to mimic the platform required to mimic the platform aesthetic aesthetic aesthetic aesthetic required to mimic the platform required to mimic the platform required to mimic the platform required to mimic the platform aesthetic aesthetic aesthetic aesthetic – it may be unique to each platform you plan to support – examples: – examples: • Sencha Touch (CSS) • JQueryMobile (CSS) • … 

Core Themes The presentation elements you use The presentation elements you use The presentation elements you use The presentation elements you use independently from the app and platform independently from the app and platform independently from the app and platform independently from the app and platform independently from the app and platform independently from the app and platform independently from the app and platform independently from the app and platform – Keep presentation presentation presentation presentation essentials essentials essentials essentials as a unique stylesheet that will serve as your core theme – They are the elements that should always be the same regardless of what platform you use – Examples: – Examples: • Resets • Toolbar colors • Layouts • Typography • … 

App Themes The The The The presentation presentation presentation presentation elements that are specific to elements that are specific to elements that are specific to elements that are specific to your app your app your app your app your app your app your app your app – Basically, they are similar to a core theme, but they are specific to an app – Examples: • Logos • Logos • Toolbar colors • Layouts • Typography • … 

Roadmap • Anatomy of a mobile web app • Anatomy of a mobile web app • Classes of Mobile web apps • PhoneGap 

Classes of Mobile Web Apps A mobile web app will always be limited to the capabilities of the browser browser browser browser and device and device and device and device capabilities of the browser browser browser browser and device and device and device and device available available available available This environment cannot be assured at the time of development The following classes classes classes classes of development of development of development of development can help to prioritize design and development effort 

Class 1 It uses the latest innovations and capabilities present only in the iPhone iPhone iPhone iPhone (3GS and higher, iPod touch 4th only in the iPhone iPhone iPhone iPhone (3GS and higher, iPod touch 4th Gen, iPad) and Android 4.0 Android 4.0 Android 4.0 Android 4.0 Examples: Facebook for iPhone Flipboard for iPhone Flipboard for iPhone 

Class 1 Advantages Advantages Advantages Advantages • Best possible mobile experience • Complex user interfaces, animations is possible • Complex user interfaces, animations is possible • Limited access to device features is possible • The user experience can be very close, and in some cases on par with native iPhone apps • Fixed headers and footers are possible with Javascript Disadvantages Disadvantages Disadvantages Disadvantages • They do do do do not not not not have backward compatibility and do do do do not not not not support other platforms • Complex Javascript is required for data integration and is difficult to debug 

Class 2 It supports high high high high- - - -end end end end WebKit WebKit WebKit WebKit browsers browsers browsers browsers with devices that have at least 1Ghz processors that have at least 1Ghz processors It supports all iOS devices, 2.2+ Android devices, WP 7.5 Example: Instagram for Android 2.3 

Class 2 Advantages Advantages Advantages Advantages • Complex user interfaces are possible • Complex user interfaces are possible • Support the majority of high-end smartphones on the marketplace • Has limited backward compatibility Disadvantages Disadvantages Disadvantages Disadvantages • Use of animations animations animations animations are processor and battery intensive • Use of animations animations animations animations are processor and battery intensive (Javascript-based animation needs to be used instead of CSS, or animations need to be omitted altogether) • Cannot use fixed footers and headers • Complex javascript can be required for data integration and is difficult to debug 

Class 3 It has the highest degree of smartphone device highest degree of smartphone device highest degree of smartphone device highest degree of smartphone device compatibility compatibility compatibility compatibility, provides high quality user experience, compatibility compatibility compatibility compatibility, provides high quality user experience, as well as supporting higher and lower classes It supports all iOS devices, all Android devices, WP BlackBerry Torch 

Class 3 Advantages Advantages Advantages Advantages • Supports the majority of devices, but not all • Supports the majority of devices, but not all • Provides a quality user experience on more capable browsers, and degrades to lessor devices Disadvantages Disadvantages Disadvantages Disadvantages • Cannot support animations or screen transitions • Cannot support animations or screen transitions • Cannot support fixed header or footer • Limited javascript support 

Class 4 It is designed with compatibility compatibility compatibility compatibility in mind, seeking to have the best possible user experience across the have the best possible user experience across the widest number of devices Any mobile web app looking to have the maximum cross platform support cross platform support cross platform support cross platform support, should look no further than a Class 4 experience than a Class 4 experience It is more website than web app 

Class 4 Advantages Advantages Advantages Advantages • Support the largest number of handsets • Support the largest number of handsets • Is simple to design and develop • Is simple to deploy Disadvantages Disadvantages Disadvantages Disadvantages Disadvantages Disadvantages Disadvantages Disadvantages • Requires significant Quality Assurance time 

Universal App It is an experience that is built for multiple device built for multiple device built for multiple device built for multiple device contexts contexts contexts contexts, but with a single source of content contexts contexts contexts contexts, but with a single source of content Sometimes referred to as Responsive Responsive Responsive Responsive Web Design Web Design Web Design Web Design Warning. Warning. Warning. Warning. In this case the user experience is driven by technological constraints, not user needs by technological constraints, not user needs Warning. Warning. Warning. Warning. This approach is something that has proven unsuccessful with most mobile platforms and applications 

Universal App Advantages Advantages Advantages Advantages • Support mobile devices from a single code base • Based in web standards • Based in web standards • Increases accessibility and Search Engine Optimization (SEO) • Data integration is very simple Disadvantages Disadvantages Disadvantages Disadvantages • Must be designed for maximum device compatibility • Must be designed for maximum device compatibility (Lower Common Denominator or LCD-based Design) • Does not address the users context • Most websites are not designed to be “universal” and need to be refactored from scratch 

Browsers Classes We can look at mobile experiences also w.r.t. the browsers browsers browsers browsers capabilities capabilities capabilities capabilities browsers browsers browsers browsers capabilities capabilities capabilities capabilities 

Roadmap • Anatomy of a mobile web app • Anatomy of a mobile web app • Classes of Mobile web apps • PhoneGap 

PhoneGap • Conceptual Overview • Phonegap Development Guidelines • Phonegap Development Guidelines 

PhoneGap VS Cordova Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation Phonegap is a Apache foundation – wider audience and contributors – Transparent governance • Better documentation – Easier contributions for companies • Apache Licensing Phonegap is a distribution of Apache Cordova There was only one problem: trademark trademark trademark trademark ambiguity ambiguity ambiguity ambiguity CORDOVA CORDOVA CORDOVA CORDOVA 

PhoneGap The UI layer is a web browser web browser web browser web browser view view view view – 100% width – 100% width – 100% height Headless web browser – No URL bar – No chrome This is a web browser instance – No chrome – No window decorations – No zooming – No text selection 

PhoneGap You develop your app using • HTML • HTML • CSS • Javascript You use the same web view same web view same web view same web view of the native OS of the native OS of the native OS of the native OS – iOS = UIWebView – Android = android.webkit.WebView 

PhoneGap API Allows you to access native OS functionality using JavaScript you develop your app using web technologies and PhoneGap handles communication with the native OS http://bit.ly/HBPPY5 

PhoneGap API WebView app PhoneGap Javascript API provider for Android API provider for iOS API provider for Windows for Windows Phone API provider for Blacberry PhoneGap 

PhoneGap API 

PhoneGap API on iOS - general idea 1. the native web views have events/notifications whenever the url/address is changed the url/address is changed 2. cordova.js parses messages into strings and puts them as the source URL inside a hidden IFrame element 3. This navigation action is intercepted on the native layer and converted to a native object, and the default navigation action is blocked navigation action is blocked 4. The string is parsed and a native code operation is performed 5. The native layer writes back to the web view layer by executing javascript strings 

Recurrent App Architecture The app app app app acts as a client for user interaction The app communicates with an application server application server application server application server to The app communicates with an application server application server application server application server to receive data The application server handles business logic and communicates with a back back back back- - - -end data end data end data end data repository repository repository repository http://bit.ly/HBPPY5 

The App It generally uses the single single single single- - - -page page page page application application application application model model model model • the application logic is inside a single HTML single HTML single HTML single HTML page page page page the application logic is inside a single HTML single HTML single HTML single HTML page page page page • This page is never unloaded from never unloaded from never unloaded from never unloaded from memory memory memory memory • Data will be displayed by updating the HTML updating the HTML updating the HTML updating the HTML DOM DOM DOM DOM • Ex. Using JQuery • data is retrieved from the application server using AJAX AJAX AJAX AJAX 

The Application Server It is a classical web server – server server server server- - - -side side side side scripting language scripting language scripting language scripting language such as Java, .NET, PHP, etc… – communication can be based on: • standard HTTP requests for HTML content • REST-ful services (XML, JSON, etc.) • SOAP – It performs business business business business logic logic logic logic, and generally gets or pushes data from a separate data repository 

The Back-end Repository It may be: – a standard DB standard DB standard DB standard DB (usually deployed in the same machine of the application server) the application server) – an external external external external API API API API (see www.programmableweb.com) Both application server and back-end repository can be provided as a service BaaS BaaS BaaS BaaS 

Features Coverage 

PhoneGap Plugins Sometimes PhoneGap is not enough as is for our purposes • Unsupported feature • Unsupported feature • heavyweight data processing is faster in native code – ex. images manipulation • background processing is better handled natively – ex. Files sync • complex business logic You need to develop a PhoneGap PhoneGap PhoneGap PhoneGap plugin plugin plugin plugin http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins 

PhoneGap Plugins Purpose Purpose Purpose Purpose. .. . To expose a Phone native functionality to the browser browser This is done by developing – a Custom Native Custom Native Custom Native Custom Native Component Component Component Component Different for each platform – a Custom Custom Custom Custom Javascript Javascript Javascript Javascript API API API API – a Custom Custom Custom Custom Javascript Javascript Javascript Javascript API API API API It should be always the same 

PhoneGap Plugins 

PhoneGap • Conceptual Overview • Phonegap Development Guidelines • Phonegap Development Guidelines 

Project Structure If your app gets complex, you may prefer to use the structure prefer to use the structure presented in the Anatomy Anatomy Anatomy Anatomy of of of of a a a a HTML5 web HTML5 web HTML5 web HTML5 web app app app app part of this lecture 

Page Structure • Place all CSS stylesheets at the at the at the at the beginning beginning beginning beginning • Place all CSS stylesheets at the at the at the at the beginning beginning beginning beginning – allows the page to render progressively – avoids flickering • Place all JS scripts that do not affect page layout at the end at the end at the end at the end at the end at the end at the end at the end – every script must be parsed before it can be used – they block parallel downloads 

Images and Style • First of all, avoid images when possible – you may use CSS gradiends, effects, etc. – you may use CSS gradiends, effects, etc. • Try to avoid advanced CSS properties – for example, text-shadow and box-shadow, opacity • Use touch events, instead of onClick – onClick may take up to 500ms to execute! 

Text Management • If the input is numeric, open up only the numeric keyboard – The same holds for email, websites, ecc. – The same holds for email, websites, ecc. • Disable user selection <style> * { -webkit-touch-callout: none; -webkit-user-select: none; } 

CSS Hardware Acceleration When you use - - - -webkit webkit webkit webkit- - - -transform transform transform transform - - - -webkit webkit webkit webkit- - - -transform transform transform transform you have to use translate3d( translate3d( translate3d( translate3d(x,y,z x,y,z x,y,z x,y,z) ) ) ) instead of using translate(x,y) translate(x,y) In iOS, the last instruction is not HW-accelerated 

Scrolling I you want to scroll only a portion of your view, you should use this library should use this library http://cubiq.org/iscroll Examples: – fixed header and footer, with scrollable content – scrollable sub-views with fixed description below 

Frameworks JQueryMobile, JQuery, Backbone, etc. are beautiful tools… tools… However they may impact the performance performance performance performance of your app Use a framework only when it is necessary – Don’t use JQuery only because of the $() syntax! Solution Solution Solution Solution • build your own micro-framework • cut out PhoneGap plugins you do not use • use micro-frameworks (http://microjs.com) 

References http://www.tricedesigns.com/ http://pinchzoom.com/ http://hiediutley.com/ Chapters 11-12