Не так давно наткнулся на детище GitHub’а — Atom. И сразу заинтересовался тем, какие технологии использовались для создания этого редактора. И, как выяснилось, в основе основ лежит Electron — Chromium и node.js в одной коробке. Естественно, решил посмотреть что это за зверь такой, зацепив при этом еще парочку технологий, неведомых для меня на тот момент — TypeScript, SASS и Jade (ныне Pug). Над идеей для приложения даже не думал — это будет консольная версия всем известного сервиса — Todoist.
Кому интересно — добро пожаловать под кат.
С чего начать?
Особо нетерпеливым — ссылка на исходники.
Ну и начать нужно с клонирования проекта:
git clone https://github.com/Defenderbass/TodoistElectron.git cd TodoistElectron
Следующим шагом устанавливаем зависимости, для чего запустим батник install.bat, лежащий в корне проекта. Установятся модули сборки и запуска приложения, описанные в ./package.json, модули для работы самого приложения ./source/package.json (в нашем случае они отсутствуют) и зависимости, описанные в ./source/windows/bower.json, для рендеринга клиентской части. На клиенте мы будем использовать Polymer и некоторые кастомные элементы из достаточно большого каталога "Paper Elements", доступного на официальном сайте фреймворка.
После успешной установки всех зависимостей мы можем запустить приложение, выполнив в корневой папке:
build
При этом произойдет инициализация сборки программы и ее последующий запуск при успешной сборке. На выходе мы должны получить что-то похожее на первую и единственную картинку поста.
А если подробнее?
А если подробнее, то стоит заглянуть в build.bat
grunt build && run
То есть сначала поднимается зарегестрированный таск, описанный в Gruntfile.js:
grunt.registerTask('build', [ 'clean:build', 'sass:dev', 'sass:components_dev', 'typescript:dev', 'typescript:components_dev', 'copy:dev', 'copy:pug', 'pug:dev' ]);
Данный таск последовательно поднимает набор действий: компиляция sass-фалов, компиляция TypeScript, шаблонизация pug-фалов. Каждому таску соответствует одноименный файл в директории ./build_scripts, а конфигурации, описанные в этих файлах, автоматически попадают в grunt-config.
По завершению сборки выполняется команда run, запускающая само приложение. Если вы знакомы с Grunt, то разобраться в сборке вам не составит труда.
Немного о структуре
В директории ./source находятся все исходники программы:
- ./package.json с описанием зависимостей и указанием main-файла;
- ./app.ts — главный исполняемый файл, в котором поднимается процесс рендеринга страницы(окна);
- ./windows — директория с файлами для рендеринга, самая объемная в нашем случае. Содержит библиотеки (Polymer), некоторые самописные модули, декораторы классов и кастомные элементы, созданные через Polymer.
На создаваемой страничке используется всего три кастомных самописных элемента. Я очень хотел наследовать один класс кастомного элемента от другого, но Polymer сейчас не дает такой возможности из коробки, по этому мной были написаны обертки в виде декораторов для классов элементов для удобного определения методов и атрибутов элемента, при всем при этом получившиеся классы могут безболезненно переносить наследование.
Webview
Контент самого сервиса Todoist будет расположен и изолирован внутри тэга webview, любезно предоставленного разработчиками Electron. Нам нужно указать лишь атрибут src с адресом отображаемой страницы, указать необходимые стили для корректного и гармоничного отображения страницы.
В заключении…
Я извиняюсь за столь сжатый рассказ, который совсем не объясняет сути и некоторых моментов в проекте, но я верю, что если вас заитересует Electron в купе с упомянутыми выше технологиями, то разобраться в проекте не составит для Вас особого труда.
P.S.: В корне проекта присутствует еще один батник (если вы еще не заметили конечно) — "release.bat" — запуск которого соберет проект, запакует его в специальный контейнер app.asar и положит все в папку ./build/release/dist с главным исполняющим фалом "Todoist.exe". Готовую программу можно запаковать в один установочный файл, например, используя такую утилиту как Smart Install Maker, для удобной установки/деинсталяции софта с машин пользователей.
ссылка на оригинал статьи https://habrahabr.ru/post/281931/
Добавить комментарий