pragmatic approach to building native apps hybrid way
TRANSCRIPT
Pragmatic approach to building native apps – Hybrid Way
Priyank Gupta
Mar 2014
2
Devices move with YOU
Definition of mobile is rapidly evolving
3
Challenges
for
NewPlatfor
m
Apps and Developer
Community
Patent WarsRipe
Competition
OS Fragmentation
5
Technical Challenges
Business
Multiple
platforms
Multi
ple
Chan
nels
Platform specific
technologies
OS Fragmentation
7
A typical hybrid architecture
JavaScript objects in WebView
Fragment with Webview
WebView in activity
Reusable HTML and JS inside
WebViews
Native
Web
Fat logicPlatform
APIs exposed via
Native interfaceNative
Platform APIs
8
A curious case of Minty’s café
Gather ingredients 1
Take orderLookup recipe
Cook
Taste
Pass the dish
Plate the dish
2
3
4
5
6
6
Serve7
请问王
André
Minty the
Chef
9
Minty’s café to hybrid apps
Fetch data by http
1User requestBusiness logic
Processing
Validations
Call with data to render
Build native UI
2
3
4
5
6
6
Show on screen
7
IOS
AndroidJSON
HTML and Native Bridge
10
A bridge implementation
Android bridge between JavaScript engine and native views
method1
method1
method2
method2
Java Activity
Fat logicThin
native views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Native
Web
11
A bridge implementation
method1
method1
method2
method2
Page Object
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Android bridge between JavaScript engine and reusable web views
Native
Web
12
A bridge implementation
method1
method1
method2
method2
Java WebView Activity
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Reusing HTML & JS for mobile web app
Native
Web
14
Experience
Native App in Play store
Mobile web app
http://tinyurl.com/btplay
http://tinyurl.com/bloodtorrent
16
Menu Page
Button click in either triggers a changePage event via bridge
Does native image manipulation for
circular image with boundary.
Organizes pages with single page
architecture to stay responsive
17
Donation listing page
Both uses bridge and controller to make http call with location to fetch donation list
Uses two different fragments to show map
and page slider at bottom
Uses web browser api to request user location in
javascript code
18
New donation request page
Validations, persistence and business logic is applied by common controller and bridge
Uses native components to capture different input
values
HAML views are reused across most pages via layouts and templates
19
App is open source
Links to https://github.com/priyaaank/bloodtorrent
21
Model View View Model
“Model View ViewModel is a specialized case of Presentation Model Pattern. Presentation Model is defined as the state and behavior of the presentation independent of the GUI controls used in the interface”
• Pulls view behavior in a model class that is part of presentation
• Presentation Model may interact with several domain objects, but Presentation Model is not a GUI friendly facade to a specific domain object.
Courtesy: Presentation Model bliki by Martin Fowler
22
A bridge implementation
Android bridge between JavaScript engine and native views
method1
method1
method2
method2
Java Activity
Fat logicThin
native views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Native
Web
23
MVVM based hybrid apps
Logic UI
NativeHTML
Logic UI
Feature in an app
24
Page Object
• Object encapsulates the internals of a view from external consumers
• Provides API for external world to interact with page in a consistent way
“The Page Object pattern represents the screens of your web app as a series of
objects” ~
Selenium Wiki
25
Coming back to bridge in Android
method1
method1
method2
method2
Page Object
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Android bridge between JavaScript engine and reusable web views
Native
Web
26
And bridge in web app
method1
method1
method2
method2
Java WebView Activity
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Reusing HTML & JS for mobile web app
Native
Web
27
Page Object pattern based hybrid apps
10% Web
specifi
c
Logic
UI
Platform Specific
Reusable
90% Reusable
28
Page Object pattern based hybrid apps
10% Android
specifi
c
Logic UI
NativeWeb
10% iOS sp
ecific
Logic UI
10% Native
override
31
ChannelRelevance
Native App Mobile Web
Social features
User engageme
nt
Tactical queries
CORE
33
Mature tools & practices Android
development studio
Chrome Developer
Tools
Selenium web driver
Tools
XcodeCalabash
Cucumber
JasmineHAML, SASS, Coffeescript
34
Calatrava
• Completely open source
• Has been used to build apps with 1 million to 5 million downloads in Android app store. (For iOS, Android and mobile web)
• Beta stage
• Can leverage existing mature bridge from external platforms
35
Thank you
&
Feed-me-back
priyaaank @
twittergithub
gmail
tumblr