apptalk frontline: web vs hybrid vs native
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.fiTRANSCRIPT
![Page 1: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/1.jpg)
AppTalk Frontline13.2.2013
![Page 2: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/2.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/3.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/4.jpg)
4
Native, Hybrid or Web app?
![Page 5: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/5.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/6.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/7.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/8.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/9.jpg)
9
Decission model
![Page 10: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/10.jpg)
10
Customer Country/Ecosystem Age Gender
![Page 11: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/11.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/12.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/13.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/14.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/15.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/16.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/17.jpg)
17
Content Lifetime Context User created Private/Share Connectivity
![Page 18: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/18.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/19.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/20.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/21.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/22.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/23.jpg)
23
Use Type Where Offline/Online Session length Delay
![Page 24: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/24.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/25.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/26.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/27.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/28.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/29.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/30.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/31.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/32.jpg)
32
Development: ComplexityAndroid screen fragmentation increases development and testing
complexity
![Page 33: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/33.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/34.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/35.jpg)
35
Conclusion
![Page 36: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/36.jpg)
36
Comparison: Web/Hybrid to Native
![Page 37: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/37.jpg)
37
![Page 38: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/38.jpg)
38
![Page 39: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/39.jpg)
39
![Page 40: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/40.jpg)
40
![Page 41: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/41.jpg)
41
![Page 42: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/42.jpg)
42
![Page 43: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/43.jpg)
43
![Page 44: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/44.jpg)
44
Responsive design
![Page 45: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/45.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/46.jpg)
46
Examples: Demi, Costume, Exove
![Page 47: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/47.jpg)
47
Dedicated mobile site
![Page 48: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/48.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/49.jpg)
49
Example: Finnlines
![Page 50: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/50.jpg)
50
Example: Finnlines
![Page 51: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/51.jpg)
51
PhoneGap
![Page 52: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/52.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/53.jpg)
53
Example: Easy Break
![Page 54: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/54.jpg)
54
Example: BBC Olympics
NOT DEVELOPED BY EXOVE
![Page 55: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/55.jpg)
55
Native
![Page 56: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/56.jpg)
56
Example: Golf GameBook
![Page 57: AppTalk Frontline: Web vs Hybrid vs Native](https://reader036.vdocument.in/reader036/viewer/2022062511/54bb83f84a7959780f8b45ce/html5/thumbnails/57.jpg)
57