XULRunner	  +	  JS	  開發跨平台且具擴充性應⽤用程式	  	  	  Rack	  Lin	  阿土伯 	  @JSDCTW2013
about:me•  ViViPOS	  Co.,	  Ltd	  	  技術總監	  –  利用 JavaScript	  寫 〞收銀機〞(傳統產業,全新感受)	  •  CoCo	  都可、50嵐、歇腳亭、Yamaha	  、星聚點KTV…...
about:me	  •  我是坐在電腦前端的工程師。	  
跨平台程式開發•  工程師的浪漫?寫跨平台程式是我的夢想。	  
跨平台定義	  •  下忍時以為跨平台程式就是:	  	  跨 	  	  	  	  	  	  Windows	  95	  /	  Windows	  98	  /	  Windows	  NT	  	  	  	  	  	  	  W...
跨平台定義	  •  中忍時跨平台程式是:	  	  跨 	  	  	  	  	  	  Windows	  /	  Linux	  /	  Mac	  OSX	  	  	  
跨平台定義	  •  上忍時跨平台程式是:	  	  跨 	  	  	  	  	  	  Windows	  /	  Linux	  /	  Mac	  OSX	  	  	  Mobile	  	  	  	  	  	  Android...
跨平台定義	  •  只有火影能:	  	  跨 	  	  	  	  	  	  Windows	  8	  /	  Windows	  8	  RT	  	  
跨平台的挑戰	  •  GUI	  ToolKits	  	  •  Binding	  Languages	  	  •  …	  •  …	  •  …	  •  因為	  JSDC	  +	  時間關係	  – 總之選定 XULRunne...
在開始談 XULRunner	  前你聽過 Rich	  Client	  Pla`orm	  嗎?	  
Rich Client Platform	  (wiki)	  • A standard bundling framework	  • User interface management 	  • User settings managemen...
Netbeans	  Pla`orm•  Empty	  app1	  (30MB)
WHY	  RCP•  寫完一支程式很容易,完成一個產品是很困難的。	  – 經常 Branch	  /	  Code	  Generator	  	  Customer	  ACustomer	  BCustomer	  C
是做產品還是代工?	  •  你希望再代工多少個, 讓我們數到十。	  
WHY	  RCP•  Upstream	  Core	  Components	  	  •  Customizadon	  – Customer	  A	  (	  Core	  +	  A1	  +	  B1	  +	  C1	  ….)...
將專案拆成小模組•  這裡的模組化,並不是程式中的套件或模組,而是彼此獨立的應用程式。	  •  小模組易於開發及測試	  •  小模組昇級容易且快速	  •  小模組各思其職	  •  想想 eclipse	  /	  netbeans	  ...
一堆小模組
產品
Javascript	  界的 RCP	  XULRunner	  
Firefox	  •  Firefox	  是基於 XULRunner	  下開發。	  – 在 URL	  中輸入 	  – chrome://browser/content/	  
Incepdon?	  
XULApp	  StarterKit•  hRps://github.com/racklin/xulapp-­‐starterkit	  	  •  Build	  Scripts	  (MacOSX	  /	  Linux	  /	  Wi...
XULApp	  StarterKit•  MacOSX	  DMG	  (34MB)
XULRunner 基本特色•  Cross-­‐Pla`orm	  •  I18n	  /	  l10n	  	  •  Gecko	  rendering	  engine	  – HTML5	  *	  – CSS3	  – JavaSc...
當成 PhoneGap	  用XULApp	  StarterKit	  Demo	  
HTML5	  /	  CSS3	  /	  JShRps://github.com/racklin/xulapp-­‐starterkit-­‐app-­‐webapp-­‐wrapper	  hRps://github.com/rackli...
萌典 Windows/Linux/MacOSX	  Preferences	  System	  
萌典 Windows/Linux/MacOSX	  Preferences	  System	  
XULRunner	  神兵•  XUL	  – XUL	  – XUL	  Overlays	  •  Preferences	  System	  •  XPCOM(Cross-­‐Pla`orm	  Component	  Object	...
XULRunner	  利器•  Installadon	  and	  upgrade	  mechanism	  – XPInstall	  •  Extension	  Manager	  •  XBL	  – reusable	  co...
 XULRunner	  +	  JS	  開發跨平台且具擴充性應⽤用程式	  
