Отказ от 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 существует множество стандартных меню, определяемых системой, таких как меню «Службы» . Чтобы сделать меню стандартным, разработчики должны соответствующим образом установить 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.
Excalidraw Desktop практически неотличим от веб-версии.
Окно «О программе» Excalidraw Desktop, отображающее версию оболочки Electron и веб-приложения.
Меню «Об Экскалибуре» с информацией о версиях.

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

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

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

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

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

Excalidraw работает в отдельном окне.
Excalidraw PWA в отдельном окне
Значок Excalidraw на Dock macOS.
Значок Excalidraw на Dock macOS

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

Excalidraw использует браузер-fs-доступ для доступа к файловой системе операционной системы. В поддерживаемых браузерах это позволяет реализовать настоящий рабочий процесс открытия → редактирования → сохранения, а также фактического чрезмерного сохранения и «сохранения как» с прозрачным резервным вариантом для других браузеров. Подробнее об этой функции можно узнать в моей публикации в блоге Чтение и запись файлов и каталогов с помощью библиотеки браузера-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 находится в авангарде возможностей браузера, признавая при этом, что не все браузеры на всех платформах поддерживают каждую используемую нами функцию. Делая ставку на стратегию прогрессивного совершенствования, мы наслаждаемся новейшими и лучшими решениями везде, где это возможно, не оставляя при этом никого позади. Лучше всего просматривать в любом браузере.

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

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

Эту статью рецензировали @lipis , @dwelle и Joe Medley .