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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Узнайте, почему проект Excalidraw решил отказаться от своей оболочки Electron в пользу веб-версии.

Thomas Steiner

В проекте 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 заблокирует загрузку вашего приложения, и многие поставщики антивирусов будут рассматривать ваше приложение как вредоносное ПО, если вы не получите действительный сертификат» [sic].

Глядя только на эти три примера, становится ясно, что 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 в браузере и из него .

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

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

Узнайте, почему проект Excalidraw решил отказаться от своей оболочки Electron в пользу веб-версии.

Thomas Steiner

В проекте 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 заблокирует загрузку вашего приложения, и многие поставщики антивирусов будут рассматривать ваше приложение как вредоносное ПО, если вы не получите действительный сертификат» [sic].

Глядя только на эти три примера, становится ясно, что 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 в браузере и из него .

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

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

Узнайте, почему проект Excalidraw решил отказаться от своей оболочки Electron в пользу веб-версии.

Thomas Steiner

В проекте 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 заблокирует загрузку вашего приложения, и многие поставщики антивирусов будут рассматривать ваше приложение как вредоносное ПО, если вы не получите действительный сертификат» [sic].

Глядя только на эти три примера, становится ясно, что 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 теперь принимает PWA в формате контейнера, называемой Trusted Web Activie , и, поскольку Microsoft Store также поддерживает PWAS , вы можете ожидать Excalidraw в этих магазинах в не слишком отдаленном будущем. Между тем, вы всегда можете использовать и установить Excalidraw в браузере и обратно .

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

Эта статья была рассмотрена @Lipis , @Dwelle и Джо Медли .

Узнайте, почему проект Excalidraw решил установить свою электронную обертку в пользу веб -версии.

Thomas Steiner

В рамках проекта Excalidraw мы решили установить настольный компьютер Excalidraw , электронную обертку для Excalidraw, в пользу веб -версии, которую вы можете - и всегда могли - заполнить на excalidraw.com . После тщательного анализа мы решили, что прогрессивное веб -приложение (PWA) - это будущее, на котором мы хотим опираться. Читайте дальше, чтобы узнать, почему.

Как возник

Вскоре после того, как @Vjeux создал первоначальную версию Excalidraw в январе 2020 года и в блоге он поступил об этом , он предложил следующее в выпуске № 561 :

Было бы здорово обернуть Excalidraw в электронный (или эквивалентный) и опубликовать его как [платформу-специфическое] приложение в различные магазины приложений.

Непосредственная реакция @voluntadpear должна была предложить:

Как насчет того, чтобы сделать это PWA? В настоящее время Android поддерживает добавление их в Play Store в качестве доверенных веб -мероприятий, и, надеюсь, iOS скоро сделает то же самое. На рабочем столе Chrome позволяет загрузить сочетание рабочего стола в PWA.

Решение, которое приняло @VJEUX в конце концов, было простым:

Мы должны сделать оба :)

В то время как работа по преобразованию версии Excalidraw в PWA была запущена @VoluntAdpear , а затем и другие, @Lipis независимо пошел вперед и создал отдельный репо для настольного компьютера Excalidraw.

По сей день первоначальная цель, установленная @vjeux , то есть отправить Excalidraw в различные магазины приложений, еще не достигнута. Честно говоря, никто даже не начал процесс отправки ни в одном из магазинов. Но почему это? Прежде чем я отвечу, давайте посмотрим на электрон, платформу.

Что такое электрон?

Уникальная точка продажи электрона заключается в том, что он позволяет «создавать кроссплатформенные настольные приложения с JavaScript, HTML и CSS» . Приложения, построенные с помощью электрона, «совместимы с Mac, Windows и Linux» , то есть «Electron Apps создают и работают на трех платформах» . Согласно домашней странице, жесткие детали, которые упрощает электрон, являются автоматическими обновлениями , системными меню и уведомлениями , отчетностью о сбоях , отладке и профилировании , а также установщиками Windows . Оказывается, некоторые из обещанных функций нуждаются в подробном взгляде на мелкий шрифт.

• Например, автоматические обновления «являются [в настоящее время] только [поддерживаются] на macOS и Windows. Не существует встроенной поддержки для Auto-Updater на Linux, поэтому рекомендуется использовать диспетчер пакетов Distribution для обновления вашего приложения» .

