Узнайте, почему проект Excalidraw решил отказаться от своей оболочки Electron в пользу веб-версии.
В проекте Excalidraw мы решили отказаться от Excalidraw Desktop , оболочки Electron для Excalidraw, в пользу веб-версии, которую вы можете — и всегда могли — найти на excalidraw.com . После тщательного анализа мы решили, что Progressive Web App (PWA) — это будущее, на котором мы хотим строить. Читайте дальше, чтобы узнать, почему.
Как появился Excalidraw Desktop
Вскоре после того, как @vjeux создал первоначальную версию Excalidraw в январе 2020 года и написал о ней в блоге , в выпуске №561 он предложил следующее:
Было бы здорово обернуть Excalidraw в Electron (или его аналог) и опубликовать его как приложение [для конкретной платформы] в различных магазинах приложений.
Немедленной реакцией @voluntadpear было предложение:
А как насчет того, чтобы вместо этого сделать его PWA? Android в настоящее время поддерживает добавление их в Play Store в качестве надежных веб-действий, и, надеюсь, iOS скоро сделает то же самое. На рабочем столе Chrome позволяет загрузить ярлык на рабочем столе для PWA.
Решение, которое в итоге принял @vjeux , было простым:
Нам следует сделать и то, и другое :)
В то время как работа по преобразованию версии Excalidraw в PWA была начата @voluntadpear и позже другими, @lipis независимо пошел дальше и создал отдельный репозиторий для Excalidraw Desktop.
По сей день первоначальная цель, поставленная @vjeux , а именно разместить Excalidraw в различных магазинах приложений, еще не достигнута. Честно говоря, никто даже не начал процесс подачи ни в один из магазинов. Но почему? Прежде чем я отвечу, давайте посмотрим на платформу Electron.
Что такое Электрон?
Уникальным преимуществом Electron является то, что он позволяет «создавать кроссплатформенные настольные приложения с использованием JavaScript, HTML и CSS» . Приложения, созданные с помощью Electron , «совместимы с Mac, Windows и Linux» , то есть «приложения Electron создаются и работают на трех платформах» . Согласно домашней странице, сложные части, которые Electron упрощает, — это автоматические обновления , меню и уведомления на уровне системы , отчеты о сбоях , отладка и профилирование , а также установщики Windows . Оказывается, некоторые из обещанных функций требуют детального рассмотрения мелким шрифтом.
Например, автоматические обновления «[в настоящее время] [поддерживаются] только в macOS и Windows. В Linux нет встроенной поддержки автоматического обновления, поэтому для обновления приложения рекомендуется использовать менеджер пакетов дистрибутива» .
Разработчики могут создавать меню системного уровня, вызывая
Menu.setApplicationMenu(menu)
. В Windows и Linux это меню будет установлено в качестве верхнего меню каждого окна, а в macOS существует множество стандартных меню, определяемых системой, таких как меню « Службы» . Чтобы сделать меню стандартным, разработчики должны соответствующим образом установитьrole
своего меню, и Electron распознает их и сделает стандартными меню. Это означает, что большая часть кода, связанного с меню, будет использовать следующую проверку платформы:const isMac = process.platform === 'darwin'
.Установщики Windows можно создать с помощью windows-installer . В README проекта подчеркивается, что «для производственного приложения вам необходимо подписать свое приложение. Фильтр SmartScreen Internet Explorer заблокирует загрузку вашего приложения, и многие поставщики антивирусов будут рассматривать ваше приложение как вредоносное ПО, если вы не получите действительный сертификат». [так в оригинале].
Глядя только на эти три примера, становится ясно, что Electron далек от принципа «напиши один раз, работай везде». Распространение приложения в магазинах приложений требует подписи кода — технологии безопасности для подтверждения владения приложением. Для упаковки приложения необходимо использовать такие инструменты, как Electron-Forge , и думать о том, где размещать пакеты для обновлений приложения. Это становится сложным относительно быстро, особенно когда целью действительно является кроссплатформенная поддержка. Я хочу отметить, что абсолютно возможно создавать потрясающие приложения Electron, если приложить достаточно усилий и самоотдачи. В случае с Excalidraw Desktop нас там не было.
Там, где остановился Excalidraw Desktop
Excalidraw Desktop на данный момент представляет собой, по сути, веб-приложение Excalidraw, упакованное в виде файла .asar
с добавленным окном «О Excalidraw» . Внешний вид приложения практически идентичен веб-версии.
![Приложение Excalidraw Desktop, работающее в оболочке Electron.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/the-excalidraw-desktop-ap-850abff9a36d2.png?authuser=5&hl=ru)
![Окно «О программе» Excalidraw Desktop, отображающее версию оболочки Electron и веб-приложения.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/the-excalidraw-desktop-00ce94156bdd9.png?authuser=5&hl=ru)
В macOS теперь в верхней части приложения есть меню системного уровня, но поскольку ни одно из действий меню — кроме «Закрыть окно» и «О Excalidraw» — не привязано ни к чему, меню в его текущем состоянии выглядит довольно красиво. бесполезный. Между тем, все действия, конечно, можно выполнять через обычные панели инструментов Excalidraw и контекстное меню.
![Строка меню Excalidraw Desktop в macOS с выбранным пунктом меню «Файл», «Закрыть окно».](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/the-excalidraw-desktop-me-0479faedd79f8.png?authuser=5&hl=ru)
Мы используем Electron-Builder , который поддерживает ассоциации типов файлов . При двойном щелчке по файлу .excalidraw
в идеале должно открыться приложение Excalidraw Desktop. Соответствующий фрагмент нашего файла electron-builder.json
выглядит следующим образом:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
К сожалению, на практике это не всегда работает так, как задумано, поскольку в зависимости от типа установки (для текущего пользователя, для всех пользователей) приложения в Windows 10 не имеют права ассоциировать с собой тип файла.
Эти недостатки и предстоящая работа над тем, чтобы сделать этот опыт по-настоящему похожим на приложение на всех платформах (что, опять же, при достаточных усилиях возможно ) стали для нас веским аргументом для пересмотра наших инвестиций в Excalidraw Desktop. Однако более важным аргументом для нас было то, что мы предвидим, что для нашего варианта использования нам не понадобятся все функции, которые предлагает Electron. Растущий и все еще растущий набор возможностей Интернета служит нам одинаково хорошо, если не лучше.
Как Интернет служит нам сегодня и в будущем
Даже в 2020 году jQuery по-прежнему невероятно популярен . Для многих разработчиков его использование стало привычкой, несмотря на то, что сегодня jQuery им может и не понадобиться . Для Electron есть аналогичный ресурс, метко названный You Might Not Need Electron . Позвольте мне объяснить, почему мы считаем, что Electron нам не нужен.
Устанавливаемое прогрессивное веб-приложение
Excalidraw сегодня — это устанавливаемое прогрессивное веб-приложение с сервис-воркером и манифестом веб-приложения . Он кэширует все свои ресурсы в двух кешах: один для шрифтов и связанного со шрифтами CSS, а другой для всего остального.
![Вкладка «Приложение Chrome DevTools», показывающая два кеша Excalidraw.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/chrome-devtools-applicati-f7496a5d97b97.png?authuser=5&hl=ru)
Это означает, что приложение полностью автономно и может работать без подключения к сети. Браузеры на базе Chromium как для настольных компьютеров, так и для мобильных устройств предлагают пользователю установить приложение. Вы можете увидеть приглашение к установке на скриншоте ниже.
![Excalidraw предлагает пользователю установить приложение в Chrome на macOS.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/excalidraw-prompting-use-f55a66ccf1941.png?authuser=5&hl=ru)
Excalidraw настроен для работы как отдельное приложение, поэтому при его установке вы получаете приложение, которое запускается в отдельном окне. Он полностью интегрирован в многозадачный пользовательский интерфейс операционной системы и имеет собственный значок приложения на главном экране, в Dock или на панели задач; в зависимости от платформы, на которой вы его устанавливаете.
![Excalidraw работает в отдельном окне.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/excalidraw-running-its-o-0ef991c03f213.png?authuser=5&hl=ru)
![Значок Excalidraw на Dock macOS.](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/excalidraw-icon-the-maco-97d3d0ddd9146.png?authuser=5&hl=ru)
Доступ к файловой системе
Excalidraw использует браузер-fs-доступ для доступа к файловой системе операционной системы. В поддерживаемых браузерах это обеспечивает настоящий рабочий процесс открытия → редактирования → сохранения, а также фактическое чрезмерное сохранение и «сохранение как» с прозрачным резервным вариантом для других браузеров. Подробнее об этой функции можно узнать в моей публикации в блоге Чтение и запись файлов и каталогов с помощью библиотеки браузера-fs-access .
Поддержка перетаскивания
Файлы можно перетаскивать в окно Excalidraw так же, как и в приложениях для конкретной платформы. В браузере, поддерживающем API доступа к файловой системе , переброшенный файл можно немедленно отредактировать, а изменения сохранить в исходном файле. Это настолько интуитивно понятно, что иногда вы забываете, что имеете дело с веб-приложением.
Доступ к буферу обмена
Excalidraw хорошо работает с буфером обмена операционной системы. Целые рисунки Excalidraw, а также отдельные объекты можно копировать и вставлять в форматах image/png
и image/svg+xml
, что обеспечивает простую интеграцию с другими инструментами для конкретной платформы, такими как Inkscape , или веб-инструментами, такими как SVGOMG .
![Контекстное меню Excalidraw, показывающее пункты меню «Копировать в буфер обмена как SVG» и «Копировать в буфер обмена как PNG».](https://web.dev/static/case-studies/deprecating-excalidraw-electron/image/excalidraw-context-menu-s-2880215c63fc3.png?authuser=5&hl=ru)
Обработка файлов
Excalidraw уже поддерживает экспериментальный API обработки файлов . Это означает, что файлы .excalidraw
можно дважды щелкнуть в файловом менеджере операционной системы и открыть непосредственно в приложении Excalidraw, поскольку Excalidraw регистрируется как обработчик файлов .excalidraw
в операционной системе.
Декларативный захват ссылок
Чертежами Excalidraw можно поделиться по ссылке. Вот пример . В будущем, если у людей будет установлен Excalidraw как PWA, такие ссылки не будут открываться на вкладке браузера, а запускать новое отдельное окно. В ожидании реализации это будет работать благодаря декларативному захвату ссылок , который на момент написания статьи был новейшим предложением для новой функции веб-платформы.
Заключение
Интернет прошел долгий путь: в браузерах появляется все больше и больше функций, которые всего пару лет или даже месяцев назад были немыслимы в Интернете и были эксклюзивными для приложений, специфичных для конкретной платформы. Excalidraw находится в авангарде возможностей браузера, признавая при этом, что не все браузеры на всех платформах поддерживают каждую используемую нами функцию. Делая ставку на стратегию прогрессивного совершенствования, мы наслаждаемся новейшими и лучшими решениями везде, где это возможно, не оставляя при этом никого позади. Лучше всего просматривать в любом браузере.
Электрон сослужил нам хорошую службу, но в 2020 году и далее мы сможем жить без него. Да, и для этой цели @vjeux : поскольку Android Play Store теперь принимает PWA в формате контейнера под названием Trusted Web Activity и поскольку Microsoft Store также поддерживает PWA , вы можете ожидать Excalidraw в этих магазинах в не столь отдаленном будущем. Между тем, вы всегда можете использовать и установить Excalidraw в браузере и из него .