![Page 1: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/1.jpg)
1
NW.js: DOM Node.js
![Page 2: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/2.jpg)
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>
![Page 3: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/3.jpg)
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"
}
}
![Page 4: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/4.jpg)
4
NW.js (2): NW.js = Chromium + Node.js ● GUI API
• Shell
●
● chrome.* API Chrome App
●
● Content Verification:
● JS Web Worker
Node
![Page 5: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/5.jpg)
5
vs Web ●
●
●
●
●
●
![Page 6: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/6.jpg)
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;
![Page 7: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/7.jpg)
7
Anyapplica*onthatcanbewri2eninJavaScript,willeventuallybewri2enin
JavaScript.-JeffAtwood(2007)
NW JavaScript C/C++
![Page 8: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/8.jpg)
8
NW JavaScript C/C++ ● Node API
● Web
●
●
![Page 9: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/9.jpg)
9
NW
● JavaScript CPU
● nwjc
● NW
● Function.prototype.toString()
●
![Page 10: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/10.jpg)
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');
}
![Page 11: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/11.jpg)
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
![Page 12: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/12.jpg)
12
Content Verification -
● NW
●
● NW
1. /
2. NW
3.
4. NW
![Page 13: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/13.jpg)
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
![Page 14: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/14.jpg)
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
![Page 15: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/15.jpg)
15
![Page 16: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/16.jpg)
16
![Page 17: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/17.jpg)
17
![Page 18: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/18.jpg)
18
![Page 19: NW.js: ^ n DOM ¾Node.js 1 « U Ü W · 3 N òNW.js + app/ ├── nw.exe ... ├── js/ │ └── main.js ├── assets/ │ └── icon.png ├── styles/ │](https://reader034.vdocuments.mx/reader034/viewer/2022042301/5ecc8424b34a7d2ac153915e/html5/thumbnails/19.jpg)
19 https://nwjs.io