Mobile Development Choices: Native Apps vs. Web Apps

Max Katz, Exadel

May 4, 2011

Exadel

Max Katz

● Senior Systems Engineer at Exadel

● JSF, RichFaces, Java EE consulting, and training

● Manages exadel.org – Exadel's open source projects and community

● Community manager for gotiggr.com – tool for creating and sharing interactive web and mobile HTML prototypes

Exadel

Author of Practical RichFaces

(Apress)

4

Lead-author of Practical RichFaces, 2/e

(Apress, June 2011)

Summer 2011

Exadel

Published April 11, 2011

Exadel

mkblog.exadel.com

@maxkatz

Exadel

Exadel is a global software engineering company.● Founded in 1998,

headquarters in San Francisco Bay Area

● 7 development offices in Europe

● 350+ employees

Exadel

5

Minsk

Homyel

Kharkov

Donetsk

Ekaterinburg

Moscow

Exadel Offices

Munich

Exadel

Open Source with JBoss

Exadel

Exadel Products● Open Source with JBoss

◦ RichFaces

◦ JBoss Tools/JBoss Developer Studio

● exadel.org

◦ Flamingo

◦ Fiji

◦ jsf4birt

◦ JavaFX Plug-in for Eclipse

● gotiggr.com– build and share Web and mobile HTML prototypes

Exadel

Exadel Services

● Professional services

● Rich enterprise application development

● Eclipse development

● Custom rich component development

● Mobile development

● Training

Exadel

Building Ajax Applications with JSF 2 and New RichFaces 4

05/05/201110:15-11:15

Exadel

Source: Flickr photo by sridgway: http://www.flickr.com/photos/stephanridgway/4468403556/

Let's start

Exadel

Over 4 billion phones in the

world(that's half the

population)

Source: http://www.flickr.com/photos/wwworks/2222523486/

Exadel

Forecast for total

smartphone sales in 2010: 250,000,000+

Source: http://www.gartner.com/it/page.jsp?id=1434613Source: http://www.flickr.com/photos/wwworks/2222523486/

Exadel

By 2013 mobile devices will overtake PCs as the

preferred way of accessing the Internet.

Source: http://www.mobilecommercedaily.com/why-a-mobile-strategy-for-retailers-matters-more-than-ever

Exadel

1. Platform

2. App discovery, monetization, support

3. User experience

4. Device features

5. Enterprise development

Exadel

Source: Flickr photo by markhillary: http://www.flickr.com/photos/markhillary/514555513/

Platforms

Exadel

Where is Symbian, MeGoo?

(Fragmentation)

Exadel

Source: Flickr photo by mckaysavage: http://www.flickr.com/photos/mckaysavage/843953060/

App discovery, monetization,

support

Exadel

App discovery

● Enter URL or search

● Web stores like Chrome App Store

● Standard App Store by placing the Web app inside a native wrapper (Hybrid App)

● App Store – proven and very popular

Native Web

Exadel

App approval

App is published to an App Store; goes through review process before being approved

Instant, no approval process; just enter the URL

Steve can't say no

Native

App approval

Web

Exadel

App installation

Downloaded from app market and installed

Open URL in a mobile browser

Create a shortcut on the phone's screen

Native Web

Exadel

App update

Updated app goes through review process, then downloaded and installed

No approval process. Just update the mobile web app and everyone gets the new version.

Native Web

Exadel

App support, maintenance, adding new features

The more platforms, the more challenging it is

Not uncommon to have different “versions” for iOS and Android

Simple (almost). Write once, deploy anywhere

Native Web

Exadel

App monetization

App Store - proven monetization strategy. Works very well

Native

Exadel

App monetization

● Each app has its own monetization strategy

● HTML App Store, like Google Chrome Web Store

● Standard App Store – putting apps inside a native wrapper/shell (Hybrid Apps)

● Selling access or token in standard App Store and then getting access to mobile app

Web

Exadel

Porting to new platform

● Build once, run anywhere (almost)

● Tweak the UI to fit platform

● Difference in browsers and supported features

Native Web● Need to learn another

mobile platform

● Learn platform's UI approach

Exadel

Source: Flickr photo by jpctalbot: http://www.flickr.com/photos/laserstars/908946494/

User experience

Exadel

Speed

Faster for some UI functions, especially when heavy graphics are involved

HTML5/JavaScript rendering bring performance “almost” on par with native

Native Web

Exadel

User experience

● Very fast

● UI effects

● More developed UI “logic”

● Can be “very good”

● For example, an app like Gmail

● Will continue to improve and get better.

Native Web

Exadel

Exadel

Exadel

User perception

Many associate mobile apps with native apps today

