что такое настольные приложения
До свидания, 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, посещает некую веб-страницу, и представленное ей приложение соответствует этому набору критериев, у разработчика приложения появляется возможность предложить пользователю установить приложение на его компьютер. Приглашение выглядит примерно так, как показано ниже.
После запуска подобного приложения оно открывается в браузерном окне, не оснащённом обычными элементами управления. Такое приложение воспринимается как настоящее настольное приложение.
Пример PWA
Вот пример настольного PWA, скриншоты которого были использованы выше в виде иллюстраций. Вотего репозиторий на GitHub. Для того чтобы установить это приложение, нужно включить соответствующий флаг в Chrome и провести на сайте хотя бы 30 секунд.
Как уже было сказано, веб-приложение, для того, чтобы считаться настольным PWA, должно соответствовать определённому набору требований. Если вы хотите создать и испытать собственное настольное PWA, можете взять за основу этот репозиторий и учесть требования. Если сделать краткую сводку по ним, то получится следующее:
Дополнительные примеры
Если вы работаете на MacOS, то PWA могут счесть, что установить их вы не сможете, и не покажут вам приглашение для их установки. Если включить соответствующие флаги и повозиться с консолью разработчика, можно добиться от PWA того, что они приглашение на установку выведут. Вот некоторые из существующих PWA, которые удалось установить на Mac.
Starbucks
Компания Starbucks вложила немало сил в разработку отличного PWA. Их настольное приложение получилось прямо-таки впечатляющим.
Google Maps
Это — просто замечательное приложение. Оно делает своё дело и не особенно сильно нагружает систему, отличаясь быстрой работой и отзывчивым дизайном. Для установки этого приложения нужно исхитриться и загрузить мобильный сайт Google Maps.
Компания Twitter постаралась при разработке мобильного PWA, а настольную версию можно считать достойным дополнением к мобильному приложению.
Итоги
Не смотря на то, что вокруг настольных PWA поднято много шума, нужно отдавать себе отчёт в том, что эта технология пока находится на стадии становления. В частности, можно отметить следующие направления развития настольных PWA:
После того, как технологии разработки настольных PWA достаточно разовьются, эти приложения станут серьёзными конкурентами сегодняшних проектов, основанных на Electron.
Почему «настольные» приложения на компьютере теперь не важны?
На Gizmodo вышла правильная заметка, о том, что нам вскоре не понадобятся полноценные «десктопные» приложения. Эта интересная тема, вокруг которой мы часто крутились. Ваш браузер – это и есть операционная система, и этот подход во многих случаях стирает грань между конкурентными решениями, macOS и Windows.
Нажмите кнопку «Пуск» на «Винде» или «Док» на «Маке» и подумайте: из всего списка настольных приложений, какие вы используете на самом деле, а главное, какие из них нельзя заменить онлайн-версиями программ в браузере? Конечно, найдётся пара, тройка профессиональных решений, если вы графический дизайнер или видео инженер, но если говорить об обычной повседневной жизни и работе?
Вся жизнь в браузере
Браузеры, в частности вездесущий Chrome, стали отдельным миром, в котором происходит большая часть работы.
Офисные задачи легко, а главное удобно воспроизводятся в Google Docs. Музыка и видео прослушиваются «онлайн» и не приходится ничего скачивать. Лёгкие графические редакторы уже давно работают в браузерах. Чего стоит Google Photo со своими возможностями.
Microsoft и Apple реализовали часть ключевых функций своего софта в облаке. Вы можете сидеть на Mac и использовать Microsoft Office в браузере. Или наоборот, сидя за Windows пользоваться пакетом iWork и iCloud от Apple.
Работа с почтой с лёгкостью выполняется через окно браузера, а учитывая вездесущий Google со своими сервисами, то почта автоматически превращается в ежедневник, календарь и файловое хранилище.
Переписка и общение чаще всего выполняются при помощи отдельных клиентов. Telegram, Skype, Slack и прочие сервисы, все они мультиплатформенные, и к тому же все они имеют веб-версию. Не удивлюсь, если через год использовать плагин для браузера, чтобы переписываться в Telegram, будет проще, чем скачать полноценный клиент на компьютер.
В чем плюс отказа от настольных приложений?
Работа в облаке имеет ряд преимуществ. Главное из них, мобильность и лёгкая смена платформ. В любое время и в любом месте вы подходите к компьютеру и не задумываетесь, на какой ОС он работает. Просто открываете браузер, вводите логин и пароль от своей учётной записи Google и ваша рабочая станция готова.
Уход от настольных приложений, которые служили вам на протяжении десятилетий может показаться безумием, но большинство из нас действительно не нуждается в них, так как мы привыкли находить достойную альтернативу в облаке. Лично я не храню документы, фото и видео на диске своего ноутбука и облаку как-то больше доверяю.
Возможно, стоит составить отдельный текст с подборкой сервисов и программ, которые позволяют с комфортом работать в окне браузера.
Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript
Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.
Electron
Electron — это фреймворк для разработки настольных приложений с использованием HTML, CSS и JavaScript. Такие приложения могут работать на различных платформах. Среди них — Windows, Mac и Linux.
В основе Electron лежат проекты Chromium и Node.js, объединённые в единую среду, обеспечивающую работу приложений. Это даёт возможность применять веб-технологии при разработке настольных программ.
Electron — серьёзный проект, который использован при создании множества популярных приложений. Среди них — мессенджеры Skype и Discord, редакторы для кода Visual Studio Code и Atom, а также — ещё более 700 приложений, сведения о которых опубликованы на сайте Electron.
Electron Forge
Для разработки приложения с использованием Electron этот фреймворк надо настроить. Это касается и тех случаев, когда в приложении планируется применять другие фреймворки или библиотеки, например — Angular, React, Vue, или что-то другое.
Инструмент командной строки Electron Forge позволяет серьёзно упростить процесс настройки Electron. Он даёт в распоряжение разработчика шаблоны приложений, основанных на Angular, React, Vue, и на других фреймворках. Это избавляет программиста от необходимости настраивать всё вручную.
Кроме того, Electron Forge упрощает сборку и упаковку приложения. На самом деле, это средство обладает и многими другими полезными возможностями, узнать о которых можно из его документации.
Рассмотрим процесс разработки простого приложения на Electron с использованием Electron Forge.
Предварительная подготовка
Для того чтобы приступить к разработке Electron-приложений с использованием Electron Forge вам понадобится система с установленной платформой Node.js. Загрузить её можно здесь.
Для глобальной установки Electron Forge можно воспользоваться следующей командой:
Создание шаблонного приложения
Для того чтобы создать шаблонное приложение с использованием Electron Forge выполним следующую команду:
Здесь мы переходим в его папку и вызываем соответствующий npm-скрипт.
После этого должно открыться окно, содержимое которого похоже на то, что показано на следующем рисунке.
Окно приложения, созданного средствами Electron Forge
Поговорим о том, как устроено это приложение.
Структура шаблонного приложения
Материалы, из которых состоит шаблонное приложение, создаваемое средствами Electron Forge, представлены набором файлов и папок. Рассмотрим важнейшие составные части приложения.
▍Файл package.json
В разделе файла config.forge можно найти специфические настройки для Electron. Например, раздел make_targets содержит подразделы, описывающие цели сборки проекта для платформ Windows ( win32 ), Mac ( darwin ) и Linux ( linux ).
▍Файл src/index.js
▍Основной процесс и процесс рендеринга
У каждого Electron-приложения может быть лишь один основной процесс, но процессов рендеринга может быть несколько. Кроме того, можно наладить взаимодействие между основным процессом и процессами рендеринга, об этом мы, правда, здесь говорить не будем. Вот схема архитектуры приложения, основанного на Electron, на которой представлен основной процесс и два процесса рендеринга.
Архитектура Electron-приложения
▍Файл src/index.html
▍Разбор кода файла index.js
В готовом приложении строку кода, открывающую инструменты разработчика, имеет смысл закомментировать.
Объект app используется для управления жизненным циклом приложения. В данном случае после завершения инициализации Electron вызывается функция, ответственная за создание окна приложения.
Объект app используется и для выполнения других действий при возникновении различных событий. Например, с его помощью можно организовать выполнение неких операций перед закрытием приложения.
Теперь, когда мы ознакомились со структурой Electron-приложения, рассмотрим пример разработки такого приложения.
Разработка настольного приложения — конвертера температур
Для начала установим пакет Bootstrap, воспользовавшись, в папке проекта, следующей командой:
Теперь заменим код файла index.html на следующий:
Вот как работает этот код:
Как видите, каждая из этих функций получат значение соответствующего поля страницы, выполняет преобразование полученного значения и записывает то, что получилось, в другое поле. Функции это очень простые, в частности, значения, с которыми они работают, никак не проверяются, но в нашем случае это неважно.
Будем считать, что приложение готово. Испытаем его.
Запуск приложения
Для того чтобы запустить приложение, воспользуемся следующей командой:
После её успешного выполнения будет открыто окно приложения со следующим содержимым.
Окно приложения-конвертера
Поэкспериментируйте с приложением, вводя в поля различные значения.
Теперь, когда мы убедились в том, что приложение работает так, как ожидается, пришло время его упаковать.
Упаковка приложения
Для того чтобы упаковать приложение, воспользуйтесь следующей командой:
Предположим, вам нужно упаковать приложение для какой-то другой платформы и архитектуры. Для этого можно воспользоваться расширенным вариантом вышеописанной команды. Структура этой команды выглядит так:
Например, для того чтобы сформировать пакет приложения для Linux, можно воспользоваться следующей командой:
После завершения её работы в папке проекта out появится директория simple-desktop-app-electronjs-linux-x64 с соответствующим содержимым.
Создание установочных файлов приложений
Для того чтобы создать установочный файл приложения воспользуйтесь следующей командой:
Итоги
В этом материале мы рассмотрели основы архитектуры Electron-приложений и написали простую программу. Если вы подумывали о том, чтобы разработать собственное приложение, основанное на Electron, теперь у вас есть базовые знания, самостоятельно расширив и дополнив которые, вы сможете создать то, что вам хочется.
Уважаемые читатели! Пользуетесь ли вы фреймворком Electron для разработки настольных приложений?
Flutter и настольные приложения
Ни для кого не секрет то, что команда разработчиков Flutter стремится к тому, чтобы этот фреймворк позволял бы, пользуясь единой кодовой базой, создавать приложения для широкого разнообразия платформ. Сюда входят iOS, Android, Windows, Linux, macOS и веб. При этом такие приложения должны компилироваться в формат, специфичный для каждой из платформ, а их внешний вид не должен уступать внешнему виду хорошо сделанных игр. В Google фреймворк Flutter применяется во многих проектах: от Assistant до Stadia, от Cloud Search до Blogger. Flutter используются и другими компаниями — от ByteDance до Grab, от Nubank до MGM Resorts. Всем им приносит пользу та гибкость и продуктивность разработки, которую даёт Flutter.
Многие из вас заинтересованы в развитии возможностей Flutter, касающихся настольных платформ, куда входят Windows, macOS, Linux. В опросах и на GitHub тема разработки настольных приложений относится к одной из самых заметных новых возможностей Flutter. В ближайшее время мы собираемся больше рассказать о том, чем мы занимаемся. Полагаем, стоит начать с обзора того, что сделано различными командами, отвечающими за возможности Flutter. Хотя поддержка настольных приложений пока находится на стадии ознакомительной технической версии, над соответствующими возможностями ведётся серьёзная работа.
Сборка приложений
Особенности настольных приложений
Разрабатываете ли вы приложение, представленное самостоятельным исполняемым файлом, или веб-приложение, у настольных приложений есть некоторые специфические возможности и особенности. Например, окна настольных приложений обычно выводятся в ландшафтном режиме, а их размер можно менять. Пользователи обычно вводят данные в приложения, применяя клавиатуру и мышь, а не экранные клавиатуры и сенсорный ввод. Элементы управления оптимизированы с учётом того, что в настольных приложениях при размещении элементов управления используются особые значения визуальной плотности.
Мы, на уровне фреймворка, внесли во Flutter некоторые изменения, которые направлены на поддержку настольных приложений.
Команда Dart проделала большую работу по улучшению интерфейса внешних функций (Foreign Function Interface, FFI). Это способствует повышению скорости внедрения новых возможностей во Flutter. Например, для API, основанных на C, библиотека dart:ffi предоставляет прямой механизм для организации привязки к нативному коду. Среда выполнения Dart даёт возможность вызывать динамически связываемые библиотеки и выделять память в куче. В основе этого механизма лежат объекты Dart.
Простой пример Windows-проекта, в котором использовано Win32-API MessageBox()
На самом деле, программисту необязательно делать всё это самому. Дело в том, что велика вероятность того, что кто-то уже подготовил код, упрощающий работу с необходимыми вам API. Здесь о FFI можно почитать подробнее.
Обновление модели плагинов
Flutter спроектирован с учётом того, чтобы у него было бы компактное ядро. Для оснащения фреймворка дополнительными возможностями соответствующий функционал оформляется в виде подключаемых плагинов и пакетов, дающих возможность интеграции с операционными системами, на которых работает Flutter. Плагины и пакеты могут создавать не только разработчики Flutter, но и другие программисты.
Правда, учитывая то, что во Flutter улучшается поддержка мобильных и настольных платформ, а так же веб-приложений, разрабатывать плагины для каждой поддерживаемой фреймворком платформы становится всё сложнее и сложнее. При разработке некоего плагина, весьма вероятно, понадобится объединить усилия разных программистов, каждый из которых хорошо разбирается в какой-то платформе.
Здесь нам на помощь может прийти подход, в соответствии с которым некий базовый плагин описывает общий интерфейс, который может быть независимо реализован на разных платформах. В результате, как было описано в свежем материале про современную разработку плагинов, мы недавно внедрили во Flutter систему, которая упрощает совместную работу различных авторов над плагинами. Благодаря этой системе уже можно в явном виде указывать то, какие именно платформы поддерживаются конкретным плагином.
Мы начали использовать эту модель при работе над некоторыми базовыми плагинами. Примеры нового подхода к совместной разработке плагинов можно найти здесь.
Обратите внимание на то, что API плагинов для Windows и Linux пока ещё не устоялся, поэтому, хотя мы и советуем разработчикам знакомиться с новыми возможностями Flutter, мы пока не готовы к выпуску этих возможностей в продакшн. Мы, кроме того, работаем над добавлением на pub.dev тегов, относящихся к настольным платформам.
Запуск программ на Windows: Win32 и UWP
Один интересный аспект нашей работы, связанный с Windows, заключается в том, что здесь мы экспериментируем с различными подходами к архитектуре. Flutter, на любой платформе, внедряется в маленькое хост-приложение, являющееся контейнером («embedder») с применением подхода, напоминающего тот, который используется в игровых движках вроде Unity. Это приложение-embedder, особое для каждой платформы, предоставляет нам точку входа в проект. Оно согласовывает свои действия с операционной системой, работая со средствами рендеринга, с пользовательским вводом и с инструментами, обеспечивающими доступность контента. Оно поддерживает и цикл событий.
Windows даёт нам два способа создания подобного приложения. Первый — это зрелая модель программирования Win32, которую можно использовать в качестве точки входа для Flutter-проектов. Этот подход предлагает максимальный уровень обратной совместимости с различными платформами, с такими, как Windows 7. Он позволяет создавать стандартные EXE-файлы, которые ожидает получить в результате работы над проектом множество программистов. В отличие от Win32, современная модель приложений UWP рекомендована для Windows 10. Эта модель предлагает заманчивые возможности по созданию Flutter-приложений для особых устройств, вроде Xbox, и для ОС Windows 10X, которая должна скоро выйти.
Мы, неофициально, работаем с различными разработчиками и исследуем разные решения. Мы с удовольствием более близко поработали бы с Microsoft ради того, чтобы повысить качество Windows-приложений, сделанных во Flutter. Так как семейство устройств Surface теперь включает в себя системы, основанные на Android и на Windows, мы думаем, что Flutter способен предложить Microsoft мощную платформу, которая позволяет создавать привлекательные нативные приложения для самых разных устройств.
Эксперименты с настольными приложениями
Так как возможности, о которых шла речь, пока находятся на стадии ознакомительной технической версии, API и вспомогательные инструменты всё ещё нестабильны. У нас запланировано ещё много дел, которые нужно доделать прежде чем мы переведём поддержку настольных приложений в разряд стабильных возможностей. Сюда входят, кроме того, улучшение доступности контента и локализации.
Мы уже видели, как некоторые смелые разработчики начали создавать настольные приложения с помощью новых возможностей Flutter. Одно из первых таких приложений разработано для macOS. Оно называется Sharezone. Это — планировщик для учеников, нацеленный на немецкий рынок образования. Сначала этот проект был выпущен в виде мобильного приложения. А недавно он вышел в настольном варианте и в варианте, предназначенном для веб.
Sharezone Schulplan — приложение для учеников, учителей и родителей. Оно позволяет планировать и отслеживать домашние задания, учебные группы и расписания
Планируете ли вы использовать Flutter для разработки настольных приложений?