apptalk frontline: web vs hybrid vs native

57
AppTalk Frontline 13.2.2013

Upload: sebastian-de-mel

Post on 18-Jan-2015

443 views

Category:

Technology


1 download

DESCRIPTION

This time AppTalk will focus on the everyday question of web applications vs hybrid applications vs native mobile applications. We'll provide guidance in making the business decision between these approaches. This will be presented through practical real-life cases. The focus will be on mobile applications rather than games. Agenda: 14:00 Welcoming words, Karl Ots / Symbio Responsive web Dedicated mobile site PhoneGap hybrid apps Native HTML5 apps Discussion & networking Speaker: Sebastian de Mel, frontend developer at Exove Oy. Sebastian has been in the web business as a entrepreneur for over 5 years until recently when he joined the ranks of Exove Oy, whose customers include: Nelonen, Fiskars Bonnier publication and others. He studied algorithms in University of Tampere and has a Media-assistant degree. Technologies he uses in his daily work are: JavaScript (Underscore, jQuery, Zepto etc.), PhoneGap, eZ Publish, Drupal, Concrete5. Event coordinator, Karl Ots: tel. 050 480 1102, email karl.ots [at] youngdevelopers.fi

TRANSCRIPT

Page 1: AppTalk Frontline: Web vs Hybrid vs Native

AppTalk Frontline13.2.2013

Page 2: AppTalk Frontline: Web vs Hybrid vs Native

2

Agenda Welcoming words by Karl Ots, Symbio Native, Hybrid or Web app? Mobile frontend Discussion & networking

Page 3: AppTalk Frontline: Web vs Hybrid vs Native

3

Speaker Sebastian de Mel, frontend developer at Exove Oy.

Been in the web business as a entrepreneur for over 5 years until recently when he joined the ranks of Exove Oy, whose customers include: Nelonen, Fiskars, Bonnier publication and others.

Studied algorithms in University of Tampere and has a Media-assistant degree.

Technologies used in daily work:

JavaScript, Underscore, jQuery, Zepto etc.

PhoneGap

eZ Publish, Drupal, Concrete5

Page 4: AppTalk Frontline: Web vs Hybrid vs Native

4

Native, Hybrid or Web app?

Page 5: AppTalk Frontline: Web vs Hybrid vs Native

5

Initial questionsDoes it make sense?

