ElectronJS, или как написать кроссплатформенный десктоп за час


Содержание

В чём разница между 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? » , подготовленной дружной командой проекта Интернет-технологии.ру

ElectronJS, или как написать кроссплатформенный десктоп за час

Приложения в вебе становятся всё мощнее, здесь прогресс на лицо. Тем не менее значительную долю разработки занимают стандартные приложения, которые имеют полный доступ к физическому оборудованию ПК. Уже сегодня есть возможность объединить обе технологии и написать десктопное приложение на известных языках веб-программирования, вроде HTML, JS и Node.js . Это всё можно поместить в исполняемый файл, который можно использовать на Mac OS X, Windows, Linux.

Цукерберг рекомендует:  CSS эффект переворачивания с использованием анимации WebKit

Сейчас есть 2 популярнейших проекта с opensource-кодом, которые могут создавать исполняемые файлы из веб-приложений. Речь идёт о NW JS и Electron. В рамках данного материала поговорим о последнем.

Начало работы с Electron

Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.

Запуск приложения

Как уже удалось определить, приложение на Electron – это обычная Node.js программа, поэтому ей нужно добавить npm . Благо, это выполняется предельно легко.

Следует запустить терминал и находясь в каталоге целевого проекта выполнить команду:

В результате появится папка с названием node_modules , в которой установлены все нужные зависимости для программы. Дальше стоит ввести ещё одну команду.

После неё приложение запустится в новом окне. Нужно заметить, что в нём будет исключительно верхнее меню.

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

Разработка программы

Разработка программы это создание главного JS файла, а также HTML и CSS файлов содержащих все стили и разметку для страниц программы.

Предлагаем вам просмотреть небольшое видео, в котором наглядно приведено описание и создание полноценного приложение на Electron JS.

Ссылки из видео:

Ниже приведен весь код из видео урока.

JS файл:

HTML код:

Упаковка и дистрибуция

Существует ещё один важный момент, который помогает достичь целевого пользователя. Вам нужно запереть всё содержимое в исполняемый файл, как раз его и можно включить двойным кликом. Важно создать уникальный дистрибутив под каждую ОС: Windows, OS X, Linux. Как раз в этом и пригодится Electron Packager .

Здесь следует уделить внимание тому, что в готовый файл также добавятся ваши ресурсы, это обусловлено платформой Node JS, и обрезанная копия webkit веб-обозревателя. На выходе должен получиться файл весом около 50 Мб. Это весьма большой вес для обычного приложения в несколько строк. Вопрос с весом программы теряет актуальность при разработке крупных приложений со сложными алгоритмами работы.

Почему не люблю приложения на Electron

Есть такая штука, которая называется Electron. C ее помощью можно быстро создавать кроссплатформенные приложения, используя только HTML, CSS и JavaScript. Казалось бы разработчикам лафа — раз и готово. Это подтверждается большим числом приложений сделанных на Electron. Вот что говорит о применении Electron Википедия.

На его базе построен не только текстовый редактор для программистов Atom, но и такие программные продукты для разработчиков, как Visual Studio Code[6], Light Table (начиная с версии 0.8), Ionic[en] Lab, Avocode, REPL-консоль Mancy для фреймворков Node.js и Meteor.js, Mongotron — GUI-менеджер для MongoDB. На базе Electron также написано клиентское приложение чата Slack, десктопный клиент WordPress и многое другое.

Просто потрясающе. Но я стараюсь избегать приложений на Electron и вот почему. Один умный человек назвал Electron «новым Flash», что я горячо поддерживаю. Судите сами — Electron использует ряд веб-технологий, которым для работы нужен браузер. И Electron изначально за собой тянет ошметки браузера Google Chrome, а точнее Chromium. Это удобно разработчику, но для пользователя сплошной геморрой. Chrome и так не маленький, а тут если у вас стоит три приложения на Electron и она запущены одновременно, считайте у вас запущено три Google Chrome. Например, когда я поставил standalone-версию Tweeten (оболочка для TweetDeck), то она занимала в памяти 197 Мб. 197 Мб за какой-то клиент для твиттера, Карл! Конечно, кто-то скажет что это копейки, но для меня выросшего во времена, когда 32 Мб оперативки было верхом роскоши, такие цифры кажутся дикими. И если такое расточительство оправданно на десктопе, где оперативка измеряется гигабайтами, на ноутбуке с 4 Гб ОЗУ такой подход абсолютно неприемлем. Ну, не менять же, в конце концов, нормально работающий ноутбук из-за какого-то твиттера и еще пары приложений. Это абсурд, товарищи! Поэтому, Electron я избегаю, тем более, что большинство интересных мне сервисов отлично работают через браузер. Как раз, через тот самый Chrome, который запущен у меня в 99% времени.

