Web 開發者也可以寫出跨平台的 Desktop App

Transcript

1. 1.

   Web  開發者也可以寫   跨平台、可昇級、可擴充   的桌面程式     Rack  Lin

    阿土伯  @webconf2013
2. 2.

   about:me •  ViViPOS  Co.,  Ltd    技術總監   –  利用

   JavaScript  寫 〞收銀機〞（傳統產業，全新感受）   •  CoCo  都可、50嵐、歇腳亭、Yamaha  、星聚點KTV……     •  PHP  /  JavaScript  /  Java  Programmer  (目前移情於 Scala  )     •  racklin@gmail.com   •  hPps://twiPer.com/racklin   •  hPp://www.plurk.com/racklin   •  hPps://www.facebook.com/racklin1002   •  hPp://racklin.blogspot.tw/      (生小孩後就變癈墟）  
3. 3.

   Desktop  App •  Wiki-­‐>  ApplicaVon  soWware   •  PC  Magazine:

     – An  applicaVon  that  runs  stand  alone  in  a  desktop   or  laptop  computer.  Contrast  with  "Web-­‐based   applicaVon,"  which  requires  the  Web  browser  to   run.   – The  same  as  definiVon  #1  above,  except  that  the   term  may  be  used  to  contrast  desktop   applicaVons  with  mobile  applicaVons  that  run  in   smartphones  and  tablets  
4. 4.

   Cross-­‐Pla`orm  GUI  Toolkits   •  GTK+   •  Qt  

   •  wxWidgets   •  Swing  /  SWT  
5. 5.

   Binding  Language •  GTK+   – C  /  C++  /  Java

    /  Python  /  Ruby  /  PHP  /  Javascript   •  QT   – C  /  C++  /  Java  /  Python  /  Ruby  /  PHP  /  Javascript   •  wxWidgets   – C  /  C++  /  Java  /  Python  /  Ruby  /  PHP  /  Javascript   •  Swing  /  SWT  /  JavaFX   – Java  (  Scala  /  JPython  /  JRuby  /  Javascript)  
6. 6.

   HTML5  Toolkits •  Webkit   – TideSDK   – QtWebkit   – app.js

    (nodejs  for  webkit)   •  Gecko   – XULRunner
7. 7.

   自由的可貴、多樣性選擇 這麼多的好方案讓您無所適從？    

8. 8.

   先不談 GUI  Toolkits 你聽過 Rich  Client  Pla`orm  嗎？  

9. 9.

   Rich  Client  Pla`orm •  A  standard  bundling  framework   • 

   User  interface  management    (e.g.  menus  and  toolbars)       •  User  sejngs  management     •  Storage  management     •  Window  management   •  Update  manager   –  Eclipse  RCP   –  Netbeans  Pla`orm   –  Spring  Framework  RCP  
10. 10.

    WHY  RCP •  Project  or  Product   – 經常 Branch  /

     Code  Generator     Customer  A Customer  B Customer  C
11. 11.

    WHY  RCP •  Upstream  Core  Components     •  CustomizaVon

      – Customer  A  (  Core  +  A1  +  B1  +  C1  ….)   – Customer  B  (  Core  +  A1  +  C1  +  D1  …)   – Customer  C  (  Core  +  A1  +  E1  +  F1  …)   XULRunner  /  ApplicaVon  Launcher Core  (Main  UI  /  API)
12. 12.

    將專案拆成小模組 •  不是一支程式中的模組化(基本的）   •  小模組易於開發及測試   •  小模組昇級容易且快速  

    •  小模組出包容易止血
13. 13.

    一堆小模組

14. 14.

    產品

15. 15.

    Why  XULRunner •  Cross-­‐Pla`orm   •  Gecko  rendering  engine  

    – HTML5  *   – CSS3   – JavaScript   – XML  (XSLT,  XMLHPpRequest,  DOMParser)     30%  5000  Power
16. 16.

    None
17. 17.

    Why  XULRunner  (60%  Power) •  XUL   – XUL   – XUL

     Overlays   •  XPCOM(Cross-­‐Pla`orm  Component  Object  Model)   – C++  /  Python  /  Java  /  Javascript   – Low  Level  API   •  Ex.  File  Systems  /  Databases  /  Thread  
18. 18.

    Why  XULRunner  (90%  Power) •  I18n  /  l10n    

    – DTD  EnVVes  (.dtd)  /  StringBundles  (.properVes)   •  InstallaVon  and  upgrade  mechanism   – XPInstall   •  Extension  Manager   •  XBL   – reusable  components   •  Preferences  System  
19. 19.

    Netbeans  Pla`orm •  Empty  app1  (30MB)

20. 20.

    XULApp  StarterKit •  Build  Scripts   –  MacOSX  /  Linux

     /  Windows   •  Skeleton  UI  Sejngs   –  Window  /  Menubar  /  Statusbar   •  Javascript  Libraries   –  jQuery   –  GREUVls   –  Lodash   •  Embedded  Develop  Tools   –  SQLite  Manager   –  DOM  Inspector   –  JSConsole    
21. 21.

    XULApp  StarterKit •  MacOSX  DMG  (34MB)

22. 22.

    HTML5  /  CSS3  /  JS

23. 23.

    LIVE  DEMO

24. 24.

    概念 －＞產品化

25. 25.

    需求變更 －＞客製化

26. 26.

    Hello-­‐Demo  MainApp

27. 27.

    Hello-­‐Demo  Addon

28. 28.

    Hello-­‐Demo  Style

29. 29.

    Hello-­‐Demo  Addons

30. 30.

    NodeJS  /  ExpressJS

31. 31.

    Thinking •  For  HTML5  Developers   – Live-­‐Update  For  Your  HTML5

        – Using  Add-­‐ons  to  extends  features  .   – IndexedDB  ??    Is  it  good  to  drink?   •  Mozilla  Storage  Interface   – Embedded  Libraries   •  NodeJS  –  Live  Updatable   •  Any  Files  Live  Updatable    
32. 32.

    買房子最重要的三件事：   LOCATION        LOCATION      LOCATION

        寫軟體最重要的三件事：   EXTENSION  EXTENSION  EXTENSION
33. 33.

    Reuse  of  Add-­‐ons •  跨專案之 Add-­‐on  設計   •  使用現成的

    Add-­‐on     – addons.mozilla.org   – 相容於 Firefox  18  找到12,995項符合的搜尋結果
34. 34.

    Thank  You   Coding  For  Fun

35. 35.

    Resources •  Slide:     hPp://goo.gl/z8BCG   •  XULApp  StarterKit:

      hPps://github.com/racklin/xulapp-­‐starterkit   •  XULRunner  –  MDN   hPps://developer.mozilla.org/en-­‐US/docs/ XULRunner