Developing of weMoin: a “hybrid” web-application.

CWEP SansWord Huang # 557 黃文楷

2014/5/27 @ GSS Tech Talk

outlineWhat is PhoneGap

tools for weMoin

mobile-specific javascript implementation (optional)

What is PhoneGapHybrid architecture

Hybrid deployment (CWEP-Specific)

Barrier

Break through

Hybrid ArchitectureWriting app via html(5), javascript, css(3)

Interact with native device features via javascript interface.

Hybrid ArchitectureProsWrite once, run everywhere. System as black box.

ConsPerformance bound by javascript engine.

Hybrid ArchitectureProsWrite once, run everywhere. System as black box.

ConsPerformance bound by javascript engine.

something might goes wrong

Hybrid ArchitectureProsWrite once, run everywhere. System as black box.

ConsPerformance bound by javascript engine.

something might goes wrong

System as black box.

Hybrid ArchitectureLearning Curve

Hybrid ArchitectureLearning Curve

Easy to produce hello world.

Hybrid ArchitectureLearning Curve

Easy to produce hello world.

Easy to port static website directly intophonegap-application.

Hybrid ArchitectureLearning Curve

Easy to produce hello world.

Easy to port static website directly intophonegap-application.

But: application != website

Hybrid ArchitectureLearning Curve

Easy to produce hello world.

Easy to port static website directly intophonegap-application.

But: application != website

UX is different Events are different Code will be different

Hybrid Deployment

Client Side - Server Side

Hybrid Deployment

Client Side - Server Side

Hybrid DeploymentServer Side:Main Content

Client Side: Login Page

Hybrid DeploymentPros:No need to update app to update content. (Thanks… Apple…)

Cons:

Bandwidth intensive.

Phonegap is not build for this usage, hence some barriers introduced.

Barrier

Barrierlogout button

login

logout

Barrierlogout button

login

logout

Barrierlogout button

login

logout

Barrierlogout button

security constraintlogin

logout

Barrierlogout button

login

logout

Barrierlogout button

login

BarrierPlatform-Specific Plugins:

BarrierPlatform-Specific Plugins:

plugin for iOS plugin for android

BarrierPlatform-Specific Plugins:

plugin for iOS plugin for android

plugin for ?????

Barrierplatform specific plugins:

security constraint:

Break Throughplatform specific plugins:

security constraint:

Break Throughplatform specific plugins: using user agent to determine what plugins to serve. (Conditional Plugins)

security constraint:communication via file system content. (FS bridge)

Conditional Plugins

Conditional Pluginsinitial javascript files:cordova.js cordova_plugin.js

plugin assets: merge plugin folders of www of all platforms

FS Bridge

login.html app.html

login

logout

FS Bridge

index.html login.html app.html

FS Bridge

index.html login.html app.html

login

FS Bridge

index.html

.action

login.html app.html

login

write

FS Bridge

index.html

.action

login.html app.html

login

write

history.go(1-history.length);

FS Bridge

index.html

.action

login.html app.html

login

writeread

history.go(1-history.length);

FS Bridge

index.html

.action

login.html app.html

login

writeread

redirect

history.go(1-history.length);

FS Bridge

index.html

.action

login.html app.html

login

writeread

redirect

history.go(1-history.length);login.html

setting.html

offline.html

Self-Update App (future)

index.html

.action

login.html app.html

Self-Update App (future)

index.html

.action

login.html app.html

application layer

Self-Update App (future)

index.html

.action

login.html app.html

application layer

document layer

.action

document layer

app.jsapp.html app.css

.data

application layerbootstrapping check, download, verify, update

Break ThroughProsProblem Resolved

ConsDependency between server and client

What is PhoneGapHybrid architecture native / html + css + javascript

Hybrid deployment (CWEP-Specific) client-side / server-side

Barrier platform-specific plugin communication between client /server

Break throughConditional Plugin FS Bridge

What is PhoneGapHybrid architecture native / html + css + javascript

Hybrid deployment (CWEP-Specific) client-side / server-side

Barrier platform-specific plugin communication between client /server

Break throughConditional Plugin FS Bridge

tools for weMoinRequireJSA JavaScript module loader.

sass / compass An open-source CSS Authoring Framework.

RequireJSManage dependency easily. Global variables no more!!!!

Easy to swap scripts for different configurations.

pad_areas.js

Dependency Injection

pad_areas.js

Dependency Injection

module name

pad_areas.js

Dependency Injection

dependencies

pad_areas.js

Dependency Injection

factory

pad_areas.js

Dependency Injection

module

Bye-bye Globals

pad_areas.js

area_switcher.js

Bye-bye Globals

Bye-bye Globals

Bye-bye Globals

RequireJS will …Load files for you.Provide tools to combine files for you.Import file only once, each factory will be executed only once.

Dependency Injection

Modules swappingarea_switcher.js

Modules swappingarea_switcher.js

js/area_locator.js js/offline/area_locator.js

Modules swappingapp.html @ online

app.html @ offline

Modules swapping

RequireJSPros:As above descriptions.

Cons:Not-so-clear documentation.

Transition effort: Took me 8 hrs to transfer. But might takes more time if code was bad.

Sprite Easily (compass)

Handle vendor-prefix automatically (compass)

Writing css with variables!!!

reuse css (css)

reduce # of requests via @import (css)