paratagas Feb 3 2017 at 16:00

Создание десктопного приложения с помощью Webix и Electron

22 min

24K

Website development*JavaScript*Programming*Node.JS*

Tutorial

From sandbox

+11

Comments 34

UFO just landed and posted this here

paratagas Feb 3 2017 at 18:32

То, что именно эти инструменты можно использовать друг с другом — на примере конкретного рабочего решения.

UFO just landed and posted this here

paratagas Feb 3 2017 at 21:36

Суть в том, что в теории так оно и есть. Но на практике всегда появляются какие-то подводные камни и нюансы, на которых можно споткнуться. Например, даже такая простая вещь, как задание иконки для приложения Electron может вызвать трудности, так как в документации не указано, как одновременно задать иконку для запускаемого под Node.js приложения и скомпилированного приложения. В целом я насчитал четыре статьи про создание приложений на Electron на Хабре за последние 2 года. Не вижу ничего плохого, в том, что я поделился своим опытом работы с ним. API развивается, версии становятся более свежими, появляются новые возможности. Кроме того, возможно, кто-то просто пропустил предыдущие статьи, а из более свежих сможет узнать, что такие инструменты существуют, попробовать их и, возможно, использовать.

hardex Feb 5 2017 at 17:11

Не указано, потому что компиляция — прерогатива electron-packager/electron-builder — разработок третьей стороны — а не электорна.

MrGobus Feb 7 2017 at 10:11

Вы говорите как человек прочитавший и помнящий весь хабр за все года =)
В целом неплохой пост, я вот про Webix узнал (знал раньше но сейчас задумался о его пользе), да и даблы постов это неплохо если их разделяет определенный период времени. Кто-то освежит информацию, а кто-то откроет для себя что-то новое, не все же старые посты читают.

Zenitchik Feb 7 2017 at 11:59

Тот, кто будет гуглить webix найдёт старые и новые посты с равной вероятностью.

paratagas Feb 7 2017 at 12:18

Да, если человек знает, что искать нужно библиотеку с таким названием. Я, например, узнал о существовании Electron из комментариев к статье на Хабре про какой-то из аналогичных инструментов (точно не помню, скорее всего это NW.js).

Zenitchik Feb 7 2017 at 12:42

В любом случае, если человек захочет разобраться в вопросе, он за полдня нагуглит очень многое. И среди этого многого будут посты с хабра за четыре последних года.

max1gu Feb 5 2017 at 12:21

скажите, сколько памяти занимает ваше трехстрочное приложение поле получаса работы?
Сам попробовал электрон, но на второй день снес — дешевле в пкстую форму приложения на дельфи7 поставить браузер на всю форму, а страницы и всё остальное зашить в ресурсы (ИЕ он и так умеет)
Дешево и сердито.

paratagas Feb 5 2017 at 12:30

Честно говоря, не замерял. Но каких-то особых тормозов не заметил. Хотя приложение небольшое. Насчет Delphi (равно, как и других традиционных инструментов для десктопа) согласен с Вами. Но суть конкретно это приложения — больше эксперимент — освоение новых возможностей платформы Node.js. Отмечу, что в скомпилированном приложении под Win x64 один только exe-шник имеет размер около 70 Мб. Аналогичный exe-шник, сделанный, например, с помощью Windows Forms и C#, точно имел бы в разы меньший объем.

paratagas Feb 5 2017 at 13:00

Стало любопытно и я замерил (для Windows 7 x64).
Для скомпилированного приложения:
Сразу после запуска — около 26Мб, после получаса работы — около 28Мб. Разница между активным режимом (изменение данных, открытие окон и ссылок на документацию) и пассивным режимом — около 1Мб.
Для приложения, запускаемого с помощью

$ npm start

все показатели примерно на 1Мб меньше

paratagas Feb 5 2017 at 13:18

Прошу прощения — не сразу заметил все процессы приложения. Итого результат таков: основное приложение — 3 процесса примерно по 26Мб (всего около 80Мб). Плюс еще примерно по 35Мб на каждое дополнительно открытое окно Electron из меню.

herr_kaizer Feb 5 2017 at 17:51

Жесть.

vSLY Feb 5 2017 at 19:27

Спасибо за статью!
А подскажите пожалуйста, если я захочу затем портировать это приложение на мобильные устройства (желательно в виде исполняемого файла со страницей в google play/app store) какими инструментами можно воспользоваться, чтобы не менять код сильно?
Стоит задача кросс-платформенной разработки из одного исходника, пока что смотрю в сторону Delphi 10.1 Berlin, но рассматриваю и другие варианты.

Leopotam Feb 5 2017 at 23:19

Если в рамках js / electron, то можно сразу смотреть в сторону reactjs, чтобы потом максимально безболезненно переехать на react-native.

max1gu Feb 6 2017 at 00:42

тогда сразу на cordova

UFO just landed and posted this here

paratagas Feb 5 2017 at 19:40

Слышал о своего рода эмуляторах, например, DOSBox. Такой инструмент устанавливается на Android, после чего с его помощью можно запускать, например, exe-файлы. Сам такого рода эмуляторы не использовал, поэтому про их эффективность ничего не скажу. С другой стороны, возможно, лучше будет конвертировать для целевой платформы веб-приложение (которое в нашем случае написано на Webix), например, с помощью, PhoneGap.

-1

Goodkat Feb 6 2017 at 03:01