Об авторе

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

Electron – создание десктопного приложения с помощью веб-технологий

February 13, 2020 Jazz Team Технические статьи , 0

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

Что такое Electron

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

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


Давайте рассмотрим как работает и из чего состоит Electron-приложение.

В Electron-приложении существует два типа процессов: основной процесс и процесс визуализации.

Основной процесс (main process) — это процесс, который запускается из package.json. Скрипт, запущенный в основном процессе, может отображать GUI используя веб-страницы. В Electron-приложении всегда есть один главный main process. Основной процесс управляет процессами визуализации.

Процесс визуализации ( renderer process ) отвечает за запуск пользовательского интерфейса вашего приложения, или, другими словами, веб-страницы, являющейся экземпляром webContents (отвечает за рендеринг и управление веб-страницей) . Все API-интерфейсы DOM, API-интерфейсы node.js и подмножество API библиотек Electron доступны в данном процессе.

Решение проблемы с закрытием процесса рендеринга

Из-за многопроцессорной архитектуры Chromium мы столкнулись с проблемой, что при закрытии или аварии в процессе визуализации, приложение продолжает выполняться, но в окне ничего не отображается(процесс визуализации мертв), однако нам было необходимо, чтобы процесс визуализации работал постоянно.

Решением данной проблемы является перехват события ‘crashed’ (возникает при сбое или завершении процесса рендеринга ) для объекта webContents, который можно получить из BrowseWindow (класс, который дает возможность создать окно браузера).

Пример закрытия приложения при аварии в render process:

Передача информации в основной процесс из процесса визуализации

В Electron некоторые графические модули(например: меню, формат окна приложения, размер, прозрачность и т.д.) доступны только в основном процессе, но не в процессе визуализации. Управление этими модулями из процесса визуализации осуществляется при помощи модуля ipc , этот модуль позволяет отправлять асинхронные межпроцессорные сообщения.

Для большей наглядности продемонстрируем вызов функциональности основного процесса из процесса визуализации на примере. При нажатии пользователем на кнопку «выйти», приложение должно перейти в режим киоска — пользовательский интерфейс, который ограничивает доступ к функционалу приложения и системы. В решении поставленной задачи используем модули ipcMain и ipcRenderer.

Модуль ipcMain обрабатывает асинхронные и синхронные сообщения, отправленные из процесса визуализации в основном процессе. Для этого воспользуемся методом on(channel, listener), который слушает канал channel, и при появлении нового сообщения вызовется listener.

Ниже приведен пример кода, который слушает канал ‘logout’ на появление новых сообщений, и при появлении нового сообщения переведёт приложение в режим киоска:

Модуль ipcRenderer позволяет отправлять асинхронные и синхронные сообщения из процесса визуализации в основной процесс.

Нами была реализована функция userLogout, которая отвечает за логику завершения сеанса пользователя. В числе прочего, сделаем сигнал(отправим пустое сообщение) о переходе приложения в режиме киоска, по каналу ‘logout’:

Предотвращение запуска более одного экземпляра Electron-приложения

Для того, чтобы предотвратить запуск более одного экземпляра Electron-приложения, существует метод makeSingleInstance из модуля app, который возвращает значение true — в случае, если текущее приложение является не первым запущенным экземпляром, и false — в случае, если первым.

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

Заключение

Electron является конкурентоспособным решением при разработке кроссплатформенных приложений. Не требует от команды разработки знания таких языков программирования как C++ и Python, позволяет создавать приложения, используя богатые возможности веб-технологий HTML, CSS, JS, а также Node.js.

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

Главным недостатком Electron является большое потребление оперативной памяти и большой вес даже минимального приложения.

До свидания, Electron. Здравствуйте, настольные PWA

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

Новшества Chrome v70

Свежая версия Chrome (v70) поддерживает настольные прогрессивные веб-приложения (Desktop Progressive Web Apps, PWA) на платформах Linux и Windows.

Цукерберг рекомендует:  Живы ли стереотипы о женщинах в IT

Если взглянуть на список поддерживаемых систем, тут же становится заметным отсутствие в нём MacOS. Однако это так лишь до тех пор, пока не выйдет Chrome v72.

