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

CompetitionOS

Fragmentation

4

Web supportIn platforms

5

Technical Challenges

Business

Multiple

platforms

Multi

ple

Chan

nels

Platform specific

technologies

OS Fragmentati

on

6

Lets bridge the gap

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

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 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

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

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

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

13

Show me how!?

14

Experience

Native App in Play store

Mobile web app

http://tinyurl.com/btplay

http://tinyurl.com/bloodtorrent

15

Quick demo

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

20

Patterns for reuse with bridge

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 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

23

MVVM based hybrid apps

Logic UI

NativeHTMLLogic 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 activityJS engine like Mozilla Rhino

Reusable HTML and JS inside

WebViews

Android bridge between JavaScript engine and reusable web views

NativeWeb

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

27

Page Object pattern based hybrid apps

10% Web

specific

Logic

UI

Platform Specific

Reusable

90% Reusable

28

Page Object pattern based hybrid apps

10% Android

specific

Logic UI

NativeWeb

10% iOS specific

Logic UI

10% Native

override

29

Benefits

30

Experience +Reusability

31

ChannelRelevance

Native App Mobile Web

Social features

User engageme

nt

Tactical queries

CORE

32

Presence vsEngagement

Native

Native

Native

Web

Web

Web

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