План
Прежде чем мы фактически приступим к написанию образца приложения, давайте попробуем понять, с какими компонентами нам нужно иметь дело и как они взаимодействуют друг с другом. Эта серия статей не предназначена для обучения основам работы с электроникой / питоном / реакцией, но я быстро их рассмотрю, когда понадобится.
Картинка стоит тысячи слов
Картинка внизу - все, что касается архитектуры. Я пронумеровал все основные компоненты и разобью их в следующем разделе статьи. Как только вы запомните эту архитектуру в своей голове при написании приложения, вы сможете ясно мыслить и кодировать более эффективно.
Я уверен, что есть много других подходов к созданию электронного приложения, но для стека, который я использовал, эта архитектура оказалась единственной рабочей моделью, которая прошла весь путь от разработки до производства и доказала свою стабильность после множества экспериментов. .
Таким образом, будьте уверены, это проверено в битве.
Давайте разберемся
Во всей архитектуре 4 основных части, давайте поговорим о них по очереди.
1. Основной процесс
Если вы читаете документацию по электрону, в ней говорится, что цель основного процесса - создавать и управлять окнами браузера. Каждое окно браузера может затем запускать свою собственную веб-страницу / графический интерфейс. Поскольку этот процесс является центральным для управления всем приложением, на протяжении всего жизненного цикла электронного приложения может быть только один и только один основной процесс.
У основного процесса есть второстепенная, но важная задача - взаимодействие с ОС для использования собственных функций графического интерфейса, таких как уведомления, создание ярлыков, реагирование на автоматические обновления и т. Д.
Он также играет ключевую роль в коммуникации, выступая в роли посредника для всех окон браузера, которые он создал. Фактически, это основа всей архитектуры, на которую мы полагаемся.
2. Процесс рендеринга (видимый)
Каждое окно браузера, создаваемое основным процессом, вызывает процесс рендеринга. Для простоты давайте назовем каждое окно браузера эквивалентным процессу рендеринга. Единственная цель процесса рендеринга - показать веб-страницу. Другими словами, его задача - визуализировать графический интерфейс.
Также важно отметить, что каждое окно браузера, создаваемое основным процессом, запускается независимо, как и вкладки в нашем браузере. Даже если вкладка выходит из строя, остальные вкладки продолжают работать. Эта очень фундаментальная функция дает нам безграничные возможности для создания вещей.
Q1. Могу ли я использовать собственные функции ОС прямо из процесса рендеринга?
ответ Нет, ты не можешь. Это связано с соображениями безопасности, и, таким образом, чтобы использовать собственные функции ОС, каждый процесс рендеринга должен взаимодействовать с основным процессом и, таким образом, выполнять работу от его имени.
Примечание. На самом деле вы можете получить доступ к основным функциям процесса непосредственно из процесса рендеринга с помощью модуля, называемого удаленным, но это не считается здоровой практикой, поскольку небрежный код может закончиться до утечки ресурсов.
Все, что вам нужно знать о процессах основного и рендеринга, упоминается в электронной документации.
Возможно, вы заметили, что я написал слово видимый отдельно для процесса рендеринга. Это почему? Потому что это единственный рендерер, который будет виден. Как мы упоминали ранее, мы используем React в качестве одного из элементов нашего технического стека, который является отличным инструментом для написания одностраничных приложений. И, как вы, возможно, догадались, в отличие от старых веб-приложений, одностраничному приложению не нужно открывать несколько вкладок, скорее, это похоже на мобильное приложение, которое дает пользователю удобную работу на одном экране / вкладке. Таким образом, нам понадобится только одна вкладка, чтобы фактически отобразить весь пользовательский интерфейс приложения. Одна вкладка соответствует одному процессу рендеринга.
3. Процесс рендеринга (скрытый)
Но вы только что сказали, что нам нужен только один процесс рендеринга !!
Я сказал только один видимый процесс. Теперь, если вам нужно было создать простое приложение с графическим интерфейсом, скорее всего, вам никогда не понадобится пункт номер 3, но мы здесь, чтобы подтолкнуть электронное приложение к новым ограничениям.
Что происходит, когда вы хотите выполнить задачу блокировки потока (тяжелые вычисления)? Где бы вы хотели это исполнить? Основной процесс? Нет, ваше приложение выйдет из строя, если вы заблокируете основной процесс. Видимый процесс рендеринга? Нет, ваш графический интерфейс начнет отставать и задыхаться. Так где ты это делаешь? Ага, как вы уже догадались, здесь на помощь приходит скрытый процесс рендеринга.
Скрытый процесс - это просто еще одна вкладка / окно, которое по своей сути скрыто от пользователя. Это связано с тем, что наша цель - не отрисовать в нем пользовательский интерфейс, а выполнить задачу блокировки потоков. Идея состоит в том, чтобы создавать и уничтожать скрытые окна по мере необходимости, чтобы выполнять тяжелую работу в фоновом режиме. Таким образом, чтобы выполнить задачу блокировки потока, вы должны просто создать скрытое окно, завершить задачу в этом скрытом окне (работающем в фоновом режиме), не вызывая никаких проблем с видимыми компонентами вашего приложения, а когда вы закончите, просто уничтожьте скрытые окно для возврата ваших ресурсов. Это так просто.
Самое приятное, что вы можете создать столько, сколько захотите.
Это статья, которую я прочитал, чтобы решить, какой подход я выберу для решения фоновых задач, интенсивно использующих ЦП. Было бы интересно прочитать, если вы хотите сравнить этот подход с другими вариантами, которые у меня были.
4. Скрипт Python
К настоящему времени вы уже знаете, что Python является одним из ключевых элементов нашего стека обучения, поэтому мы должны найти способ заставить его без усилий работать с электронным кодом. Так что простейший способ сделать это - использовать модуль npm под названием python-shell. Это позволяет нам выполнять внешние скрипты Python из приложения nodeJS. Поскольку вам разрешено использовать функции nodeJS в электронном приложении, модули npm также будут хорошо работать в вашем электронном коде.
Q1. Откуда вы это называете?
ответ Очевидно, что если вы используете Python для выполнения какой-либо задачи, вы планируете выполнить тяжелую работу. Но тяжелая работа или нет, идеальное место для запуска скрипта python - это скрытые процессы рендеринга.
Важно отметить, что сценарий не выполняется внутри вашего электронного приложения, а работает параллельно. Эта диаграмма должна помочь вам лучше визуализировать это.
Теперь очевидно, что вашему скрипту python может потребоваться некоторый ввод, и он наверняка будет генерировать некоторые выходные данные при запуске. Так как скрипт выполняется вне вашего приложения, вы не можете напрямую захватывать или отправлять данные в скрипт. Но у python-shell есть приятная функция, которую можно использовать в этой ситуации. Об этом мы поговорим в следующем разделе.
То, как вы создадите сам сценарий, снова является темой для обсуждения, которое будет рассмотрено по мере того, как мы углубимся в детали кодирования.
Связь
Важным моментом обсуждения является то, как каждый из этих четырех компонентов будет взаимодействовать друг с другом. И, честно говоря, нам просто нужно позаботиться о трех типах общения в нашем приложении.
1. Главное - средство визуализации:
Фактическое средство связи называется электронным IPC (Inter Process Communication). Процессы рендерера используют ipcRenderer, в то время как основной процесс использует ipcMain.
Теперь, если вы спросите, как это на самом деле выглядит, лучшей аналогией являются прослушиватели событий. Вы просто настраиваете группу слушателей на обоих концах в зависимости от того, что вы планируете слушать. Позже в жизненном цикле приложения вы можете запускать эти прослушиватели вручную, чтобы получить желаемый результат.
Эта идея может быть распространена на любое количество комбинаций рендеринга и основного процесса. Это все, что находится под капотом.
2. Видимый модуль визуализации - скрытый модуль визуализации:
Между двумя процессами рендеринга нет прямых средств связи. Таким образом, скрытый процесс визуализации не может напрямую взаимодействовать с видимым процессом визуализации. Единственный способ установить связь - это отсылать сообщения от основного процесса, как в ретрансляционной системе.
3. Скрытый рендерер - скрипт Python:
Библиотека оболочки python предоставляет нам возможность использовать каналы stdin и stdout для отправки и получения данных из сценария python.
Таким образом, лучший способ написать свой код на Python - это предположить, что вы будете использовать его из терминала, где вы напрямую читаете данные из пользовательского ввода и распечатываете данные на терминал, используя простой оператор печати.
формат сообщения, который мы будем использовать, - JSON (нотация объектов JavaScript), хотя доступны многие другие параметры. JSON фактически упрощает структурирование data, что, в свою очередь, позволяет легко извлекать данные на обоих концах с минимальными накладными расходами.
Примечание. Имейте в виду, что я уже упоминал, что это формат сообщения, который я использую; не связывайте это с HTTP-запросом-ответом, потому что термин JSON довольно часто используется в этом домене.
В следующей статье мы поговорим о котельной для проекта. Вы можете просто клонировать и приступить к работе с ним практически для всего, для чего хотите использовать электрон. Панель котла обрабатывает все, от регистрации до создания производственной программы установки Debian.
Если вы пропустили часть 1:
следующая статья:
