Отказ от Excalidraw Electron в пользу веб-версии

Узнайте, почему проект 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 . Внешний вид и поведение приложения практически идентичны веб-версии.

Приложение Excalidraw Desktop, работающее в оболочке Electron.
Excalidraw Desktop практически неотличим от веб-версии.
Окно «О программе» Excalidraw Desktop, отображающее версию оболочки Electron и веб-приложения.
Меню «Об игре Excalibur» с информацией о версиях

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

Панель меню Excalidraw Desktop на macOS с выбранными пунктами меню «Файл», «Закрыть окно».
Панель меню Excalidraw Desktop на macOS

Мы используем 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, связанных со шрифтами, и один для всего остального.

Вкладка «Приложение» в Chrome DevTools, на которой показаны два кэша Excalidraw.
Содержимое кэша Excalidraw

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

Excalidraw предлагает пользователю установить приложение в Chrome на macOS.
Диалоговое окно установки Excalidraw в Chrome

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

Excalidraw запущен в отдельном окне.
Excalidraw PWA в отдельном окне
Значок Excalidraw на панели Dock macOS.
Значок Excalidraw на панели Dock macOS

Доступ к файловой системе

Excalidraw использует браузер-fs-access для доступа к файловой системе операционной системы. В поддерживаемых браузерах это позволяет реализовать настоящий рабочий процесс открытия→редактирования→сохранения и фактическое пересохранение и «сохранение как» с прозрачным резервом для других браузеров. Вы можете узнать больше об этой функции в моем сообщении в блоге Чтение и запись файлов и каталогов с помощью библиотеки браузер-fs-access .

Поддержка перетаскивания

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

Доступ к буферу обмена

Excalidraw хорошо работает с буфером обмена операционной системы. Целые рисунки Excalidraw или только отдельные объекты можно копировать и вставлять в форматах image/png и image/svg+xml , что позволяет легко интегрировать их с другими платформенно-специфичными инструментами, такими как Inkscape , или веб-инструментами, такими как SVGOMG .

Контекстное меню Excalidraw с пунктами «копировать в буфер обмена как SVG» и «копировать в буфер обмена как PNG».
Контекстное меню Excalidraw, предлагающее действия с буфером обмена

Обработка файлов

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 в браузере и из него .

Благодарности

Эту статью рецензировали @lipis , @dwelle и Джо Медли .