nw.js введение в кросс-платформенные десктопные...

16
nw.js [email protected] github.com/broderix введение в кросс-платформенные десктопные приложения на javascript (node-webkit)

Transcript of nw.js введение в кросс-платформенные десктопные...

Page 1: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

nw.js

[email protected] github.com/broderix

введение в кросс-платформенные десктопные приложения на javascript

(node-webkit)

Page 2: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Я хочу свой текстовый редактор!

2

Page 3: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Существующие решения

1. Mono, Unity3D - C#, .Net

2. Qt/Gtk - C/C++, js, python, php, bash

3. tidesdk.org - js, python, php, ruby

4. appjs.com -js

5. Brackets Shell - js

6.nw.js - js

3

Page 4: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Что такое nw.js

<html>

<body>

<h1>Content</h1>

</body>

</html>

nw.js

4

Page 5: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

node-webkit

История проекта

io.js-chromium

nw.js

5

Page 6: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Установка и запуск

$ npm install -g nw

$ nw .

$ npm install -g generator-node-webkit

$ yo node-webkit

6

Page 7: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Обзор 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)

8

Как работает nw.js

require

Window Object

Render Thread

process

global ...

console document

alert ...

Page 9: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Контекст

9

Page 10: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Получаем доступ из 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.js

global.foo();

label.text = 'Hello, nw.js';

Page 11: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Сборка

npm install grunt-node-webkit-builder

grunt build

npm install appdmg grunt-appdmg

grunt appdmg

www.jrsoftware.org/isinfo.php

osx

windows

11

Page 12: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Обновление приложения

● проверит версию

● скачает архив (js, html, css, img)

● распакует архив

● сообщит о результатах

npm install nw-updater

12

Page 13: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Пример

$ echo '

{

"name": "MoscowJS",

"main":

"http://moscowjs.ru",

"window": {

"show": true,

"toolbar": false

}

}' > package.json

$ nw .

13

Page 14: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Где использовать?

● обертка сайта

● простые игры

● хранение больших данных

● фоновые процессы

● ежедневные операции

14

Page 15: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Кто использует nw.js

1. Popcorn Time

2. Intel® XDK

3. DebugGap

4. Tinder++

5. Mongo Management Studio

6. etc.

15

Page 16: nw.js  введение в кросс-платформенные десктопные приложения на javascript (moscowjs 20)

Спасибо!

[email protected]

github.com/broderix

twitter.com/broderix

https://github.com/nwjs/nw.js