build desktop app_by_xulrunner
Post on 02-Jun-2015
834 Views
Preview:
TRANSCRIPT
XULRunner + JS 開發跨平台且具擴充性應⽤用程式
Rack Lin 阿土伯 @JSDCTW2013
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/ (生小孩後就變癈墟）
about:me
• 我是坐在電腦前端的工程師。
跨平台程式開發
• 工程師的浪漫？寫跨平台程式是我的夢想。
跨平台定義
• 下忍時以為跨平台程式就是： 跨 Windows 95 / Windows 98 / Windows NT Windows XP …………
跨平台定義
• 中忍時跨平台程式是： 跨 Windows / Linux / Mac OSX
跨平台定義
• 上忍時跨平台程式是： 跨 Windows / Linux / Mac OSX Mobile Android / iOS / Firefox OS
跨平台定義
• 只有火影能： 跨 Windows 8 / Windows 8 RT
跨平台的挑戰
• GUI ToolKits • Binding Languages • … • … • … • 因為 JSDC + 時間關係 – 總之選定 XULRunner + JS
在開始談 XULRunner 前
你聽過 Rich Client Pla`orm 嗎？
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
Netbeans Pla`orm
• Empty app1 (30MB)
WHY RCP
• 寫完一支程式很容易，完成一個產品是很困難的。 – 經常 Branch / Code Generator
Customer A
Customer B
Customer C
是做產品還是代工？
• 你希望再代工多少個， 讓我們數到十。
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)
將專案拆成小模組
• 這裡的模組化，並不是程式中的套件或模組，而是彼此獨立的應用程式。
• 小模組易於開發及測試 • 小模組昇級容易且快速 • 小模組各思其職
• 想想 eclipse / netbeans IDE . • 想想 firefox / google chrome
一堆小模組
產品
Javascript 界的 RCP
XULRunner
Firefox
• Firefox 是基於 XULRunner 下開發。 – 在 URL 中輸入 – chrome://browser/content/
Incepdon?
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
XULApp StarterKit
• MacOSX DMG (34MB)
XULRunner 基本特色
• Cross-‐Pla`orm • I18n / l10n • Gecko rendering engine – HTML5 * – CSS3 – JavaScript – XML (XSLT, XMLHRpRequest, DOMParser)
當成 PhoneGap 用
XULApp StarterKit Demo
HTML5 / CSS3 / JS
hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐webapp-‐wrapper hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐todomvc
萌典 Windows/Linux/MacOSX
Preferences System
萌典 Windows/Linux/MacOSX
Preferences System
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
XULRunner 利器
• Installadon and upgrade mechanism – XPInstall
• Extension Manager • XBL – reusable components
XULRunner + JS 開發跨平台且
具擴充性應⽤用程式
XUL
• XML User Interface Language。 – 啥？ – 它提供了⼀一套跨平台的widget定義。
• BuRon / List / Tree / Tab / Menubar.
– Why ?? 我們已經有 HTML5 了？ • 如同 Java 中的 Swing / SWT • XUL 使用的是 Nadve Pla`orm UI. HTML 則是由 CSS 中定義，各平台一致。
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
• UI overlays – Like: $(‘#id’).arer(<html>) , $(‘#id’).before(<html>) – 發生在 DOMContentLoaded Event Trigger 之前
• Scripts Hook – Javascript Script tag 也能 overlay , 所以我們可以於 Extensions 插入 js 至現有程式中。
XUL Overlays
• 還有一個兄弟 override – 用另一個 URI 內容 取代原 URI 內容。 – overide chrome://a/content/a.xul chrome://b/content/b.xul
Live Coding Demo
XUL Overlays / Override
XUL Overlays / override
• 它解決了程式設計師在實作 Plugin 的困苦 – 在即有程式中，感知擴充程式的存在並溝通 – 在即有畫面中，提供擴充程式描繪 UI / 佈局
• Override 它解決了 – Live Patch bugs – Template / Reports
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 .
Preferences System
• Key-‐Value Databases ( JSON) • User Preferences • Registry System • Inter-‐Process-‐Communicadon (別這麼用)
XPCOM
• 提供 Driver / Adaptor – DBUS / OSD / VKB / ZeroMQ
• 利用 C++ 實作高效能
• mozIJSSubScriptLoader – 強大邪惡的存在 – Extend DSL -‐> JS – Encode JS – Trial Expire Date
Ready for Producdon ?
工程師都怕將來被釘在牆上
XULRunner Hall of Fame
• Firefox • Komodo Edit • Flickr Uploader • VIVIPOS – 全球超過 6000 台收銀機日以繼夜的當白老鼠
LIVE DEMO
VIVIPOS
HDM9
• 在眾設計師面前， VIVIPOS 太醜。
向業界可敬的對手 CASIO POS 山寨 致敬
剩下十秒鐘了
買房子最重要的三件事： LOCATION LOCATION LOCATION
寫軟體最重要的三件事：
EXTENSION EXTENSION EXTENSION
工商服務
歡迎提案合作
Resources
• Slide: hRp://goo.gl/w1WIh
• XULApp StarterKit: hRps://github.com/racklin/xulapp-‐starterkit
• XULRunner – MDN hRps://developer.mozilla.org/en-‐US/docs/XULRunner
top related