- До свидания, Electron. Здравствуйте, настольные PWA
- Новшества Chrome v70
- Что такое прогрессивные веб-приложения?
- Что такое Electron?
- При чём тут PWA?
- Пример PWA
- Дополнительные примеры
- Starbucks
- Google Maps
- Итоги
- Neutralinojs — альтернатива Electron, потребляющая меньше памяти
- Hello World на Neutralinojs
- Hello World на Electron
- Аналог electron для android
- About
- Какие есть альтернативы Electron?
До свидания, Electron. Здравствуйте, настольные PWA
Автор материала, говорит, что он, возможно, слишком торопится, но то, о чём он хочет рассказать, представляет собой, по меньшей мере, весьма интересную новость. Речь идёт о настольных прогрессивных веб-приложениях, которые вполне могут значительно потеснить позиции приложений, основанных на Electron.
Новшества Chrome v70
Свежая версия Chrome (v70) поддерживает настольные прогрессивные веб-приложения (Desktop Progressive Web Apps, PWA) на платформах Linux и Windows.
Если взглянуть на список поддерживаемых систем, тут же становится заметным отсутствие в нём 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 постаралась при разработке мобильного PWA, а настольную версию можно считать достойным дополнением к мобильному приложению.
Итоги
Не смотря на то, что вокруг настольных PWA поднято много шума, нужно отдавать себе отчёт в том, что эта технология пока находится на стадии становления. В частности, можно отметить следующие направления развития настольных PWA:
- Глубокие ссылки: ссылки, открываемые из Chrome, вызывают установленное приложение.
- Уведомления на значках приложений: показ уведомлений на значках запуска настольных приложений, так же, как это делается на значках мобильных приложений.
- Поддержка горячих клавиш: возможность прослушивания событий клавиатуры для использования внутри приложений горячих клавиш.
После того, как технологии разработки настольных PWA достаточно разовьются, эти приложения станут серьёзными конкурентами сегодняшних проектов, основанных на Electron.
Источник
Neutralinojs — альтернатива Electron, потребляющая меньше памяти
Neutralinojs — фреймворк с открытым исходным кодом для создания кроссплатформенных приложений на HTML/CSS/JS. Отличие от Electron в том, что для запуска приложения на Neutralinojs не нужно устанавливать nodejs и сотни зависимостей, тянущихся из package.json. Давайте сравним Hello World приложение на Neutralinojs и Electron. Приложение на Neutralinojs можно запустить на Windows или Linux (на данный момент MacOS не поддерживается, но это планируется исправить в ближайшем будущем). Я запускал на Ubuntu 17.10.
Hello World на Neutralinojs
Скачиваем архив neutralinojs-v1.1.0.zip (поддержка запуска полностью из командной строки в планах разработки) и распаковываем.
Приложение запускается и выглядит вот так:
Оперативная память: создается три процесса (neutralino, WebKitNetworkProcess, WebKitWebProcess) — в сумме они занимают 35 mb.
Обьем папки с файлами на диске: 5 mb.
Hello World на Electron
Клонируем репозиторий с файлами и переходим в созданную папку:
Обьем склонированных файлов: 344 kb.
Подтягиваем недостающие пакеты:
Появилась папка node_modules, обьем файлов в папке приложения стал: 218 mb.
Приложение запускается и выглядит вот так:
Оперативная память: я насчитал шесть процессов (electron-quick-start, три процесса electron, node, npm) — в сумме они занимают 83 mb.
Приложение | Занято на диске (mb) | Занято оперативной памяти (mb) |
---|---|---|
Hello World на Neutralinojs | 5 | 35 |
Hello World на Electron | 218 | 83 |
Разница по потреблению памяти, что называется, на лицо.
Подробнее о проекте Neutralinojs можете прочитать здесь.
Приношу извинения, у меня было указано, что HelloWorld на NeutralinoJs занимает 9 mb оперативной памяти и что создается один процесс, на самом деле оно занимает 35 mb оперативной памяти и создается три процесса. Спасибо Jouretz за наводку.
Источник
Аналог electron для android
List of alternatives to electron
Consider Progressive Web Apps (PWA), if your app doesn’t require any platform interactions.
«Progressive Web Apps might not be able to replace every kind of native application, but they can be viable replacements for some apps written with the Electron web wrapper technology». For more info https://www.androidpolice.com/2020/05/27/google-chats-desktop-application-is-now-a-progressive-web-app/
- Orleans
- Avalonia
- Uno (Pixel-Perfect Multi-Platform Applications with C# and WinUI)
- Chromely (Build HTML Desktop Apps on .NET/.NET Core/.NET 5 using native GUI, HTML5, JavaScript, CSS)
- NW.js (Similar to electron, provides Source code protection)
- DeskGap (bundles a Node.js runtime and leaves the HTML rendering to the operating system‘s webview)
- Neutralinojs (chromium module is replaced with either user’s web browser or built-in browser component. Node run-time is replaced with a lightweight web server which exposes native OS functionality)
- Proton Native (does the same to desktop that React Native did to mobile, based on https://github.com/parro-it/libui-node)
- React Native Desktop (Cross-platform React Native Desktop port based on Qt framework)
- Vuido (creating native desktop applications based on Vue.js, based on https://github.com/parro-it/libui-node)
- NodeGui (powered by Qt5, NodeGui-React, Vue NodeGui)
- reactxp (library for cross-platform app development using React and React Native)
- quasar (Vue.js based framework, which lets web developer to quickly create responsive websites/apps)
- nidium
- electrino
- graffiti
- Tauri
- Sciter.JS (Is a 5MB HTML/CSS/JS (ES6) runtime aimed as a direct Electron replacement)
- Glimmer (A Domain-Specific Language & metaframework for building GUI apps using Ruby, with bindings for various GUI libraries and also Web)
- qtbindings (Ruby bindings for Qt)
- tk (Ruby bindings for Tcl/Tk)
- ruby-gnome (Ruby bindings from GNOME/GTK3)
- JRubyFX (JRuby wrapper on JavaFX)
- traveling-ruby (Runtime to bundle Ruby applications into executables)
- Livecode (Lightweight language with [native GUI], integrated IDE, and visual interface builder)
- Qt
- Xojo
- LambdaNative
- REVERY
- 8th
- CEF
- yue
- Godot (Godot Engine – Multi-platform 2D and 3D game engine)
- Red (Full-stack lightweight language with native GUI, layout and drawing DSLs)
- HaxeUI (Haxe based cross platform (desktop, mobile, web) UI framework)
About
Few Cross platform desktop GUI App development options are listed here
Источник
Какие есть альтернативы Electron?
Здравствуйте. Я веб-разработчик. Но сейчас есть желание написать кросс платформенную программу. Ранее я писал приложения используя Electron и немножечко щупал Cordova.
Суть вопроса: Какие есть альтернативы Electron? Как они работают? Как ведут себя с точки зрения итоговой производительности? В чем их плюсы и минусы как глобально так и в сравнении с Electron?
В приоритете WIndows и MacOS, но любые другие платформы будут плюсом
- Вопрос задан более года назад
- 1981 просмотр
Средний 2 комментария
Какие есть альтернативы Electron?
Как обычная программа, со всеми прелестями
Как ведут себя с точки зрения итоговой производительности?
Отлично. electron курит в сторонке.
В чем их плюсы и минусы как глобально так и в сравнении с Electron?
Попробуйте PVA, если оно у вас будет работать не только мобильных на технологиях, сообщите ок?
UPD:
Легко и не принужденно писал простейшие приложения с использованием WEB контролов, на разных платформах, .net — был компонент WebBrowser (пара кликов мышкой в дизайнере и пара строчек кода, для инжекта вашего javascript кода на страницу, само собой вы можете открывать как локально файлы, так онлайн, а так же можете генерировать контент в приложении), на java это был webkit компонент (штатный для всех версий java) кода по больше, строчек 11, и то половина чтобы окно могло ресайзиться.
Полагаю вебкит есть по до всех платформы и среды разработки. Кстати .net приложение запускается с помощью mono на linux, там WebBrowser автоматом запускается с помощью специальной встроенной версии mozilla (так было несколько лет назад), т.е. с кроссплатформенностью будет все ок.
Источник