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

Slide 1

Slide 1 text

XULRunner + JS 開發跨平台且具擴充性應⽤用程式 Rack Lin 阿土伯 @JSDCTW2013

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

about:me •  我是坐在電腦前端的工程師。

Slide 4

Slide 4 text

跨平台程式開發 •  工程師的浪漫？寫跨平台程式是我的夢想。

Slide 5

Slide 5 text

跨平台定義 •  下忍時以為跨平台程式就是：跨 Windows 95 / Windows 98 / Windows NT Windows XP …………

Slide 6

Slide 6 text

跨平台定義 •  中忍時跨平台程式是：跨 Windows / Linux / Mac OSX

Slide 7

Slide 7 text

跨平台定義 •  上忍時跨平台程式是：跨 Windows / Linux / Mac OSX Mobile Android / iOS / Firefox OS

Slide 8

Slide 8 text

跨平台定義 •  只有火影能：跨 Windows 8 / Windows 8 RT

Slide 9

Slide 9 text

跨平台的挑戰 •  GUI ToolKits •  Binding Languages •  … •  … •  … •  因為 JSDC + 時間關係 – 總之選定 XULRunner + JS

Slide 10

Slide 10 text

在開始談 XULRunner 前你聽過 Rich Client Pla`orm 嗎？

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Netbeans Pla`orm •  Empty app1 (30MB)

Slide 13

Slide 13 text

WHY RCP •  寫完一支程式很容易，完成一個產品是很困難的。 – 經常 Branch / Code Generator Customer A Customer B Customer C

Slide 14

Slide 14 text

是做產品還是代工？ •  你希望再代工多少個，讓我們數到十。

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

將專案拆成小模組 •  這裡的模組化，並不是程式中的套件或模組，而是彼此獨立的應用程式。 •  小模組易於開發及測試 •  小模組昇級容易且快速 •  小模組各思其職 •  想想 eclipse / netbeans IDE . •  想想 ﬁrefox / google chrome

Slide 17

Slide 17 text

一堆小模組

Slide 18

Slide 18 text

產品

Slide 19

Slide 19 text

Javascript 界的 RCP XULRunner

Slide 20

Slide 20 text

Firefox •  Firefox 是基於 XULRunner 下開發。 – 在 URL 中輸入 – chrome://browser/content/

Slide 21

Slide 21 text

Incepdon?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

XULApp StarterKit •  MacOSX DMG (34MB)

Slide 24

Slide 24 text

XULRunner 基本特色 •  Cross-‐Pla`orm •  I18n / l10n •  Gecko rendering engine – HTML5 * – CSS3 – JavaScript – XML (XSLT, XMLHRpRequest, DOMParser)

Slide 25

Slide 25 text

當成 PhoneGap 用 XULApp StarterKit Demo

Slide 26

Slide 26 text

HTML5 / CSS3 / JS hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐webapp-‐wrapper hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐todomvc

Slide 27

Slide 27 text

Hybrid Development •  TodoMVC With NodeJS+ExpressJS – HTML5 for FrontEnd, NodeJS for BackEnd Services

Slide 28

Slide 28 text

萌典 Windows/Linux/MacOSX Preferences System

Slide 29

Slide 29 text

萌典 Windows/Linux/MacOSX Preferences System

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

XULRunner 利器 •  Installadon and upgrade mechanism – XPInstall •  Extension Manager •  XBL – reusable components

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

XUL •  XML User Interface Language。 – 啥？ – 它提供了⼀一套跨平台的widget定義。 •  BuRon / List / Tree / Tab / Menubar. – Why ?? 我們已經有 HTML5 了？ •  如同 Java 中的 Swing / SWT •  XUL 使用的是 Nadve Pla`orm UI. HTML 則是由 CSS 中定義，各平台一致。

Slide 34

Slide 34 text

Mac OSX XUL DEMO

Slide 35

Slide 35 text

Linux XUL DEMO

Slide 36

Slide 36 text

大家看出差異了嗎？

Slide 37

Slide 37 text

沒有是正常的！ Linux 裝了 mac4lin － Mac OS/X 主題

Slide 38

Slide 38 text

XUL Overlays •  由 chrome.manifest 中以 URI 定義 –  overlay chrome://a/content/a.xul chrome://b/ content/b.xul •  UI overlays –  Like: $(‘#id’).arer() , $(‘#id’).before() –  發生在 DOMContentLoaded Event Trigger 之前 •  Scripts Hook –  Javascript Script tag 也能 overlay , 所以我們可以於 Extensions 插入 js 至現有程式中。

Slide 39

Slide 39 text

XUL Overlays •  還有一個兄弟 override – 用另一個 URI 內容取代原 URI 內容。 – overide chrome://a/content/a.xul chrome://b/ content/b.xul

Slide 40

Slide 40 text

Live Coding Demo XUL Overlays / Override

Slide 41

Slide 41 text

Overlay Demo

Slide 42

Slide 42 text

Overlay Demo

Slide 43

Slide 43 text

Override demo

Slide 44

Slide 44 text

XUL Overlays / override •  它解決了程式設計師在實作 Plugin 的困苦 – 在即有程式中，感知擴充程式的存在並溝通 – 在即有畫面中，提供擴充程式描繪 UI / 佈局 •  Override 它解決了 – Live Patch bugs – Template / Reports

Slide 45

Slide 45 text

Preferences System •  about:conﬁg 看到的東西 •  App or Extensions 目錄下的 \defaults \preferences\*.js as system preferences. •  Proﬁle 目錄下的 prefs.js as user preferences. •  Merge system and user preferences when startup .

Slide 46

Slide 46 text

Preferences System •  Key-‐Value Databases ( JSON) •  User Preferences •  Registry System •  Inter-‐Process-‐Communicadon (別這麼用)

Slide 47

Slide 47 text

XPCOM •  提供 Driver / Adaptor – DBUS / OSD / VKB / ZeroMQ •  利用 C++ 實作高效能 •  mozIJSSubScriptLoader – 強大邪惡的存在 – Extend DSL -‐> JS – Encode JS – Trial Expire Date

Slide 48

Slide 48 text

Ready for Producdon ? 工程師都怕將來被釘在牆上

Slide 49

Slide 49 text

XULRunner Hall of Fame •  Firefox •  Komodo Edit •  Flickr Uploader •  VIVIPOS – 全球超過 6000 台收銀機日以繼夜的當白老鼠

Slide 50

Slide 50 text

LIVE DEMO VIVIPOS

Slide 51

Slide 51 text

HDM9 •  在眾設計師面前， VIVIPOS 太醜。向業界可敬的對手 CASIO POS 山寨致敬

Slide 52

Slide 52 text

VIVIPOS MAIN UI

Slide 53

Slide 53 text

Addons Manager Demo Enable 台灣電子發票 Addon.

Slide 54

Slide 54 text

Main UI With 電子發票電子發票 UI Overlay 至現有 POS 視窗電子發票相關功能鍵

Slide 55

Slide 55 text

後台設定 •  新的 Icon 出現在後台設定(Preferences) 電子發票設定

Slide 56

Slide 56 text

Services Binding •  User Preferences / Services Registry. 來自電子發票 Addon Link Services To UI

Slide 57

Slide 57 text

剩下十秒鐘了

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

工商服務歡迎提案合作

Slide 60

Slide 60 text

Resources •  Slide: hRp://goo.gl/w1WIh •  XULApp StarterKit: hRps://github.com/racklin/xulapp-‐starterkit •  XULRunner – MDN hRps://developer.mozilla.org/en-‐US/docs/ XULRunner