Upgrade to Pro — share decks privately, control downloads, hide ads and more …

node-webkit: app runtime based on Chromium and node.js

Cheng Zhao
September 15, 2012

node-webkit: app runtime based on Chromium and node.js

node-webkit is a web runtime based on Chromium and node.js. It lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies.

It's created and developed in Intel Open Source Technology Center.

Cheng Zhao

September 15, 2012
Tweet

More Decks by Cheng Zhao

Other Decks in Programming

Transcript

  1. node-webkit  
    app  runtime  based  on  Chromium  and  node.js  
    赵成  /  ZHAO  CHENG  
    [email protected]
    https://github.com/zcbenz  
    Get  node-webkit  at    https://github.com/rogerwang/node-webkit  

    View Slide

  2. CONTENT  
    !   What  is  node-webkit  
    !   Use  cases  
    !   Quick  start  
    !   Implementation  details  
    !   Q&A  

    View Slide

  3. WHAT  IS  NODE-WEBKIT  
    It’s  a  web  app  runtime  
    node-webkit  


       Title  


       Content  


    View Slide

  4. WHAT  IS  NODE-WEBKIT  
    It  integrates  node.js  functions  into  WebKit  


       App  


         <br/>        var  fs  =  require(‘fs’);  <br/>        fs.readdir(…,  function(…)  {  <br/>            for  (var  i  in  files)  {  <br/>                document.write(files[i]);  <br/>            }  <br/>        });  <br/></body>  <br/></html>  <br/>run  <br/>

    View Slide

  5. WHAT  IS  NODE-WEBKIT  
    node.js  functions  live  in  the  renderer  thread  
    require  
    Render  Thread  
    Window  Object  
    process  
    global   …  
    document  
    console  
    frames   …  

    View Slide

  6. WHAT  IS  NODE-WEBKIT  
    It  runs  on  OS  X,  Windows  and  Linux  

    View Slide

  7. WHAT  IS  NODE-WEBKIT  
    It  is  easy  for  packaging  and  distribution  
    HTML/JS  Files  
    Resources  
    App  Datas  
    ……  
    App.nw  

    node-webkit  

    Standalone  Executable  
    Your  App  
    cat  nw  app  >  app  

    compress  
    github.com/rogerwang/node-webkit  

    download  

    View Slide

  8. WHAT  IS  NODE-WEBKIT  
    It  supports  node.js  third  party  modules  
    Node.js  Native  Modules  
    net   crypto   fs   ……  
    DOM  
    window   document   ……  
    Jade   …   jQuery   …  
    bootstrap  
    Node.js  Third-party  Modules  
    Dojo  
    Web  Libraries  &  Frameworks  
    node-webkit  apps  
    underscore  

    View Slide

  9. WHAT  IS  NODE-WEBKIT  
    Background  
    !   node-webkit  is  based  on  Chromium  and  node.js.  
    !   It  is  created  and  developed  at  Intel.  
    !   It  is  open-sourced  at  github  on  Dec’7  2011,  now  we  
    have  419  followers  and  14  Wiki  pages.  
    !   Get  it  at:  
    https://github.com/rogerwang/node-webkit  
    !   We  provided  prebuilt  binaries  to  ease  development,  it  
    has  about  500  downloads  per  month.  

    View Slide

  10. USE  CASES  
    Distribution  platform  for  HTML5  games  
    !   node-webkit  supports  most  HTML5  features  
    !   node-webkit  is  GPU  accelerated  
    !   Video  and  audio  support  
    !   HTML5  game  frameworks/libraries  like  cocos2d-html5  
    work  out  of  box  on  node-webkit  

    View Slide

  11. USE  CASES  
    Real  case:  a  HTML5  game  for  children,  written  by  
    @haxpor  and  @suebphatt  

    View Slide

  12. USE  CASES  
    File  explorer  &  file  editor  
    !   You  can  choose  node’s  fs  module  or  HTML5  file  API  
    !   You  can  invoke  file  select  dialogs  in  javascript  
    !   Direct  dragging  files  into  browser  is  supported  
    !   File  explorer  demo  
    https://github.com/zcbenz/nw-file-explorer  
    !   And  brackets,  a  file  editor  written  in  pure  HTML  and  
    Javascript,  is  also  ported  to  node-webkit  
    https://github.com/zcbenz/brackets  

    View Slide

  13. USE  CASES  
    Media  applications  
    ! getUserMedia  is  supported  in  node-webkit  
    !   Audio  recording  and  camera  capturing  is  enabled  
    http://neave.com/webcam/html5/  
    !    and    tag  is  supported,  can  play  ogg  
    and  webm  formats  

    View Slide

  14. QUICK  START  
    Structure  of  an  app  
    App  
    |--  package.json  
    |--  index.html  
    |--  js/  
    |        `--  …  
    |--  css/  
    |        `--  …  
    |--  resources/  
    |        `--  …  
    `--  node_modules/  
             `--  …  
    Describes  package  information    
    App  HTML/CSS/JS  files  
    Node.js  moduels  

    View Slide

  15. QUICK  START  
    package.json  
    {  
       “name”:  “nw-demo”,  
       “window”  :  {  
           “width”:  800,  
           “height”:  600,  
           “toolbar”  :  false  
           },  
       “main”  :  “index.html”  
    }  
           “name”  specifies  app’s  
    configuration  directory’s  name.  
    On  Linux  app  data  will  be  stored  
    in  ‘~/.config/nw-demo’,  on  
    Mac  OS  X  it  is  ‘~/Library/
    Application  Support’  
           “main”  specifies  initial  
    page  showed  to  user  
           “window”  specifies  the  
    startup  window’s  features.  
           “width”  and  “height”  
    define  window’s  size.  
           “toolbar”  defines  whether  to  
    show  the  window’s  toolbar.  
           “position”  defines  
    window’s  initial  position.  

    View Slide

  16. QUICK  START  
    Install  node.js  modules  
    App  
    |--  …  
    `--  node_modules/  
             `--  Jade  
    #  You  can  freely  install  node.js  modules  via  npm  

    $  cd  /path/to/your/app  
    $  npm  install  jade    

    View Slide

  17. QUICK  START  
    Write  the  app  
    Show  Root  Files  
     <br/>var  generate  =  require('jade').compile([  <br/>        '-  each  file  in  files',  <br/>        '    .file  #{file}',  <br/>].join('\n'));  <br/>require('fs').readdir('/',  function(err,  files)  {  <br/>    if  (err)  <br/>        document.write(err);  <br/>    else  <br/>        document.write(generate({    <br/>              'files':  files    <br/>        });  <br/>});  

    View Slide

  18. QUICK  START  
    Package  and  run  it    
    #  Compress  app  to  a  zip  archive  
    $  zip  -r  app.zip  /path/to/your/app/*  
    #  Then  you  can  run  it  with  nw  
    $  nw  ./app.zip  
    #  On  Linux  
    $  cat  /path/to/nw  ./app.zip  >  app  
    #  On  Windows  
    $  copy  /b  nw.exe+app.nw  app.exe  
    Make  a  standalone  package  if  you  don’t    want  an  
    extra  install  of  node-webkit  on  user’s  computer  

    View Slide

  19. WANT  MORE  DETAILS?  
    !   How  to  run  apps  
    https://github.com/rogerwang/node-webkit/wiki/
    How-to-run-apps  
    !   How  to  package  and  distribute  your  apps  
    https://github.com/rogerwang/node-webkit/wiki/
    How-to-package-and-distribute-your-apps  
    !   Manifest  format  
    https://github.com/rogerwang/node-webkit/wiki/
    Manifest-format  
    !   And  even  more  on  our  Wiki!  
    https://github.com/rogerwang/node-webkit/wiki    

    View Slide

  20. IMPLEMENTATION  
    Merge  node.js  and  Chromium’s  message  loop  
    !   Chromium  uses  MessagePump*  family  to  support  its  
    internal  message  loop  
    ! node.js  uses  libuv  for  message  loop  
    !   node-webkit  implements  MessagePumpForUv  to  use  
    libuv  for  Chromium’s  message  loop  

    View Slide

  21. IMPLEMENTATION  
    Insert  node.js  symbols  into  WebKit  
    ! WebKit  initializes  javascript  context  only  on  demand  
    !   node  is  initialized  before  entering  message  loop  
    !   Node’s  symbols  is  transferred  into  WebKit’s  
    context  immediately  after  DOM  is  installed  

    View Slide

  22. IMPLEMENTATION  
    Downgrade  WebKit’s  security  level  
    !   Some  operations  in  javascript  are  disabled  for  non-
    user,  like  clicking  on    
    node-webkit  treats  all  script  operations  as  user  
    gesture  in  WebKit  
    !   Cross-orgin  access  in  request  and  js  call  are  both  
    disabled  in  WebKit  
    node-webkit  sets  all  pages’  security  token  as  the  
    same  one  with  node,  and  grant  global  access  for  local  
    pages  

    View Slide

  23. Questions?  
    赵成  /  ZHAO  CHENG  
    [email protected]
    https://github.com/zcbenz  

    View Slide