1 of 54

Electron

Разработка Desktop-приложений, используя HTML, CSS и JavaScript

2 of 54

Привет!

Меня зовут Дима Васин

Я - Ruby on Rails разработчик в компании Anadea.inc

Мой твиттер: @DmytroVasin

3 of 54

Для кого этот доклад?

Люди, заинтересованные в Electron
Кто хочет сделать Desktop приложение
Энтузиасты JavaScript

Кто слышал или работал с Electron?

1

4 of 54

Что мы будем обсуждать?

Что такое Electron
Возможности и ограничения при разработке
Как работает Electron
Плюсы и минусы
Известные проблемы
Вывод

2

5 of 54

Что такое Electron:

Кроссплатформенный

Совместимый с Mac, Windows и Linux, электронные приложения создаются и работают на трех платформах.

Открытый

Electron - проект с открытым исходным кодом, поддерживаемый GitHub и сообществом

Современный

Electron использует Chromium и Node.js, поэтому вы можете создавать свое приложение при помощи HTML, CSS и JavaScript.

3

6 of 54

#

Electron приложения:

4

7 of 54

Почему десктоп?

Работа в Offline
Доступ к файловой системе
Расширенные возможности ( Принтера, USB, ... )
Возможность работать с Tray, Toolbar, Меню )
SaaS приложения
Более привычный для пользователей ( Basecamp )

5

Давайте разберемся - Зачем нам нужны десктопные приложения -

Во первых это офлайн - десктоп приложения подразумевают возможность работы без интернета

Взаимодействие с файловой системой или различными девайсами, принтерами, которые подключаются через USB

Такие приложения предоставляют возможность работать с нативными элементами такими как Трей, Меню или Dock menu самого приложения

Вы можете предоставлять свой продукт как Сервис - который вы создаете и отдаете бинарник вашему заказчик без деплоев, доменов и тд.

Да и вообще пользователю комфортно пользоваться такими приложениями - вот например BASECAMP сделал Десктоп версию своего приложения - 7% пользователей стали ее использовать

8 of 54

Что мы можем сделать:

Приложения по работе с файлами
Скрытые приложения ( Tray )*
Приложения для менеджмента (Time, Tracker, Pomodoro)
Аудио/Видео проигрыватели ( Player, Dropbox)
Емейл клиенты
Социальные чаты ( API )
Календарь
Любые/Специфичные идеи

6

9 of 54

Что мы можем сделать:

Приложения по работе с файлами
Скрытые приложения ( Tray )*
Приложения для менеджмента (Time, Tracker, Pomodoro)
Аудио/Видео проигрыватели ( Player, Dropbox)
Емейл клиенты
Социальные чаты ( API )
Календарь
Любые/Специфичные идеи

7

10 of 54

Что мы можем сделать:

Приложения по работе с файлами
Скрытые приложения ( Tray )*
Приложения для менеджмента (Time, Tracker, Pomodoro)
Аудио/Видео проигрыватели ( Player, Dropbox)
Емейл клиенты
Социальные чаты ( API )
Календарь
Любые/Специфичные идеи

8

11 of 54

Ограничения:

Старые операционные системы:

macOS 10.9+
Windows 7+
Ubuntu 12.04+

Apps that use native a lot
Когда место на диске ограничено
Браузеры
Web всегда лучше!

9

Когда вы работаете с Электрон - вы должны понимать что у него есть ограничения по платформам -

При помощи этой библиотеки - вы можете создать ( сбилдить ) приложение под Windows 7 и выше

Не стоит делать браузеры на основе электрон

И Электрон не ваш выбор - если вы ограничены по памяти компьютера - странно будет если color-picker будет весить 100+ метров.

И всегда стоит помнить что Web- лучше если вы можете написать приложение в Web - то лучше это делать в WEB.

-------------

Browser like:

Например, если у вас есть страница с двумя веб-просмотрами, у вас будет 3 процесса рендеринга

12 of 54

Компоненты Electron:

10

13 of 54

Принцип работы:

Процесс рендеринга (Renderer):

отвечает за запуск пользовательского интерфейса вашего приложения

Node-like (No UI)
LifeCycle приложения ( open/close )
Взаимодействие с OS
Создание процессов рендеринга

Основной процесс (Main):

отвечает за создание и управление окнами и различными событиями приложения (lifecycle).

BrowserWindow (UI)
Любое кол-во окон
Скрытые окна

Два типа процессов:

11

Электрон состоит из двух видов процессов: Main, Renderer

Main - это процесс который как-бы скрыт ( Node-like ), Он отвечает за жизненный цикл приложения ( его открытие и закрытие ),

За интеграцию с OS, и ответственный за создание Renderer процессов.

Renderer процесс - Это и есть браузерное окно в вашем приложении ( Ваш UI )

Этих процессов может быть несколько - и они полностью независимые

-------------

Взаимодействует с OS. ( Под этим понятием скрывается интеграция c док на OS X или панель задач на Windows, а также сворачивание в трей, полноэкранный режим и прочие обыденные и нативные для ОС штуки )

14 of 54

Принцип работы:

12

15 of 54

Принцип работы:

13

16 of 54

Выглядит очень знакомо

Основной процесс

Процессы рендеринга:

14

17 of 54

Вопрос:

Как они общаются друг с другом?

15

18 of 54

IPC

Главный процесс

Процесс рендеринга

BrowserWindow

Процесс рендеринга

BrowserWindow

IPC:

16

19 of 54

IPC Реализация:

17

20 of 54

Уже установлено: NPM & Node

mkdir demo && cd demo
npm init
npm install electron --save-dev
touch main.js index.html

Первое приложение:

HELLO, WORLD!

18

21 of 54

Первое приложение: “index.html”

19

22 of 54

Первое приложение: “package.json”

20

23 of 54

Первое приложение: “main.js”

21

24 of 54

Place your screenshot here

22

25 of 54

Запуск:

> electron .

23

26 of 54

24

27 of 54

Параметры “Browser Window”:

25

28 of 54

Параметры “Browser Window”:

1

26

29 of 54

Параметры “Browser Window”:

1

27

30 of 54

Упаковка приложения:

electron-builder:

npm install electron-builder --save

--mac, -m	Build for macOS
--win, -w, --windows	Build for Windows
--linux, -l	Build for Linux

28

31 of 54

Установка приложения: Mac

29

32 of 54

Установка приложения: Windows

30

33 of 54

Автоматические обновления:

31

После того как мы его создали билд - нам нужна возможность внести какие-то коррективы:

Для этого нам поможет “electron-updater”

Но сначала нам надо выбрать Release Server, c которого Electron-updater будет скачивать ваш последний билд и спрашивать как версия билда является последней.

Очень удобный интерфейс имеет Github. В качестве release-сервера для своего приложения вы можете выбрать GITHUB ( для продакшена это конечно не вариант - но для домашнего вполне подойдет )

Вы создаете билд - делаете публикацию на Github Releases и подключаете автоапдейтер

Автоапдейтер при открытии вашего приложение обращается к Github Releases и спрашивает - если ли новая версия приложения

Если есть то вызывает событие - “update-available”

34 of 54

Автоматические обновления:

32

35 of 54

Отчеты и сбор данных:

SegFault
Ошибки RunTime
Телеметрия

Кол-во установок/скачиваний
Активность пользователей
Отчеты
Установленные версии
Отслеживание ( Sentry )

33

36 of 54

Хранение данных: FileSystem

Нужно ли мне это?

Настройки
Позиция окон
Токены
I18n
Возможность закодировать

34

37 of 54

Хранение данных: Key-Value

Встроенное решение:

IndexedDB
LocalStorage

35

38 of 54

Хранение данных: Реляционная БД

SQLite:

Нет зависимостей
Простая, быстрая
ORM: "Sequelize"

Реляционная БД:

Комплексные запросы
Полнотекстовый поиск
Миллионы записей

36

39 of 54

Плюсы Electron приложений!

Работа с Web:

HTML,CSS,JS - Web как UI (20 years *)
Только Chrome. Safari, IE
Chrome Devtools*
Скорость разработки
Действительно кроссплатформенная разработка*
Современный стек (React, Flow, ES7 )
Последние фичи браузеров

37

давайте взглянем на плюсы и минусы:

WEB - лучший стек для построения интерфейсов. ( QT + QML )
Chrome Devtools подключается буквально одной строчкой и у вас есть вся мощь Chrome!!!
Скорость разработки новых фич: Sublime atom next - pair programming releases count
Вы можете использовать любой стек технологий какой вы захотите

CROSS_PLATFORM: Как правило, настольные приложения для каждой операционной системы записываются на родном языке. Это может означать, что есть три команды которые пишут три версии вашего приложения. И в конкретный момент у вас будет три разных приложения. Electron позволяет вам писать приложение один раз под все платформы

