Mobile Web Apps

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 11 months ago)

60 views


Mobile Web
Apps

IT
University

4

Nov. 2013

Troels Parbst


Established

1999


Locations in Copenhagen, Aarhus, Aalborg og
Warsaw


About

250
employees

(2011)


About

320
employees

(2012
)


420

employees

(
oct
. 2013)



Netcompany

2

”At være Danmarks største og foretrukne
leverandør
af forretningskritiske
it
-
projekter med
leveranceansvar
.”

Our

business is line
-
of
-
business
applications
, portals and system integration
using

technology

and standards
primarily

for .NET and J2EE


Troels Parbst






Cand.scient

in Computer Science, DIKU


Senior
consultant

in Netcompany (2½
years
)


Been
working

in
telcos

for
about

6
years

Who’s

talking
?

3

Section

1


Why

do mobile


Different

solutions and
taxonomy


Choose

an approach


Section

2


Expensive

native

apps


Mobile browsers


The hybrid
app


Agenda

4

Mobile Web

Section

1

5

Why

our

customers

cannot

ignore

mobile

Why

is mobile
important
?

6

Source: Google,
2012


Users
expect

and
reward

a
good

experience


Most
users

think

mobile
-
friendly

sites
are

important
. All of
these

users

encountered

sites
that

were

not mobile
-
friendly

(so
they

know

the difference)


Most
users

are

more
likely

to
revisit

mobile
-
friendly

sites


Many

users

are

more
likely

to
buy

or
convert

after

visiting

a mobile
-
friendly

site


… and
punish

a bad
experience


Many

users

will

leave

a non
-
mobile
-
friendly

site,
without

buying
.


Over
half

of the
users

said

a
frustrating

experience

on a (mobile) website
would

hurt

the perception of the brand.



Why

is mobile
important
?

7

0
100
200
300
400
500
600
700
800
Samsung
Apple
Nokia
HTC
BlackBerry (RIM)
Others
Total
2012
2011
Annual

number

of
smartphones

shipped

(in millions)

494 million in 2011, 712 million in 2012!

Mobile solutions

8

What is this Mobile Web?


“The Mobile Web refers to access to the world wide web, i.e. the use of browser
-
based
Internet services, from a handheld mobile device, such as a smartphone, a feature phone or
a tablet computer, connected to a mobile network or other wireless network.”


Wikipedia



9

Mobile solutions

Responsive

design



Facilitated

by the CSS3 Media
Queries

Module



Specified

styles

are

applied

given
certain

conditions


Conditions

are

composed

of
ANDs
,
ORs

and
presentation

feature tests


Window

width
/
height
,
device

width
/
height
,
orientation
, ratios


Simple but
powerful
!



Combined

with
careful

HTML
structure

yields

a
many
-
in
-
one

solution


10

Mobile solutions

Responsive

design
example

Web

Tablet

Smartphone

The rest is default HTML
document

flow,
no

JavaScript!

11

Mobile solutions

Web
app

as
dedicated

mobile web site



A component
based

approach
using

HTML, JavaScript and CSS


Adapted

for a single
device

type
e.g
. iPhone


12

Mobile solutions

General Web
app



Visual
expression

is
identical

on all platforms


13

Mobile solutions

Full
blown

App

store
app



Presence

in the
app

store with
search

and
ranking


Device
access


Camera


Files


Compass


And so on…


Notifications


Services (on Android)


Utilize

the
device

hardware to
it’s

full

extend

14

Mobile
app

taxonomy



For
one

playform

only
.


Code and
environment

bound

to platform.

Native
app


A Web
app

wrapped

as a
native

app
.

Hybrid
app


Website
that

looks
like

and
behaves

more
like

an
app

than

a website, fx transitions and navigation.

Web
app


Website
customized

for
one

platform, fx iPhone or
Android. Fx transitions and navigation.

Dedicated

mobile
website


Website
adapted

for
varying

screen
sizes
.

General mobile
website

15

Choosing an approach

What

the
customer

needs



Functional

or design
requirements

might

dictate

the approach


Price is a
huge

factor, most mobile for the
money


How
well

an
app

sits

with the
existing

channels
. Do the
customer

have
skills

to support the engagement?


Time to
market




Working

smart and
offering

competitive

prices



Development time,
including

design,
building

and
testing


Developer
skills
. Front
-
end developer or
app

specialist



16

Comparing approaches

Native

Web

Graphics

Native

HTML,
Canvas
, SVG

UI performance

Fast

Slow

Look and
feel

Native

Emulated

Distribution

App

store

Web

Device
access

Yes

No

Swipe
,
pinch

Yes

Not
pinch

Connectivity

Runs offline

Must
be

online

Required

skills

Specific

to OS

Web
technologies

Hybrid
apps

Section

2

17

Native
app

frameworks


18

Silverlight

XNA

WPF

XAML

Device API

WinRT

API

WinJS

& HTML

Azure

Notification Service

Xcode

Objective

C

Vertical

frameworks

UI

Notifications


Java

Android UI

Programming model

15 > API versions

Support Library

Notifications


One
dedicated

UI
thread


Non
-
responsive

apps

are

killed


OS has
license

to
kill

any

app

at
any

time


Event driven MV*
applications


Asynchronous
behavior


Notification service




Vendor

frameworks

have
varying

degrees

of
freedom


Power
consumption


Runtime
control


Security


Native
framework

similarities


19


compared

to the browser

20

A single
-
page JavaScript application has


Environment comparable with native platforms


Threads


Asynchronous behavior


Event based interaction



While reaping the benefits of standards


Cross
-
platform code


Well known technologies


Using web technologies for their originally intended purpose



Mobile OS distribution

