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

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

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

WHAT IS NODE-WEBKIT It’s a web app runtime
node-webkit <html> <head> <title>Title</title> </head> <body> <div>Content</div> </body> </html>

WHAT IS NODE-WEBKIT It integrates node.js functions into WebKit
<html> <head> <title>App</title> </head> <body> <script> var fs = require(‘fs’); fs.readdir(…, function(…) { for (var i in files) { document.write(files[i]); } }); </body> </html> run

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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

IMPLEMENTATION Downgrade WebKit’s security level !   Some
operations in javascript are disabled for non- user, like clicking on <input type=‘file’> 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

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

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

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

Cheng Zhao

More Decks by Cheng Zhao

Other Decks in Programming

Featured

Transcript

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

CONTENT !   What is node-webkit !

WHAT IS NODE-WEBKIT It’s a web app runtime

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

WHAT IS NODE-WEBKIT node.js functions live in the renderer

WHAT IS NODE-WEBKIT It runs on OS X, Windows

WHAT IS NODE-WEBKIT It is easy for packaging and

WHAT IS NODE-WEBKIT It supports node.js third party modules

WHAT IS NODE-WEBKIT Background !   node-webkit is

USE CASES Distribution platform for HTML5 games !

USE CASES Real case: a HTML5 game for children,

USE CASES File explorer & file editor !

USE CASES Media applications ! getUserMedia is supported

QUICK START Structure of an app App

QUICK START package.json { “name”: “nw-demo”,

QUICK START Install node.js modules App |--

QUICK START Write the app <html><head><title>Show Root Files</title></head>

QUICK START Package and run it #

WANT MORE DETAILS? !   How to run apps

IMPLEMENTATION Merge node.js and Chromium’s message loop !

IMPLEMENTATION Insert node.js symbols into WebKit ! WebKit

IMPLEMENTATION Downgrade WebKit’s security level !   Some

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