”According to AppsFire's analysis, by the time you hit the 1000th app (as far as popularity), you're looking at only 1.76 percent of users with the program installed. Once you pass the 2000th program, the number of active installs is barely a blip on the radar.”Source: PCWorld (http://www.pcworld.com/article/181448/Apples_App_Store_100000_Apps_But_Most_Are_Unused.html)

Page 6: AppTalk Frontline: Web vs Hybrid vs Native

6

Initial questions

Does it make sense?Mobile apps reach ROI is over two times smaller than an mobile websites

Assumptions in calculation: - Mobile App (Android) costs 28 000€ - Smartphone penetration 38%- Mobile App (iOS, Android, WP) costs 84 000€ - Finland’s population 2012: 5 262 930- Mobile website costs 28 000€ - Market share: WP 33%, Android 33%, iPhone 15%, other 19%

- 78% of smartphone users browse internet with there phoneData sources: http://www.thinkwithgoogle.com/mobileplanet, Finland data sethttp://wmpoweruser.com/finnish-carrier-data-shows-windows-phone-had-33-market-share-in-june/

Mobile app (Android)

Mobile app (WP, Android, iOS)

Mobile website

0 10 20 30 40 50 60

Reach (Persons per €) in Finland

Reach (Persons per €)

Page 7: AppTalk Frontline: Web vs Hybrid vs Native

7

Initial questions

Do you need it and does it fit your business?

Asked whether he lost a big promotional opportunity by leaving the iTunes store, he replied: “I don’t need Apple to tell the world the Financial Times is here. We’ve been here for 120 years.” He added that iOS apps don’t seem to be working for publishers, as they’re not bringing in enough revenue. Said Grimshaw: “I’m not sure it’s all that it’s cracked up to be.”Source: PaidContent.org(http://paidcontent.org/2012/05/23/ft-web-app-success/)

Page 8: AppTalk Frontline: Web vs Hybrid vs Native

8

Initial questions

Are your competitors there? How well are they doing?

AppStore App Sweden Uk Germany USA

IKEA #210 #15 #148 #42 #284

Walmart NA NA NA #32

H&M #29 #2 #112 #12 #28 #4 #67

Page 9: AppTalk Frontline: Web vs Hybrid vs Native

9

Decission model

Page 10: AppTalk Frontline: Web vs Hybrid vs Native

10

Customer Country/Ecosystem Age Gender

Page 11: AppTalk Frontline: Web vs Hybrid vs Native

11

Customer: Country/Ecosystem

Sources:WM Power User.com, http://wmpoweruser.com/finnish-carrier-data-shows-windows-phone-had-33-market-share-in-june/Tech Thoughts.net,http://www.tech-thoughts.net/2012/07/global-smartphone-market-share-trends.html#.UUiLAVuPhW0

Globally: Android, iPhone Finland: Android, Windows Phone

Page 12: AppTalk Frontline: Web vs Hybrid vs Native

12

Customer: Country/Ecosystem

Elisa consumer (FIN) DNA (FIN) Sonera (FIN)

1. Nokia Lumia 800 1. Samsung Galaxy Y 1. Nokia Lumia 800

2. Apple iPhone 4S 2. Nokia Lumia 920 2. Apple iPhone 4S

3. Nokia C2-01 3. Nokia Lumia 800 3. Samsung Galaxy Xcover

4. Samsung Galaxy S III 4. iPhone 5 4. Samsung Galaxy Gio

5. Samsung Galaxy S II 5. Nokia 113 5. Apple iPhone 5

2012 Smartphone ranks

Sources:Mobiili.fi, http://mobiili.fi/2013/01/02/dnan-elisan-ja-soneran-suosituimmat-vuonna-2012-nokian-lumiat-parjasivat-hyvin/

Page 13: AppTalk Frontline: Web vs Hybrid vs Native

13

Customer: Age

Sources:Business Insider, http://www.businessinsider.com/chart-of-the-day-smartphone-demographics-still-skew-young-and-moneyed-2012-7Markting Charts.com, http://www.marketingcharts.com/wp/topics/demographics/tablet-adoption-less-age-dependent-than-smartphone-ownership-in-developed-markets-25824/

Page 14: AppTalk Frontline: Web vs Hybrid vs Native

14

Customer: Age

Sources:Telecom Circle, http://www.telecomcircle.com/2011/10/chart-demographics-of-tablet-and-ereader-user/

Page 15: AppTalk Frontline: Web vs Hybrid vs Native

15

Customer: Age

Sources:Flurry.com, http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Differences

Page 16: AppTalk Frontline: Web vs Hybrid vs Native

16

Customer: Sex

Sources:Flurry.com, http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Differences

Page 17: AppTalk Frontline: Web vs Hybrid vs Native

17

Content Lifetime Context User created Private/Share Connectivity

Page 18: AppTalk Frontline: Web vs Hybrid vs Native

18

Content: LifetimeWhat is your contents average lifetime?

“The average Post Lifetime for a Page is 3 hours and 7 minutes. The median Post Lifetime is 2 hours and 56 minutes, illustrating that most Pages are experiencing Post Lifetimes around 3 hours.”

Source: Edgerank Checkerhttp://edgerankchecker.com/blog/2012/01/post-lifetime-how-long-does-a-facebook-post-live/

EXAMPLE: FACEBOOK POST

Page 19: AppTalk Frontline: Web vs Hybrid vs Native

19

Content: Lifetime

Source:http://www.seomoz.org/blog/when-is-my-tweets-prime-of-life

Page 20: AppTalk Frontline: Web vs Hybrid vs Native

20

Content: When When is your app used and in what context?

Source:http://searchengineland.com/infographic-how-where-when-people-share-content-100539

Page 21: AppTalk Frontline: Web vs Hybrid vs Native

21

How much data does your user produce passively?

How much data can your user create?

What kind of data do you wantfrom the user?

Content: User created

Source:http://www.byreputation.com/User-Generated-Content-Statistics_a/319.htm

Page 22: AppTalk Frontline: Web vs Hybrid vs Native

22

Content Private/Share

Is the data private or somethink the user can/should share

ConnectivityDoes the content need to move trough different devices?

Is the content a sub-group of larger content?

Page 23: AppTalk Frontline: Web vs Hybrid vs Native

23

Use Type Where Offline/Online Session length Delay

Page 24: AppTalk Frontline: Web vs Hybrid vs Native

24

Use: Type What type of

application is your app?Social networkGameRead/consume content

Produce data/content

Sources:Flurry.com, http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Difference

Page 25: AppTalk Frontline: Web vs Hybrid vs Native

25

Use: WhereIN FINLAND

Where is your app ment to be used?

Some apps, like foursquere are used on-the-go while others arn’t location specific.

Notice, that location effects often the use-case

Data sources: http://www.thinkwithgoogle.com/mobileplanet, Finland data set

Page 26: AppTalk Frontline: Web vs Hybrid vs Native

26

Use: Where Different use for

different deviceTablets more entertainment oriented (76%)

Smartphones have more wider use- Utilities: 17%- Social Networking 24%- Entertainent: 42%* Here entertainment means

Games + Enternainment from the chart

Sources:Flurry.com, http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Difference

Page 27: AppTalk Frontline: Web vs Hybrid vs Native

27

Use Offline/Online

If your app is to help fishers, you can asume that it should support offline use.

Session lengthRelated: Articlehttp://www.academia.edu/1606806/The_Effect_of_Context_on_Smartphone_Usage_Sessions

Page 28: AppTalk Frontline: Web vs Hybrid vs Native

28

Use Delay

What is your contents prefered delay.

Example: - E-mail’s should be notified in ”real-time”- Blog posts can be ordered in RSS for ”real-time” updating

Page 29: AppTalk Frontline: Web vs Hybrid vs Native

29

Company

Source:http://searchengineland.com/infographic-how-where-when-people-share-content-100539

GoalThe app can have a different goals and the goals should reflect the apps intended overall lifetime and audience.

BudgetApps cost often much more than websites. The dilemma in a budget is that if you go to cheep the end result might not make any impact. Large enough budget is key.

ROIApps have a smaller reach and each person costs more, however, you impact can be also greater.

Page 30: AppTalk Frontline: Web vs Hybrid vs Native

30

Development

Source:http://searchengineland.com/infographic-how-where-when-people-share-content-100539

App lifetimeApp can have a short lifetime, so prepare to promote

Apps are not a fire-and-forget investment

Interesting slide show from Pinc Media (little outdated) http://www.slideshare.net/pinchmedia/iphone-appstore-secrets-pinch-media

Page 31: AppTalk Frontline: Web vs Hybrid vs Native

31

Development: Complexity In native approach you will have 3-5 different client

projects and at least one backend. In hybrid you will have 1-2 different clients projects

and at least one backend In web, you have one client side (if any) and one

backend.

Projects increase rapidlyWeb: 1-2 projectsHybrid: 2-3 projects, 50-100% increase from webNative: 4-6 projects, 300-400% increase from web

Page 32: AppTalk Frontline: Web vs Hybrid vs Native

32

Development: ComplexityAndroid screen fragmentation increases development and testing

complexity

Page 33: AppTalk Frontline: Web vs Hybrid vs Native

33

Development

MaintenaceOften more complex = More maintenanceAccording to Roy Chomko at Adage Technologie“ Typically, application maintenance ranges from 15 to 20 percent of the original development costs. “ Source: http://www.manufacturing.net/articles/2012/07/the-real-cost-of-developing-an-app

Page 34: AppTalk Frontline: Web vs Hybrid vs Native

34

Development Features

Does your app need to heavy calculations? Example: Augmented reality, image effects etc.

Does your app produce lot’s of offline data?Is your app

Page 35: AppTalk Frontline: Web vs Hybrid vs Native

35

Conclusion

Page 36: AppTalk Frontline: Web vs Hybrid vs Native

36

Comparison: Web/Hybrid to Native

Page 37: AppTalk Frontline: Web vs Hybrid vs Native

37

Page 38: AppTalk Frontline: Web vs Hybrid vs Native

38

Page 39: AppTalk Frontline: Web vs Hybrid vs Native

39

Page 40: AppTalk Frontline: Web vs Hybrid vs Native

40

Page 41: AppTalk Frontline: Web vs Hybrid vs Native

41

Page 42: AppTalk Frontline: Web vs Hybrid vs Native

42

Page 43: AppTalk Frontline: Web vs Hybrid vs Native

43

Page 44: AppTalk Frontline: Web vs Hybrid vs Native

44

Responsive design

Page 45: AppTalk Frontline: Web vs Hybrid vs Native

45

Responsive design MediaQuery

Enables us to specify css for specific: screen size, orientation and dpi

ProblemsMainly used for hiding dataLoading data we don't see (images etc.)Retina content

FixesLayzy loading with JavaScript

Dedicated mobile sites can offer better experienceHowever, this requires a good detection code

Page 46: AppTalk Frontline: Web vs Hybrid vs Native

46

Examples: Demi, Costume, Exove

Page 47: AppTalk Frontline: Web vs Hybrid vs Native

47

Dedicated mobile site

Page 48: AppTalk Frontline: Web vs Hybrid vs Native

48

Dedicated mobile site Service data that is needed, rather than hide it User experience can be customized for mobile

devices Requires redirect logic and possibility to view in

desktop mode Often has a different use case

Page 49: AppTalk Frontline: Web vs Hybrid vs Native

49

Example: Finnlines

Page 50: AppTalk Frontline: Web vs Hybrid vs Native

50

Example: Finnlines

Page 51: AppTalk Frontline: Web vs Hybrid vs Native

51

PhoneGap

Page 52: AppTalk Frontline: Web vs Hybrid vs Native

52

PhoneGap Provides an ”chromeless” web browsers with access

to native code In theory, you can develope once, use anywhere In practise, suffers from the same problems as any

web development (test on every browser enviroment)

Good of rapid prototyping and developing apps Can be hard to get JS/HTML5 to mimic native

experience

Page 53: AppTalk Frontline: Web vs Hybrid vs Native

53

Example: Easy Break

Page 54: AppTalk Frontline: Web vs Hybrid vs Native

54

Example: BBC Olympics

NOT DEVELOPED BY EXOVE

Page 55: AppTalk Frontline: Web vs Hybrid vs Native

55

Native

Page 56: AppTalk Frontline: Web vs Hybrid vs Native

56

Example: Golf GameBook

Page 57: AppTalk Frontline: Web vs Hybrid vs Native

57