40 of 54

Плюсы Electron приложений!

Работа с Web:

HTML,CSS,JS - Web как UI (20 years *)
Только Chrome. Safari, IE
Chrome Devtools*
Скорость разработки
Действительно кроссплатформенная разработка*
Современный стек (React, Flow, ES7 )
Последние фичи браузеров

38

41 of 54

Плюсы Electron приложений!

Работа с Web:

HTML,CSS,JS - Web как UI (20 years *)
Только Chrome. Safari, IE
Chrome Devtools*
Скорость разработки
Действительно кроссплатформенная разработка*
Современный стек (React, Flow, ES7 )
Последние фичи браузеров

39

42 of 54

Плюсы Electron приложений!

40

43 of 54

Плюсы Electron приложений!

Node:

NPM ( 300k + )
Нативные модули (Slack)
N-API ( Node.js 10 )

Работа с Web:

HTML,CSS,JS - Web как UI (20 years *)
Только Chrome. Safari, IE
Chrome Devtools*
Скорость разработки
Действительно кроссплатформенная разработка*
Современный стек (React, Flow, ES8 )
Последние фичи браузеров ( GRID, WebRTC )

41

44 of 54

Плюсы Electron приложений!

Обьщее:

JS + сообщество
Стоимость разработки
Бесплатно!
Не требует знаний C++, Swift

Node:

NPM ( 300k + )
Нативные модули
N-API ( Node.js 10 )

Работа с Web:

HTML,CSS,JS - Web как UI (20 years *)
Только Chrome. Safari, IE
Chrome Devtools*
Скорость разработки
Действительно кроссплатформенная разработка*
Современный стек (React, Flow, ES8 )
Последние фичи браузеров ( GRID, WebRTC )

42

45 of 54

Звучит как магия?

43

46 of 54

Известные проблемы:

Компромиссы:

Node + Chrome ( 20 миллионов строк кода )

...

Вес проекта ( 100mb )
Время старта

44

Чем нам придется платить за такой комфорт.

Из за того, что мы используем Node + Chrome который в себе содержит 20 миллионов строк кода мы в довесок получаем такого монстра.

Что даже простой Hello World будет весить очень много:

Эта проблема скажется на времени старта самого приложения и говорят что время старта может достигать 5ти секунд - но я это не замечал и не слышал уж очень плохих отзывов об этом.

Так как вы используете хром - то создав очень много Renderer - процессов - вы можете созжрать всю память на компьютере у пользователя.

Autoupdater - не работает под Линукс

Следует помнить будете каждый раз скачивать все 100+ метров при каждом апдейте.

Packager - Версий много - будет много проблем ( 50 линукс дистрибутивов )

--------------

Этот код существует как на диске, так и в памяти:

при запуске приложения Electron он должен загружать эти библиотеки в ОЗУ.
Electron приложения отдельно упакованы, каждое приложение загружает отдельную копию библиотек (даже если библиотеки имеют точно такую же версию, операционная система этого не знает).

Каждое обновление также поставляется с Chromium, Node и всеми другими компонентами Electron, если обновление не предназначено как дельта или дифференциальное обновление.

Выпуск апдейта: Класс студентов тестирует программное обеспечение, а обновление составляет 70 МБ. 30 человек начинают свои компьютеры и получают обновленную информацию. Они загружают обновление одновременно, в результате чего получается 2,1 ГБ.

Source Code Security - minify, uglify, ASAR. Идея состоит в том, что любой вид встроенной защиты можно обойти в любом случае (это правда) и просто украсть ресурсы из более важных областей (что верно).

47 of 54

Известные проблемы:

Компромиссы:

Node + Chrome ( 20kkk строк кода )

...

Вес проекта ( 100mb )
Время старта

45

Чем нам придется платить за такой комфорт.

Из за того, что мы используем Node + Chrome который в себе содержит 20 миллионов строк кода мы в довесок получаем такого монстра.

Что даже простой Hello World будет весить очень много:

Эта проблема скажется на времени старта самого приложения и говорят что время старта может достигать 5ти секунд - но я это не замечал и не слышал уж очень плохих отзывов об этом.

Так как вы используете хром - то создав очень много Renderer - процессов - вы можете созжрать всю память на компьютере у пользователя.

Autoupdater - не работает под Линукс

