Узнайте, почему проект 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» . Внешний вид приложения практически идентичен веб-версии.
В 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 сегодня — это устанавливаемое прогрессивное веб-приложение с сервис-воркером и манифестом веб-приложения . Он кэширует все свои ресурсы в двух кешах: один для шрифтов и связанного со шрифтами CSS, а другой для всего остального.
Это означает, что приложение полностью автономно и может работать без подключения к сети. Браузеры на базе Chromium как для настольных компьютеров, так и для мобильных устройств предлагают пользователю установить приложение. Вы можете увидеть приглашение к установке на скриншоте ниже.
Excalidraw настроен для работы как автономное приложение, поэтому при его установке вы получаете приложение, которое запускается в отдельном окне. Он полностью интегрирован в многозадачный пользовательский интерфейс операционной системы и имеет собственный значок приложения на главном экране, в Dock или на панели задач; в зависимости от платформы, на которой вы его устанавливаете.
Доступ к файловой системе
Excalidraw использует браузер-fs-доступ для доступа к файловой системе операционной системы. В поддерживаемых браузерах это позволяет реализовать настоящий рабочий процесс открытия → редактирования → сохранения, а также фактическое чрезмерное сохранение и «сохранение как» с прозрачным резервным вариантом для других браузеров. Подробнее об этой функции можно узнать в моей публикации в блоге Чтение и запись файлов и каталогов с помощью библиотеки браузера-fs-access .
Поддержка перетаскивания
Файлы можно перетаскивать в окно Excalidraw так же, как и в приложениях для конкретной платформы. В браузере, поддерживающем API доступа к файловой системе , переброшенный файл можно немедленно отредактировать, а изменения сохранить в исходном файле. Это настолько интуитивно понятно, что иногда вы забываете, что имеете дело с веб-приложением.
Доступ к буферу обмена
Excalidraw хорошо работает с буфером обмена операционной системы. Целые рисунки Excalidraw, а также отдельные объекты можно копировать и вставлять в форматах image/png и image/svg+xml , что обеспечивает простую интеграцию с другими инструментами для конкретной платформы, такими как Inkscape , или веб-инструментами, такими как SVGOMG .
Обработка файлов
Excalidraw уже поддерживает экспериментальный API обработки файлов . Это означает, что файлы .excalidraw можно дважды щелкнуть в файловом менеджере операционной системы и открыть непосредственно в приложении Excalidraw, поскольку Excalidraw регистрируется как обработчик файлов .excalidraw в операционной системе.
Декларативный захват ссылок
Чертежами Excalidraw можно поделиться по ссылке. Вот пример . В будущем, если у людей будет установлен Excalidraw как PWA, такие ссылки не будут открываться на вкладке браузера, а запускать новое отдельное окно. В ожидании реализации это будет работать благодаря декларативному захвату ссылок , который на момент написания статьи был новейшим предложением для новой функции веб-платформы.
Заключение
Интернет прошел долгий путь: в браузерах появляется все больше и больше функций, которые всего пару лет или даже месяцев назад были немыслимы в Интернете и были эксклюзивными для приложений, специфичных для конкретной платформы. Excalidraw находится в авангарде возможностей браузера, признавая при этом, что не все браузеры на всех платформах поддерживают каждую используемую нами функцию. Делая ставку на стратегию прогрессивного совершенствования, мы наслаждаемся новейшими и лучшими решениями везде, где это возможно, не оставляя при этом никого позади. Лучше всего просматривать в любом браузере.
Электрон сослужил нам хорошую службу, но в 2020 году и далее мы сможем жить без него. Да, и для этой цели @vjeux : поскольку Android Play Store теперь принимает PWA в формате контейнера под названием Trusted Web Activity и поскольку Microsoft Store также поддерживает PWA , вы можете ожидать, что Excalidraw появится в этих магазинах в не столь отдаленном будущем. Между тем, вы всегда можете использовать и установить Excalidraw в браузере и из него .