Важно отметить, что хотя эта возможность в MacOS по умолчанию не включена, её можно активировать с помощью соответствующего флага. Для этого надо открыть Chrome, перейти по адресу chrome://flags и найти там этот флаг. Можно и перейти к флагу напрямую, воспользовавшись ссылкой chrome://flags/#enable-desktop-pwas.

Что такое прогрессивные веб-приложения?

В особые подробности, касающиеся PWA, мы тут вдаваться не будем. Вот раздел документации Google, в котором можно почитать о них. Для того чтобы своими глазами увидеть PWA и попробовать их в деле, откройте Chrome для Android или Safari в iOS (тут, правда, поддерживаются не все возможности PWA) и посмотрите эти примеры. А вот — выступление на эту тему с Google I/O ‘18.

Что такое Electron?

Electron — это платформа, которая позволяет разработчикам создавать кросс-платформенные настольные приложения с использованием JavaScript, HTML и CSS. Здесь же используются некоторые замечательные JavaScript-библиотеки и фреймворки. Это облегчает веб-программистам вхождение в разработку настольных приложений. Приложения, основанные на Electron, в последние годы приобрели огромную популярность. В рамках таких проектов, как Slack, VS Code, Atom, Discord, вложены немалые силы в разработку приложений с использованием Electron. Если вам эти проекты не знакомы, то вам, определённо, стоит взглянуть на соответствующие приложения и сервисы. Традиционные настольные приложения нередко казались какими-то неуклюжими, элементы их интерфейсов выглядели как нечто устаревшее. Electron, определённо, принёс красоту и изящество в мир настольных приложений.

При чём тут PWA?

Хотя Electron-приложения — это растущее и развивающееся явление, и их реализация близка к реализации веб-приложений, у них, всё же, есть некоторые минусы. Во-первых, такие приложения используют собственные экземпляры браузера Chromium. Многие знают о том, сколько оперативной памяти нужно для работы Chrome. Теперь, для того, чтобы оценить ситуацию, возникающую в системе при одновременном запуске нескольких Electron-приложений, надо взять их количество и умножить на этот объём памяти. Если интересно — откройте несколько Electron-приложений и посмотрите на то, сколько памяти они потребляют.


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

Использование Electron добавляет сложностей, связанных с поддержкой старых версий программ и с наладкой процесса обновления приложений.

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

Разработчик может показать это приглашение только после того, как браузер вызовет событие beforeinstallprompt объекта window . После установки приложения на рабочем столе появляется соответствующий значок.

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

Пример PWA

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

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

  • Приложение должно обслуживаться по HTTPS.
  • У него должен быть установленный сервис-воркер с как минимум одним обработчиком fetch .
  • Оно должно содержать правильно оформленный файл manifest.json .
  • Его страницы должны быть спроектированы с использованием методики отзывчивого дизайна.

Дополнительные примеры

Если вы работаете на MacOS, то PWA могут счесть, что установить их вы не сможете, и не покажут вам приглашение для их установки. Если включить соответствующие флаги и повозиться с консолью разработчика, можно добиться от PWA того, что они приглашение на установку выведут. Вот некоторые из существующих PWA, которые удалось установить на Mac.

Starbucks

Компания Starbucks вложила немало сил в разработку отличного PWA. Их настольное приложение получилось прямо-таки впечатляющим.

Google Maps

Это — просто замечательное приложение. Оно делает своё дело и не особенно сильно нагружает систему, отличаясь быстрой работой и отзывчивым дизайном. Для установки этого приложения нужно исхитриться и загрузить мобильный сайт Google Maps.

Twitter

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

Итоги

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

  • Глубокие ссылки: ссылки, открываемые из Chrome, вызывают установленное приложение.
  • Уведомления на значках приложений: показ уведомлений на значках запуска настольных приложений, так же, как это делается на значках мобильных приложений.
  • Поддержка горячих клавиш: возможность прослушивания событий клавиатуры для использования внутри приложений горячих клавиш.

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

Первое десктопное приложение на HTML, JS и Electron

Данный материал является вольным переводом статьи:
Danny Markov Creating Your First Desktop App With HTML, JS and Electron

Материал вычитывал: Михаил Синяков

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

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

Начинаем работу с Electron

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

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

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

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

Запуск приложения


Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.

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

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js

Давайте взглянем на то, что мы делаем в методе ready . Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.

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

index.html

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.

Цукерберг рекомендует:  Игра - Создаем платформер Мишка Косолапый

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

  • JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
  • Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
  • Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

H Создание десктопного приложения с помощью Webix и Electron в черновиках Из песочницы Tutorial

