This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
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)
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
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
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
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
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) { }
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.
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
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
• 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
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
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
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
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
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) • …
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 • …
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 • …
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
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
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
-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
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
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
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
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
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
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
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
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
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
• 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
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
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
- - -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
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
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
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
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
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
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!
only the numeric keyboard – The same holds for email, websites, ecc. – The same holds for email, websites, ecc. <input type="text" pattern="[0-9]*" value="numeric" value="numeric" value="numeric" value="numeric" /> • Disable user selection <style> <style> * { -webkit-touch-callout: none; -webkit-user-select: none; } </style>
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
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
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)
iivanoo
murachiakira
kakehashi
mizdra
eller86
10xinc
atsushii
iselegant
abnoumaru
jsakamoto
siva_official
ishikawa_satoru
pfn
trallard
eileencodes
erikaheidi
samanthasiow
csswizardry
speakerdeck
andyhume
dougneiner
skipperchong
lauravandoore
zakiyama
philhawksworth
