Рубрики
Без рубрики

Как построить электронное настольное приложение в JavaScript: многопотативное, SQLite, родные модули и другие общие очки боли

Эндрю Уолш, как построить электронное настольное приложение в JavaScript: многопоточность, SQLite, родные модули и другие общие боли Points A Структура для разработки настольных приложений, электрон, многое предложить. Он предоставляет полный доступ к API узла и экосфере. Это развертывается на всех основных операционных системах

Автор оригинала: FreeCodeCamp Community Member.

Эндрю Уолш

В качестве основы для разработки настольных приложений электрон есть много для предложения. Он предоставляет полный доступ к API узла и экосфере. Это развертывается на всех основных операционных системах (с одной кодовой базой). И со своей веб-архитектурой вы можете использовать последние функции CSS для создания продвинутых UIS.

Есть много статей, обращаясь к вставлению и запуску с электроном, но меньше, предназначенное для использования SQLite или как пойти на многопоточность. Мы посмотрим, как использовать электрон для создания приложений, которые обрабатывают большое количество данных или запускают множество задач.

В частности, мы будем покрывать:

  • Как работает электрон (вкратце), и как его архитектура влияет на то, что мы можем сделать
  • Многопоточность
  • Использование локальных баз данных, таких как SQLite, или запись в любой файл внутри электронного приложения
  • Родные модули
  • Несколько чтений, чтобы знать
  • Упаковка приложения с использованием родных модулей

Как работает электрон – сокращено

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

Процессы рендерера используют хром для рендера вашего приложения. Так же, как каждая вкладка работает в собственном процессе, так ли каждый визуализатор. Они загружены с помощью BrowserWindow Конструктор loadurl Метод, который должен указывать на локальный или удаленный файл HTML. Это означает, что единственный способ запустить процесс рендерера – использовать HTML-файл в качестве записи.

Предостережения архитектуры электронов

Простота электрона является одним из самых больших активов. Ваш главный процесс выполняет любую необходимую конфигурацию, передает HTML-файл или URL-адрес в процессе рендерера. Этот файл может сделать все, что может обычное веб-приложение – и вы хорошо отправляетесь оттуда.

Но тот факт, что может быть только один главный процесс, делает его неясным, как реализовать многопоточье. Документация электронной документации подразумевает, что процессы рендерера строго предназначены для задачи рендеринга UIS (которые, как мы увидим, не верно).

Важно знать, что Делать что-либо вычислительно интенсивное на главном процессе замедляется (или заморозить) ваши процессы рендерера. Критически важно, чтобы любая вычислительно интенсивная работа отодвинута с основного потока. Лучше всего оставить его исключительно для выполнения всего необходимого для начала процессов рендерера. Поскольку мы не можем сделать интенсивную работу над тем же процессом рендерера, что делает Frontend Apply (поскольку это также повлияет на UI), нам нужен другой подход.

Многопоточность

Есть три общих подхода к многопотативному электрону:

  • Использовать веб-работники
  • Вилочные новые процессы для запуска задач
  • Беги (скрытые) образующие процессы как работники

Веб-работники

Поскольку электрон построен сверху хрома, все, что можно сделать на браузере, можно сделать в процессе рендерера. Это означает, что вы можете использовать веб-работники Чтобы запустить интенсивные задачи в отдельных потоках. Преимущество этого подхода является простота и сохранение изоморфизма с веб-приложением.

Тем не менее, есть одно очень большое предусмотренное – вы не можете использовать родные модули. Технически вы можете, но делать это будет Потому что ваша заявка на сбой Отказ Это значительная проблема, поскольку любое применение, которое требует многопоточье, также может потребоваться использовать нативные модули (такие как Node-SQLite3 ).

Выполнение новых процессов

Электрон использует узел в качестве временной среды, что означает, что у вас есть полный доступ к встроенным модулям, таким как кластер Отказ Новые процессы могут быть развернуты для запуска задач, сохраняя интенсивную работу от основного потока.

Основной проблемой является то, что, в отличие от процессов рендеров, дочерние процессы не могут использовать методы из библиотеки электронов. Это заставляет вас поддерживать канал связи с основным процессом по IPC. Процессы рендерер могут использовать Удаленный модуль Сказать главный процесс выполнять основные только задачи без этого дополнительного шага.

Еще одна проблема заключается в том, что если вы используете модули ES или функции TC39 javaScript, вам нужно будет убедиться, что вы запускаете трантпитанные версии ваших скриптов. Вам также нужно будет включить их в упакованное заявление. Эта проблема влияет на любое приложение узла, которое обрабатывает процессы вил, но он добавляет еще один слой сложности в ваш процесс сборки. Он также может стать хитрым при уравновешивании требований упаковки вашего приложения с использованием инструментов разработки, которые используют такие функции, как Live-Reloading.

Использование процессов рендерера в качестве рабочих потоков

