build desktop app_by_xulrunner

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

Rack Lin 阿土伯 @JSDCTW2013

about:me

•  ViViPOS Co., Ltd 技術總監 –  利用 JavaScript 寫〞收銀機〞（傳統產業，全新感受）

•  CoCo 都可、50嵐、歇腳亭、Yamaha 、星聚點KTV……

•  PHP / JavaScript / Java Programmer (目前移情於 Scala )

•  [email protected] •  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

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

build desktop app_by_xulrunner

News & Politics