Builds Desktop-App for Web Developers

Slide 1

Slide 1 text

Builds Cross-‐Pla.orm Desktop Apps using Web Technologies Rack Lin @webconf2013

Slide 2

Slide 2 text

about:me •  ViViPOS Co., Ltd CTO –  Using JavaScript For “Point Of Sale” System. •  PHP / JavaScript / Java Programmer (NOW Favoring Scala ) •  racklin@gmail.com •  hXps://twiXer.com/racklin •  hXp://www.plurk.com/racklin •  hXps://www.facebook.com/racklin1002 •  hXp://racklin.blogspot.tw/ (Non Updated）

Slide 3

Slide 3 text

Desktop App •  Wiki-‐> ApplicaZon so[ware •  PC Magazine: – An applicaZon that runs stand alone in a desktop or laptop computer. Contrast with "Web-‐based applicaZon," which requires the Web browser to run. – The same as deﬁniZon #1 above, except that the term may be used to contrast desktop applicaZons with mobile applicaZons that run in smartphones and tablets

Slide 4

Slide 4 text

Cross-‐Pla.orm GUI Toolkits •  GTK+ •  Qt •  wxWidgets •  Swing / SWT

Slide 5

Slide 5 text

Binding Language •  GTK+ – C / C++ / Java / Python / Ruby / PHP / Javascript •  QT – C / C++ / Java / Python / Ruby / PHP / Javascript •  wxWidgets – C / C++ / Java / Python / Ruby / PHP / Javascript •  Swing / SWT / JavaFX – Java ( Scala / JPython / JRuby / Javascript)

Slide 6

Slide 6 text

HTML5 Toolkits •  Webkit – TideSDK – QtWebkit – app.js (nodejs for webkit) •  Gecko – XULRunner

Slide 7

Slide 7 text

Too many GUI Toolkits？

Slide 8

Slide 8 text

By The Way Are Your Heard “Rich Client Pla.orm “？

Slide 9

Slide 9 text

Rich Client Pla.orm •  A standard bundling framework •  User interface management (e.g. menus and toolbars) •  User selngs management •  Storage management •  Window management •  Update manager –  Eclipse RCP –  Netbeans Pla.orm –  Spring Framework RCP

Slide 10

Slide 10 text

WHY RCP •  Project or Product –  You frequently Branch / Code Generator Customer A Customer B Customer C You are doing Project NOT Product.

Slide 11

Slide 11 text

WHY RCP •  Upstream Core Components •  CustomizaZon by Components or Add-‐ons – Customer A ( Core + A1 + B1 + C1 ….) – Customer B ( Core + A1 + C1 + D1 …) – Customer C ( Core + A1 + E1 + F1 …) XULRunner / ApplicaZon Core (Main UI / API)

Slide 12

Slide 12 text

Components / Add-‐ons •  Easy to Development and Test. •  Easy to Online-‐Update. •  Easy to Maintenance Slime Component / Add-‐on

Slide 13

Slide 13 text

Many Components / Add-‐ons

Slide 14

Slide 14 text

Product

Slide 15

Slide 15 text

Why XULRunner •  Cross-‐Pla.orm •  Gecko rendering engine – HTML5 * – CSS3 – JavaScript – XML (XSLT, XMLHXpRequest, DOMParser)

Slide 16

Slide 16 text

Thinking XULRunner is PhoneGap Like Tools You Only Got 30% Power

Slide 17

Slide 17 text

Why XULRunner (60% Power) •  XUL – XUL – XUL Overlays •  XPCOM(Cross-‐Pla.orm Component Object Model) – C++ / Python / Java / Javascript – Low Level API •  Ex. File Systems / Databases / Thread

Slide 18

Slide 18 text

Why XULRunner (90% Power) •  I18n / l10n – DTD EnZZes (.dtd) / StringBundles (.properZes) •  InstallaZon and upgrade mechanism – XPInstall •  Extension Manager •  XBL – reusable components •  Preferences System

Slide 19

Slide 19 text

Netbeans Pla.orm •  Empty app1 (30MB)

Slide 20

Slide 20 text

XULApp StarterKit •  Build Scripts –  MacOSX / Linux / Windows •  Skeleton UI Selngs –  Window / Menubar / Statusbar •  Javascript Libraries –  jQuery –  GREUZls –  Lodash •  Embedded Develop Tools –  SQLite Manager –  DOM Inspector –  JSConsole

Slide 21

Slide 21 text

XULApp StarterKit •  MacOSX DMG (34MB)

Slide 22

Slide 22 text

XULApp StarterKit Installed TodoMVC Demo.

Slide 23

Slide 23 text

LIVE DEMO

Slide 24

Slide 24 text

Concept－＞Product

Slide 25

Slide 25 text

Enhancement －＞CustomizaZon

Slide 26

Slide 26 text

Don’t Hard Coding •  Using MainApp Add-‐on •  Enhancement by the other Add-‐on •  CustomizaZon by the other Add-‐on •  Decoupling your applicaZon. •  Hello-‐demo sample code: –  hXps://github.com/racklin/xulapp-‐starterkit-‐app-‐ hello-‐demo

Slide 27

Slide 27 text

Hello-‐Demo MainApp

Slide 28

Slide 28 text

Hello-‐Demo Addon

Slide 29

Slide 29 text

Hello-‐Demo Style

Slide 30

Slide 30 text

Hello-‐Demo Addons

Slide 31

Slide 31 text

Crazy Ideas •  Embedded NodeJS •  Using expressjs as Web Services For Desktop ApplicaZon. •  NodeJS code: –  hXps://github.com/racklin/xulapp-‐starterkit-‐addon-‐ nodejs •  Expressjs-‐demo sample code: –  hXps://github.com/racklin/xulapp-‐starterkit-‐addon-‐ expressjs-‐demo

Slide 32

Slide 32 text

NodeJS / ExpressJS

Slide 33

Slide 33 text

Thinking •  XULRunner For HTML5 Developers – Live-‐Update For Your HTML5 ApplicaZon – Using Add-‐ons to extends features . – IndexedDB ?? •  Mozilla Storage Interface – Embedded Libraries •  Any Files Live Updatable

Slide 34

Slide 34 text

Reuse of Add-‐ons •  Reuse Add-‐ons – addons.mozilla.org – There are 12,995 add-‐ons for FireFox 18.

Slide 35

Slide 35 text

Thank You Coding For Fun

Slide 36

Slide 36 text

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