• Разработчики могут создавать меню системного уровня, позвонив Menu.setApplicationMenu(menu) . В Windows и Linux меню будет установлено в качестве главного меню каждого окна, в то время как в MacOS есть много системных стандартных меню, таких как меню Услуг . Чтобы сделать свое меню стандартным меню, разработчики должны выполнить role своего меню соответственно, и электрон распознает их и заставит их стать стандартными меню. Это означает, что большая часть кода, связанного с меню, будет использовать следующую проверку платформы: const isMac = process.platform === 'darwin' .

• Установщики Windows можно сделать с Windows-Installer . Readme проекта подчеркивает, что «для производственного приложения вам необходимо подписать свое приложение. Фильтр SmartScreen Internet Explorer заблокирует ваше приложение от загрузки, и многие антивирусные поставщики будут рассматривать ваше приложение как вредоносное ПО, если вы не получите действительный сертификат» [sic].

Глядя на эти три примера, ясно, что электрон далеко не «написать один раз, бежать везде». Распределение приложения в магазинах приложений требует подписания кода , технологии безопасности для сертификации владения приложениями. Упаковка приложения требует использования таких инструментов, как электрон-фарре , и подумать о том, где размещать пакеты для обновлений приложений. Это становится сложным относительно быстро, особенно когда цель действительно - это кросс -платформная поддержка. Я хочу отметить, что абсолютно возможно создавать потрясающие электронные приложения с достаточными усилиями и преданностью. Для настольного компьютера Excalidraw нас не было.

Где остановился на рабочем столе Excalidraw

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

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

Мы используем Electron-Builder , который поддерживает ассоциации типа файла . Дважды щелкнув файл .excalidraw , в идеале должно открыться настольное приложение Excalidraw. Соответствующий отрывки из нашего файла electron-builder.json выглядит так:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

К сожалению, на практике это не всегда работает так, как предполагалось, поскольку, в зависимости от типа установки (для текущего пользователя для всех пользователей), приложения в Windows 10 не имеют права на то, чтобы ассоциировать тип файла для себя.

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

Как веб -сайт служит нам сегодня и в будущем

Даже в 2020 году jQuery все еще невероятно популярен . Для многих разработчиков это стало привычкой использовать его, несмотря на то, что сегодня им может не понадобиться jQuery . Существует аналогичный ресурс для электрона, который удачно называется вам не понадобиться электрон . Позвольте мне рассказать, почему мы думаем, что нам не нужен электрон.

Установка прогрессивного веб -приложения

Excalidraw Today - это установленное прогрессивное веб -приложение с работником службы и манифестом веб -приложения . Он кэширует все свои ресурсы в двух кэшах, один для шрифтов и CS, связанных с шрифтом, и один для всего остального.

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

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

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

Excalidraw использует Browser-FS-Access для доступа к файловой системе операционной системы. В поддержке браузеров это позволяет создать истинный открытый → редактировать → Сохранить рабочий процесс и фактическое переживание и «Сохранить как», с прозрачным запасением для других браузеров. Вы можете узнать больше об этой функции в моем блоге, чтение и написание файлов и каталогов с библиотекой Browser-FS-Access .

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

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

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

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

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

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

Декларативное захват ссылок

Чертежи Eccalidraw могут быть переданы ссылкой. Вот пример . В будущем, если люди будут установлены как PWA, такие ссылки не будут открыты на вкладке браузера, а запустите новое автономное окно. В ожидании реализации это будет работать благодаря декларативному захвату ссылок , на момент написания, предложение о кровотечении для новой функции веб-платформы.

Заключение

Интернет прошел долгий путь, и все больше и больше функций посадили в браузерах, которые только пару лет или даже месяцев назад были немыслимыми в Интернете и эксклюзивными для приложений для конкретных платформ. Excalidraw находится на переднем крае того, что возможно в браузере, при этом признавая, что не все браузеры на всех платформах поддерживают каждую функцию, которую мы используем. Ставка на стратегию прогрессивного улучшения, мы наслаждаемся последними и лучшими, где это возможно, но не оставляя никого позади. Лучше всего просмотреть в любом браузере.

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

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

Эта статья была рассмотрена @Lipis , @Dwelle и Джо Медли .