Вы храните данные приложения с помощью php — у вас в скомпиллированном десктопном приложении, получается, будут браузер, вебсервер с php и node.js?

paratagas Feb 6 2017 at 10:34

Да. При такой архитектуре без любого из этих компонентов (кроме браузера — он уже не нужен) скомпиллированное десктопное приложение работать не будет. В будущем планирую сделать и бэкенд и сервер на Node.js. Тогда можно будет обойтись и без отдельного веб-сервера, и без PHP.

Goodkat Feb 6 2017 at 11:55

А как работает этот вебсервер? Он остаётся внутри приложения или виден извне для всех?
Что будет, если запустить три копии приложения? Они начнут конфликтовать?
Можете подробней осветить этот вопрос?

paratagas Feb 6 2017 at 12:34

Сервер остается снаружи десктопа и виден извне. Если кто-то еще имеет к нему доступ (в том числе другие копии приложения), то они получат равные права на модификацию данных. Изменения данных в одной копии после обновления отражаются на других копиях. С другой стороны, если сделать бэкенд с использованием транзакций, то можно запускать несколько копий десктопного приложения на разных машинах и использовать общую базу данных.

Goodkat Feb 6 2017 at 14:38

Получается, что Electron — это просто лончер для вебсервера и браузера.
И если в системе вдруг окажется другое Electron-приложение, а в списке их много, то последствия будут непредсказуемыми, они могут испортить друг другу данные.

paratagas Feb 6 2017 at 15:34

«Получается, что Electron — это просто лончер для вебсервера и браузера»:
В минимальном виде — да. Но Electron обладает теми же возможностями доступа, например, к ОС или файловой системе, что и Node.js. Это делает его более мощным инструментом, чем просто launcher.

«И если в системе вдруг окажется другое Electron-приложение… то… они могут испортить друг другу данные»:
Если они будут обращаться к одним и тем же данным по одному и тому же URL на сервере — то да. Но это же верно и для обычных веб-приложений при определенных условиях.

Если приложение небольшое, то, поскольку внутри Electron создается окно браузера, можно использовать localStorage. Кроме того, существуют различные инструменты и техники для доступа к БД (SQL/NoSQL), адаптированные для Electron или аналогичных ему инструментов: linvodb3, MySQL, Couchbase.

Goodkat Feb 6 2017 at 16:19

Если они будут обращаться к одним и тем же данным по одному и тому же URL на сервере — то да. Но это же верно и для обычных веб-приложений при определенных условиях.

У вебприложений обычно разные серверы, а если они запущены на одном сервере, то разработчик знает о наличии других вебприложений на том же сервере.

А тут могут быть приложения от разных разработчиков, которые не зная друг о друге используют Electron и сохраняют данные используя локальный вебсервер.
Да и просто запустив такое приложение вы открываете дыру на своей машине.

Фигня какая-то получается.

Я думал, что Electron использует модифицированные вебсервер и браузер, которые контактируют как-нибудь напрямую, без открытия доступных извне сокетов.

paratagas Feb 6 2017 at 16:49

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

http://localhost:8000

И есть как минимум еще одно приложение, которое требует этот же URL.
В этом случае действительно возможен конфликт нескольких приложений.
Спасибо за Ваши комментарии. Поднятая Вами проблема достаточно актуальна и интересна. В свободное время попробую изучить ее детально.

kostus1974 Feb 6 2017 at 10:36

зачем это нужно? примитивный туду на 50 строк и общий размер под 50 МБ?
когда это всё кончится уже?
ну сделали вы туду на жээс — ну и что? что вам мешает просто молча запускать это просто на вашем любимом хомячном веб-сервере? зачем это публичное запихивание ноджээс во все дыры с объявлением десктопности этого? зачем это на хабре?

-2

paratagas Feb 6 2017 at 10:43

Платформа Node.js и язык Javascript развиваются. Как минимум, кому-то на Хабре будет интересно узнать про их новые возможности и существующие недостатки.

Zenitchik Feb 6 2017 at 11:55

Если бы этого не было на Хабре, как бы я узнал, что это — дрянь? Самому бы шишки набивать пришлось, время тратить.

kostus1974 Feb 7 2017 at 16:47

то есть слить в кучку локальный веб-сервер и браузер, и потом назвать это десктопным приложением — это надо какой-то путь пройти, как-то поумнеть? какой вы тут опыт увидели? где тут можно «шишки набивать»?

Zenitchik Feb 7 2017 at 17:03

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

А почему бы нет? Не будь под капотом 50 метров мёртвой массы — всё нормально было бы.

justboris Feb 6 2017 at 12:42

Насколько я понял из статьи, php вам нужен ради написания 4 строк кода.

Вот эквивалентный код на node.js. И Apache ставить не надо.

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());
app.get('/data', (req, res) => {
  res.sendFile('data.json');
});
app.post('/data', (req, res) => {
   fs.writeFile('data.json', JSON.stringify(req.body), (err) => {
      if(err) {
        return res.status(500).send(`Error: ${err.message}`)
      }
      res.status(200).send(req.body);
   })
});

app.listen(3000);

paratagas Feb 6 2017 at 12:58

Спасибо! Изначально я планировал более сложную систему с категориями и подкатегориями дел, думал использовать PHP-фреймворк. Но потом решил не перегружать проект, от идеи фреймворка отказался, а PHP по инерции оставил. Согласен, что использование Node.js сервера здесь намного уместнее.

Show the best of all time