Comparing multi-platform mobile apps frameworks

1. Comparing
multi-platform
mobile apps frameworks
by
Louis CORNET

2. You want to build a mobile app and you wonder...
Which technology to choose?
Main criterias to take into account :
PRICE PERFORMANCE USER EXPERIENCE USE CASES
Context

3. HTML5
Development
Native
Development
Hybrid
Development
Your options

4. Native apps are specific to a given mobile
platform (iOS, Android, Windows, Blackberry,…)
using dedicated development tools and
programming language
Native Mobile Development

5. IS THE FIRST NATIVE DEVELOPMENT PAIN
Native Development
The price

6. « Most native apps require at
least 6 months of full-time work, and cost
between $20,000 and $150,000,
depending on complexity. »
« It’s important to note that those estimates apply to single-platform
native app development. The cost rises exponentially when developing
cross-platform native applications. »
Forrester Research, 2014

7. Triple Price
Triple Time
Triple Developer
Native Development
iOS Android Windows

8. Native Development
Advantages
• Rich user experience (UX)
• Best performance
• Full API support (platform specific)
• Provides full access to the underlying device hardware
• Proven path for mobile apps
• Visibility in App Stores

9. Native Development
Disadvantages
• A code base for each platform
• Expensive
• Slow time-to-market
• Need expertise in the native development environment
for each platform
• Fees for in-app purchases
• High maintenance cost (for each platform)

10. HTML5 apps use standard web technologies—
typically HTML5, CSS, and JavaScript.
This approach creates cross-platform mobile
applications that work on multiple devices.
HTML5 Mobile Development

11. From the inside…
Native
device APIs
Specific
platform
language
(Obj-C, Java, …)
Not
Browser
based
Browser
Dependent
(visible)
HTML5/CSS/JS
No Device APIs
Native app HTML5 app

12. … to the outside.
Native
device APIs
Specific
platform
language
(Obj-C, Java, …)
Not
Browser
based
Browser
Dependent
(visible)
HTML5/CSS/JS
No Device APIs
Native app HTML5 app

13. IS THE FIRST HTML5 DEVELOPMENT PAIN
HTML5 Development
The lack of performance

14. HTML5 Development
Advantages
• Create mobile apps quickly and easily (no specific mobile language
required)
• Works across every channel
• Affordable development cost
• Fast go-to-market
• Increasing access to device functionalities (GPS, camera, ...)
• Remote and seamless updates
• No fees for payments

15. HTML5 Development
Disadvantages
• Poorer performance (issues with heavy graphics, 3D, gaming)
• Browser-based user experience
• Limited features (push notification, ...)
• Not device-optimized
• Limited data local storage
• Offline apps are a nightmare to sync
• No in-app purchases mechanism

16. Mix between native apps and mobile web apps
Hybrid apps are based on
multi-platform frameworks
Hybrid Development

17. Hybrid Development
Bridging web and native
Combining the best of both worlds

18. Hybrid Development
Native app HTML5 app Hybrid app
Combine the best elements of native and HTML5 apps

19. Hybrid: 2 categories
combining the best elements of native and HTML5 apps.
HYBRID WEB APP HYBRID MIXED APP
UI and app logic are handled in the
HTML & CSS code with access to
device features via API and native
container
HTML5 & CSS3
Software framework that are written in
their own language and may leverage
all native phone capabilities
C#, Java, Javascript,…

20. Introducing : PhoneGap
combining the best elements of native and HTML5 apps.
An open source connection layer
between web content and native
• Support for all major native platforms
• Does not require other skills than
HTML5 / CSS3 / JS
• Support for various APIs
• Custom plugins makes every native
capability available
• Free : Open source framework
• 100% of reusability of code across
platforms (except custom plugins)
• Performance and User Experience is
not optimal

21. Introducing : Titanium
combining the best elements of native and HTML5 apps.
The cross platform JavaScript and
API framework
• Easy to learn & deploy
JavaScript-based
• Create native application experience
Titanium takes code written in JS and
combines it with the Titanium API
(written in the targeted device’s
native language)
• Support multiple platforms
Targets various devices such as
tablets, desktop and mobiles

22. Introducing : Xamarin
combining the best elements of native and HTML5 apps.
The UI cross platform Toolkits
• Quickly and easily build native user
interfaces using shared code
• Fluid User Experience
• Excellent Performance
• Native API support (anything you
can do in native, can be done in
Xamarin)
• Same day support of new OS releases
• Can customize UI to match standards
of the platform
• Affordable pricing
• Less code reuse than PhoneGap

23. Hybrid Development
Advantages
• A unique code base for all platforms
• Lower cost per platform
• A single application to maintain
• Full API support (access to native device functionalities)
• Reuse existing web development skills (HTML, CSS3, JavaScript, …)
• Visibility on App Stores

24. Hybrid Development
Disadvantages
Hybrid Web app
• May not be as fast as native app
• Apps look, but don’t always feel native
Hybrid Mixed app
• Requires skills in a mobile framework

25. Conclusion

26. Full Capability
Single
Platform
Multiple
Platforms
Partial Capability
NATIVE HYBRID
HTML5
Advanced UI interactions
Fast performance
Optimal User Experience
Access to native platforms
Web developer skills
Web developer skills
Instant updates
Web distribution
Limited performance and UX
Advanced UI interactions
Fastest performance
Optimal User Experience
Summary

27. With all the flexibility and benefits that hybrid
allows, enterprises more and more are
choosing to develop with some combination
of native and web features.
By 2016 most apps will be hybrid.
«
«
Gartner, 2014

28. Summary
NATIVE HTML5 HYBRID
Graphics
Performance
Look and feel
Distribution
Camera
Notifications
Contacts, Calendar
Geolocalisation
Swipe
Offline storage
Connectivity
Development skills
Price
Native APIs
Fastest
Native
Appstore
Secure fil system
Online, Offline
Objective-C, Java
€ € € € €
HTML, SVG, Canvas
Good
Emulated
Web
Browser dependent
Shared SQL
Mostly online
HTML5, CSS, JS
€ €
HTML, SVG, Canvas
Fastest / Good
Emulated
Appstore
Secure fil system, SQL
Online, Offline
HTML, CSS, JS, C#, Java
€ € €

29. Blind Test

30. Louis Cornet
louis@movify.be+32 496 51 51 15 @movifybe