Я увлекся приложениями для повышения производительности задолго до того, как научился писать хоть одну строчку кода. Еще в аспирантуре я был очарован своим старым Palm Pilot (с ЖК-экраном, похожим на Gameboy, и все такое), а несколько лет спустя я был полностью о моем Motorola Backflip, моем первом смартфоне. Затем появились Tasker, Toodledo, Wunderlist и многие другие. Однако гораздо интереснее, когда вы действительно создаете приложение для повышения производительности, и это то, что я сделал с коллегами Яном Ланкастером и Алексом Пилевски. Мы создали приложение под названием Fired Up, и оно — вместе с Электроном, основной технологией, используемой для его создания, — является предметом этой статьи.

Во-первых, давайте посмотрим на сам Электрон. Electron — это фреймворк с открытым исходным кодом, который позволяет разработчику создавать настольные приложения для Windows, macOS и Linux, используя только JavaScript, HTML и CSS — собственный код не требуется! Electron устанавливается через npm (см. readme) и требует гораздо меньше настроек, чем некоторые другие инструменты, такие как Redux. Вы можете использовать любой текстовый редактор, который вам нравится, и вы в основном пишете тот же код, что и обычно, плюс некоторые встроенные основы Electron, которые управляют пользовательским интерфейсом и взаимодействием с файловой системой пользователя и средой рабочего стола. По моему опыту, кривая обучения была намного меньше, чем у React, Redux или Ember. С небольшой подготовкой и обучением разработчик может относительно быстро раскрутить настольное приложение с помощью Electron!

Как поясняется в документации, Electron построен на Node.js и Chromium. Он работает в окне браузера, в котором есть те же инструменты разработки, что и в Chrome (плюс некоторые улучшения, такие как некоторые вещи Node). В вашем редакторе логика Electron разделена на две основные части: основную и визуализатор, которые часто делятся на файлы с такими именами. Main управляет основной логикой программы и ключевыми функциями, такими как размер окна, в то время как средство визуализации отвечает за пользовательский интерфейс и обрабатывает прослушиватели событий и другую логику на стороне клиента. Две стороны взаимодействуют друг с другом в основном через пару свойств Electron, remote и ipcRenderer, которые более подробно описаны в документации Electron. Вы можете думать о main примерно как о коде на стороне сервера, а об рендерере — как о стороне клиента.

К основным преимуществам Электрона относятся:

  • Простота в освоении: как я уже упоминал, кривая обучения относительно невелика, и Electron позволяет разработчикам писать для всех трех основных настольных платформ без написания каких-либо собственных сценариев.
  • Беспристрастный: я на той стороне забора, которая предпочитает беспристрастные фреймворки, и если вы со мной, то Electron обязательно вам понравится. Electron позволяет вам использовать широкий спектр фреймворков и библиотек (таких как React, jQuery, Redux и т. д.), и ему не хватает жестких структур файлов и именования, присущих самоуверенным фреймворкам, таким как Ember.
  • Избегает проблем с CORS: поскольку это настольное приложение, Electron позволяет разработчикам обойти многие проблемы CORS (Cross-Origin Resource Sharing), часто возникающие в браузерных приложениях.
  • Легкий доступ к файловой системе и среде рабочего стола. Что касается пункта номер один, Electron предоставляет оболочки для множества действий, таких как открытие и сохранение файлов на жестком диске пользователя, создание строк меню и доступ к ним и даже выполнение задач на основе системных настроек пользователя, таких как цветовая тема Mac. Вам нужно всего лишь изучить ряд методов Electron и научиться их использовать, а не погружаться во внутренности Windows или macOS.
  • Бесплатный и с открытым исходным кодом: говорит сам за себя.

Так что насчет этого приложения для повышения производительности, о котором я упоминал ранее? Вкратце, наше приложение отслеживает использование пользователями настольных приложений, информируя их о времени, потраченном на каждое из них. Например, пользователь может провести 30 минут в iTunes, 2 часа в Chrome и 15 минут в Slack во время данного сеанса. Это предназначено для того, чтобы показать пользователям, сколько они используют каждое приложение, и, таким образом, повысить производительность. Само наше приложение состоит из окна строки меню, которое пользователь активирует, щелкнув значок пламени в строке меню (в соответствии с нашей темой огня). Затем пользователь может начать сеанс (который автоматически записывает использование каждой настольной программы как описано выше), приостановить сеанс и остановить сеанс. Несколько сеансов могут быть сохранены и извлечены через localStorage, и пользователь также может легко очистить сохраненные сеансы.

Мы решили создать это приложение с использованием jQuery и Chart.js. Упрощение манипулирования DOM с помощью jQuery позволило нам эффективно написать код на стороне клиента, что оказалось очень кстати, поскольку наше приложение довольно сильно загружено прослушивателями событий. И наоборот, мы решили отказаться от React и других более сложных фреймворков, потому что наше приложение довольно компактное и не состоит из многих компонентов, с которыми лучше всего работает такой фреймворк, как React. Наша логика была похожей при выборе Chart.js, инструмента визуализации данных, а не его более громоздкого родственника D3.js. Эти инструменты и Electron позволили нам найти правильный баланс между мощностью и простотой.

Размышляя над окончанием проекта, мы создали солидный mvp, но нам определенно нужно внести некоторые изменения перед производством. Например, есть несколько мелких багов с функционалом, а диаграмме нужен более контрастный цвет. В целом, тем не менее, я горжусь тем, что мы создали это приложение за неделю. Мы многому научились и хорошо работали вместе.

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