Электрон это что за программа

Создание приложения с помощью Electron и Vue

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

Несмотря на то, что для всех этих аспектов существует множество библиотек и фреймворков, Electron выделяется, когда дело доходит до разработки настольных приложений с JavaScript, и в этом посте мы рассмотрим, как использовать Vue с Electron для создания нашего первого кроссплатформенного настольного приложения.

Предпосылки

Эта статья предполагает выполнение следующих предварительных условий:

1. Базовое понимание JavaScript
2. Базовое знакомство с Vue
3. Установлены Node.js и npm
4. Предыдущий опыт работы с Electron является плюсом, но не обязателен.

Что такое Electron?

Electron — это платформа JavaScript с открытым исходным кодом для создания собственных кроссплатформенных настольных приложений с использованием веб-технологий (HTML, CSS и JavaScript). Это означает, что, если вы ранее знакомы с этими технологиями, вы можете использовать ту же кодовую базу для разработки настольных приложений для Windows, Linux и macOS.

Атом:Загадка Электронов. Квантовая механика.

За кулисами Electron объединяет движок Chromium со средой выполнения Node.js для чтения и запуска вашей кодовой базы как отдельной настольной программы. И, чтобы доказать его возможности, популярные настольные программы, созданные с помощью Electron, включают Slack, VS Code и WhatsApp Desktop.

Плюсы

Ниже приведены некоторые из преимуществ использования Electron:

1. Единая кодовая база — с Electron вам понадобится только одна кодовая база для создания настольных приложений для разных операционных систем.
2. Используйте навыки работы в сети — если у вас есть предыдущий опыт работы с базовыми веб-стеками (HTML, CSS и Javascript), начать работу с Electron очень просто.
3. Большое сообщество — сообщество Electron довольно большое и активное, и основным фактором, добавляющим к этому, является то, что фреймворк используется и поддерживается ведущими компаниями.

Минусы

Как и все остальное, у создания настольных приложений с помощью Electron есть и недостатки. Некоторые из них включают:

1. Более высокое потребление ресурсов — известно, что настольные приложения, написанные на Electron, потребляют больше ресурсов ЦП и ОЗУ по сравнению с приложениями, написанными в других средах, таких как Java FX, Objective C и т. д.
2. Увеличенный размер приложения — как было сказано ранее, приложения Electron объединяют движок Chromium в процессе сборки, что приводит к увеличению размера приложения даже для простого приложения.

Vue + Electron

Если вы раньше работали с Vue, начать с Electron довольно просто. Это возможно с помощью подключаемого модуля Vue CLI под названием Electron Builder, и в следующих разделах мы узнаем, как этот подключаемый модуль работает, создав пример приложения, которое возвращает полный список трендовых фильмов из API noviedb.

Что такое электрон

Вот предварительный просмотр того, как будет выглядеть наше приложение для просмотра фильмов:

Приступим

Поскольку Electron builder — это плагин Vue CLI. Это означает, что нам нужно установить сам Vue CLI, прежде чем мы сможем с ним работать. Для этого выполните:

Выполнение указанной выше команды установит самую последнюю стабильную версию Vue CLI, и вы можете убедиться, что она была успешной, запустив vue -V , который должен вывести установленную версию Vue.

Затем мы хотим создать новое приложение Vue, поэтому запустите команду ниже, чтобы создать новое приложение с именем vue-desktop:

vue create vue-desktop

Последний шаг — добавить плагин Vue Electron Builder, и мы можем сделать это, выполнив команду ниже:

vue add electron-builder

Вам будет предложено указать версию Electron, которую вы хотите добавить в этот проект Vue, и как только вы это сделаете, вы должны увидеть сообщение об успешном завершении, указывающее, что Electron Builder был установлен. Затем вы можете запустить приложение, запустив:

npm run electron:serve

И вы должны увидеть результат, аналогичный показанному на скриншоте ниже:

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

