VW324 Unit 1 Transcript

Slide 1

Introduction to Mobile Web

development

Copyright IBM Corporation 2013

Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

8.0

1
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 2

Unit objectives
After completing this unit, you should be able to:
Describe the role of mobile applications in the enterprise
Identify development approaches to mobile applications
Define Mobile Web applications
Explain the differences between Mobile Web, hybrid, and native
application development
Describe some of the IBM mobile initiatives for the enterprise
Describe the IBM MobileFirst strategy for enterprise development

Copyright IBM Corporation 2013

Notes:

2
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 3

The way that mobile computing is changing the social landscape

Digital transformation underway

Changes to the way people interact
Constantly connected devices allow collaboration
Immediate access to information
Changes how products and services are delivered

NEWS

Copyright IBM Corporation 2013

Notes:
This page describes how mobile computing is changing the social landscape.
Mobile computing transforms the way people interact with systems, and with each other.
Mobile devices provide always-on, constantly connected access to information.
These devices enable an organization to respond faster to the needs of its customers.
A constant connection removes barriers to communications between members of your
organization.
Cameras on mobile devices capture newsworthy events and share this information through social
networks.
Mobile devices are now used to check in for flights, and pay for a cup of coffee.
Organizations must create mobile applications so they can compete in a rapidly changing
marketplace.

3
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 4

Challenges of mobile computing to the enterprise

Many different devices and form factors

Connectivity to cloud resources
Integration with server-side systems
Anywhere, anytime business transactions
Wireless security issues
Protection of corporate data and resources

Unique characteristics of mobile devices, such as unique user

interface, context, and location

Copyright IBM Corporation 2013

Notes:
There are some unique challenges to delivering enterprise mobile computing.
The creation of applications for a variety of mobile devices and factors such as the screen size,
resolution, and orientation of the device, are some of the challenges.
To enhance the productivity of the mobile device, users often want to synchronize their data,
messages, and email by using cloud-based resources.
Users of corporate mobile devices want access to real-time corporate data.
Enterprises must ensure the integrity and security of corporate data over wireless networks.
Enterprises also need a way to deactivate the device if it is lost or stolen.
Mobile applications might need to access the mobile context of the device, such as location
information.
Mobile computing involves more than creating web pages, although building Mobile Web pages is
a good place to start.

4
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 5

A choice of development approaches

Web application
Desktop and
mobile using
open standards
programming
model
No devicespecific function

Mobile Web
application
Targets mobile
devices that use
open standards
web client
programming
model
Offline
capabilities

Hybrid mobile
application
Mobile only
Application runs
on the device
Uses of an open
web client
programming
model with a
JavaScript
bridge to access
native device
features

<--Mobile browser execution-->

Native mobile
application
Mobile using
only native
languages
Native
appearance,
device
capabilities, and
performance

<--App store download-->

Copyright IBM Corporation 2013

Notes:
If you look at the development of mobile applications, there are four different development
approaches.
The first three approaches are similar since the applications are all browser-based. Modern
websites must handle a range of devices including desktops, notebooks, tablets, and mobile
phones.
The first approach is pure web applications development. Web applications are traditional web
applications that run on desktop computer browsers.
Mobile Web applications focus on using the features of modern browsers such as HTML5,
Cascading Style Sheets (CSS), and JavaScript. Mobile Web applications use new web standards
that are suited to mobile devices. For example, HTML5 includes features to access local storage
and to run offline.
The hybrid mobile model is a combination of the Mobile Web and native mobile approaches. In
this form of mobile development, web technologies can be used, but native APIs of the device
can also be accessed with bridging technologies.
In native mobile applications, you must use a software development kit (SDK) of the device to
develop the application. Developing native mobile applications provides the highest level of
application richness, but each device has its own programming model.

5
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 6

Standards-based or platform-specific APIs

Web application
Written in HTML5
JavaScript and CSS
Quick and cheap to
develop, but less
powerful than native

Mobile
browser
WEB CODE
<!DOCTYPE ht
<html>
<head>
<title>Web App
</title></head>
<body onload =

Hybrid application
HTML5 code and IBM
Worklight runtime
libraries are packaged
within the application
and run in a native shell

native
container
WEB CODE
<!DOCTYPE ht
<html>
<head>
Device APIs

Native application
Platform-specific. Runs
on the device with
platform-specific APIs.
Can deliver higher user
experience

100101010101
110100010100
100101011101
000100010010

Device APIs

Copyright IBM Corporation 2013

Notes:
Web application and Mobile Web application development both use the same technologies,
namely, HTML5, JavaScript, and Cascading Style Sheets.
Hybrid applications are also built with open standard technologies, but they access some of the
device APIs through JavaScript wrappers that products like IBM Worklight and Apache Cordova
provide.
Native applications run on the device and are programmed with platform-specific APIs.

6
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 7

Mobile Web application development

Easy to develop and deploy
Organizations have an existing pool of developers skilled in building web and
HTML applications

The applications run on mobile browsers

Cross-platform portability

Built on W3C technologies

HTML5 and CSS3 specifications
JavaScript

Copyright IBM Corporation 2013

Notes:
The advantage of Mobile Web application development is that the mobile applications are
relatively easy to develop and deploy.
In many organizations, there is an existing pool of development skills in building web and HTML
applications.
Mobile Web applications run on browsers, and these applications are portable across desktop,
tablet, and mobile devices.
Mobile Web applications are based on World Wide Web consortium (W3C) standards such as
HTML, CSS3, and JavaScript.
The specifications for HTML5 can be found on the W3C public repository at:
dev.w3.org/html5/spec/spec.html.

7
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 8

Native mobile applications

Platform and device specific
Deployed from app stores
Require specialized software development kits (SDKs)
Advantages:
Rich user experience that takes advantage of the graphics of the
device
Can use all the features of the device, such as the camera, geolocation
Fast performance
Can generate revenue
Disadvantages:
Require specialist skills for each platform
Subject to licensing agreements
Copyright IBM Corporation 2013

Notes:
Native mobile applications are those mobile applications, or apps, that are built for a specific
platform, and use the programming model that is defined by the platform.
Native mobile apps are deployed on an app store, and can be subject to vendor licensing
agreements.
The development of mobile apps for a native platform requires a specialized software
development kit (SDK) and programming language.
The advantages of native mobile apps include:

Better performance and an enhanced user experience that uses of the full capabilities of
the device.

With an app store deployment, the user decides whether to download and install the app.

The creator of the app can make the app available for a fee that can generate revenue
for the company.

The disadvantages of native mobile apps include requiring specialized developer skills and being
subject to the licensing requirements of the specific platform vendor.

8
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 9

Hybrid Mobile Web applications

Built with web technologies
HTML for layout
CSS for style
JavaScript to access device

Access to device features

Camera
Vibrate
On-device GPS

Distributed from app stores

Some platform-specific knowledge required
Subject to licensing agreements

Copyright IBM Corporation 2013

Notes:
Hybrid mobile applications are built with standards-based web technologies; HTML for layout,
Cascading Style Sheets for the style, and JavaScript for the behavior.
Hybrid technologies provide a set of pluggable JavaScript libraries that wrap the device-specific
APIs for each mobile platform.
These JavaScript libraries give the developer access to some of the features of the device, such
as the camera, or the on-device Global Positioning System.
Since hybrid mobile applications use of device-specific features, they are packaged as apps and
distributed from app stores.
Hybrid mobile applications are subject to the same licensing agreements as native apps.

9
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 10

Hybrid web example: Apache Cordova

Software for building mobile apps with web technologies
JavaScript libraries that provide access to device features

HTML for layout

CSS for presentation
Standards based
JavaScript to access device function
For example, navigator.notification.vibrate()

HTML 5

CSS3

JavaScript

Cordova
JavaScript
libraries
Copyright IBM Corporation 2013

Notes:
Apache Cordova is a library of APIs from the Apache Foundation that allow a mobile app
developer to access native device function such as the camera from JavaScript.
The hybrid application is built with standard technologies such as HTML for the layout and CSS
for the presentation.
The Apache Cordova JavaScript libraries provide access to the device features.

10
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 11

Mobile development comparison table

Mobile implementations
Web

Hybrid

Native

Development
cost

Reasonable

Reasonable

Expensive

Development
time

Short

Short

Long

Portability

High

High

None

Performance

Fast

Native speed
when needed

Fast

Native
function

None

Some

All

App store
distribution

No

Yes

Yes

Copyright IBM Corporation 2013

Notes:
The mobile development comparison table describes the different mobile implementations
according to development and non-functional requirements.

11
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 12

Mobile application development programming models

.Net for
Windows Phone

Java

Windows

Android

HTML 5
JavaScript
CSS3

C/C++

Apple
BlackBerry
Objective-C

Java

Copyright IBM Corporation 2013

Notes:
This figure shows that there are a number of programming languages for developing mobile
applications. The type and operating system of the mobile device itself determines the choice of
programming language that is used.
At the center of the figure, you see the standards-based languages that you can use to develop
Mobile Web applications that provide you with cross-platform portability for your application.

12
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 13

Maturing web standards

HTML5 is a major revision

All major browsers are moving to adopt the standard

Offline web applications
Audio and video
Canvas
Form validation

Cascading style sheets (CSS3)

Animations
Transitions
Media queries
Box shadow

JavaScript API
Geolocation
Web storage

Copyright IBM Corporation 2013

Notes:
The HTML5 specification defines the fifth major revision of the core language of the World Wide
Web: the Hypertext Markup Language (HTML).
All the major browsers are moving to support the HTML5 standards.
Cascading Style Sheets define the style for an HTML document.
New features are introduced in CSS3.
JavaScript is a standard for the creation of Asynchronous JavaScript and XML, or Ajax,
applications.

13
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 14

What is a developer to do?

Objective C
Java
Apple
Android
BlackBerry

W3C
CSS
HTML5
JavaScript

Copyright IBM Corporation 2013

Notes:
The decision as to which mobile development strategy to adopt is based on many parameters,
including:

Development cost

Time-to-market

Target audience

Target platform and devices

Function required

Developer skills

The choice of strategy is made on a case by case basis.

14
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 15

IBM mobile initiatives for the enterprise

Mobile Web
application
development
Build mobile applications
Connect to backend
systems in support of
mobile
Key capabilities:
Mobile Web application
development
Enterprise service, data,
and application
integration

Manage and secure

mobile devices
Manage mobile devices
and applications
Key capabilities:
Secure network
communications and
management
Mobile lifecycle
management
Device analytics and
control

Extend existing
business capabilities
Extend existing business
capabilities to mobile
devices
Transform the business
by creating new
opportunities
Key capabilities:
Mobile-enabled solutions
that include analytics,
commerce, and social
business

Copyright IBM Corporation 2013

Notes:
This page identifies some of the IBM mobile initiatives for the enterprise.
The main focus areas are Mobile Web application development, the management and security of
mobile devices, and extending existing business capabilities to the mobile platform.
Within each of these identified focus areas, the main criteria and capabilities are listed.

15
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 16

IBM MobileFirst portfolio

Industry Solutions
IBM and Partner Applications
Strategy
and Design
Services

Application and Data

Platform

Management

Devices

Security

Analytics

Network

Servers

Development
and
Integration
Services

Cloud and Managed Services

Copyright IBM Corporation 2013

Notes:
This slide shows a graphic of the IBM MobileFirst offerings.
IBM MobileFirst is a comprehensive mobile portfolio that combines security, analytics, and
application development software, with cloud-based services and deep mobile expertise.
IBM MobileFirst includes:

IBM MobileFirst Platform The capabilities of IBM Worklight to simplify development and
deployment.

IBM MobileFirst Management IBM Endpoint Manager that includes enhanced support
for Bring Your Own Device (BYOD) programs and increased security standards that are
critical to governments and regulated environments.

