"nw.js: введение в кросс-платформенные декстопные...
TRANSCRIPT
![Page 1: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/1.jpg)
nw.js
[email protected] github.com/broderix
введение в кросс-платформенные десктопные приложения на javascript
(node-webkit)
![Page 2: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/2.jpg)
Я хочу свой текстовый редактор!
2
![Page 3: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/3.jpg)
Существующие решения
1. Mono, Unity3D - C#, .Net2. Qt/Gtk - C/C++, js, python, php, bash3. tidesdk.org - js, python, php, ruby4. appjs.com -js5. Brackets Shell - js6. nw.js - js
3
![Page 4: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/4.jpg)
Что такое nw.js
<html> <body> <h1>Content</h1> </body></html>
nw.js
4
![Page 5: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/5.jpg)
node-webkit
История проекта
io.js-chromium
nw.js
5
![Page 6: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/6.jpg)
Установка и запуск$ npm install -g nw$ nw .
$ npm install -g generator-node-webkit$ yo node-webkit
6
![Page 7: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/7.jpg)
Обзор API
● Window● Menu● Tray● Shell● Snapshots● HTML5 Stack: Notifications W3C, Audio, WebGL, etc● Platform specific: setBadge, requestAttention, Tile
7
![Page 8: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/8.jpg)
8
Как работает nw.js
require
Window Object
Render Thread
process
global ...
console document
alert ...
![Page 9: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/9.jpg)
Контекст
9
![Page 10: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/10.jpg)
Получаем доступ из io.js в chromium// In index.html<script> global.foo = function(){ console.log('Hello, moscowjs'); }; global.label = {text: 'label'}; require('mymodule.js');</script>
10
// In mymodule.jsglobal.foo();label.text = 'Hello, nw.js';
![Page 11: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/11.jpg)
Сборка
npm install grunt-node-webkit-buildergrunt build
npm install appdmg grunt-appdmggrunt appdmg
www.jrsoftware.org/isinfo.php
osx
windows
11
![Page 12: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/12.jpg)
Обновление приложения
● проверит версию● скачает архив (js, html, css, img) ● распакует архив● сообщит о результатах
npm install nw-updater
12
![Page 13: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/13.jpg)
Пример$ echo '{
"name": "MoscowJS","main": "http://moscowjs.ru","window": {
"show": true,"toolbar": false
}}' > package.json$ nw .
13
![Page 14: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/14.jpg)
Где использовать?
● обертка сайта● простые игры● хранение больших данных● фоновые процессы● ежедневные операции
14
![Page 15: "nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", Кирилл Данилов, MoscowJS 20](https://reader033.vdocuments.net/reader033/viewer/2022050818/55a77b1f1a28ab5f4e8b46e7/html5/thumbnails/15.jpg)
Кто использует nw.js
1. Popcorn Time2. Intel® XDK3. DebugGap4. Tinder++5. Mongo Management Studio6. etc.
15