Electron, SASS, TypeScript, Pug(Jade), Polymer и немного полетного велосипедирования для создания приложения для Windows

Не так давно наткнулся на детище 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, для удобной установки/деинсталяции софта с машин пользователей.

Автор: Katsuba

Источник