module 2 - designing mobile solutions

© 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


Module 2 – Designing Mobile Solutions

2

Philippines Global Delivery Center


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


Topics

• Approaches to mobile design• Comparison of mobile application designs• Choosing the right approach

4


Three approaches

5


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



Approaches to Mobile Design

7



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



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



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



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



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



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



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



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



Comparison of Mobile Application Designs

16



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



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



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



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)



Choosing The Right Approach

21


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



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



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


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



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



27

module 2 - designing mobile solutions

Documents