This document discusses a hybrid approach to building native mobile apps using a common code base of HTML, CSS, and JavaScript with platforms like Android and iOS. It presents a typical hybrid architecture that uses a native bridge to expose platform APIs to the webview. It then provides an example of how this approach could be used to build a mobile ordering app. Finally, it discusses patterns like MVVM and page objects that can be used with this hybrid approach to improve code reuse.
7. 7
A typical hybrid architecture
JavaScript objects in
WebView
Fragment with Webview
WebView in activity
Reusable
HTML and
JS inside
WebViews
Native
Web
Fat logic
Platform APIs
exposed via
Native
interface
Native Platform
APIs
8. 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
Serve
7
请问王
André
Minty the
Chef
9. 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
Android
JSON
HTML and
Native
Bridge
10. 10
A bridge implementation
Android bridge between JavaScript engine and
native views
method
1
method
1
method
2
method
2
Java
Activity
Fat logic
Thin
native
views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Native
Web
16. 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. 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. 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. 19
App is open source
Links to
https://github.com/priya
aank/bloodtorrent
21. 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. 22
A bridge implementation
Android bridge between JavaScript
engine and native views
method
1
method
1
method
2
method
2
Java
Activity
Fat logic
Thin
native
views
Bridge
JavaScript
Hidden Fragment with Webview
Hidden WebView in activity
JS engine like Mozilla Rhino
Native
Web
24. 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. 25
Coming back to bridge in Android
method
1
method
1
method
2
method
2
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. 26
And bridge in web app
method
1
method
1
method
2
method
2
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. 27
Page Object pattern based hybrid apps
Logic UI
Platform SpecificReusabl
e
90%
Reusable
34. 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