IBM MobileFirst Security IBM extends its context-based mobile access control solutions
and expands mobile application vulnerability testing with support for Apple iOS apps with
the latest release of AppScan.

IBM MobileFirst Analytics IBM Tealeaf CX Mobile software gives enterprises more
visual insight into mobile behaviors so they can create exceptional and consistent
consumer experiences across mobile devices.

IBM Service offerings for mobile computing are shown on the sides of the diagram.

16
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 17

IBM Mobile Development Lifecycle Solution

Design and Develop

Instrument
Analytics
and Security

WorkLight
Obtain Insight

Integrate
CastIron

Tealeaf

Manage
Endpoint
Manager
Deploy
WorkLight

Industrialize
IBM Mobile Development
Lifecycle Solution

Test
Rational
workbench

Scan and Certify

AppScan
Copyright IBM Corporation 2013

Notes:
The IBM Mobile Development Lifecycle Solution includes many products to develop, run, and
manage mobile applications.
The phases of the IBM Mobile Development Lifecycle Solution and the corresponding products
are shown outside of the graphic.
This course focuses on the design and develop phase that is the starting point of the IBM mobile
development lifecycle.

17
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 18

IBM Worklight: Advanced mobile application platform

Efficiently develop, run and manage Mobile Web, hybrid and native
applications
Use standards-based technologies such as HTML5, CSS, and
JavaScript
Supports JavaScript frameworks
Dojo mobile, jQuery mobile, and Sencha Touch

Copyright IBM Corporation 2013

Notes:
IBM Worklight provides an open, comprehensive, and advanced mobile application platform to
build, run, and manage mobile applications.
With IBM Worklight, you can use standards-based technologies such as HTML5, Cascading Style
Sheets, and JavaScript to develop Mobile Web and hybrid applications. Specialized SDKs can
also be integrated into the Worklight development environment to build native applications.
Worklight supports multiple JavaScript frameworks: Dojo mobile, jQuery mobile, and Sencha.
The Worklight product gives developers the choice to use the framework that is best for them.

18
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 19

A case for developing Mobile Web applications

Mobile Web applications
Provide a consistent web experience across multiple devices
Desktop browser, tablet, smartphone

Hybrid applications
Provide a user experience that takes full advantage of the device and its context

Copyright IBM Corporation 2013

Notes:
Mobile Web applications can provide a consistent web experience across desktops, tablets, and
mobile phones.
Developers can leverage their existing skills in web application development by using standardsbased technologies to build Mobile Web and hybrid applications.

19
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 20

Roadmap for developing Mobile Web applications

What is the next step?
The rest of this course is designed to help you to create a custom
roadmap for how to develop Mobile Web applications
You review the courses in the WebSphere Education curriculum that
teach you how to develop Mobile Web applications

Copyright IBM Corporation 2013

Notes:
What is the next step?
The remainder of this course is designed to help you to create a custom roadmap for how to
develop Mobile Web applications.
Each unit provides an overview of each course in the curriculum for building Mobile Web
applications. After reviewing each unit, you decide which skills, technologies, and courses you
should take to become proficient in Mobile Web development.

20
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 21

IBM global training

Copyright IBM Corporation 2013

Notes:
Find the training path for your country.
Use a search engine to find the website for IBM learning services.
Then you can refine your search to look for specific courses and training roadmaps.
You can also find training paths on the IBM WebSphere Education website at
ibm.com/software/websphere/education/paths/.

21
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

VW324 Unit 1 Transcript

Slide 22

Unit summary
Having completed this unit, you should be able to:
Describe the role of mobile applications in the enterprise
Identify development approaches to mobile applications
Define Mobile Web applications
Explain the differences between Mobile Web, hybrid, and native
application development
Describe some of the IBM mobile initiatives for the enterprise
Describe the IBM MobileFirst strategy for enterprise development

Copyright IBM Corporation 2013

Notes:

22
Copyright IBM Corporation 2013
Course materials may not be reproduced in whole or in part without the prior written permission of IBM.