module 2 - designing mobile solutions
TRANSCRIPT
© 2012 IBM Corporation
Worklight v6.0 - Designing Mobile Solutions
Learn Sessions
1
Application Development – WorklightApplication Development – WorklightCapability Development CenterCapability Development Center
Philippines Global Delivery Center
© 2012 IBM Corporation
Module 2 – Designing Mobile Solutions
2
Philippines Global Delivery Center
© 2012 IBM Corporation
Objectives
After Completing this module, you should be able to:
3
• Compare the advantages and disadvantages of different mobile application designs
• Identify a mobile application design suitable for an application
© 2012 IBM Corporation
Topics
• Approaches to mobile design• Comparison of mobile application designs• Choosing the right approach
4
© 2012 IBM Corporation
Three approaches
5
© 2012 IBM Corporation
Web, Hybrid and Native
• The decision as to which mobile strategy to develop is based on many parameters:
– Budget– Timeframe– Target audience– Required functionality
• Each approach has advantages and disadvantages• The challenge is to balance the pros and cons• This module does not identify any recommended approach but looks at
the reasons for each, and lists the good and the less good
IBM Whitepaper – “Native, web or hybrid mobile-app development” -ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf
6
© 2012 IBM Corporation
Module 2 – Designing Mobile Solutions
Approaches to Mobile Design
7
© 2012 IBM Corporation
Approaches to Mobile Design
Native applications
8
• Binary executable file stored locally on the device• Usually downloaded from an App Store
– Apple App Store– Android Market, Google Play– BlackBerry App World– And others…
• Specific to a type of device• After downloading, the application interfaces directly with the device
operating system• The application can access all native APIs of the device
IBM Whitepaper – “Native, web or hybrid mobile-app development” - ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf
© 2012 IBM Corporation
Approaches to Mobile Design
Creating a native application
9
• The source code for the application is written in a high level language:– Apple iOS Objective-C, C, C++– Android: Java– BlackBerry: Java– Windows Phone: C#, VB,.NET
• The source is compiled into an executable binary file– The OS vendor usually provides the tools to do this– Called the Software Development Kit (SDK)– The SDK is platform specific
• Apple iOS: Xcode• Android: Android SDK• BlackBerry: BB Eclipse plug-in• Windows Phone: Visual Studio, Windows Phone Development Tools
© 2012 IBM Corporation
Approaches to Mobile Design
Mobile-web Applications – HTML5
10
• While HTML4.2 was a page display language, HTML5 is a more complete environment for browser-based applications
• Some new things available in HTML5:– Advanced UI components– Access to rich media types– Geolocation services– Offline availability– New audio capabilities
• A mobile-optimized web site can detect when the client is a Smartphone and respond with an appropriate page
© 2012 IBM Corporation
Approaches to Mobile Design
Mobile-web Applications – CSS
11
• Cascading Style Sheets were originally intended to separate presentation elements from content elements
• CSS3 divides the specification into modules. Four have been published as formal recommendations:– Media Queries
• Used to tailor output to a device or range of devices– Namespaces
• Selectors can be defined by namespace and local name– Selectors
• Query the DOM by tag name, attributes, id– Color
• Including transparency• Level 3 is still in the process of being defined
© 2012 IBM Corporation
Approaches to Mobile Design
Mobile-web Applications – JavaScript
12
• Client-side JavaScript adds behavior to web content• Typically works with the Document Object Model in order to interact with
the presentation of a page• Worklight Studio automatically creates a JavaScript file with the same
name as the application• There are a number of frameworks that use JavaScript libraries and
target mobile applications:– jQuery– Sencha– Dojo Mobile
© 2012 IBM Corporation
Approaches to Mobile Design
Mobile-web Applications – Mobile web sites
13
Feature Mobile web app Mobile web siteTools and knowledge HTML, CSS, JavaScriptExecution Installed shortcut, launched
like a native application URL
User experience Interactive UI Navigational UI between pages displaying static data
Performance UI logic is local. Responsive and accessible offline
Code executed on server: network-dependentperformance
© 2012 IBM Corporation
Approaches to Mobile Design
Hybrid applications (1 of 2)
14
• There are many things in a web design that will be common to renderings on any platform
• – For example, a background color or image, or a particular font• It is not good design practice to repeat the coding for each platform• – Maintenance becomes an issue• The hybrid approach combines native development and web technology• This approach requires a bridge between the native environment and the
web environment• Apache Cordova is one solution that is readily available – developers can
use it instead of creating their own bridge
© 2012 IBM Corporation
Approaches to Mobile Design
Hybrid applications (2 of 2)
15
• The web part of a hybrid application can be• – A web page stored on a server and accessed like any traditi– A
package of files stored locally on a device• HTML, JavaScript, CSS, media files, text files, and so forth• Server storage allows the developer to make modifications to the code
without having to go through the process of submission required for an App Store
• – However, offline availability is not an option if the server• Local storage is more flexible and can offer better performance • – However, remote update is not an option
© 2012 IBM Corporation
Module 2 – Designing Mobile Solutions
Comparison of Mobile Application Designs
16
© 2012 IBM Corporation
Comparison of Mobile Application Designs
Native – advantages and disadvantages
17
• Native code performs fast• Complete access mean that all device functions can be included in an
application• The critical disadvantage of pure native development is that the not
portable across platforms• Development effort may have to be repeated for each platform
– Costly, time-consuming• Because each platform has a unique set of APIs, the developer needs to
be familiar with a wide range of languages– Or the company needs a wide range of specialized developers
© 2012 IBM Corporation
Comparison of Mobile Application Designs
Web application – advantages and disadvantages
18
• Multi-platform support• Low cost of development• Runs in the browser, but only has very limited access to the APIs of the
device through the browser• Scenaries for the web approach include:
– Direct distribution– Pilot app– Visibility
© 2012 IBM Corporation
Comparison of Mobile Application Designs
Hybrid applications
19
• Multi-platform support• Medium cost of development
– There may still be need to code in a native device language• Not all device functionality will be available• A bridge is needed to access native mobile device features and execute
native code using JavaScript– Typically, Apache Cordova
• Scenarios for the hybrid approach include:– Balancing the tradeoff– In-house skills– Future considerations
© 2012 IBM Corporation
Approaches to Mobile Design
Comparison of features
20
Feature Native Web HybridDevelopmentlanguage
Native only Web only Native and web,or web only
Code portability and optimization
No Yes
Access to device specific features
Yes Almost none
Some, through a bridge
Take advantage of web expertise
No Yes
Advanced graphics Yes Some
Upgrade flexibility Low (App Store)
High Medium (usually App Store)
© 2012 IBM Corporation
Module 2 – Designing Mobile Solutions
Choosing The Right Approach
21
© 2012 IBM Corporation
Choosing the right approach
Scenario – the native approach
22
• An organization may have in-house expertise for a particular platform• For example, a company may issue an Android device to all employees,
and have developers who can code in Java for the Android platform• – The company would have a policy that the employee must use the
issued device. There is therefore no need to develop code for other platforms, or to have common code
• Some applications target a specific functionality that cannot be accessed in any other way than natively
• – For example, Skype (VoIP)• For real-time responsiveness and complex user interface requirements,
the native approach is the only adequate solution• – Games, for example
© 2012 IBM Corporation
Choosing the right approach
Scenario – the web approach
23
• An organization may want to control the distribution of its applications internally, without having to submit them for approval through an App Store
• The application may begin as a pilot, simply to prove a concept– A fully native application will be more difficult to develop– Therefore it will take longer and be more expensive
• Once the concept has been finalized the existing application can be• either adapted to native (rewritten) or can form the basis of a hybrid• application
– This would build on the proven concept by adding native functionality
© 2012 IBM Corporation
Choosing the right approach
Scenario – the hybrid approach
24
• An organization needs to create a mobile web presence rapidly– There is no particular need for fast response within the application– Native functionality is not required, or very little required
• There will typically be in-house developers who are familiar with HTML, CSS, and JavaScript
• The development of a web application is therefore easy and efficient– Adding skills to bridge to native code is not difficult
• The application can rapidly be distributed to all platforms, giving a good return on investment
• It can also be maintained very easily
© 2012 IBM Corporation
Designing Mobile Solutions
Checkpoint questions
25
1. What are the three approaches for creating mobile web applications?2. Which of these statements is not correct?
a) A native application is specific to a platformb) A web application is specific to a platformc) hybrid application may be specific to a platform
3. Name some of the new features of HTML54. True of false: A web page stored on a server can be part of a mobile web
application5. True or false: A hybrid application combines HTML, JavaScript and a
native language
© 2012 IBM Corporation
Designing Mobile Solutions
Module Summary
26
Having completed this unit, you should be able to:• Compare the advantages and disadvantages of different mobile
application designs• Identify a mobile application design suitable for an application
© 2012 IBM Corporation
Designing Mobile Solutions
27