Файловая структура

Когда вы открываете папку проекта в предпочитаемом текстовом редакторе, вам должны быть представлены следующие файлы и каталог, как показано на изображении ниже. И если вы раньше работали с Vue CLI, вы заметите, что файловая структура почти такая же. Единственное изменение — это добавление нового файла background.js , и этот файл отвечает за запуск нашего приложения Vue как автономного настольного приложения.

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

Создание нашего приложения для фильмов

Теперь, когда мы освоились с Vue Electron Builder, давайте продолжим и начнем создавать наше приложение для просмотра трендовых фильмов.

Первый шаг — открыть public/index.html и добавить запись для Bootstrap и Font Awesome в раздел заголовка, как в приведенном ниже коде:

Затем в папке src/components создайте новый файл с именем MovieCard.vue и вставьте в него следующий код:

>

Rating >/10

export default < name: «MovieCard», props: < movie: < type: Object, required: true, >, >, >;

Здесь мы создали компонент MovieCard , который принимает опору, содержащую все детали для каждого фильма. Следующий шаг — удалить весь код, содержащийся в src/App.vue , и обновить его следующим образом:

Trending Movies

Keep up with the hottest movies that are trending this week.

Trending today This week

На этом этапе, если мы запустим наше приложение, мы должны получить следующий результат:

Последний шаг — определить метод, который извлекает самые популярные фильмы из TMDB API. Этот процесс потребует от вас создать бесплатную учетную запись у них, чтобы получить свой ключ API.

Для этого обновите src/App.vue следующим кодом:

Trending Movies

Keep up with the hottest movies that are trending this week.

Trending today This week

import MovieCard from «./components/MovieCard.vue»; export default < name: «App», components: < MovieCard, >, data() < return < movies: [], apiKey: «YOUR_API_KEY_HERE», >; >, methods: < getTrendingMovies(category) < return fetch( `https://api.themoviedb.org/3/trending/movie/$?api_key=$` ) .then((response) => response.json()) .then((data) => < this.movies = data.results; >); >, >, mounted() < this.getTrendingMovies(«day»); >, >;

Здесь мы импортировали компонент MovieCard , который мы создали ранее в разделе сценария, а также добавили новый метод getTrendingMovies() , который отвечает за загрузку наших фильмов из TMDB API, а затем мы запустили эту функцию в смонтированном хуке.

И небольшое изменение в нашей разметке — это зацикливание всех результатов, возвращаемых TMDB, в наш компонент MovieCard .

Если мы обновим наше приложение на этом этапе, все должно работать нормально, и вы должны получить результат, аналогичный изображенному ниже:

Обновление значка приложения

Значок Electron установлен в качестве значка по умолчанию для вашего приложения, и в большинстве случаев вы, вероятно, захотите установить свой собственный значок. Вы можете просто обновить значок приложения, добавив новую запись значка в методе newBrowserWindow() , присутствующем в background.js , как показано ниже:

. const win = new BrowserWindow(< width: 800, height: 600, title: «Trending movies», [+] icon: «./path/to/icon.png», .

Создание приложения

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

npm run electron:build

Имейте в виду, что создаваемое исполняемое приложение зависит от операционной системы, с которой вы работаете. Однако Electron Builder позволяет вам определять, для какой платформы (или платформ) вы хотите создавать исполняемые файлы. Доступные варианты включают Mac, Win и Linux.

Это означает, что для создания версии ваших приложений для Linux вы выполните следующую команду:

npm electron:build — —linux nsis

Вывод

В этом руководстве мы рассмотрели, как использовать Electron и Vue для создания кроссплатформенного настольного приложения. Мы также создали пример приложения для просмотра трендовых фильмов, чтобы понять, как все работает. А код всего приложения можно найти здесь, на GitHub.

Источник: dev-gang.ru

Веб фреймворк Meteor и Electron — в чём разница между ними?

Meteor.js и Electron – кроссплатформенные фреймворки для разработки приложений на JavaScript, Node, HTML и CSS. Я попытался выяснить, какой из этих веб-фреймворков лучший для написания десктопных приложений.

Веб-фреймворк Meteor

Meteor — веб фреймворк, который предназначен для создания Javascript-приложений . Для этого фреймворк нужно установить на компьютер и работать с проектами через команды. Он включает в себя API , инструменты разработки, пакеты из Node.js , а также базовую поддержку Javascript-сообщества .

Чтобы начать работать с Meteor , перейдите на официальный сайт фреймворка и установить его на ПК ( есть версии для Windows , Mac или Linux ). Затем нужно создать приложение при помощи команды meteor create myapp и запустить meteor. После чего будет запущен локальный сервер для разработки. Если вам нужно больше подробностей, ознакомьтесь с руководством Meteor .

В состав Meteor входит библиотека пакетов Atmosphere , в которой есть всё необходимое для работы с фреймворком. Meteor также позволяет использовать npm . Есть вероятность, что уже в скором будущем пакеты будут переведены на npm . Готовые Meteor-приложения также можно перевести в библиотеки, чтобы использовать их внутри других проектов.

Так как Meteor создает приложения на базе Node , вам потребуется хостинг Node . Лучший хостинг для Meteor js — Galaxy , основанный на Amazon Web Services ( AWS ). Использование этого хостинга упрощает процесс запуска.

Galaxy позволяет вести логи, собирать аналитику, мониторить, обновлять и постоянно интегрировать что-то новое, переносить проекты, а также пользоваться специальными инструментами.

Создаваемое вами приложение также может быть адаптировано под Android или iOS . Для этого понадобятся дополнительные настройки и инструменты. Но добавить их достаточно просто, а для тестирования можно использовать эмуляторы. Meteor для Windows не поддерживает мобильные сборки ( билды ). Эта способность есть у Cordova , который является фреймворком, преобразующим веб-языки в мобильные приложения.

На сайте Meteor js Windows сказано, что он позволяет разрабатывать десктопные приложения. Но в действительности это не так.

Meteor подходит для создания того, что запускается на сервере, и работает в браузере или на iOS/Android . Он представляет собой фреймворк, оборудованный модулями и интерфейсами.

Другие фреймворки ( например, Ember ), предназначены только для front-end разработки. Meteor поддерживает интеграцию и применение большинства популярных Javascript-библиотек и фреймворков ( Angular и React ).

Meteor js изначально подготовлен к интеграции с MongoDB на серверной стороне и MiniMongo на стороне клиента. Здесь довольно просто создать набор данных и начать использовать их в базе.

Electron

Electron предназначен для создания кроссплатформенных приложений, работающих как десктопные. Здесь разработка также происходит на JavaScript , HTML , CSS и с использованием различных Node-библиотек . Но создаваемое приложение компилируется в нативные программы для Windows , Linux и Mac . Как раз этой функции не хватает в Meteor .

Electron был разработан командой Github специально для редактора Atom , и с того времени используется для системы лайков в Microsoft и Facebook .

Интерфейс контейнера управляется с помощью Chromium и использует сервер Node.JS для вывода приложения внутри контейнера. Это автономный веб-сервер, работающий во фрейме, который не сильно отличается от вкладки в браузере Chrome .

Данный фреймворк позволяет использовать React , Angular или библиотеки Node . Но здесь не придётся запускать PHP , Ruby или Java .

За счёт Chromium создаваемые приложения осуществляют доступ к определенным функциям операционной системой, будь то диалоговые окна, меню или оповещения. Приложения для Windows можно упаковать и выполнять при помощи установщика. У вас будет доступ к файловой системе и возможность хранить данные различными способами.

Если хотите увидеть Electron в действии, то вы уже делаете это. Многие приложения основываются на этом фреймворке: Slack , Visual Studio Code , Nylas N1 , Brave Browser и редактор Atom .

Что касается приложений под Mac , то вам понадобится версия операционной системы не ниже 10.9 , 64bit . В случае с Windows потребуется Windows 7 или выше, 32bit или 64bit ( но не версии ARM ). Ситуация с Linux зависит от библиотек, но с точностью можно сказать, что приложения будут работать на Ubuntu 12.04 ( и выше ), Fedora 21 и Debian 8 .

Для хранения данных предусмотрено множество вариантов. Самый простой – LocalStorage . Но его может оказаться недостаточно, так как объём исчисляется в мегабайтах. Следующим по счёту JSON-хранилищем , которое удобно использовать для настроек и состояний называется electron-json-storage . Ещё можно использовать Pouchdb , но доводилось слышать много жалоб на производительность этой СУБД, если код насчитывает свыше 50 тысяч строк.

Идеальным вариантом будет IndexedDB . Для работы с ней есть различные инструменты и API , вроде Dexie.js . Здесь даже есть локальные хранилища для БД, вроде NeDB .

Electron компилирует десктопные приложения под Windows , Linux и Mac . Meteor js обучение показало, что он создает веб-приложения с возможностью адаптации под iOS и Android с помощью Cordova .

Возникает очевидный вопрос: могу ли я создать Meteor-приложение , но запустить его как контейнер Electron ? Ответ – да!

Загвоздка в том, что вряд ли для этого существует удобный способ. Есть много разных методов. Лучше начать изучать этот вопрос с форумов Meteor . Также можно обратиться к Electrometeor – проекту для запуска Meteor в Electron . Но учтите, что этой утилите уже несколько лет. Я не знаю, работает ли она с последними версиями Meteor .

Я бы и сам хотел попробовать скомбинировать два этих фреймворка. Результатом такого слияния должно стать приложение, которое будет работать в веб, компилироваться под iOS и Android , а также работать на всех десктопных операционных системах. При этом все варианты реализации будут основываться на одной и той же базе исходного кода.

Конкурентов Electron не так и много. Среди них можно выделить NW.js ( прежнее название «node-webkit» ). Оба фреймворка построены на движке V8 Chromium JS , но Electron лучше с точки зрения функционала.

Есть и другие способы скомпилировать создаваемые приложения под несколько платформ, но Electron лучше всего подходит для работы с HTML , JS , CSS и Node . Xamarin , к примеру, делает всё то же самое, но на C# .

Сильнейшим конкурентом Meteor js Windows считается Express – фреймворк также основанный на Node.js . В дополнение к Express можно использовать Feathers , который добавляет новые модули и функции для разработки приложений в режиме реального времени.

Meteor – фреймворк для разработки, тестирования, профилирования, запуска, обновления и мониторинга полноценных веб-приложений. С помощью Cordova можно адаптировать любой проект под iOS или Android . После этого можно превратить приложение в полноценную десктопную программу, работающую в Windows , Mac и Linux .

Учтите, что Meteor подходит только для работы с маленькими приложениями.

Electron можно использовать, если необходимо разрабатывать кроссплатформенные десктопные приложения, работающие как офлайн, так и онлайн. При этом желательно чтобы разработка велась на JavaScript , HTML , CSS , Node с использованием библиотек npm . Electron является простым Node-сервером , работающим в контейнере Chromium на движке J avaScript V8 . Теоретически, в нём можно запускать любые старые Node-приложения , независимо от того, разработано оно на Meteor js или нет.

Если вы разработали приложение при помощи Electron , а затем хотите запустить его в веб, то придётся разобрать его до базового Node-проекта без использования API Electron . Проще будет сначала создать веб-приложение, а затем думать о том, как скомпилировать его для работы на настольных ПК.

Надеюсь, сегодняшняя статья поможет вам определиться, какой фреймворк использовать в следующем проекте – Electron или Meteor js . Я рекомендую познакомиться с обоими фреймворками.

Вадим Дворников автор-переводчик статьи « What’s the Difference between Meteor and Electron? »

Источник: www.internet-technologies.ru

Главный секрет разработки хороших Electron-приложений

Кое-кто люто ненавидит Electron-приложения. То, что приложение включает в себя браузер Chromium, кажется, мягко говоря, странным. Это ощущение усиливается в ходе работы с такими приложениями. Они потребляют много памяти, медленно загружаются и не отличаются особенно высокой скоростью реакции на воздействия пользователя. Непросто разработать хорошее приложение для веба.

Зачем же веб-технологии притащили в настольную среду? Ведь возникает такое ощущение, что в этой среде они создают кучу проблем?

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

Некоторые из проблем Electron (большие размеры файлов, медленная загрузка) являются наследием технологий, на которых основана эта платформа. Их надо решать на низком уровне. Более серьёзные проблемы (потребление памяти, неповоротливость интерфейсов) могут быть решены на том уровне, на котором разрабатывают Electron-приложения. Однако решать эти проблемы непросто. Что если есть некий секрет, зная который можно, в автоматическом режиме, минимизировать эти недостатки?

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

Суть секрета

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

• Мгновенная загрузка данных. Пользователям приложения никогда не придётся ждать загрузки данных по сети. Данные загружаются из локального хранилища. Это сразу же даёт приложению ощутимый прирост производительности.
• Небольшие потребности в кэшировании. Клиентскому приложению не нужно особенно беспокоиться о кэшировании. Это так из-за того, что все необходимые ему данные доступны локально. Для того чтобы веб-приложение смогло бы выйти на достойный уровень производительности, ему обычно нужно загрузить в своё локальное состояние данные внушительного объёма. Это — одна из причин очень большого потребления памяти Electron-приложений.

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

Потребление памяти приложением Actual

Приложение, которое не выполняет каких-либо активных действий, занимает, в целом, 239.1 Мб памяти. Этот показатель может быть и больше, он зависит от того, что именно происходит в приложении, но за базу можно принять именно указанное число. Это — не идеально, но не так уж и плохо. По крайней мере — лучше, чем те 1371 Мб памяти, которые требуются на моём компьютере Slack.

Надо сказать, что Slack — это нетипичный пример Electron-приложения, характеризующийся специфическими проблемами. Вокруг Electron из-за Slack поднялась некоторая шумиха. Другие приложения, вроде Notion или Airtable, потребляют примерно 400-600 Мб памяти. А это значит, что моё приложение неплохо выигрывает в этом плане и у них.

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

Фоновый сервер может оптимизировать собственное потребление памяти, загружая в память только нужные в некий момент времени данные. Лучше всего для хранения данных пользоваться чем-то вроде SQLite. Эта СУБД уже серьёзно оптимизирована для решения подобных задач (серьёзно — просто пользуйтесь SQLite). Кроме того, надо отметить, что перемещение различных вычислений в фоновые процессы позволяет пользовательскому интерфейсу приложения реагировать на воздействия пользователя настолько быстро, насколько это возможно.

Оказалось, что использование в Electron-приложении фонового сервера даёт разработчику интереснейшие возможности. В следующем разделе мы поговорим обо всех тех невероятных вещах, которые можно делать с его использованием.

Даже если ваше приложение серьёзно завязано на облачные данные — вам может понадобиться фоновый процесс в том случае, если вы собираетесь работать с API Node.js. Спокойно взаимодействовать с этими API можно только из фоновых процессов. Собственно говоря, каким бы ни было ваше Electron-приложение, я полагаю, что знакомство с проектом, который мы сейчас рассмотрим, способно дать вам какие-то полезные идеи.

Приложение electron-with-server-example

Я создал приложение electron-with-server-example для того чтобы на его примере показать всё, что нужно настроить для разработки по-настоящему локальных Electron-приложений. Сделал я это в стремлении увлечь программистов созданием подобных проектов. Мне бы хотелось встретить подобный проект в то время, когда я только начинал работать с Electron.

Технические сведения о приложении можно найти в файле README . Вот общий обзор проекта:

• В нём создаётся обычный процесс Node.js, используемый для выполнения серверного кода в фоновом режиме.
• В нём, с помощью node-ipc, создаётся IPC-канал, который предназначен для организации прямого взаимодействия между бэкендом и пользовательским интерфейсом приложения.
• Если проект запускают в режиме разработки, то сервер запускается не в виде фонового процесса. С ним можно взаимодействовать через отдельное окно браузера. Это нужно для целей отладки.

Клиентская и серверная части приложения

Да, так оно и есть. После того, как я научился запускать фоновые процессы, я понял, во-первых, то, что в моём распоряжении имеются инструменты разработчика Chromium. А во-вторых — я понял, что я, в отладочных целях, могу пользоваться ими для отладки Node.js-кода. В результате я и говорю о том, что с Node.js можно взаимодействовать через браузер. Это позволяет использовать богатый набор инструментов разработчика браузера, основанного на Chromium, для отладки серверного кода.

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

Использование консоли

Я добавил в файл server-ipc.js команды логирования запросов и ответов. Исследовать их я могу с помощью консоли браузера.

Отладка Node.js-приложения в консоли браузера

Пошаговое выполнение кода

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

Пошаговое выполнение кода

Профилирование

Возможно это — мой любимый инструмент. Речь идёт о блестящем стандартном средстве для исследования производительности кода, которое позволяет профилировать серверную часть приложения.

Исследование производительности серверного кода

С помощью инструментов разработчика браузера можно даже исследовать то, что происходит при запуске фонового процесса (это, скорее всего, самая «тяжёлая» часть запуска приложения).

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

Перезагрузка сервера с помощью комбинации клавиш Cmd+R или Ctrl+R

Ещё одна из возможностей отладки серверного кода в браузере заключается в том, что, так как отладка сервера выполняется в окне браузера, простая перезагрузка содержимого окна приводит к перезапуску сервера! Достаточно воспользоваться комбинацией клавиш Cmd+R (или, для Windows, Ctrl+R ), и в вашем распоряжении оказываются самые свежие изменения, внесённые в серверный код. При этом данные фронтенда сохраняются. Это значит, что с клиентской частью приложения можно продолжить работу, но, после перезапуска сервера, клиентская часть уже будет работать с новой версией серверного кода. Это напоминает нечто вроде «горячей» замены кода на работающем сервере.

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

Перезагрузка сервера

Исследование работающей серверной части приложения и «горячая» замена кода

Обычно я, отлаживая сервер, просто добавляю в нужные места кода команды console.log() и перезапускаю его. Но иногда, в особо сложных случаях, бывает так, что крайне полезно было бы заглянуть в то, что происходит в работающем сервере, а не перезагружать его. Возможно, что и не только «заглянуть» внутрь сервера, но и что-то в нём поменять для того чтобы посмотреть на то, как это повлияет на проблему.

В консоли можно пользоваться командой Node.js require . Это означает, что с её помощью можно подключать любые модули сервера и работать с ними в консоли.

Предположим, нам нужно поработать с модулем server-handler.js . Для этого достаточно выполнить в консоли команду let handlers = require(‘./server-handlers’) .

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

handlers._history = [] handlers[‘make-factorial’] = async (< num >) =>

Исследовать состояние сервера можно из консоли, подключив соответствующий модуль и взглянув на handlers._history . При желании, во время выполнения программы, мы можем даже полностью заменить реализацию make-factorial !

Исследование состояния сервера

Итоги

Взгляните на репозиторий electron-with-server-example для того, чтобы почитать о деталях реализации проекта и посмотреть код серверной части Electron-приложения.

Если вы пользуетесь Visual Studio Code, то вы, возможно, привыкли к качественной интеграции инструментов разработчика с Node.js-сервером. При таком подходе вы можете самостоятельно, отдельно от Electron-приложения, запустить сервер. После этого можно сообщить Electron о том, что нужно подключиться к процессу, владельцем которого является VS Code. Однако я предпочитаю использовать существующие инструменты разработки Electron.

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

Последние несколько лет я, разрабатывая приложение Actual, постоянно пользуюсь тем, о чём только что рассказал. И хочу сказать, что всё это мне очень нравится. Возможно, работа над Node.js-частью этого приложения стала источником самых приятных из когда-либо испытанных мной впечатлений от программирования.

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

Уважаемые читатели! Как вы относитесь к приложениям, основанным на Electron?

Источник: temofeev.ru

Электронная открытая платформа и почему это здорово для разработки приложений

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

Что такое электрон?

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

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

Что-то уникальное в Electron — это то, как он позволяет людям писать приложения. В отличие от более традиционных языков программирования , приложения, использующие Electron, сегодня написаны на трех основных компонентах многих веб-страниц. То есть HTML (язык гипертекстовой разметки), CSS (каскадные таблицы стилей) и JS (JavaScript).

Как работает Electron Open Framework

Таким образом, открытая платформа Electron работает аналогично тому, как интернет-браузер, который предоставляет свои веб-страницы. То есть HTML и CSS для внешнего вида и JS для внутренних операций и операций. Фактически, фреймворк имеет много общего с веб-браузерами. По сути, вы создаете мощные веб-страницы для использования в качестве настольных программ

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

Фреймворк также использует что-то под названием Node.js , что позволяет программам Electron работать как более родные приложения. Сам по себе Node.js — это прежде всего веб-сервер. язык, предназначенный для предоставления интерактивного контента для посетителей. Как таковой, он требует определенных функций, таких как редактирование файлов, что делает его полезным для чего-то вроде Electron.

Кроме того, Electron дает людям возможность отображать графические окна и так далее. Это по сравнению с Node.js, который не делает этого. Он также предоставляет конкретные методы лучшей интеграции с целевой операционной системой, такие как сенсорная панель Macbook Pro. сенсорная панель

Что это означает для приложений

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

Больше кроссплатформенных программ

Electron уже стал основой множества различных программ, большинство из которых доступны в Windows, macOS и Linux. Как уже упоминалось ранее, так как фреймворк основан на веб-технологиях, он позволяет программному обеспечению, написанному на нем, использовать довольно высокий уровень совместимости друг с другом.

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

Раздор например, относительно новое голосовое приложение, использующее открытую платформу Electron для своих собственных приложений на настольном компьютере (для мобильных устройств это другое дело). Код Visual Studio Код также работает с использованием этой среды, мощный текстовый редактор в том же духе, что и Atom.

Существует не так много способов сделать кроссплатформенные приложения практически без усилий по сравнению с чем-то вроде Electron. Особенно с такими языками, как HTML / CSS / JS. Нижняя строка означает больше программ, которые люди могут использовать где угодно, независимо от их рабочего стола.

Время разработки быстрее

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

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

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

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

консистенция

Благодаря технологиям, на которых построен Electron, приложения, использующие его, имеют тенденцию выглядеть и вести себя одинаково, независимо от платформы, на которой они работают. Будь то Linux или macOS , вряд ли что-то будет отличаться (за исключением частей, которые явно сделаны так).

Это работает аналогично тому, как веб-страницы отображаются в браузерах. А основываться на HTML и CSS означает возможность легко стилизовать приложения определенным образом. Используя Chromium, как один из его основных компонентов означает, что он будет постоянно выглядеть, как бы веб-браузер ни отображал.

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

Несколько предостережений

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

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

Вы бы рассмотрели возможность использования открытой платформы Electron для разработки программ, если бы у вас была возможность и время для этого?

Источник: gadgetshelp.com