XUL	  •  XML	  User	  Interface	  Language。 	  – 啥?	  – 它提供了⼀一套跨平台的widget定義。	  •  BuRon	  /	  List	  /	  Tree	  /	  Tab	  ...
Mac	  OSX	  XUL	  DEMO	  
Linux	  XUL	  DEMO	  
大家看出差異了嗎?	  
沒有是正常的!	  Linux	  裝了	  mac4lin	  -	  	  Mac	  OS/X	  主題	  
XUL	  Overlays	  •  	  由 chrome.manifest	  中以 URI	  定義	  –  overlay	  chrome://a/content/a.xul	  chrome://b/content/b.xul	...
XUL	  Overlays	  	  •  還有一個兄弟 override	  – 用另一個 URI	  內容 取代原 URI	  內容。	  – overide	  chrome://a/content/a.xul	  chrome://b...
Live	  Coding	  Demo	  XUL	  Overlays	  /	  Override	  
XUL	  Overlays	  /	  override	  •  它解決了程式設計師在實作 Plugin	  的困苦	  – 在即有程式中,感知擴充程式的存在並溝通	  – 在即有畫面中,提供擴充程式描繪 UI	  /	  佈局	  •  ...
Preferences	  System	  •  about:config	  看到的東西	  •  App	  or	  Extensions	  目錄下的 defaultspreferences*.js	  as	  system	  pr...
Preferences	  System	  •  Key-­‐Value	  Databases	  (	  JSON)	  •  User	  Preferences	  •  Registry	  System	  •  Inter-­‐...
XPCOM	  •  提供 Driver	  /	  Adaptor	  – DBUS	  /	  OSD	  /	  VKB	  /	  ZeroMQ	  •  利用 C++	  實作高效能	  •  mozIJSSubScriptLoade...
Ready	  for	  Producdon	  ?	  工程師都怕將來被釘在牆上	  
XULRunner	  Hall	  of	  Fame	  •  Firefox	  •  Komodo	  Edit	  •  Flickr	  Uploader	  •  VIVIPOS	  – 全球超過 6000 台收銀機日以繼夜的當白...
LIVE	  DEMOVIVIPOS	  
HDM9	  •  在眾設計師面前, VIVIPOS	  太醜。	  向業界可敬的對手	  	  CASIO	  POS	  	  山寨 致敬	  
剩下十秒鐘了	  
買房子最重要的三件事:	  LOCATION	  	  	  	  LOCATION	  	  	  LOCATION	  	  寫軟體最重要的三件事:	  EXTENSION	  EXTENSION	  EXTENSION
工商服務	  歡迎提案合作	  
Resources•  Slide:	  	  hRp://goo.gl/w1WIh	  •  XULApp	  StarterKit:	  hRps://github.com/racklin/xulapp-­‐starterkit	  •  ...
Upcoming SlideShare
Loading in …5
×

Build desktop app_by_xulrunner

1,069 views
984 views

Published on