Статья представляет собой пошаговое описание моего опыта создания кроссплатформенного десктопного приложения с помощью Webix, Electron и Node.js.

Однажды мне пришла в голову светлая мысль создать десктопное приложение на базе стека веб-технологий, который мне хорошо знаком. Знаю, что программисты, пишущие под десктоп, обычно используют C++, Java, C#, а на стек веб-технологий для этих целей смотрят свысока. Но, поскольку я писал приложение для себя, то справедливо решил, что использование знакомых инструментов ускорит процесс. Ну и конечно захотелось «скрестить ужа с ежом» и посмотреть что получится. Если вкратце, то получившийся результат можно запускать и как обычное веб-приложение, и как десктоп.

Код уже готового приложения можно скачать с GitHub.

Что будет делать наше приложение… Это TODO-list (а как же иначе. ), в который мы сможем добавлять события, редактировать их и удалять. Событие будет иметь заголовок, содержание, место проведения, дату и приоритет. Также будет доступна возможность перевода интерфейса на русский и английский языки. Назовем его «Data master».

Для создания веб-приложения я использовал Webix. Он представляет собой кроссплатформенную и кроссбраузерную UI библиотеку, использующие компоненты для быстрого построения приложения с использованием JavaScript синтаксиса. Для компиляции веб-приложения в десктоп использовался Electron. Это кроссплатформенный инструмент, работающий на базе Node.js и позволяющий компилировать веб-приложение для запуска на различных платформах различной разрядности: Windows, Linux, Mac. Для всяких вспомогательных вещей используются инструменты на базе Node.js.

Начнем со структуры папок. В корне проекта я создал ее в таком виде:

  • css — стили
  • data — бэкенд
  • img — изображения
  • js — скрипты JavaScript

После установки модулей Node.js добавится папка «node_modules», для Webix будет использоваться папка «codebase», в папке «

/release/DataMaster» будут версии десктопного приложения для различных платформ.

Корневая папка проекта должна быть расположена на сервере. В моем случае это Apache.
Итак, для начала я зашел на страницу загрузки Webix и нажал «Скачать Webix Standard». Это бесплатная версия библиотеки (лицензия «GNU GPLV3»), которая вполне подойдет для наших нужд. Имеется еще коммерческая версия «Webix PRO», которая отличается главным образом расширенной библиотекой виджетов, а также возможностями техподдержки. Из полученного архива «webix.zip» копируем папку «codebase» в корень нашего проекта. Внутри папки «codebase» обратите внимание на файлы webix.js и webix.css. Подключение этих файлов в приложении позволяет работать с Webix. В папке «skins» содержатся css-файлы с темами.

Создадим в корне проекта файл index.html.

Добавим webix.js. Подключение webix.css дает нам возможность использовать стандартную тему. Я же решил подключить симпатичную темненькую тему, которая лежит в «codebase/skins/contrast.css». Также мы подключили файлы из папки «codebase/i18n» для использования встроенной возможности локализации Webix. В индексного файла подключаем файл «bundle.js». Там будет находиться сборка всего нашего js-кода. Для сборки нам понадобится Node.js и Gulp.

Если у вас еще не установлена Node.js, то сделать это можно отсюда. Командами $ node -v и $ npm -v проверьте корректность установки Node.js и пакетного менеджера платформы — NPM.


Теперь в папке «js» мы будем создавать основную логику приложения. Файл internalization.js содержит объект для интернационализации интерфейса приложения. По аналогии с уже имеющимися языками (русский, английский) вы можете добавить туда другие языки в случае необходимости.

Большинство функций являются обработчиками события «onclick» кнопок. Код функций в основном представляет собой способы работы с Webix-элементами. В общих чертах он интуитивно понятен, если нужна более подробная информация — добро пожаловать на страницу документации Webix.

Релизы

Если Вы можете сделать сайт, то Вы сможете сделать настольное приложение. Electron это фреймворк для создания нативных приложений с веб-технологиями, такими как: JavaScript, HTML и CSS. Он заботится о трудных частях, так что Вы можете сосредоточиться на главных элементах Вашего приложения.

Веб-технологии

Electron использует Chromium и Node.js, так что Вы можете создавать свои приложения на HTML, CSS и JavaScript.

Open Source

Electron это проект с открытым исходным кодом, который поддерживается GitHub и активным сообществом участников.

Кросс-платформенный

Совместимые с Mac, Windows и Linux приложения Electron создаются и запускаются на трех платформах.

Сложные вещи стали проще

Начать работу

