pragmatic approach to build native apps - hybrid way
TRANSCRIPT
![Page 1: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/1.jpg)
Pragmatic approach to building native apps – Hybrid Way
Priyank Gupta
Mar 2014
![Page 2: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/2.jpg)
2
Devices move with YOU
Definition of mobile is rapidly evolving
![Page 3: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/3.jpg)
3
Challenges for
NewPlatfor
m
Apps and Developer
Community
Patent WarsRipe
CompetitionOS
Fragmentation
![Page 5: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/5.jpg)
5
Technical Challenges
Business
Multiple
platforms
Multi
ple
Chan
nels
Platform specific
technologies
OS Fragmentati
on
![Page 7: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/7.jpg)
7
A typical hybrid architecture
JavaScript objects in WebView
Fragment with Webview
WebView in activity
Reusable HTML and JS inside
WebViews
NativeWeb
Fat logicPlatform
APIs exposed via
Native interfaceNative
Platform APIs
![Page 8: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/8.jpg)
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
![Page 9: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/9.jpg)
9
Minty’s café to hybrid apps
Fetch data by http 1
User 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
![Page 10: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/10.jpg)
10
A bridge implementationAndroid bridge between JavaScript engine
and native views
method1
method1
method2
method2
Java Activity
Fat logic Thin native views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
NativeWeb
![Page 11: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/11.jpg)
11
A bridge implementation
method1
method1
method2
method2
Page Object
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Android bridge between JavaScript engine and reusable web views
NativeWeb
![Page 12: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/12.jpg)
12
A bridge implementation
method1
method1
method2
method2
Java WebView Activity
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Reusing HTML & JS for mobile web app
NativeWeb
![Page 14: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/14.jpg)
14
Experience
Native App in Play store
Mobile web app
http://tinyurl.com/btplay
http://tinyurl.com/bloodtorrent
![Page 16: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/16.jpg)
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
![Page 17: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/17.jpg)
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
![Page 18: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/18.jpg)
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
![Page 19: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/19.jpg)
19
App is open source
Links to https://github.com/priyaaank/bloodtorrent
![Page 21: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/21.jpg)
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
![Page 22: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/22.jpg)
22
A bridge implementationAndroid bridge between JavaScript
engine and native views
method1
method1
method2
method2
Java Activity
Fat logic Thin native views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
NativeWeb
![Page 23: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/23.jpg)
23
MVVM based hybrid apps
Logic UI
NativeHTMLLogic UI
Feature in an app
![Page 24: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/24.jpg)
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
![Page 25: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/25.jpg)
25
Coming back to bridge in Android
method1
method1
method2
method2
Page Object
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Android bridge between JavaScript engine and reusable web views
NativeWeb
![Page 26: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/26.jpg)
26
And bridge in web app
method1
method1
method2
method2
Java WebView Activity
Fat logic
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activityJS engine like Mozilla Rhino
Reusable HTML and JS inside
WebViews
Reusing HTML & JS for mobile web app
NativeWeb
![Page 27: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/27.jpg)
27
Page Object pattern based hybrid apps
10% Web
specific
Logic
UI
Platform Specific
Reusable
90% Reusable
![Page 28: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/28.jpg)
28
Page Object pattern based hybrid apps
10% Android
specific
Logic UI
NativeWeb
10% iOS specific
Logic UI
10% Native
override
![Page 31: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/31.jpg)
31
ChannelRelevance
Native App Mobile Web
Social features
User engageme
nt
Tactical queries
CORE
![Page 33: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/33.jpg)
33
Mature tools & practices Android
development studio
Chrome Developer
Tools
Selenium web driver
Tools
XcodeCalabash
Cucumber
JasmineHAML, SASS, Coffeescript
![Page 34: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/34.jpg)
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
![Page 35: Pragmatic approach to build native apps - hybrid way](https://reader035.vdocuments.us/reader035/viewer/2022062820/58aa31b81a28abbb108b5ab3/html5/thumbnails/35.jpg)
35
Thank you
&
Feed-me-back
priyaaank @
twittergithub
gmail
tumblr