21

Mobile browsers


22


Layout engine in Chrome, Safari, Android, BlackBerry Tablet, BADA
and
webOS



GNU open source project with
contributers

from Apple, Google,
Nokia, RIM and more.



About 40% marked share on handheld devices in July 2012


Estimated 50% marked share by the end of 2012


More users than Trident (IE) and Gecko (FF) as of September 2013

Mobile browsers

23

WebKit

Why is that important?



Homogeneity. Consistent capabilities and features



CSS3 support varies a lot in HTML5 browsers, but
webkit

has many implements of the

webkit

vendor specific
property



Support like no other browser. For instance remote
debugging of the browser running on the device in
Safari and Chrome

Webkit

browsers


24

WebKit

implements fancy CSS3



Fonts


Text effects


Borders and boxes (round corners)


Gradients and opacity


Transitions and animations

Webkit

browsers


25

WebKit

has rich HTML5 support



Web Storage (client side SQLite)


File API


Server
-
sent events


WebSockets

(permanent HTTP connection to server)


Web Workers (long running scripts)


GeoLocation


Audio and Video tags


Offline web applications


Canvas element

Webkit

browsers


26

What will the
WebKit

platform (probably) never do?




Web
app

limitations


27

Demanding, leading edge applications e.g. games


What is missing from
WebKit

as mobile platform?



Device access features not supported by the browser


Notification


Compass


Camera


Contacts


Files


System events



Native packaging is missing


App store infrastructure




Need an intermediate layer to access the host platform!

Web
app

limitations


28

29

The hybrid app

Source: brightcove.com

Device access and native wrapping




Apache Cordova / PhoneGap


Appcellerator

Titanium


Nimblekit


Rhodes (
RoR

server on the phone)

Device
access


30

Cordova

/ PhoneGap


31


Has
plugin

structure

where

any

native

feature
can

be

reached



Can
embed

into

existing

application

Basic PhoneGap
app


32

A
WebView

packaged


as a
native

app
!

… and
nothing

else

Choosing framework for adding chrome and abstraction
to an app


Many contenders. Potentially every app framework for JS with touch
support



Selection criteria


presentation layer: HTML or JavaScript


UI Bindings: key for reducing boilerplate code


Bar to entry


Composed Views: component reuse
.
Framework thoroughness


Provides app structure


Supports other browsers than
webkit

Web
app

framework


33

Web
app

framework


34

Presentation

layer

UI Bindings

Bar to
entry

Composed

views

Provides
app

structure

Support >
WebKit

Sencha
Touch

JavaScript

Yes

High

Yes

Yes

No

jQuery

mobile

HTML

Kind of

Medium

Do it
yourself

Kind of

Yes

Dojo

Mobile

HTML

Kind of

Medium

Do it
yourself

Yes

Yes

DHTMLX
Touch

Javascript

Yes

High

No

Yes

Firefox

SproutCore

None

Yes

Medium

Yes

Yes

Firefox

iUI

HTML

No

Low

No

No

No

XUI

None

No

Low

No

Yes

Yes

Sencha Touch


35


iOS
like

Components


Animations


Layout
abstractions


Unified

event model (true MVC / MVVM)


Touch events


Data
package

with web
storage


Charts


App

structure


Taps into the other
jQuery

ongoings


Supports every browser


Community

jQuery

Mobile

36

37

Hybrid
app

criticism

Limited to
what

graphics

the browser
can

produce


Games and animations
will

meet

hard

limits


Android
sucks


Entry

level

phones

run Gingerbred and have
low

memory


Hardware
undersized

for top browser performance


Only

Chrome
utilizes

the GPU, default browser never
will


The F
-
word
: fragmentation


Vendors

don’t

update

and
screw

up the browser with ”
good

ideas



Javascript


No
explicit

resource

management for
memory

and
cycles


Libraries
seldom

minded for single page
apps

(
fixed

with the
next

reload
)


Tooling


Power
consumption


What about the developer skills
?


Same
same

but different


More
complex apps: more architecture,
more
testing, more
PoC

code

Price vs. user experience vs. flexibility


Easy to have an opinion on an app


Customers expect the best from an app


Level expectations with expenditure


In some regards, only ½ the work


The simpler the more likely


Code still has to make exceptions for the each

platform.


Visual
expression

is
identical

unless

two


designs
are

made


Compared

to an average portal
project


An
app

is (just) a fancy front
-
end


Things
like

integrations and
secutity

are

often

harder

to provide


Apps

are

often

secondary

to a
regular

website


38

Experiences

If
you

think

you’ve

got

a
consultant

hidden

in
you

and
you’re

considering

to let
him

out



Keep

Netcompany in mind!





Many

of
us

start right
after

finishing

the Masters
degree



Great
place

to
learn

and
develop

your

skills
!





Awarded Denmark’s
best IT
consultancy 4 times by “
Børsen
” 2005
-
2012


Awarded Denmark’s
best
consultancy by “Computerworld“ 2007


Awarded Dynamic
CRM Partner of the
Year
and
Information
Worker Partner of the
Year (MOSS
platform
) by
Microsoft
Denmark 2009


Microsoft
awarded
Dynamic
CRM partner of the
year, Best
customer
satisfaction of
the
year
and
Azure
Partner of the
year by
Microsoft Denmark 2010


Awarded Cloud
Platforms Partner of the
year
and
Portal
and


Collaboration Partner of the
year by Microsoft Denmark 2011


CRM and Cloud Platform Partner of the year by Microsoft 2012


Winner of Highest Impact BI solution award @ European SP conference 2013


Supplier of the year @ TDC (TAK
-
prisen
) 2013


39

Netcompany

40



?

Questions