Следует помнить будете каждый раз скачивать все 100+ метров при каждом апдейте.

Packager - Версий много - будет много проблем ( 50 линукс дистрибутивов )

--------------

Этот код существует как на диске, так и в памяти:

при запуске приложения Electron он должен загружать эти библиотеки в ОЗУ.
Electron приложения отдельно упакованы, каждое приложение загружает отдельную копию библиотек (даже если библиотеки имеют точно такую же версию, операционная система этого не знает).

Каждое обновление также поставляется с Chromium, Node и всеми другими компонентами Electron, если обновление не предназначено как дельта или дифференциальное обновление.

Выпуск апдейта: Класс студентов тестирует программное обеспечение, а обновление составляет 70 МБ. 30 человек начинают свои компьютеры и получают обновленную информацию. Они загружают обновление одновременно, в результате чего получается 2,1 ГБ.

Source Code Security - minify, uglify, ASAR. Идея состоит в том, что любой вид встроенной защиты можно обойти в любом случае (это правда) и просто украсть ресурсы из более важных областей (что верно).

48 of 54

Известные проблемы:

Компромиссы:

Node + Chrome ( 20 миллионов строк кода )

Процессы рендеринга создают треды ( съедим всю память )
Не все платформы имеют одинаковые возможности (Tray)
Autoupdater для Linux платформы
Создание билдов для 50+ платформ

Вес проекта ( 100mb )
Время старта

46

Чем нам придется платить за такой комфорт.

Из за того, что мы используем Node + Chrome который в себе содержит 20 миллионов строк кода мы в довесок получаем такого монстра.

Что даже простой Hello World будет весить очень много:

Эта проблема скажется на времени старта самого приложения и говорят что время старта может достигать 5ти секунд - но я это не замечал и не слышал уж очень плохих отзывов об этом.

Так как вы используете хром - то создав очень много Renderer - процессов - вы можете созжрать всю память на компьютере у пользователя.

Autoupdater - не работает под Линукс

Packager - Версий много - будет много проблем ( 50 линукс дистрибутивов )

--------------

Этот код существует как на диске, так и в памяти:

при запуске приложения Electron он должен загружать эти библиотеки в ОЗУ.
Electron приложения отдельно упакованы, каждое приложение загружает отдельную копию библиотек (даже если библиотеки имеют точно такую же версию, операционная система этого не знает).

Каждое обновление также поставляется с Chromium, Node и всеми другими компонентами Electron, если обновление не предназначено как дельта или дифференциальное обновление.

Выпуск апдейта: Класс студентов тестирует программное обеспечение, а обновление составляет 70 МБ. 30 человек начинают свои компьютеры и получают обновленную информацию. Они загружают обновление одновременно, в результате чего получается 2,1 ГБ.

Source Code Security - minify, uglify, ASAR. Идея состоит в том, что любой вид встроенной защиты можно обойти в любом случае (это правда) и просто украсть ресурсы из более важных областей (что верно).

49 of 54

Это все проблемы Electron?

Плохой код
Блокирование цикла событий (Event Loop)
Выносите вычисления в другой поток
Блокировка основного потока
Профилирование кода ( Chrome Devtools )
Непрерывное развертывание
Обновление страницы

47

50 of 54

Разработка должна быть интересной

Прототипирование должно быть быстрым

Инструмент должен решить проблему

Как вывод хотелось бы сказать что НЕ НАДО быть супер скиловым C++ Что бы СЕЙЧАС писать под Десктоп, - 95% задач с которыми вы столкнетесь вы сможете решить обладая только JS знаниям

Електрон идеально подходит для создания MVP

Если вы можете создать сайты - вы можете создать нативное десктоп приложение, a Electron вам в этом поможет.

Он поможет сосредоточится только на бизнес логике проекта.

Самое главное что вы уже сейчас сможете реализовывать свои идеи.

51 of 54

Полезные ресурсы:

https://egghead.io/courses/build-a-desktop-application-with-electron

https://github.com/sindresorhus/awesome-electron

https://electronjs.org/docs

https://hackernoon.com/electron-the-bad-parts-2b710c491547

https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md

http://photonkit.com/components/

52 of 54

Версия 2:

53 of 54

Вопросы?

Twitter: @DmytroVasin

54 of 54

Electron:

Build amazing, cross platform desktop apps in one codebase, for any platform, with the modern web stack.

Place your screenshot here