nw.js: ^ n dom ¾node.js 1 « u Ü w · 3 n ònw.js + app/ ├── nw.exe ... ├── js/ │...
TRANSCRIPT
1
NW.js: DOM Node.js
2
NW.js DOM Node.js
<!DOCTYPE html> <title>Call all Node modules directly from DOM</title> <script> var fs = require(‘fs’); fs.open(.... </script>
3
NW.js app/
├──nw.exe...
├──js/
│└──main.js
├──assets/
│└──icon.png
├──styles/
│└──common.css
├──views/
│└──main.html
└──package.json
package.json:
{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}
4
NW.js (2): NW.js = Chromium + Node.js ● GUI API
• Shell
●
● chrome.* API Chrome App
●
● Content Verification:
● JS Web Worker
Node
5
vs Web ●
●
●
●
●
●
6
NW
● API (Node.js, nw.*, chrome.*)
●
● JS • File Input
• ( File Input click )
•
•
•
• …...
varf=newFile('/path/to/file','name');
varfiles=newFileList();
files.append(f);
document.getElementById('input0').files=files;
7
Anyapplica*onthatcanbewri2eninJavaScript,willeventuallybewri2enin
JavaScript.-JeffAtwood(2007)
NW JavaScript C/C++
8
NW JavaScript C/C++ ● Node API
● Web
●
●
9
NW
● JavaScript CPU
● nwjc
● NW
● Function.prototype.toString()
●
10
NW - Web Worker Web Worker:
varmyWorker=newWorker("worker.js");
Worker.js: onmessage=function(e){
console.log('Messagereceivedfrommainscript');
varworkerResult='Result:'+(e.data[0]*e.data[1]);
console.log('Postingmessagebacktomainscript');
postMessage(workerResult);
}
main.js: myWorker.onmessage=function(e){
result.textContent=e.data;
console.log('Messagereceivedfromworker');
}
11
NW - structured clone algorithm All primitive types Boolean object String object Date RegExp Blob File FileList ArrayBuffer ArrayBufferView ImageData
Array Object (plain objects) Map Set
12
Content Verification -
● NW
●
● NW
1. /
2. NW
3.
4. NW
13
Web
●
●
● JavaScript • NW 0.20 beta - Chromium 56: CSS position: sticky; Web Bluetooth; WebAssembly
• NW 0.19 - Chromium 55: async/await; 35%
• NW 0.18 - Chromium 54: Custom Elements V1, BroadcastChannel, WebUSB
• NW 0.17 - Chromium 53: Shadow DOM V1
14
NW.js
● 2011 : node-webkit
● 2015 1 : NW.js • 2013 : Google Blink (WebKit fork)
• 2014 : IO.js (Node.js fork)
• 2015 : IO.js Node.js
● 2016 3 0.13 • -
● Chromium/Node 1-2
15
16
17
18
19 https://nwjs.io