27
Разработка кросс- платформенных десктоп приложений на базе nw.js Кирилл Данилов [email protected]

Secr15 разработка кросс платформенных десктоп приложений nw.js

Embed Size (px)

Citation preview

Page 1: Secr15 разработка кросс платформенных десктоп приложений nw.js

Разработка кросс-платформенных десктоп

приложений на базе nw.js

Кирилл Данилов [email protected]

Page 2: Secr15 разработка кросс платформенных десктоп приложений nw.js

Команда профессионалов web-разработчиков

2

Page 3: Secr15 разработка кросс платформенных десктоп приложений nw.js

Давайте сделаем !@#$%^&

3

Page 4: Secr15 разработка кросс платформенных десктоп приложений nw.js

Сейчас это не возможно сделать в браузере

4

Page 5: Secr15 разработка кросс платформенных десктоп приложений nw.js

1. Mono, Unity3D - C#, .Net2. Flash/Flex/AIR - actionscript3. Browser Extensions - js4. Qt/Gtk - C/C++, js, python, php, bash5. tidesdk.org - js, python, php, ruby6. appjs.com -js7. Brackets Shell - js

5

Возможные варианты решения

Page 6: Secr15 разработка кросс платформенных десктоп приложений nw.js

Мы пишем на node.js для chrome, будем использовать nw.js

6

Page 7: Secr15 разработка кросс платформенных десктоп приложений nw.js

Кирилл ДаниловРазработчик продуктов полного цикла, имеет большой опыт разработки мобильных приложений под разные платформы. Поклонник хакатон движения, открытых вэб технологий и носимой техники. Докладчик на ИТ конференциях и митапах. Ранее евангелист платформ Tizen и Android в Samsung [email protected]/broderixtwitter.com/broderixgoogle.com/+KirillDanilov

7

Page 8: Secr15 разработка кросс платформенных десктоп приложений nw.js

Что такое nw.js<html> <body> <h1>Content</h1> </body></html>

nw.js

8

Page 9: Secr15 разработка кросс платформенных десктоп приложений nw.js

node-webkitio.js-

chromium

nw.js

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

9

Page 10: Secr15 разработка кросс платформенных десктоп приложений nw.js

$ npm install -g nw$ nw .

$ npm install -g \generator-node-webkit$ yo node-webkit

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

10

Page 11: Secr15 разработка кросс платформенных десктоп приложений nw.js

Обзор APIWindowMenuTrayShellSnapshotsHTML5 Stack: Notifications W3C, Audio, WebGL,

etcPlatform specific: setBadge, requestAttention, Tile

11

Page 12: Secr15 разработка кросс платформенных десктоп приложений nw.js

Window Object

Render Thread

console document

alert ...

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

12

require process

global ...

Page 13: Secr15 разработка кросс платформенных десктоп приложений nw.js

13

Контекст

Page 14: Secr15 разработка кросс платформенных десктоп приложений nw.js

Получаем доступ из io.js в chromium // In index.html<script> global.foo = function(){ console.log('Hello, moscowjs'); }; global.label = {text: 'label'}; require('mymodule.js');</script>

// In mymodule.jsglobal.foo();label.text = 'Hello, nw.js';

14

Page 15: Secr15 разработка кросс платформенных десктоп приложений nw.js

Сборкаnpm install grunt-nw-buildergrunt build

npm install appdmg grunt-appdmggrunt appdmg

www.jrsoftware.org/isinfo.php

osx

windows

15

Page 16: Secr15 разработка кросс платформенных десктоп приложений nw.js

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

● проверит версию● скачает архив (js, html, css, img) ● распакует архив● сообщит о результатах

или скачайте exe/dmg и запустите через spawn/exec

npm install nw-updater

16

Page 17: Secr15 разработка кросс платформенных десктоп приложений nw.js

Публикация приложения

17https://www.globalsign.com/en/code-signing-certificate/

Page 18: Secr15 разработка кросс платформенных десктоп приложений nw.js

Публикация приложения

18https://github.com/nwjs/nw.js/wiki/Mac-App-Store-(MAS)-Submission-Guideline

Page 19: Secr15 разработка кросс платформенных десктоп приложений nw.js

Подпись приложения в osx$ security -q find-identity -p codesigning -v 1) B1A396F087E99938437F781R9F0DA238971D4D7A "Developer ID Application: CORP INC (MYIDENTITY)"

$ codesign -d --deep-verify -v -v -v --force --verify --verbose --sign "Corp Inc" Your.app

$ spctl -a -t exec -vv Your.appYour.app: acceptedorigin=Developer ID Application: CORP INC (MYIDENTITY)

19

Page 20: Secr15 разработка кросс платформенных десктоп приложений nw.js

Где использовать?обертка сайтапростые игрыхранение больших данныхфоновые процессыежедневные операции

20

Page 21: Secr15 разработка кросс платформенных десктоп приложений nw.js

Кто использует nw.js1.Popcorn Time2.Intel® XDK3.DebugGap4.Tinder++5.Mongo Management Studio6.etc.

21

Page 22: Secr15 разработка кросс платформенных десктоп приложений nw.js

22

Page 23: Secr15 разработка кросс платформенных десктоп приложений nw.js

23

Секундочку...

Page 24: Secr15 разработка кросс платформенных десктоп приложений nw.js

24http://electron.atom.io/

Page 25: Secr15 разработка кросс платформенных десктоп приложений nw.js

25

Page 26: Secr15 разработка кросс платформенных десктоп приложений nw.js

electron.js vs nw.js

26http://tangiblejs.com/posts/nw-js-electron-compared

nw.js 0.12.3 electron.js 0.31.1

Browser runtime Chromium libchromiumcontent

Layout Engine Blink/Webkit537 Webkit537

Chrome version 41 44

Entry point html/javascript javascript

Chrome App/Api support Yes No

Windows Apps Store/XP Yes No

Mac App Store Yes It’s complicated

Page 27: Secr15 разработка кросс платформенных десктоп приложений nw.js

СпасибоВопросы?

Кирилл Данилов[email protected] facebook.com/broderix

twitter.com/broderix google.com/+KirillDanilov