PhoneGap Introduction

491 views

Published on

Published in: Engineering, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
491
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PhoneGap Introduction

  1. 1. Developing of weMoin: 
 a “hybrid” web-application. CWEP SansWord Huang # 557 黃文楷 2014/5/27 @ GSS Tech Talk
  2. 2. outline What is PhoneGap tools for weMoin mobile-specific javascript implementation (optional)
  3. 3. What is PhoneGap Hybrid architecture Hybrid deployment (CWEP-Specific) Barrier Break through
  4. 4. Hybrid Architecture Writing app via html(5), javascript, css(3)
 
 
 Interact with native device features via javascript interface.
  5. 5. Hybrid Architecture Pros
 Write once, run everywhere.
 
 
 System as black box. Cons
 Performance bound by javascript engine.
  6. 6. Hybrid Architecture Pros
 Write once, run everywhere.
 
 
 System as black box. Cons
 Performance bound by javascript engine. something might goes wrong
  7. 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. 8. Hybrid Architecture Learning Curve
  9. 9. Hybrid Architecture Learning Curve Easy to produce hello world.
  10. 10. Hybrid Architecture Learning Curve Easy to produce hello world. Easy to port static website directly into phonegap-application.
  11. 11. Hybrid Architecture Learning Curve Easy to produce hello world. Easy to port static website directly into phonegap-application. But: application != website
  12. 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. 13. Hybrid Deployment Client Side - Server Side
  14. 14. Hybrid Deployment Client Side - Server Side
  15. 15. Hybrid Deployment Server Side:
 Main Content Client Side:
 Login Page
  16. 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.
  17. 17. Barrier
  18. 18. Barrier logout button login logout
  19. 19. Barrier logout button login logout
  20. 20. Barrier logout button login logout
  21. 21. Barrier logout button security constraint login logout
  22. 22. Barrier logout button login logout
  23. 23. Barrier logout button login
  24. 24. Barrier Platform-Specific Plugins:
  25. 25. Barrier Platform-Specific Plugins: plugin for iOS plugin for android
  26. 26. Barrier Platform-Specific Plugins: plugin for iOS plugin for android plugin for ?????
  27. 27. Barrier platform specific plugins:
 
 security constraint:
  28. 28. Break Through platform specific plugins:
 
 security constraint:
  29. 29. 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)
  30. 30. Conditional Plugins
  31. 31. Conditional Plugins initial javascript files:
 cordova.js cordova_plugin.js plugin assets:
 merge plugin folders of www of all platforms
  32. 32. FS Bridge login.html app.html login logout
  33. 33. FS Bridge index.html login.html app.html
  34. 34. FS Bridge index.html login.html app.html login
  35. 35. FS Bridge index.html .action login.html app.html login write
  36. 36. FS Bridge index.html .action login.html app.html login write history.go(1-history.length);
  37. 37. FS Bridge index.html .action login.html app.html login writeread history.go(1-history.length);
  38. 38. FS Bridge index.html .action login.html app.html login writeread redirect history.go(1-history.length);
  39. 39. FS Bridge index.html .action login.html app.html login writeread redirect history.go(1-history.length); login.html setting.html offline.html
  40. 40. Self-Update App
 (future) index.html .action login.html app.html
  41. 41. Self-Update App
 (future) index.html .action login.html app.html application layer
  42. 42. Self-Update App
 (future) index.html .action login.html app.html application layer document layer
  43. 43. .action document layer app.jsapp.html app.css .data application layer bootstrapping
 check, download, verify, update
  44. 44. Break Through Pros
 Problem Resolved Cons
 Dependency between server and client
  45. 45. 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
  46. 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. 47. tools for weMoin RequireJS
 A JavaScript module loader.
 
 sass / compass
 An open-source CSS Authoring Framework.
  48. 48. RequireJS Manage dependency easily.
 Global variables no more!!!! Easy to swap scripts for different configurations.

  49. 49. pad_areas.js Dependency Injection
  50. 50. pad_areas.js Dependency Injection module name
  51. 51. pad_areas.js Dependency Injection dependencies
  52. 52. pad_areas.js Dependency Injection factory
  53. 53. pad_areas.js Dependency Injection module
  54. 54. Bye-bye Globals pad_areas.js area_switcher.js
  55. 55. Bye-bye Globals
  56. 56. Bye-bye Globals
  57. 57. Bye-bye Globals
  58. 58. 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
  59. 59. Modules swapping area_switcher.js
  60. 60. Modules swapping area_switcher.js js/area_locator.js js/offline/area_locator.js
  61. 61. Modules swapping app.html @ online app.html @ offline
  62. 62. Modules swapping
  63. 63. 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.

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

×