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

跨平台 Desktop Apps 解決方案介紹
如何利用 XULRunner 更快速開發出更好的應用程式
xulapp-starterkit 介紹

Transcript

1. Web  開發者也可以寫  
   跨平台、可昇級、可擴充  
   的桌面程式
    
    
   Rack  Lin  阿土伯  @webconf2013
   

   View Slide

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/      (生小孩後就變癈墟）  
   

   View Slide

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  
   

   View Slide

4. Cross-­‐Pla`orm  GUI  Toolkits  
   •  GTK+  
   •  Qt  
   •  wxWidgets  
   •  Swing  /  SWT  
   
   

   View Slide

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)  
   

   View Slide

6. HTML5  Toolkits
   •  Webkit  
   – TideSDK  
   – QtWebkit  
   – app.js  (nodejs  for  webkit)  
   •  Gecko  
   – XULRunner
   

   View Slide

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

   View Slide

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

   View Slide

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  
   

   View Slide

10. WHY  RCP
    •  Project  or  Product  
    – 經常 Branch  /  Code  Generator    
    Customer  A
    Customer  B
    Customer  C
    

    View Slide

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)
    

    View Slide

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

    View Slide

13. 一堆小模組
    

    View Slide

14. 產品
    

    View Slide

15. Why  XULRunner
    •  Cross-­‐Pla`orm  
    •  Gecko  rendering  engine  
    – HTML5  *  
    – CSS3  
    – JavaScript  
    – XML  (XSLT,  XMLHPpRequest,  DOMParser)  
     
    30%  5000  Power
    

    View Slide

16. View Slide

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  
    

    View Slide

18. Why  XULRunner  (90%  Power)
    •  I18n  /  l10n    
    – DTD  EnVVes  (.dtd)  /  StringBundles  (.properVes)  
    •  InstallaVon  and  upgrade  mechanism  
    – XPInstall  
    •  Extension  Manager  
    •  XBL  
    – reusable  components  
    •  Preferences  System  
    

    View Slide

19. Netbeans  Pla`orm
    •  Empty  app1  (30MB)
    

    View Slide

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  
     
    

    View Slide

21. XULApp  StarterKit
    •  MacOSX  DMG  (34MB)
    

    View Slide

22. HTML5  /  CSS3  /  JS
    

    View Slide

23. LIVE  DEMO
    

    View Slide

24. 概念 －＞產品化
    

    View Slide

25. 需求變更 －＞客製化
    

    View Slide

26. Hello-­‐Demo  MainApp
    

    View Slide

27. Hello-­‐Demo  Addon
    

    View Slide

28. Hello-­‐Demo  Style
    

    View Slide

29. Hello-­‐Demo  Addons
    

    View Slide

30. NodeJS  /  ExpressJS
    

    View Slide

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    
    

    View Slide

32. 買房子最重要的三件事：  
    LOCATION        LOCATION      LOCATION  
     
    寫軟體最重要的三件事：  
    EXTENSION  EXTENSION  EXTENSION
    

    View Slide

33. Reuse  of  Add-­‐ons
    •  跨專案之 Add-­‐on  設計  
    •  使用現成的 Add-­‐on    
    – addons.mozilla.org  
    – 相容於 Firefox  18  找到12,995項符合的搜尋結果
    
    

    View Slide

34. Thank  You  
    Coding  For  Fun
    

    View Slide

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  
    

    View Slide