WEB APP PROS & CONS

i Conference

2011, IUB

WEB APP PROS & CONS

A COMPARISON OF DEVELOPMENT
TECHNIQUES

ROB ELLIOTT

VISITING LECTURER,
PURDUE

SCHOOL OF
ENGINEERING AND TECHNOLOGY,
IUPUI

INTRO


“Nati ve” Apps:



Written in a programming language for a targeted operating system


Apple iOS Devices: iOS SDK, using Objective
-
C


Android Devices: Android SDK, using Java



Have access to all features of the hardware


Camera, GPS, Accelerometer, Microphone, etc.



Are distributed via the respective app “marketplace”


iTunes App Store, Android Marketplace



iOS apps are subjected to rigorous testing/acceptance process; Android
apps are submitted to the Marketplace with little oversight



Development fees:


Apple: SDK is free (registration required), $99 to submit apps to App Store


Android: SDK is free, $25 to submit apps to Android Marketplace


NATIVE VS. WEB APPS


“Web” Apps:



Web
-
based applications written with traditional web programming
languages


HTML/CSS, Javascript, PHP/.NET/JSP



Have limited access to device hardware (depends on platform)



Can be used cross
-
platform (some restrictions apply)



Most are intended to be used when the device is online; some have
capabilities for offline use



Most platforms have some semblance of a “web app store,” but the
stores and their contents vary widely


No centralized marketplace for all platforms

NATIVE VS. WEB APPS

INTRO


$$$ (or the potenti al for $$$)



i OS App Store provi des a “fi l ter” for apps, so users have at l east
one means of gaugi ng thei r worth



Al l app marketpl aces provi de rati ngs, comments, ranki ngs



Interacti ng wi th the hardware provi des si gni fi cant app potenti al



Users have been “trai ned” to search the markets fi rst



Many users don’t know the di fference between nati ve and web
apps



Oh, and $$$

NATIVE APPS: WHY SO POPULAR?

INTRO


Context, context, context



Cross
-
platform development is
huge


Disney acquires Rocket Pack (1
y.o
. Finnish startup) for $10m
-
$20m
1


Moblyng

raising $10.9M to make mobile HTML5
games
2



Provide convenient means of entry to existing web
applications w/o extensive new development



When hardware functionality and offline use is not absolutely
critical to the function of the application



If you have a broad user base ready to use your app


WHEN TO USE WEB APPS?

WEB ENVIRONMENTS


The primary layout engines web developers need to use today
include:



Webkit

(Firefox, Chrome/Android, Palm, Symbian, Blackberry 6.0+)



Trident (Internet Explorer/IE Mobile)



Presto (Opera, Opera Mini)
3


LAYOUT ENGINES

ENVIRONMENTS

LAYOUT ENGINE MOBILE USAGE

}

Webkit

Presto

4

LAYOUT ENGINE MOBILE USAGE

}

Webkit

Presto

5


Open
-
source engine for web browsers



Most modern mobile browsers are
webkit
-
based


BIG exceptions: Internet Explorer, Opera



Supports the most common features of HTML5 & a large
amount of CSS3



Natively supports Javascript interaction with the DOM
(Document Object Model)


Critical for correctly rendering web applications on various platforms
and resolutions




WEBKIT

ENVIRONMENTS

ENVIRONMENTS


New! Improved! But i s i t sel l i ng?



Wi ndows,
obvs
, has huge, dedi cated fan base



Good reports on usabi l i ty, functi onal i ty of the
platform

and
hardware
. Not so good on the browser



Sti l l dependent on IE


No true HTML5/CSS3 statistics on IE Mobile 7


Desktop IE 9 supports 25% of HTML5; less than half of Desktop
Firefox
,
less than 1/3 of
Chrome



Late to the game (2.5
–

3 years after fi rst i Phone)



Where wi l l Noki a partnershi p l ead them?



No Wi ndows tabl et unti l Q3 2012??

WHAT’S UP WITH WINDOWS 7 MOBILE?

DEVELOPING WEB APPS

DEVELOPMENT


Can produce vivid, dynamic websites with high levels of
interaction



Can integrate web services (no need for local
datasources
)



HTML5 affords video, audio input



CSS3 includes animation, some 3D rendering



No need for Flash (!!!!!!)



Browser support varies widely


http://caniuse.com

Great comparison charts



Most data
-
driven features require the app to be used “online”

HTML 5 + CSS3 + JAVASCRIPT


Free with Apple SDK registration



Provides means to create Mac “widgets” and Safari/Mobile
Safari web apps



Gives developers a nice IDE for web app development



Includes images and usage guidelines to create a native iOS
-
looking web app



Produces web apps that look like iOS apps on any other
mobile browser

DASHCODE

DEVELOPMENT

DASHCODE

INTERFACE

DEVELOPMENT


One of a few products making their way into developers’
toolboxes



“Mobile Javascript Framework”



Allows developers to write standards
-
compliant code that then
renders uniquely on each supported mobile browser



Trending: write
-
once,

use
-
anywhere



Handles touch events,

offline storage

SENCHA

TOUCH

Source:
sencha.com


A twist on the write
-
once use
-
anywhere methodology



Imports web apps and produces
native

applications for 6
mobile platforms



Claims “thousands” of apps developed with
PhoneGap



Open
-
source, free

PHONEGAP

DEVELOPMENT

Source:
phonegap.com

CASE STUDIES

USE CASE


Had past experience
developing/supporting a
native app



Posted for iOS
dev

for
Basecamp Mobile app



Realized Android popularity
and were immediately
faced with hiring two
developers



Instead used in
-
house
development teams to
create mobile versions of
existing, highly
-
profitable
desktop web apps

37SIGNALS: BASECAMP MOBILE

Source: 37signals.com

USE CASE


Very well
-
received
web app in summer
2010



Reviews suggest
superior functionality
to native application
(HQ video option)



Ties directly into
users’ YouTube
account; favorites,
comments, ratings

YOUTUBE

CONCLUSIONS

CONCLUSIONS

PROS


No new
prog
. language
required



Cross
-
platform dev. is
significantly easier



Updates don’t require
re
-
approval (iOS)



Many SDKs and tools
available to speed
development

CONS


Limited access to
device hardware



No centralized market
for all platforms



Difficult to charge $



Offline usage can be
tricky if not done
properly



WEB APP PROS & CONS: SUMMARY

CONCLUSIONS

1.
Di sney
l ooks beyond apps wi th HTML5 game maker Rocket
Pack

http://venturebeat.com/2011/03/03/di sney
-
rocket
-
pack
-
acqui si ti on
/


2.
Mobl yng

rai si ng $10.9M to make mobi l e HTML5 games

http://venturebeat.com/2010/12/24/mobl yng
-
rai si ng
-
about
-
11m/?obref=
obi nsi te


3.
Opera: State of the Mobi l e Web,
http
://www.opera.com/smw/2011/01
/


4.
StatCounter

Gl obal
Stats,
http://gs.statcounter.com/#mobi l e_browser
-
ww
-
monthl y
-
201003
-
201102
-
bar


5.
StatCounter

Gl obal Stats,
http://gs.statcounter.com/#mobi l e_browser
-
na
-
monthl y
-
201003
-
201102
-
bar


REFERENCES