Will be improvingNative Web

Exadel

Source: http://www.flickr.com/photos/sanberdoo/510894918/

Devicefeatures

Exadel

Native Web

Video/audio Built-in HTML5

Off line Possible HTML5

Full screen Built-inHiding browser

address bar

Accelerometer Built-in HTML5

Push Possible Possible (HTML5)

Exadel

Off line, connectivity

● Speed:

◦ EDGE (slow)

◦ 3G (faster)

◦ 4G (very fast)

◦ WiFi (very fast)

● Users “don't like” to see the browser loading

● More OK with native app loading

Native and Web

Exadel

Integration with phone services

Full access to phone services:

● Contacts

● Calendar

Limited; but more and more apps get data from the cloud

Do you really need access?

Native Web

Exadel

Integration with phone hardware

Full integration with phone hardware

● Camera/Video

● GPS

Some support via

HTML5 is now available for camera/video

Native Web

Exadel

5

Source:http://www.flickr.com/photos/worldeconomicforum/2889019945/

Enterprise

Exadel

● iOS (Objective C)

● Android (Java)

● BlackBerry (Java)

● webOS (HTML/JavaScript)

● Windows Phone (Silverlight, .NET)

Plus, every platform has its own approach to UI development

Native

Developer skills

Exadel

HTML, JavaScript, CSS

But, training is needed to adapt exiting HTML/JavaScript/CSS skills to mobile development

Web

Developer skills

Exadel

Expensive, as still relatively small number of developers master mobile development skills

Native

Cost

Exadel

● Can be significantly cheaper

● Large number of developers already posses HTML, JavaScript, CSS skills

● But, some training might be needed to learn how to

develop UI for mobile apps

Cost

Web

Exadel

Every platform has its own SDK:

● iOS (Objective C)

● Android (Java)

● BlackBerry (Java)

● webOS (HTML/JavaScript)

● Windows Phone (Silverlight, .NET)

Native

Mobile development frameworks

Exadel

A number of options available today for building Web mobile apps:

● Take “do it yourself approach”

● Adapt any existing framework to work on mobile web

● jQuery Mobile

● Sencha

Web

Mobile development frameworks

Exadel

A number of tools to build hybrid apps:

● Tiggr Mobile (coming up, demo)

● PhoneGap

● Open plug

● Adobe Flex Mobile

● Titanium Appcelerator

● Corona SDK

Hybrid

Mobile development frameworks

Exadel

Existing infrastructure could be reused but also need service layer to communicate between client (mobile) and server

● REST

● SOAP

● Hessian

● Protocol Buffers

Native

Server integration

Exadel

For the most part, existing infrastructure can be reused

Web

Server integration

Exadel

Time to market

● Slow, unless have access to experts

● Need strong experts; hard to find

● Number of platforms supported

● Can be fast

Native Web

Exadel

http://gotiggr.com

Exadel

● Build and share interactive HTML prototypes

● Highly-interactive, define events/actions

● View, test in any browser, get feedback

Tiggr Prototypes Tiggr Mobile● First of a kind, Web-

based IDE for building and deploying hybrid mobile apps

● Connect and invoke remote services

Exadel

Tiggr Mobile Demo*http://gotiggr.com

*Preview version

Exadel

Device Access

Speed App Store ApprovalUpdate,

new features

Cost

Full Very fast Available RequiredCan be

challenging$$$

Some Fast Possible None Easy $

Native

Web

Exadel

Device Access

Speed App Store ApprovalUpdate,

new features

Cost

Full Very fast Available RequiredCan be

challenging$$$

FullCan be

very fastAvailable Required Easy $

Some Fast Possible None Easy $

Native

Web

Hybrid

Exadel

● Does everything need a native app? “App overload”

● Do you want users to download an app for anything they do on mobile devices?

◦ Not uncommon to download and never use an app

● Do you need access to device features?

Other things to consider

Exadel

Source: http://www.flickr.com/photos/drachmann/327122302/

Anything I missed?

Exadel

● Games

● Full access to device features

● Very high performance

● Specialized apps with rich graphics

● Targeting just one platform

● Off line

● Support all or most platforms

● Easy update, maintenance

● Time to market

● Cost

Native Web/Hybrid

Exadel

There is no right answer.

Flickr photo by faungg: http://www.flickr.com/photos/44534236@N00/3255156612/

> Target audience

> App features

> Resources (skills, time, money)

> Mobile platforms

Exadel

Flick photo by Arts Comments: http://www.flickr.com/photos/artcomments/382732967/

History repeats itself?

Exadel

mkblog.exadel.com

@maxkatz

max@exadel.com

gotiggr.com

Thank you!