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

Сводка

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

Зачем реагировать?

Первоначальный план состоял в том, чтобы использовать npm-модуль react-sketch ​​для редактирования скриншотов. Этот модуль использует холст и включает в себя широкий спектр возможностей для настройки разметки изображения. Если бы мы не нацелились на это конкретное решение для редактирования скриншотов, мы, вероятно, использовали бы jQuery для отображения графического интерфейса и часто обсуждали, стоит ли использовать React.

Шаблон

Мы нашли этот шаблон electro-react-tutorial, который поможет нам приступить к работе (любезно предоставленный Agrosis), который поставляется с простым файлом mainProcess (main.js) и кодом реагирования, уже настроенным с помощью веб-пакета. В нашем репозитории были внесены небольшие изменения, чтобы реструктурировать иерархию наших компонентов реакции и заменить Less на Sass, поскольку мы все лучше знакомы с Sassy CSS.

Первоначальные выводы

Первоначальная настройка нашего приложения включала реализацию значка в строке меню и раскрывающегося окна, которое переключается между отображением и исчезновением, когда пользователь щелкает значок. Настроить строку меню на удивление легко с помощью еще одного узлового модуля. Затем пришло время начать экспериментировать с некоторыми событиями экземпляра, которые Электрон предоставляет с каждым окном браузера.

Передача данных

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

Результаты будут несуществующими при первом отображении окна браузера. Скрытие и повторная визуализация окна браузера приводили к ожидаемым результатам. После безуспешной борьбы с различными методами жизненного цикла компонентов React, чтобы попытаться повторно отобразить графический интерфейс после получения данных, нам пришлось переключить внимание на основной процесс. Простой setTimeout доказал, что основной процесс пытался отправить данные после монтирования компонента и больше не прослушивал сообщение от основного процесса. Введите IPC (межпроцессное взаимодействие).

Двусторонняя связь

Как основной процесс, так и средства визуализации имеют возможность отправлять и прослушивать сообщения по определенным каналам, которые устанавливает пользователь. Поняв, что нам нужно подтверждение от нашего компонента React, что он смонтирован, мы заменили наш хакерский setTimeout на двустороннюю связь между нашим основным процессом и средством визуализации. Ниже приведены фрагменты кода из каждого:

Визуализатор:

componentDidMount() {
  ipc.send('mounted', 'mounted')
  ipc.on('currentImg', (event, imgData) => {
    this.setState({ imgData })
  })
}

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

editWindow.on(‘focus’, () => {
  ipc.on(‘mounted’, (event, response) => {
    if(response === ‘mounted’) {
      editWindow.webContents.send(‘currentImg’, imgData)
    }
  })
})

Как видите, функция componentDidMount отправляет сообщение по каналу mounted. Как только основной процесс получает сообщение, он отправляет сообщение обратно средству визуализации по новому каналу currentImg, которое содержит данные, необходимые средству визуализации для отображения в графическом интерфейсе.

Заключение

  • Electron предоставляет разработчикам возможность создавать настольные приложения для разных платформ на языках, с которыми они уже знакомы.
  • Electron может хорошо работать с React, но есть нюансы, которые следует учитывать при создании окна браузера и при монтировании компонента.
  • Преобразование рисунка на холсте html в .PNG может быть довольно сложной задачей, прочитайте следующую запись в блоге, чтобы узнать, почему!