Узнайте, почему проект 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 есть много системно определенных стандартных меню, таких как меню Services . Чтобы сделать свое меню стандартным меню, разработчики должны соответствующим образом задатьrole
своего меню, и Electron распознает их и сделает стандартными меню. Это означает, что большая часть кода, связанного с меню, будет использовать следующую проверку платформы:const isMac = process.platform === 'darwin'
.Установщики Windows можно создавать с помощью windows-installer . В README проекта подчеркивается, что «для производственного приложения вам необходимо подписать свое приложение. Фильтр SmartScreen Internet Explorer заблокирует загрузку вашего приложения, и многие поставщики антивирусных программ будут считать ваше приложение вредоносным ПО, если вы не получите действительный сертификат» [sic].
Если взглянуть только на эти три примера, становится ясно, что Electron далек от принципа «написать один раз, запустить везде». Распространение приложения в магазинах приложений требует подписи кода — технологии безопасности для сертификации права собственности на приложение. Упаковка приложения требует использования таких инструментов, как electron-forge , и размышлений о том, где размещать пакеты для обновлений приложения. Это довольно быстро становится сложным, особенно когда целью действительно является кроссплатформенная поддержка. Хочу отметить, что абсолютно возможно создавать потрясающие приложения Electron, приложив достаточно усилий и самоотверженности. Для Excalidraw Desktop мы не были там.
Где остановился Excalidraw Desktop
Excalidraw Desktop на данный момент представляет собой в основном веб-приложение Excalidraw, упакованное как файл .asar
с добавленным окном About Excalidraw . Внешний вид и поведение приложения практически идентичны веб-версии.


В macOS теперь есть системное меню в верхней части приложения, но поскольку ни одно из действий меню — кроме Закрыть окно и О Excalidraw — ни к чему не привязано, меню в его текущем состоянии довольно бесполезно. Между тем, все действия, конечно, можно выполнять через обычные панели инструментов Excalidraw и контекстное меню.

Мы используем 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 сегодня — это устанавливаемое прогрессивное веб-приложение с service worker и манифестом веб-приложения . Оно кэширует все свои ресурсы в двух кэшах: один для шрифтов и CSS, связанных со шрифтами, и один для всего остального.

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

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


Доступ к файловой системе
Excalidraw использует браузер-fs-access для доступа к файловой системе операционной системы. В поддерживаемых браузерах это позволяет реализовать настоящий рабочий процесс открытия→редактирования→сохранения и фактическое пересохранение и «сохранение как» с прозрачным резервом для других браузеров. Вы можете узнать больше об этой функции в моем сообщении в блоге Чтение и запись файлов и каталогов с помощью библиотеки браузер-fs-access .
Поддержка перетаскивания
Файлы можно перетаскивать в окно Excalidraw так же, как и в приложениях, зависящих от платформы. В браузере, поддерживающем API доступа к файловой системе , перетащенный файл можно немедленно редактировать, а изменения сохранять в исходном файле. Это настолько интуитивно понятно, что иногда забываешь, что имеешь дело с веб-приложением.
Доступ к буферу обмена
Excalidraw хорошо работает с буфером обмена операционной системы. Целые рисунки Excalidraw или только отдельные объекты можно копировать и вставлять в форматах image/png
и image/svg+xml
, что позволяет легко интегрировать их с другими платформенно-специфичными инструментами, такими как Inkscape , или веб-инструментами, такими как SVGOMG .

Обработка файлов
Excalidraw уже поддерживает экспериментальный API обработки файлов , что означает, что файлы .excalidraw
можно дважды щелкнуть в файловом менеджере операционной системы и открыть непосредственно в приложении Excalidraw, поскольку Excalidraw регистрируется как обработчик файлов для файлов .excalidraw
в операционной системе.
Декларативный захват ссылок
Чертежи Excalidraw можно делить по ссылке. Вот пример . В будущем, если у людей установлен Excalidraw как PWA, такие ссылки не будут открываться во вкладке браузера, а запустят новое автономное окно. В ожидании реализации это будет работать благодаря декларативному захвату ссылок , на момент написания статьи передовому предложению для новой функции веб-платформы.
Заключение
Интернет прошел долгий путь, и все больше функций, которые появляются в браузерах, еще пару лет или даже месяцев назад были немыслимы в Интернете и были эксклюзивными для приложений, зависящих от платформы. Excalidraw находится на переднем крае того, что возможно в браузере, и в то же время признает, что не все браузеры на всех платформах поддерживают каждую функцию, которую мы используем. Делая ставку на прогрессивную стратегию улучшения, мы наслаждаемся последними и лучшими везде, где это возможно, но не оставляя никого позади. Лучше всего просматривать в любом браузере.
Electron хорошо нам послужил, но в 2020 году и далее мы сможем обойтись без него. О, и для этой цели @vjeux : поскольку Android Play Store теперь принимает PWA в формате контейнера под названием Trusted Web Activity , а Microsoft Store также поддерживает PWA , вы можете ожидать Excalidraw в этих магазинах в не столь отдаленном будущем. Между тем, вы всегда можете использовать и устанавливать Excalidraw в браузере и из него .