A brief history on hybrid applications and their transformation from then to now. an overview of cross platform mobile app development, giving examples of Xamarin and Ionic.

1. Choosing Between Cross Pla1orm or
Na4ve App Development
Dave Springgay
November 26, 2016

2. Dave Springgay
SoAware development manager,
user experience architect and scrum master

3. Agenda
• History of hybrid app development
• Why it’s important today
• Discuss one decision making process
• The elements of a great user experience
• Evaluate one popular app, to see how we
could build it

4. KEEP CALM
There are many ways to build an app.
Let’s share ideas.

5. History
• When the iPhone was first released in 2007, it
didn’t support 3rd party apps.
• It wasn’t un4l July 2008 that Apple released
an SDK.
• The first Facebook app was built using HTML5
– It supported more than 500 million people on
7000 devices
• The first Linked In app was built using mobile-
web technology

6. Hybrid Back Then
• Na4ve apps that hosted
a mobile web site
• Mul4 page applica4ons
• Long page load 4mes
• No local storage for
data
• No connec4on à no
applica4on
• Very li[le integra4on
with na4ve features
• Na4ve apps with small
web views and simple
content

7. The Times of London
• 2012
• Na4ve app
• Page templates and data
were downloaded
separately
• Each page was rendered in
a web view
• Offline reading
• Performance challenges
• Nega4ve feedback from
Apple and Google

8. The Disrup4on
• In August, 2012, Facebook released their first
na4ve iOS app
– “Faster, more reliable and easier to use”
• In April, 2013, Linked In released their na4ve app
– “It’s not a performance issue”
– Their HTML5 app was running out of memory
• In 2015, Flipkart abandoned their web presence
– “If you win in mobile, you win it all”

9. Since Then
• Mobile first and responsive design
– Design and build apps that work across mobile, tablet and
web
• Single page applica4ons
– Download your app code once
– Retrieve your app data using REST calls
– Load views within the page dynamically
– Faster load 4mes
• PhoneGap / Cordova
– First class na4ve wrapper
– JavaScript API’s for na4ve features
• Cross pla1orm mobile development languages

10. In 2016
• Flipkart re-launched their mobile web app
– They were losing market share to Amazon
– Search is cri4cal to retail discovery
– Social sharing is cri4cal to growth
• We s4ll need to build applica4ons that work
across mobile, tablet and web
• India’s startup community is thriving
• 9 out of 10 startups fail (Forbes)
– Test your hypothesis quickly
– Minimize waste

11. Cross Pla1orm Development Op4ons
Na4ve App
One app per pla1or
A different language on each pla1orm
Pla1orm specific system API’s
Pla1orm specific UI library
Hybrid App
One language
In a web view
Common browser API
Common user interface
Na4ve if needed
HTML5 / Cordova / Ionic
Common Language App
One cross pla1orm language
Shared API for network access and data storage
Pla1orm specific UI library
Xamarin and Appcelerator
Mobile Web App
Pure HTML 5
Common browser API
No pla1orm API
HTML5

12. Decision Criteria
1. Development skills, budget and 4me
– Cross pla1orm op4ons are cheaper
2. User experience
– Pla1orm look and feel
– Performance
– Na4ve op4ons are be[er
3. Distribu4on and discovery

13. Development Effort
Na$ve App Common Language
App
Hybrid App
Two or more apps
A separate code base for
each
A skilled development
team for each pla1orm
Highest development costs
One code base / mul4ple
variants
Common core (C# or JS) +
pla1orm specific UI
60 – 70% reuse *
Moderate development
costs
One code base
One team of web
developers, with some
mobile knowledge
Lowest development costs
Can be the basis for a web
app
* Some4mes the SDK lags behind a pla1orm release

14. User Experience
• Pla1orm look and feel
– Naviga4on, tabs, bu[ons, switches
– Swiping, scrolling, pinch and zoom
• Pla1orm integra4on
– Camera, device orienta4on, mo4on, loca4on
– Push no4fica4ons
– In app purchases
• Performance
• Offline behavior

15. Cross Pla1orm User Experience
• The user goal, the context, and their skills
• Mobile web, mobile, and the desktop
• Applica4on workflow and interac4on
• Design best prac4ces
– Mobile first, responsive design, material design
• Visual design
– Pla1orm look and feel

16. Facebook

17. Facebook

18. Facebook

19. Facebook

20. Linked In

21. Linked In

22. Linked In

23. Linked In

24. Snapchat

25. Snapchat

26. Snapchat

27. In Other Words
• The cross pla1orm experience is more
important than you think
• Pla1orm look and feel is less important than
you think

28. User Experience
Na$ve App Common Language
App
Hybrid App
Variable cross pla1orm
experience
Op4mal pla1orm look and
feel
Op4mal pla1orm
integra4on
Variable cross pla1orm
experience
?
?
Consistent cross pla1orm
experience
?
?
* Some4mes the SDK lags a pla1orm release

29. Xamarin

30. Xamarin Forms
• Ac4vityIndicataor
• Bu[ons
• DatePicker
• Editor (n lines of text)
• Entry (1 line of text)
• Image
• Label
• ListView
• Picker (list)
• ProgressBar
• SearchBar
• Slider
• Stepper
• Switch
• TimePicker

31. Ionic
• “Build great mobile apps and progressive web
apps in a way that feels just like building
websites”
• HTML5 and Cordova
• Angular.js SPA framework
• Free and open source
• “Beau4ful design”
• “Obsessed with performance”

32. Pla1orm look and feel
• Ac4on sheets
• Alerts
• Badges
• Bu[ons
• Cards
• Checkboxes
• DateTime
• Gestures
• Inputs
• Lists
• Menus
• Modals
• Popover
• Slides
• Tabs
• Toolbars
Link to Demo

33. Pla1orm Integra4on
• Ba[ery Status
• Camera
• Contacts
• Device Mo4on
(accelerometer)
• Device Orienta4on
(compass)
• File
• File Transfer
• Geoloca4on
• In App Purchases
• Maps (Na4ve or JS)
• Media Capture
• Network Informa4on
• No4fica4on dialogs
• Push no4fica4ons
• Social Sharing
• Sqlite Storage
• Status Bar
• Vibra4on

34. Some Excep4ons
• Deep pla1orm integra4on
– Custom keyboards
– Home screen ac4ons
– 3D Touch on iOS
• Peek and pop
– Widgets
• Are there any more?

35. User Experience
Na$ve App Common Language
App
Hybrid App
Variable cross pla1orm
experience
Op4mal pla1orm look and
feel
Op4mal pla1orm
integra4on
Variable cross pla1orm
experience
Op4mal pla1orm look and
feel *
Op4mal pla1orm
integra4on *
Consistent cross pla1orm
experience
Beau4ful look and feel *
Broad pla1orm integra4on
There are excep4ons
where na4ve code is
needed
* Some4mes the SDK lags behind a pla1orm release

36. Performance
• Poor performance à poor experience
• Factors that affect performance
– Load 4me
– Network 4me (spinner)
– Render 4me
– Interac4ve response (feel)
• Scroll, flick, swipe, jank
– Data processing

37. Nureva Span

38. Data Processing
• Heavy data processing is risky in a hybrid
applica4on
• Camera filters
• Graphic manipula4on
• Graphically intensive games
• Are there any more?

39. Performance
Na$ve App Common Language
App
Hybrid App
Fast load 4mes
Fast rendering
Fast interac4on
Raw horsepower
Bad design à bad
experience
The same as a na4ve app
Bad design à bad
experience
Good design à good
experience
Store code locally
Load views dynamically
Do UI work on the main
thread
Do network opera4ons
na4vely on a background
thread

40. Distribu4on and Discovery
• It should be easy to discover an app or service
• It should be easy to launch an app
– Install
– Shortcut
• As a developer, I wish it was easier to update
my app

41. Distribu4on and Discovery
Na$ve App Common Language
App
Hybrid App
In the app store
Easy to find, install and
launch
You have to upload a new
app every 4me you release
Apple will review it
The same as a na4ve app In the app store
Easy to find, install and
launch
You only have to upload
the app once
Push changes to your app
directly from the Ionic
server
Can be the basis for a web
app

42. Summary
Na$ve App Common Language
App
Hybrid App
Easy to find, install and
launch
Op4mal pla1orm look and
feel
Op4mal pla1orm
integra4on
Op4mal performance
Higher development costs
Almost the same as a
na4ve app
Moderate development
costs
Easy to find, install and
launch
Beau4ful look and feel
Broad pla1orm integra4on
There are some excep4ons
Lowest development costs
Rapid release

43. Decision Making Process
1. If you have a mul4-million dollar budget, a large
team of experienced na4ve developers, and a
billion dollar revenue stream, build a na4ve app
2. If 4me or money are a concern to you, consider
another approach
3. If you think it’s possible to build a great
experience for your app using HTML5, Cordova
and Ionic, build a hybrid app
4. If you release your app on a weekly basis, build
a hybrid app
5. Otherwise, build a common language app

44. Can You Build a Great Hybrid
Facebook App?
Scenario Hybrid Implementa$on
Install app Install from store
Sign up Angular view + OAuth2
Setup contacts Contacts plugin
Download feed data H[p Get
Display feed data Angular view
Expand photo Angular view
Play inline video Angular view
Share status, photos and videos Camera plugin + H[p Post
Edit and filter photos Performance concerns
Push no4fica4ons Push no4fica4ons plugin
Change seungs Use Ionic styles + H[p Get / Put
Update app Ionic.Deploy

45. Thank you
Linked In: davespringgay