1. Developing of weMoin:
a “hybrid” web-application.
CWEP SansWord Huang # 557
黃文楷
2014/5/27 @ GSS Tech Talk

2. outline
What is PhoneGap
tools for weMoin
mobile-specific javascript implementation
(optional)

3. What is PhoneGap
Hybrid architecture
Hybrid deployment (CWEP-Specific)
Barrier
Break through

4. Hybrid Architecture
Writing app via html(5), javascript, css(3)
Interact with native device features via
javascript interface.

5. Hybrid Architecture
Pros
Write once, run everywhere.
System as black box.
Cons
Performance bound by javascript engine.

6. Hybrid Architecture
Pros
Write once, run everywhere.
System as black box.
Cons
Performance bound by javascript engine.
something might goes wrong

7. Hybrid Architecture
Pros
Write once, run everywhere.
System as black box.
Cons
Performance bound by javascript engine.
something might goes wrong
System as black box.

8. Hybrid Architecture
Learning Curve

9. Hybrid Architecture
Learning Curve
Easy to produce hello world.

10. Hybrid Architecture
Learning Curve
Easy to produce hello world.
Easy to port static website directly into
phonegap-application.

11. Hybrid Architecture
Learning Curve
Easy to produce hello world.
Easy to port static website directly into
phonegap-application.
But: application != website

12. Hybrid Architecture
Learning Curve
Easy to produce hello world.
Easy to port static website directly into
phonegap-application.
But: application != website
UX is different
Events are different
Code will be different

13. Hybrid Deployment
Client Side - Server Side

14. Hybrid Deployment
Client Side - Server Side

15. Hybrid Deployment
Server Side:
Main Content
Client Side:
Login Page

16. Hybrid Deployment
Pros:
No need to update app to update
content. (Thanks… Apple…)
Cons:
Bandwidth intensive.
Phonegap is not build for this
usage, hence some barriers
introduced.

18. Barrier

19. Barrier
logout button
login
logout

20. Barrier
logout button
login
logout

21. Barrier
logout button
login
logout

22. Barrier
logout button
security constraint
login
logout

23. Barrier
logout button
login
logout

24. Barrier
logout button
login

25. Barrier
Platform-Specific Plugins:

26. Barrier
Platform-Specific Plugins:
plugin for iOS plugin for android

27. Barrier
Platform-Specific Plugins:
plugin for iOS plugin for android
plugin for ?????

28. Barrier
platform specific plugins:
security constraint:

29. Break Through
platform specific plugins:
security constraint:

30. Break Through
platform specific plugins:
using user agent to determine what plugins to
serve. (Conditional Plugins)
security constraint:
communication via file system content.
(FS bridge)

31. Conditional Plugins

32. Conditional Plugins
initial javascript files:
cordova.js cordova_plugin.js
plugin assets:
merge plugin folders of www of all platforms

33. FS Bridge
login.html app.html
login
logout

34. FS Bridge
index.html login.html app.html

35. FS Bridge
index.html login.html app.html
login

36. FS Bridge
index.html
.action
login.html app.html
login
write

37. FS Bridge
index.html
.action
login.html app.html
login
write
history.go(1-history.length);

38. FS Bridge
index.html
.action
login.html app.html
login
writeread
history.go(1-history.length);

39. FS Bridge
index.html
.action
login.html app.html
login
writeread
redirect
history.go(1-history.length);

40. FS Bridge
index.html
.action
login.html app.html
login
writeread
redirect
history.go(1-history.length);
login.html
setting.html
offline.html

41. Self-Update App
(future)
index.html
.action
login.html app.html

42. Self-Update App
(future)
index.html
.action
login.html app.html
application layer

43. Self-Update App
(future)
index.html
.action
login.html app.html
application layer
document layer

44. .action
document layer
app.jsapp.html app.css
.data
application layer
bootstrapping
check, download, verify, update

45. Break Through
Pros
Problem Resolved
Cons
Dependency between server and client

46. What is PhoneGap
Hybrid architecture
native / html + css + javascript
Hybrid deployment (CWEP-Specific)
client-side / server-side
Barrier
platform-specific plugin
communication between client /server
Break through
Conditional Plugin
FS Bridge

47. What is PhoneGap
Hybrid architecture
native / html + css + javascript
Hybrid deployment (CWEP-Specific)
client-side / server-side
Barrier
platform-specific plugin
communication between client /server
Break through
Conditional Plugin
FS Bridge

48. tools for weMoin
RequireJS
A JavaScript module loader.
sass / compass
An open-source CSS Authoring Framework.

49. RequireJS
Manage dependency easily.
Global variables no more!!!!
Easy to swap scripts for different
configurations.

50. pad_areas.js
Dependency
Injection

51. pad_areas.js
Dependency
Injection
module name

52. pad_areas.js
Dependency
Injection
dependencies

53. pad_areas.js
Dependency
Injection
factory

54. pad_areas.js
Dependency
Injection
module

55. Bye-bye Globals
pad_areas.js
area_switcher.js

56. Bye-bye Globals

57. Bye-bye Globals

58. Bye-bye Globals

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

60. Modules swapping
area_switcher.js

61. Modules swapping
area_switcher.js
js/area_locator.js js/offline/area_locator.js

62. Modules swapping
app.html @ online
app.html @ offline

63. Modules swapping

64. RequireJS
Pros:
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.

65. Sprite Easily (compass)
Handle vendor-prefix automatically (compass)
Writing css with variables!!!
reuse css (css)
reduce # of requests via @import (css)