XULRunner + JS 開發跨平台且具擴充性應用程式

Transcript

1.  XULRunner  +  JS  開發跨平台且 具擴充性應⽤用程式       Rack  Lin  阿土伯  @JSDCTW2013
2. about:me •  ViViPOS  Co.,  Ltd    技術總監   –  利用 JavaScript  寫 〞收銀機〞（傳統產業，全新感受）   •  CoCo  都可、50嵐、歇腳亭、Yamaha  、星聚點KTV……     •  PHP  /  JavaScript  /  Java  Programmer  (目前移情於 Scala  )     •  racklin@gmail.com   •  hRps://twiRer.com/racklin   •  hRp://www.plurk.com/racklin   •  hRps://www.facebook.com/racklin1002   •  hRp://racklin.blogspot.tw/      (生小孩後就變癈墟）  
3. about:me   •  我是坐在電腦 前端的工程師。  
4. 跨平台程式開發 •  工程師的浪漫？寫跨平台程式是我的夢想。  
5. 跨平台定義   •  下忍時以為跨平台程式就是：     跨            Windows  95  /  Windows  98  /  Windows  NT              Windows  XP  …………    
6. 跨平台定義   •  中忍時跨平台程式是：     跨            Windows  /  Linux  /  Mac  OSX      
7. 跨平台定義   •  上忍時跨平台程式是：     跨            Windows  /  Linux  /  Mac  OSX       Mobile            Android  /  iOS  /  Firefox  OS  
8. 跨平台定義   •  只有火影能：     跨            Windows  8  /  Windows  8  RT    
9. 跨平台的挑戰   •  GUI  ToolKits     •  Binding  Languages     •  …   •  …   •  …   •  因為  JSDC  +  時間關係   – 總之選定 XULRunner  +  JS  
10. 在開始談 XULRunner  前 你聽過 Rich  Client  Pla`orm  嗎？  
11. Rich Client Platform  (wiki)   • A standard bundling framework   • User interface management   • User settings management   • Storage management   • Window management   • Update manager   -  Eclipse RCP   -  Netbeans Platform   -  Spring Framework RCP  
12. Netbeans  Pla`orm •  Empty  app1  (30MB)
13. WHY  RCP •  寫完一支程式很容易，完成一個產品是很 困難的。   – 經常 Branch  /  Code  Generator     Customer  A Customer  B Customer  C
14. 是做產品還是代工？   •  你希望再代工多少個， 讓我們數到十。  
15. WHY  RCP •  Upstream  Core  Components     •  Customizadon   – Customer  A  (  Core  +  A1  +  B1  +  C1  ….)   – Customer  B  (  Core  +  A1  +  C1  +  D1  …)   – Customer  C  (  Core  +  A1  +  E1  +  F1  …)   XULRunner  /  Applicadon  Launcher Core  (Main  UI  /  API)
16. 將專案拆成小模組 •  這裡的模組化，並不是程式中的套件或模組， 而是彼此獨立的應用程式。   •  小模組易於開發及測試   •  小模組昇級容易且快速   •  小模組各思其職   •  想想 eclipse  /  netbeans  IDE  .   •  想想 firefox  /  google  chrome    
17. 一堆小模組
18. 產品
19. Javascript  界的 RCP   XULRunner  
20. Firefox   •  Firefox  是基於 XULRunner  下開發。   – 在 URL  中輸入   – chrome://browser/content/  
21. Incepdon?  
22. XULApp  StarterKit •  hRps://github.com/racklin/xulapp-­‐starterkit     •  Build  Scripts  (MacOSX  /  Linux  /  Windows)   •  Skeleton  UI  Sehngs   –  Window  /  Menubar  /  Statusbar   •  Javascript  Libraries   –  jQuery   –  GREUdls   –  Lodash   •  Embedded  Develop  Tools   –  SQLite  Manager   –  DOM  Inspector   –  JSConsole  
23. XULApp  StarterKit •  MacOSX  DMG  (34MB)
24. XULRunner 基本特色 •  Cross-­‐Pla`orm   •  I18n  /  l10n     •  Gecko  rendering  engine   – HTML5  *   – CSS3   – JavaScript   – XML  (XSLT,  XMLHRpRequest,  DOMParser)    
25. 當成 PhoneGap  用 XULApp  StarterKit  Demo  
26. HTML5  /  CSS3  /  JS hRps://github.com/racklin/xulapp-­‐starterkit-­‐app-­‐webapp-­‐wrapper   hRps://github.com/racklin/xulapp-­‐starterkit-­‐app-­‐todomvc  
27. Hybrid  Development   •  TodoMVC  With  NodeJS+ExpressJS   – HTML5  for  FrontEnd,  NodeJS  for  BackEnd  Services  
28. 萌典 Windows/Linux/MacOSX   Preferences  System  
29. 萌典 Windows/Linux/MacOSX   Preferences  System  
30. XULRunner  神兵 •  XUL   – XUL   – XUL  Overlays   •  Preferences  System   •  XPCOM(Cross-­‐Pla`orm  Component  Object  Model)   – C++  /  Python  /  Java  /  Javascript   – Low  Level  API   •  Ex.  File  Systems  /  Databases  /  Thread  
31. XULRunner  利器 •  Installadon  and  upgrade  mechanism   – XPInstall   •  Extension  Manager   •  XBL   – reusable  components  
32.  XULRunner  +  JS  開發跨平台且 具擴充性應⽤用程式  
33. XUL   •  XML  User  Interface  Language。   – 啥？   – 它提供了⼀一套跨平台的widget定義。   •  BuRon  /  List  /  Tree  /  Tab  /  Menubar.   – Why  ??  我們已經有 HTML5    了？   •  如同 Java  中的 Swing  /  SWT     •  XUL  使用的是 Nadve  Pla`orm  UI.     HTML  則是由 CSS  中定義，各平台一致。  
34. Mac  OSX  XUL  DEMO  
35. Linux  XUL  DEMO  
36. 大家看出差異了嗎？  
37. 沒有是正常的！   Linux  裝了  mac4lin  －    Mac  OS/X  主題  
38. XUL  Overlays   •   由 chrome.manifest  中以 URI  定義   –  overlay  chrome://a/content/a.xul  chrome://b/ content/b.xul   •  UI  overlays   –  Like:  $(‘#id’).arer(<html>)  ,  $(‘#id’).before(<html>)   –  發生在 DOMContentLoaded  Event  Trigger  之前   •  Scripts  Hook   –  Javascript  Script  tag  也能 overlay  ,  所以我們可以於 Extensions  插入 js  至現有程式中。  
39. XUL  Overlays     •  還有一個兄弟 override   – 用另一個 URI  內容 取代原 URI  內容。   – overide  chrome://a/content/a.xul  chrome://b/ content/b.xul  
40. Live  Coding  Demo   XUL  Overlays  /  Override  
41. Overlay  Demo  
42. Overlay  Demo  
43. Override  demo  
44. XUL  Overlays  /  override   •  它解決了程式設計師在實作 Plugin  的困苦   – 在即有程式中，感知擴充程式的存在並溝通   – 在即有畫面中，提供擴充程式描繪 UI  /  佈局   •  Override  它解決了   – Live  Patch  bugs   – Template  /  Reports  
45. Preferences  System   •  about:config  看到的東西   •  App  or  Extensions  目錄下的 \defaults \preferences\*.js  as  system  preferences.   •  Profile  目錄下的 prefs.js  as  user  preferences.   •  Merge  system  and  user  preferences  when   startup  .  
46. Preferences  System   •  Key-­‐Value  Databases  (  JSON)   •  User  Preferences   •  Registry  System   •  Inter-­‐Process-­‐Communicadon  (別這麼用)  
47. XPCOM   •  提供 Driver  /  Adaptor   – DBUS  /  OSD  /  VKB  /  ZeroMQ   •  利用 C++  實作高效能   •  mozIJSSubScriptLoader     – 強大邪惡的存在   – Extend  DSL  -­‐>  JS   – Encode  JS   – Trial  Expire  Date    
48. Ready  for  Producdon  ?   工程師都怕將來被釘在牆上  
49. XULRunner  Hall  of  Fame   •  Firefox   •  Komodo  Edit   •  Flickr  Uploader   •  VIVIPOS   – 全球超過 6000 台收銀機日以繼夜的當白老鼠  
50. LIVE  DEMO VIVIPOS  
51. HDM9   •  在眾設計師面前， VIVIPOS  太醜。   向業界可 敬的對手     CASIO  POS     山寨 致敬  
52. VIVIPOS  MAIN  UI  
53. Addons  Manager   Demo  Enable  台灣電子發票 Addon.  
54. Main  UI  With  電子發票   電子發票  UI   Overlay  至現有 POS  視窗   電子發票   相關功能鍵  
55. 後台設定   •  新的 Icon  出現在後台設定(Preferences)   電子發票設定  
56. Services  Binding   •  User  Preferences  /  Services  Registry.   來自電子發票 Addon     Link  Services  To  UI  
57. 剩下十秒鐘了  
58. 買房子最重要的三件事：   LOCATION        LOCATION      LOCATION     寫軟體最重要的三件事：   EXTENSION  EXTENSION  EXTENSION
59. 工商服務   歡迎提案合作  
60. Resources •  Slide:     hRp://goo.gl/w1WIh   •  XULApp  StarterKit:   hRps://github.com/racklin/xulapp-­‐starterkit   •  XULRunner  –  MDN   hRps://developer.mozilla.org/en-­‐US/docs/ XULRunner