Процессы рендерера традиционно рассматриваются как используемые для рендеринга вашего пользовательского интерфейса. Однако они не связаны с этой единственной задачей. Они могут быть скрыты и бегать на заднем плане Настройка флага Show передан браузервинду.

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

Один вызов при использовании электрона – IPC Отказ Хотя простым, это требует огромного количества котельной и налагает сложность отладки большого количества слушателей событий. Это также другое, что вам нужно, чтобы установить тест. Используя процесс рендерера в качестве рабочего потока, вы можете полностью обойти это полностью. Так же, как вы будете с сервером, вы можете прослушать локальный порт и получать запросы, что позволяет вам использовать такие инструменты, как Graphql + Реагировать аполлон Отказ Вы также можете использовать WebSockets для связи в реальном времени. Еще один бонус состоит в том, что вам не нужно использовать IPCrenderer и может сохранить свои электронные и веб-приложения ISOMORPHIC (если хотите использовать общую кодовую базу для рабочего стола и веб-приложения).

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

Как использовать SQLite (или все, что вам нужно написать)

Существует несколько подходов к государственному управлению, которое не требует местных модулей. Например, обрабатывая все ваше состояние в контексте рендерера с redux.

Однако, если вам нужно обрабатывать большие объемы данных, это не хватит. В частности, мы посмотрим, как использовать SQLite в электронном приложении.

Чтобы развернуть свое электронное приложение, вам сначала нужно будет упаковать его. Есть несколько инструментов, доступных для этого – самое популярное быть Строитель электрона Отказ Электрон использует формат архива ASAR для объединения вашего приложения в один несжатый файл. Asar Archives – это только чтение – означает, что вы не можете написать им какие-либо данные. Это означает, что вы не можете включить вашу базу данных в своем архиве ASAR вместе с остальной частью вашего кода (в электронном строителе, это будет под « файлы »).

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

Упакованный архив ASAR под названием App.asar существует в ./contents/resources. Вы можете разместить вашу базу данных или любой файл, который вы хотите написать, но включите в ваше упакованное приложение, в том же каталоге. Это может быть достигнуто с помощью электронного строителя, используя конфигурацию « ExtraResources ».

Другой подход – создать базу данных в другом каталоге целиком. Но вам нужно будет учитывать удаление этого файла на всех платформах, если пользователи решили удалить ваше приложение.

Упаковка с родными модулями

Подавляющее большинство узлов модулей являются скриптами, написанными в JavaScript. Родные модули Модули, написанные в C ++, которые имеют привязки для использования с узлом. Они действуют как интерфейс для других библиотек, написанных в C/C ++ и обычно сконфигурированы для компиляции после установки.

В качестве модулей низкого уровня они должны быть скомпилированы для целевых архитектур и операционных систем. Народный модуль, составленный на машине Windows, не будет работать на машине Linux – хотя обычный модуль будет. Это проблема для электрона, поскольку в конечном итоге нужно будет упаковать все в .dmg (OSX), .exe (Windows) или .deb (linux) исполняемый файл.

Электронные приложения с использованием собственных модулей должны быть упакованы на систему, которую они нацеливаются. Поскольку вы захотите автоматизировать этот процесс в конвейере CI/CD, вам нужно будет построить ваши собственные зависимости перед упаковкой. Чтобы сделать это, вы можете использовать инструмент, разработанный командой электронов, называемой электрон-восстановление Отказ

Если вы разрабатываете некоммерческий проект с открытым исходным кодом, вы можете использовать Travisci (Linux, OSX) и Опдерер (Windows) Для автоматического создания, тестирования и развертывания вашего приложения бесплатно.

Настройка для этого может быть сложно, если у вас есть интеграционные тесты, поскольку вам нужно будет установить определенные зависимости для беспокойных испытаний. Пример конфигурации для OSX и Linux с TraviSci можно найти здесь и пример Appveyer Config здесь (Эти примеры основаны на конфигурации в проекте Electron-React-Reacteerplate с добавлением OSX и развертывания).

Голчас

Когда ваше электронное приложение упаковано, некоторые встроенные свойства узла, относящиеся к путям, могут не вести себя так, как вы ожидаете и не будут вести себя так, как они выполняют, когда вы запускаете предварительный бинарный файл для обслуживания вашего приложения.

Переменные, такие как __dirname, __Filename и методы, такие как Process.cwd, не будут вести себя, как ожидалось, в упакованном приложении (см. Вопросы Здесь , Здесь и здесь ). Использовать app.getapppath . вместо.

Последняя записка на упаковке

При разработке электронного приложения вы можете захотеть использовать оба производства (обслуживание вводного кода с пребужденным двоичным) и разработка (с использованием WebPack-Dev-Server или WebPack-suffus для просмотра ваших файлов) режимов.

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

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

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

Резюме

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

Будучи электронными пакетами файлов в ASAR ASAR только для чтения, любой файл, который нам нужен для записи (например, базу данных SQLite), не может быть включен. Вместо этого они могут быть размещены в каталоге ресурсов, где они останутся в упакованном приложении.

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