Tweet
Tweet

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