Desktop app based on node js and html5
1 like767 views
Документ представляет собой презентацию, посвященную разработке десктопных приложений на Node.js и HTML5, освещая преимущества и недостатки этой технологии. Рассматривается эволюция JavaScript и истории его применения, а также проводятся сравнения между различными фреймворками, такими как Electron и NW.js. В заключение подчеркивается выбор технологий в зависимости от функциональности и выразительность мнения о преимуществах Electron.
Desktop app based on node js and html5
- 1. Get treated to white glove service from a five-star innovator www.provectus.com A presentation of expertise we boast and services we render for partners across the board, around the globe. © Provectus, Inc.
- 2. Provectus PHP Java .NET Java Script Cloud Services iOS Android Ruby J2EE QA Provectus – международная R&D компания, предоставляющая полный комплекс услуг по разработке программного обеспечения для корпоративного сегмента, мобильных платформ и WEB по всему миру.
- 3. О спикере Ян Жабин • Web разработчик. Люблю программировать. www.provectus.com
- 4. Тема доклада Разработка Desktop приложений на Node.js и HTML5 • “Чoooo за дичь?”. Аргументы почему это имеет право на жизнь • Короткая история сабжа • Доступные технологии на сегодня. Как сделать правильный выбор? • API • Фатальные недостатки • Подводим итоги www.provectus.com
- 5. Реакция “тру” разработчиков на технологию www.provectus.com А как насчет серьезных и популярных GUI Frameworks? QT5, GTK+, WPF, Windows Forms и т.п.
- 6. Десктопные приложения на JavaScript Почему это имеет право на жизнь? www.provectus.com • Низкий порог вхождения. Ниже только дно • Скорость разработки • Кроссплатформенность (Windows, Mac, Linux и … Android, iOS?) • Дизайн приложения ограничен вашей фантазией. • Хорошая производительность • Возможность использовать нативные модули (nodegyp) • Примеры успешных приложений
- 7. Десктопные приложения на JavaScript www.provectus.com Slack Popcorn Time Visual Studio Code Atom Editor Web TorrentSimplenote KitematicNylas N1 Wire Avocode
- 8. Вечер “интересных” историй Круговорот JavaScript в природе www.provectus.com • 1995 г. - Брендан Эйх из Netscape написал клиентский язык LiveScript который для хайпа назвали JavaScript • 1996 г. - К сотрудникам Netscape приходит гениальная идея - попробовать вынести JavaScript на сервер (Server-side JavaScript — SSJS), но не взлетело. • 2002 - 2004 - Netscape умер! Да здравствует Netscape Mozilla Firefox • 2008 - Google создает…. • 1999 - Microsoft создает Internet Explorer 5 c возможностью сохранять и открывать страницы в формате веб-архива MHTML и …………
- 9. Вечер “интересных” историй Встречайте! HTA www.provectus.com HTML Application (HTA) - приложение Microsoft Windows, написанное на HTML или Dynamic HTML. Бизнес логика на JavaScript и VBScript (VisualBasic Script) Главная особенность - запуск безопасного (на 1999 год хм хм) приложения с повышенными привилегиями, как CRUD файлов в файловой системе и доступ к системному реестру.
- 10. Вечер “интересных” историй www.provectus.com <html> <head> <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="WMPTour" BORDER="thin" BORDERSTYLE="normal" CAPTION="no" maximizeButton="no" minimizeButton="no" ICON="img/wmptour.ico" SHOWINTASKBAR="no" SINGLEINSTANCE="yes" SYSMENU="yes" VERSION="1.0" WINDOWSTATE="maximize"> </head> <script language=“VBScript"> … </script> <body> Текст страницы HTA-документа. Для выхода нажмите «Alt»+«F4»! </body> </html>
- 11. Вечер “интересных” историй www.provectus.com • 1999 г. - HTA • 2008 г. - Google разработал JavaScript движок под названием V8 и включил его в свежеиспеченный браузер chromium. • 2009 г. - Ничто не ново под солнцем. В этом году Райан Дал таки запустил JavaScript (V8) на сервере и закончил дело начатое когда-то Netscape. Добавил API и обозвал свое поделие Node.js. • 1 ноября 2011 г. … Круговорот JavaScript в природе
- 12. Вечер “интересных” историй 1 ноября 2011 - родился Node Webkit www.provectus.com Roger Wang Жил был себе веселый китаец по имени Роджер и по фамилии Ванг. Работал себе Роджер тихонько в Интеловоском Центре Опен Сурсных Технологий и никого не трогал. Но однажды ему пришла идея …. А что если Node.js засунуть обратно в chromium …и завертелось
- 13. Вечер “интересных” историй …тем временем в Иране 1 апреля 2012 года www.provectus.com Morteza Milani из Тегерана Ali Farhadi из Mashhad Начали писать AppJS
- 14. Вечер “интересных” историй Aпрель 2013 в гонку вступает GitHub и создает AtomShell … ….а спустя 2 года в апреле 2015 переименовывает проект в Electron www.provectus.com P.S. Проект догнал NW.js за счет того, что первым поддержал IO.js
- 15. Вечер “интересных” историй Кто остался в живых к 2016? www.provectus.com NW.js (Node-Webkit) by Intel Electron.js by GitHub Умерли или в состоянии “при смерти” - appJS и Tint2
- 18. Сравнение Electron.js vs NW.js (1) www.provectus.com NW.js 0.17.3 Electron 1.4.0 Browser Runtime Chromium libchromiumcontent Node.js Version Node 6.5.0 6.5.0 Chromium Version 53.0.2785.116 53.0.2785.113 V8 5.3.332.45 5.3.332.45 Entry Point HTML or JavaScript (Chrome Apps) JavaScript Base Distribution Size 158MB (59MB zipped) 120MB (44MB zipped) Architecture Support 32bit (Win), 64bit (Win/Mac, Linux) & arm (limited) Windows XP Support - In LTS version (0.14.x) Windows 7+ (x86 and x64) Mac OS X.6 - In LTS version (0.14.x) Mac OS X.9 + Support of chrome.* APIs Yes No Plugin Support NaCL, Pepper (PPAPI) Pepper (PPAPI) Chrome Apps Support Yes No http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition
- 19. Сравнение Electron.js vs NW.js (1) www.provectus.com NW.js 0.17.2 Electron 1.3.5 App signing Yes Yes Source Code Protection V8 Snapshot ASAR Archive Support (V8 snapshot coming soon) Auto-update custom plugins? Mac/Win Yes Crash Reporting No Yes PDF Viewer Yes Using pdf.js SSL Client Certificate Yes Partial Print Preview Yes No DevTools Extension Support Yes Debugging DevTools + extensions Dedicated Devtron Module Building tools Yes Yes Open Codecs/Containers Vorbis, Theora, Opus, VP8, VP9, PCM, Ogg, WebM, WAV Licensed Codecs MP3, MP4, H.264, AAC Issue Resolution Time 7 days 1 day
- 20. Сравнение Electron.js vs NW.js www.provectus.com СКУЧНО!!!
- 21. Сравнение Electron.js vs NW.js На первый взгляд www.provectus.com NW.js Electron.js
- 22. Сравнение Electron.js vs NW.js Но не спешите с выводами! www.provectus.com ЗНАТОКИ! ВНИМАНИЕ ВОПРОС: В чем кроется причина такого различия?
- 23. Сравнение Electron.js vs NW.js ОТВЕТ www.provectus.com NW.js -> Chromium Electron.js -> libchromiumcontent libchromiumcontent - shared library. Chromium Content module и все зависимости (как например Blink, V8, …)
- 24. Сравнение Electron.js vs NW.js www.provectus.com • Точка входа - NW.js ближе к браузерному подходу, точка входа html файл. Electron.js ближе к nodejs - точка входа js файл. Загрузка html через API. • Сборка проекта - собрать весь chromium достаточно непросто. NW.js полностью склонировал chromium. Electron.js использует специальную библиотеку, позволяющую использовать только необходимые зависимости и подключать функционал в виде модулей. Быстрая сборка даже на средней машине. • NodeJS интеграция - NW.js вынужден постоянно патчить chromium. Electron нашел способ этого избежать по-своему подключив libuv loop. • Multi-context - NW.js имеет 2 типа JS контекста Browser Context и Node Context из за своей архитектуры (+web workers(browser) context). Electron - использует “нодовксий” multi-context Список ключевых отличий
- 25. NW.js www.provectus.com Немного о контексте NW.js запускается в режиме Chrome App c протоколом chrome-extension:// Browser Context - по сути API которое предоставляет браузер как если бы вы делали обычное web приложение в chrome. К этому контексту имеют доступ все скрипты которые подключаются в index.html (точка входа). Node Context - по сути API Node.js. Пример: > global === window > false NW.js при старте по умолчанию автоматически загружает невидимую бекграунд страницу и каждый модуль который вы подключаете через require() будет иметь Node Context. Некоторые обьекты из Node Context были скопированы в Browser Context. Но само Web Api не доступно из Node Context. Несмотря на все можно включить Mixed Context Mode.
- 26. Electron.js www.provectus.com Немного о контексте > global === window > true * В рамках одного процесса
- 29. API некоторые примеры для Electron www.provectus.com • Frameless Window - можно задавать размер окна(мин, макс), включать и выключать рамки. Изменять стиль titleBar под мак. Прозрачность (артефакты под мак и линукс) • Dialog - нативные диалоговые окна как открыть и сохранить файл, alert… • Tray - возможность поместить иконку приложения в трей с возможностью отображения меню по клику • Menu и MenuItem - Возможность создать главное и контекстное меню с вложенным меню • globalShortcut - можно управлять глобальными хоткеями. (осторожно) • clipboard - доступ к буферу обмена • shell - модуль для глубокой desktop интеграции. Можно например показать файл в папке, открыть ссылку, удалить файл в коризну или проиграть бип звук • crashReporter - отпрака отчетов о падениях приложения • autoUpdater - модуль для обновления вашего приложения (quitAndInstall)
- 31. API некоторые примеры для Electron www.provectus.com • Frameless Window - можно задавать размер окна(мин, макс), включать и выключать рамки. Изменять стиль titleBar под мак. Прозрачность (артефакты под мак и линукс) • Dialog - нативные диалоговые окна как открыть и сохранить файл, alert… • Tray - возможность поместить иконку приложения в трей с возможностью отображения меню по клику • Menu и MenuItem - Возможность создать главное и контекстное меню с вложенным меню • globalShortcut - можно управлять глобальными хоткеями. (осторожно) • clipboard - доступ к буферу обмена • shell - модуль для глубокой desktop интеграции. Можно например показать файл в папке, открыть ссылку, удалить файл в коризну или проиграть бип звук • crashReporter - отпрака отчетов о падениях приложения • autoUpdater - модуль для обновления вашего приложения (quitAndInstall)
- 33. Electron Быстрый старт ч.1 www.provectus.com # simple project structure your-app/ ── package.json ── main.js └── index.html # package.json { "name" : "your-app", "version" : "0.1.0", "main" : "main.js" } # Clone this repository $ git clone https://github.com/electron/electron-quick-start # Go into the repository $ cd electron-quick-start # Install dependencies and run the app $ npm install && npm start или
- 34. Electron Быстрый старт ч.2 www.provectus.com const {app, BrowserWindow} = require('electron') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(`file://${__dirname}/index.html`) // Emitted when the window is closed. win.on('closed', () => { win = null }) } app.on('ready', createWindow)
- 35. Electron Быстрый старт ч.3 www.provectus.com // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow() } })
- 36. Electron Быстрый старт ч.4 www.provectus.com $ electron . Запуск и сборка (к примеру electron-builder) "build": { "appId": "your.id", "category": "your.app.category.type", "win": { "iconUrl": "(windows-only) https link to icon" } } "scripts": { "pack": "build --dir", "dist": "build" }
- 37. Фатальные и не очень недостатки www.provectus.com • Размер имеет значение • Скорость запуска и выполнения • Темы оформления (windows live color themes, linux themes) • Баги на разных дистрибутивах linux • Не поддерживает MacOs Vibrance effect (blur) • Некоторые элементы дизайна не возможно правильно реализовать • Безопасность исходного кода • JavaScript (Node.js)
- 38. Фатальные и не очень недостатки www.provectus.com Пример1
- 39. Фатальные и не очень недостатки Пример 2 www.provectus.com
- 40. Итог Мое ИМХО www.provectus.com • Оба проэкта имеют право на жизнь • Выбирать в зависимости от нужной функциональности • Недостатки есть, но их не так много. • Преимущества превышают недостатки • Я бы выбрал electron.
- 42. Ян Жабин Skype: iyanello Email: [email protected] www.provectus.com Контакты