Published in: News & Politics, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,069
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Build desktop app_by_xulrunner

  1. 1.  XULRunner  +  JS  開發跨平台且具擴充性應⽤用程式      Rack  Lin  阿土伯  @JSDCTW2013
  2. 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. 3. about:me  •  我是坐在電腦前端的工程師。  
  4. 4. 跨平台程式開發•  工程師的浪漫?寫跨平台程式是我的夢想。  
  5. 5. 跨平台定義  •  下忍時以為跨平台程式就是:    跨            Windows  95  /  Windows  98  /  Windows  NT              Windows  XP  …………    
  6. 6. 跨平台定義  •  中忍時跨平台程式是:    跨            Windows  /  Linux  /  Mac  OSX      
  7. 7. 跨平台定義  •  上忍時跨平台程式是:    跨            Windows  /  Linux  /  Mac  OSX      Mobile            Android  /  iOS  /  Firefox  OS  
  8. 8. 跨平台定義  •  只有火影能:    跨            Windows  8  /  Windows  8  RT    
  9. 9. 跨平台的挑戰  •  GUI  ToolKits    •  Binding  Languages    •  …  •  …  •  …  •  因為  JSDC  +  時間關係  – 總之選定 XULRunner  +  JS  
  10. 10. 在開始談 XULRunner  前你聽過 Rich  Client  Pla`orm  嗎?  
  11. 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. 12. Netbeans  Pla`orm•  Empty  app1  (30MB)
  13. 13. WHY  RCP•  寫完一支程式很容易,完成一個產品是很困難的。  – 經常 Branch  /  Code  Generator    Customer  ACustomer  BCustomer  C
  14. 14. 是做產品還是代工?  •  你希望再代工多少個, 讓我們數到十。  
  15. 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  LauncherCore  (Main  UI  /  API)
  16. 16. 將專案拆成小模組•  這裡的模組化,並不是程式中的套件或模組,而是彼此獨立的應用程式。  •  小模組易於開發及測試  •  小模組昇級容易且快速  •  小模組各思其職  •  想想 eclipse  /  netbeans  IDE  .  •  想想 firefox  /  google  chrome    
  17. 17. 一堆小模組
  18. 18. 產品
  19. 19. Javascript  界的 RCP  XULRunner  
  20. 20. Firefox  •  Firefox  是基於 XULRunner  下開發。  – 在 URL  中輸入  – chrome://browser/content/  
  21. 21. Incepdon?  
  22. 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. 23. XULApp  StarterKit•  MacOSX  DMG  (34MB)
  24. 24. XULRunner 基本特色•  Cross-­‐Pla`orm  •  I18n  /  l10n    •  Gecko  rendering  engine  – HTML5  *  – CSS3  – JavaScript  – XML  (XSLT,  XMLHRpRequest,  DOMParser)    
  25. 25. 當成 PhoneGap  用XULApp  StarterKit  Demo  
  26. 26. HTML5  /  CSS3  /  JShRps://github.com/racklin/xulapp-­‐starterkit-­‐app-­‐webapp-­‐wrapper  hRps://github.com/racklin/xulapp-­‐starterkit-­‐app-­‐todomvc  
  27. 27. 萌典 Windows/Linux/MacOSX  Preferences  System  
  28. 28. 萌典 Windows/Linux/MacOSX  Preferences  System  
  29. 29. 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  
  30. 30. XULRunner  利器•  Installadon  and  upgrade  mechanism  – XPInstall  •  Extension  Manager  •  XBL  – reusable  components  
  31. 31.  XULRunner  +  JS  開發跨平台且具擴充性應⽤用程式  
  32. 32. XUL  •  XML  User  Interface  Language。  – 啥?  – 它提供了⼀一套跨平台的widget定義。  •  BuRon  /  List  /  Tree  /  Tab  /  Menubar.  – Why  ??  我們已經有 HTML5    了?  •  如同 Java  中的 Swing  /  SWT    •  XUL  使用的是 Nadve  Pla`orm  UI.    HTML  則是由 CSS  中定義,各平台一致。  
  33. 33. Mac  OSX  XUL  DEMO  
  34. 34. Linux  XUL  DEMO  
  35. 35. 大家看出差異了嗎?  
  36. 36. 沒有是正常的!  Linux  裝了  mac4lin  -    Mac  OS/X  主題  
  37. 37. 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  至現有程式中。  
  38. 38. XUL  Overlays    •  還有一個兄弟 override  – 用另一個 URI  內容 取代原 URI  內容。  – overide  chrome://a/content/a.xul  chrome://b/content/b.xul  
  39. 39. Live  Coding  Demo  XUL  Overlays  /  Override  
  40. 40. XUL  Overlays  /  override  •  它解決了程式設計師在實作 Plugin  的困苦  – 在即有程式中,感知擴充程式的存在並溝通  – 在即有畫面中,提供擴充程式描繪 UI  /  佈局  •  Override  它解決了  – Live  Patch  bugs  – Template  /  Reports  
  41. 41. Preferences  System  •  about:config  看到的東西  •  App  or  Extensions  目錄下的 defaultspreferences*.js  as  system  preferences.  •  Profile  目錄下的 prefs.js  as  user  preferences.  •  Merge  system  and  user  preferences  when  startup  .  
  42. 42. Preferences  System  •  Key-­‐Value  Databases  (  JSON)  •  User  Preferences  •  Registry  System  •  Inter-­‐Process-­‐Communicadon  (別這麼用)  
  43. 43. XPCOM  •  提供 Driver  /  Adaptor  – DBUS  /  OSD  /  VKB  /  ZeroMQ  •  利用 C++  實作高效能  •  mozIJSSubScriptLoader    – 強大邪惡的存在  – Extend  DSL  -­‐>  JS  – Encode  JS  – Trial  Expire  Date    
  44. 44. Ready  for  Producdon  ?  工程師都怕將來被釘在牆上  
  45. 45. XULRunner  Hall  of  Fame  •  Firefox  •  Komodo  Edit  •  Flickr  Uploader  •  VIVIPOS  – 全球超過 6000 台收銀機日以繼夜的當白老鼠  
  46. 46. LIVE  DEMOVIVIPOS  
  47. 47. HDM9  •  在眾設計師面前, VIVIPOS  太醜。  向業界可敬的對手    CASIO  POS    山寨 致敬  
  48. 48. 剩下十秒鐘了  
  49. 49. 買房子最重要的三件事:  LOCATION        LOCATION      LOCATION    寫軟體最重要的三件事:  EXTENSION  EXTENSION  EXTENSION
  50. 50. 工商服務  歡迎提案合作  
  51. 51. Resources•  Slide:    hRp://goo.gl/w1WIh  •  XULApp  StarterKit:  hRps://github.com/racklin/xulapp-­‐starterkit  •  XULRunner  –  MDN  hRps://developer.mozilla.org/en-­‐US/docs/XULRunner  

×