Для начала работы с Electron посмотрите на указанные ниже ресурсы. Узнайте как обернуть Ваше веб-приложение с Electron, получить доступ ко всем API и научиться создавать установщики.

Исследуйте Electron API

Демонстрационное приложение Electron API интерактивно демонстрирует наиболее важные функции Electron API. Посмотрите на возможности Electron на примере простого кода и прочитайте полезные советы для создания Вашего приложения.

Попробуйте более мощные эксперименты с Electron Fiddle

Electron Fiddle позволяет Вам создавать и пробовать небольшие эксперименты с Electron. По открытию, Вас приветствуют шаблоном ускоренного запуска — Вы можете изменить несколько установок, выбрать желаемую версию Electron и поиграть с разными вариантами. После, сохраните Ваш Fiddle как GitHub Gist или в локальную папку. При опубликовании в GitHub, Ваш Fiddle доступен любому и всё, что нужно сделать, чтобы попробовать Ваш Fiddle это ввести его в адресную строку браузера.

Подготовьте приложение быстрого старта для просмотра Electron в действии:

Небольшое приложение Electron с полезными нотациями.

Или окунитесь глубже и ознакомьтесь с документацией.

Нужна помощь?

Вы можете задать вопрос на нашем форуме в Discuss или на канале Slack. Следите за важными объявлениями @electronjs на Twitter. Если Вам нужно решить персональный вопрос, отправьте e-mail на info@electronhjs.org.

Создано на Electron

Изначально разработанный для принадлежащего компании GitHub редактора Atom, Electron был принят компаниями по всему миру.

С помощью Electron, создавать настольные приложения для Вашей компании или идеи стало проще. Проверьте несколько приложений, созданных сообществом, или добавьте свое собственное.

Хочешь научиться программировать?

Получи доступ к десяткам бесплатных материалов

Общайся и учись у ведущих IT-специалистов

ElectronJS, или как написать кроссплатформенный десктоп за час

На этом вебинаре мы познакомимся с ElectronJS — фреймворком для создания кроссплатформенных десктопных приложений.

Чем мы займёмся:

    поговорим о фреймворке и посмотрим, как выглядят уже готовые приложения на нём;

Вебинар рассчитан на новичков с базовыми знаниями JS, HTML и CSS.

Реакции на статью


Понравился наш сайт? Присоединяйтесь или подпишитесь (на почту будут приходить уведомления о новых темах) на наш канал в МирТесен!

electron Начало работы с электроном

замечания

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

Electron — это среда с открытым исходным кодом , которая используется для создания настольных приложений с использованием HTML , CSS и JavaScript . Внутри он работает благодаря Chromium и Node.js.

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

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

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

Приложения, созданные на Electron

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

Версии

Версия замечания Дата выхода
1.0.0 2020-05-09
1.0.1 2020-05-11
1.0.2 2020-05-13
1.1.0 2020-05-13
1.1.1 2020-05-20
1.1.2 2020-05-24
1.1.3 2020-05-25
1.2.0 2020-05-26
1.2.1 2020-06-01
1.2.2 2020-06-08
1.2.3 Между этим и
1.4.7, но было слишком много
перечислить
2020-06-16
1.4.7 Последняя версия от 19 ноября 2020 года 2020-11-19
1.6.11 2020-05-25
1.7.3 Последняя версия от 19 июня 2020 года 2020-06-19

Привет, мир!

Настроить

Структура проекта Electron обычно выглядит так:

Теперь давайте создадим файлы и инициализируем наш package.json .

Примечание. Если main параметр не указан в package.json , Electron будет использовать index.js в качестве точки входа по умолчанию.

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

В Electron процесс, выполняющий основной скрипт package.json называется основным процессом . Здесь мы можем отображать графический интерфейс, создавая экземпляры BrowserWindow .

Добавьте в index.js следующее:

HTML-шаблон и процесс рендеринга

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

Добавьте следующий код в index.html :

Запуск приложения

Существует несколько способов запуска приложения Electron.

С установленными electron-prebuilt глобальном масштабе

Во-первых, убедитесь, что у вас установлена electron-prebuilt .

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

Метод 2 — Без установленного electron-prebuilt глобальном масштабе

Во-первых, нам нужно будет войти в папку вашего приложения (папка, где находится package.json).

Там, откройте окно Terminal / Command Prompt и введите npm install для установки необходимого в папку этого приложения.

После этого ключ в npm start запускать приложение. Имейте в виду, что ваш package.json все еще должен указать сценарий «start».

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

Поздравляем! Вы успешно создали свое первое приложение Electron.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих