Electron и Chromium Embedded Framework (CEF) — две хорошо зарекомендовавшие себя технологии для использования Chromium в настольных приложениях. Обе позволяют разработчикам создавать программы, отображающие современные сайты и веб-интерфейсы в macOS, Windows и Linux. Однако они предназначены для принципиально разных задач.
Electron — это полноценный фреймворк для настольных приложений, объединяющий Chromium, Node.js и нативные API операционной системы. Разработчики могут создавать приложения целиком на JavaScript, TypeScript, HTML и CSS, не обладая обширным опытом нативного программирования. CEF, в свою очередь, — это фреймворк для встраивания Chromium в существующие или новые приложения, обычно написанные на C++ или других языках нативной разработки.
Обе технологии широко используются в реальных программных продуктах. На Electron работают такие приложения, как Visual Studio Code, Slack, Discord и Notion, а CEF используется в Spotify, Steam и OBS Studio. В WebCatalog мы выбрали Electron для создания наших кроссплатформенных настольных приложений.
Так в чём же различия и когда имеет смысл выбрать одну технологию вместо другой?
Electron и CEF: краткое сравнение
Хотя Electron и CEF используют Chromium, они существенно различаются по архитектуре, удобству разработки и предполагаемым сценариям применения.
| Характеристика | Electron | Chromium Embedded Framework (CEF) |
|---|---|---|
| Год появления | 2013 | 2008 |
| Основное назначение | Создание полноценных настольных приложений | Встраивание Chromium в другие приложения |
| Браузерный движок | Chromium | Chromium |
| Основные языки | JavaScript, TypeScript | C, C++; доступны сторонние привязки для других языков |
| Node.js в комплекте | Да | Нет |
| Нативная интеграция | API Electron и нативные модули Node.js | Прямая интеграция с нативным кодом |
| Структура приложения | Главный процесс и процессы рендеринга | Основное приложение с подпроцессами Chromium |
| Внеэкранный рендеринг | Возможен с помощью дополнительных решений | Встроенная поддержка на уровне API |
| Размер приложения | Как правило, большой | Зависит от интеграции, но сам Chromium занимает много места |
| Производительность | Зависит от приложения | Зависит от приложения и интеграции |
| Кроссплатформенная поддержка | macOS, Windows, Linux | macOS, Windows, Linux |
| Экосистема инструментов упаковки | Electron Forge, electron-builder | Обычно упаковкой управляет основное приложение |
| Лучше всего подходит для | Настольных приложений на JavaScript | Нативных приложений, которым нужен встроенный веб-контент |
Ключевое различие заключается в том, что Electron предоставляет фреймворк для создания приложений, а CEF — фреймворк для встраивания браузера. Они не всегда взаимозаменяемы, поскольку работают на разных уровнях абстракции.
Архитектура: полноценный фреймворк или встроенный браузер
Electron объединяет Chromium и Node.js в единую среду выполнения приложения. Разработчики создают главный процесс, который управляет окнами приложения, событиями жизненного цикла и нативными функциями, а процессы рендеринга отвечают за веб-интерфейс.
Такая архитектура позволяет писать большую часть приложения с использованием привычных инструментов JavaScript и TypeScript. Electron предоставляет API для создания окон, управления браузерными сеансами, работы с меню, показа уведомлений, доступа к системным диалоговым окнам и интеграции с операционной системой.
CEF использует другой подход. Вместо полноценного фреймворка для настольных приложений он позволяет интегрировать Chromium в приложение, которое разработчики создают и контролируют самостоятельно.
Например, разработчик нативного приложения на C++ может использовать CEF для отображения веб-контента внутри существующего окна приложения. Остальной интерфейс, жизненный цикл приложения, фоновые службы и другие нативные функции остаются под контролем разработчика.
CEF предоставляет API для управления экземплярами браузера, навигацией, загрузкой ресурсов, выполнением JavaScript и взаимодействием между браузером и нативным приложением. Он также использует многопроцессную архитектуру Chromium с отдельными процессами для рендеринга и других функций браузера.
Это различие влияет на структуру приложений. В случае Electron приложение обычно строится вокруг Chromium и Node.js. В случае CEF Chromium, как правило, является одним из компонентов более крупного приложения.
CEF также можно использовать для создания приложений с преимущественно веб-интерфейсом, но разработчикам придётся самостоятельно реализовать больше сопутствующей инфраструктуры приложения.
Интересный исторический факт: ранние версии Electron и NW.js использовали CEF. Со временем Electron перешёл к более прямой интеграции с Chromium, поскольку абстракция CEF затрудняла реализацию некоторых функций, особенно глубокой интеграции с Node.js.
Для разработчиков, которым нужен полноценный фреймворк для создания настольных приложений на веб-технологиях, Electron обычно представляет собой более простой отправной пункт. Для тех, у кого уже есть нативное приложение и кто хочет добавить в него веб-функции, более естественным выбором может стать CEF.
Удобство разработки: JavaScript или нативная разработка
Одно из главных преимуществ Electron — доступность. Разработчики, знакомые с современной веб-разработкой, могут использовать имеющиеся навыки для создания настольных приложений, не изучая C++ или платформенные фреймворки пользовательского интерфейса.
Интеграция Electron с Node.js открывает доступ к обширной экосистеме пакетов для работы с файловой системой, сетью, базами данных, фоновыми процессами и другими функциями. Популярные фронтенд-технологии, такие как React, Vue, Svelte и Angular, можно использовать без существенных изменений архитектуры.
CEF ориентирован прежде всего на API для C и C++. Хотя существуют сторонние привязки для таких языков, как C#, Java, Python и Delphi, разработчикам всё равно необходимо понимать архитектуру нативного приложения, а также требования CEF к процессам, потокам и жизненному циклу.
Для команды, которая уже поддерживает нативное приложение, это может быть скорее преимуществом, чем недостатком. CEF позволяет внедрить современный веб-интерфейс без переписывания существующего нативного кода и перехода на совершенно новый фреймворк приложения.
Однако для команды, ориентированной на JavaScript и начинающей разработку нового настольного приложения, CEF обычно требует больше работы по настройке и нативной интеграции.
Различия касаются и инструментов. У Electron есть устоявшиеся инструменты, такие как Electron Forge и electron-builder, которые упрощают упаковку, подпись кода, распространение и обновление приложений. CEF предоставляет готовые бинарные сборки и примеры, но за интеграцию фреймворка в собственные системы сборки и развёртывания обычно отвечают сами разработчики.
Это не означает, что возможности CEF ограниченнее. Это лишь отражает его назначение: быть встраиваемым компонентом, а не полноценной платформой разработки приложений.
Производительность, использование памяти и размер приложения
Поскольку и Electron, и CEF используют Chromium, ни одна из этих технологий сама по себе не устраняет накладные расходы ресурсов, связанные с запуском современного браузерного движка.
Обе технологии могут использовать несколько процессов для рендеринга, GPU-ускорения, сетевых операций и других функций браузера. Потребление памяти и загрузка процессора сильно зависят от отображаемого контента, количества активных экземпляров браузера и того, как приложение управляет ресурсами.
CEF может обеспечить большую гибкость при интеграции в существующее нативное приложение. Разработчики могут использовать Chromium только для тех частей интерфейса, которым нужны веб-технологии, а остальные функции реализовывать непосредственно в нативном коде.
Например, графическое приложение может использовать CEF для панели настроек или встроенного веб-интерфейса, сохраняя нативную реализацию движка рендеринга, обработки документов и других функций, чувствительных к производительности.
Приложения на Electron также могут выполнять нативный код с помощью дополнений Node.js, внешних процессов или нативных модулей. Однако архитектура Electron в целом ориентирована на создание самого приложения с использованием веб-технологий.
Одна из особенно полезных возможностей CEF — внеэкранный рендеринг. Вместо отображения веб-контента в обычном окне браузера CEF может отрисовывать его в буферы, которые основное приложение самостоятельно обрабатывает и отображает. Это полезно для игровых движков, программ для стриминга и инструментов с собственными системами рендеринга.
Electron может поддерживать специализированные сценарии рендеринга с помощью дополнительных интеграций, однако в CEF внеэкранный рендеринг является устоявшейся частью API встраивания.
При оценке производительности разработчикам полезнее всего измерять следующие показатели:
- Время запуска: насколько быстро приложение становится готовым к работе.
- Использование памяти: потребление ресурсов при работе с типичным браузерным контентом и нативными функциями.
- Загрузка процессора: показатели при рендеринге, навигации и фоновых операциях.
- Размер приложения: объём загрузки и место на диске после установки.
- Требования к рендерингу: нужны ли приложению обычные окна или специализированный внеэкранный рендеринг.
Также важно отличать CEF от фреймворков на основе системного WebView. CEF включает Chromium, а не полагается на браузерный движок, установленный операционной системой. Поэтому переход с Electron на CEF не делает приложение автоматически намного компактнее.
Разработчикам, для которых прежде всего важен небольшой размер дистрибутива, стоит рассмотреть альтернативы, например Tauri, использующий системные WebView.
Нельзя однозначно считать Electron или CEF более быстрым решением без тестирования конкретной реализации.
Безопасность и обновления браузера
И Electron, и CEF опираются на браузерную архитектуру и механизмы безопасности Chromium, но за правильную настройку приложений отвечают разработчики.
Electron предоставляет такие возможности, как изоляция процессов рендеринга в песочнице, изоляция контекстов и взаимодействие через IPC между привилегированными функциями приложения и веб-контентом. В документации по безопасности рекомендуется ограничивать доступ к Node.js, тщательно проверять IPC-сообщения и считать контент, загружаемый из удалённых источников, недоверенным.
CEF также поддерживает многопроцессную архитектуру Chromium и механизмы изоляции безопасности. Однако, поскольку CEF интегрируется в приложение, контролируемое его разработчиком, именно основное приложение определяет, какие функции браузера, разрешения и нативные возможности будут доступны.
CEF поддерживает привязки JavaScript и взаимодействие с нативным кодом, позволяя связывать веб-контент с функциями приложения. Эти интерфейсы необходимо тщательно проектировать, особенно при отображении сторонних сайтов.
| Аспект безопасности | Electron | CEF |
|---|---|---|
| Песочница Chromium | Поддерживается | Поддерживается |
| Привилегированный доступ к нативным функциям | Node.js и API Electron | Нативные API основного приложения |
| Взаимодействие JavaScript с нативным кодом | Скрипты предварительной загрузки и IPC | Привязки V8 и обмен сообщениями между процессами |
| Изоляция удалённого контента | Песочница процессов рендеринга и изоляция контекстов | Изоляция процессов Chromium и средства контроля основного приложения |
| Обновления безопасности браузера | Обновление версии Electron | Обновление версии CEF |
| Ответственность за безопасность приложения | Разработчик приложения | Разработчик приложения |
Ещё один важный аспект — поддержка браузерного компонента. И Electron, и CEF обычно поставляют собственную среду выполнения Chromium, поэтому при появлении исправлений безопасности разработчики должны выпускать обновления приложений.
CEF предоставляет ветки релизов, соответствующие версиям Chromium, и готовые бинарные сборки, упрощающие этот процесс. Electron аналогичным образом поддерживает релизы, включающие обновления Chromium и Node.js.
Ни один из подходов полностью не устраняет необходимость постоянного сопровождения. Приложения со старыми версиями Chromium могут оставаться уязвимыми к проблемам, уже исправленным в исходном проекте.
Для команд, создающих программы, которые отображают произвольные сайты, поддержка безопасности должна быть неотъемлемой частью жизненного цикла приложения, а не эпизодической задачей.
Распространённость: крупные приложения на Electron и CEF
И Electron, и CEF широко используются в реальных продуктах, но характер их применения различается.
Electron особенно заметен среди популярных настольных приложений для продуктивности, общения и разработки. Microsoft использует Electron для Visual Studio Code; среди других известных продуктов на Electron — Slack, Discord, Notion, Figma, Signal Desktop и GitHub Desktop.
CEF также используется крупными разработчиками программного обеспечения, особенно для интеграции веб-интерфейсов в приложения с существующей нативной архитектурой.
Вот несколько примеров:
| Приложение | Технология | Типичное применение |
|---|---|---|
| Visual Studio Code | Electron | Кроссплатформенный редактор кода |
| Slack | Electron | Командное общение |
| Discord | Electron | Платформа для общения и сообществ |
| Notion | Electron | Заметки и организация работы |
| Figma Desktop | Electron | Приложение для дизайна |
| Spotify Desktop | CEF | Веб-интерфейс внутри настольного клиента |
| Steam | CEF | Встроенные веб-интерфейсы в настольном клиенте |
| OBS Studio | CEF | Браузерные источники, оверлеи и браузерные док-панели |
Использование CEF в Spotify особенно хорошо задокументировано. На официальной странице открытого ПО публикуются версии CEF и Chromium, соответствующие релизам Spotify Desktop.
OBS Studio — ещё один наглядный пример того, почему разработчики выбирают CEF. Его интеграция obs-browser использует CEF для реализации браузерных источников, позволяя пользователям отображать веб-оверлеи и другой контент в сценах трансляции. CEF является компонентом OBS Studio, а не фреймворком, на котором построено всё приложение.
Steam также использует встроенные веб-компоненты на базе Chromium в своём настольном клиенте, объединяя веб-интерфейсы с общей нативной инфраструктурой приложения.
Эти примеры иллюстрируют различие между технологиями. Electron часто используется для создания настольного приложения целиком, а CEF — для добавления веб-функций в приложения, в которых уже есть значительная нативная составляющая.
Не стоит считать CEF малоизвестной или устаревшей альтернативой. Проект появился в 2008 году, раньше Electron, и уже много лет широко используется в коммерческом ПО. Его долгая история и продолжающееся применение в крупных продуктах показывают, что встраивание Chromium остаётся важным подходом к разработке настольных приложений.
Electron, в свою очередь, сформировал особенно сильную экосистему вокруг настольных приложений на JavaScript. Широкое распространение, устоявшиеся инструменты и участие крупных технологических компаний делают его привлекательным для команд, создающих новые продукты на веб-технологиях.
У этих двух фреймворков разные сильные стороны, потому что они ориентированы на разные архитектурные требования.
Почему в WebCatalog мы выбираем Electron
В WebCatalog мы выбрали Electron в качестве основы наших кроссплатформенных настольных приложений, поскольку он хорошо соответствует требованиям наших продуктов.
WebCatalog позволяет пользователям превращать сайты в настольные приложения, независимо управлять несколькими аккаунтами и упорядочивать приложения в macOS, Windows и Linux. Наше ПО должно поддерживать сайты, созданные тысячами разных разработчиков, с различными системами аутентификации, механизмами хранения данных, браузерными API и JavaScript-фреймворками.
И Electron, и CEF предоставляют единообразную среду выполнения Chromium, что важно для совместимости. В отличие от фреймворков на основе системных WebView, они позволяют использовать известную версию Chromium на всех поддерживаемых настольных платформах.
Однако WebCatalog — это не просто нативное приложение, которому нужен встроенный браузерный компонент. Браузерные функции составляют основу нашего продукта. Нам необходим широкий контроль над окнами, сеансами, хранилищами, разрешениями, навигацией и жизненным циклом приложения.
Electron предоставляет зрелые API для решения этих задач. Его интерфейсы BrowserWindow, webContents и session позволяют нам создавать функции, аналогичные браузерным, на JavaScript и TypeScript. Особенно важны постоянные разделы сеансов: они позволяют пользователям сохранять независимые сеансы входа для нескольких аккаунтов на одном сайте.
CEF также предоставляет API для управления экземплярами браузера, запросами, хранилищем и нативной интеграцией. В принципе, многие из этих возможностей можно было бы реализовать с помощью CEF. Однако для этого нам пришлось бы самостоятельно создавать и поддерживать больше нативной инфраструктуры.
Интеграция Electron с Node.js также соответствует нашему технологическому стеку. Мы можем реализовывать значительную часть логики настольных приложений на TypeScript, совместно использовать код в разных продуктах и пользоваться преимуществами экосистемы JavaScript.
Ещё один фактор — кроссплатформенная разработка. WebCatalog поддерживает macOS, Windows и Linux, включая особенности упаковки приложений, интеграций и поведения системы на каждой платформе. Устоявшиеся API Electron и инструменты распространения сокращают объём нативного кода, который нам нужно поддерживать.
Мы понимаем, что Electron создаёт накладные расходы. Включение Chromium увеличивает размер приложения, а приложениям на базе браузера требуется тщательное управление ресурсами. Вместо замены Electron мы сосредоточились на том, чтобы эффективнее его использовать.
Например, мы внедрили клоны APFS для сокращения места на диске, занимаемого создаваемыми приложениями для Mac, уменьшив избыточное хранение данных без отказа от совместимости с Chromium.
Наш выбор не означает, что Electron во всех случаях лучше CEF. Если бы WebCatalog был прежде всего нативным приложением с несколькими встроенными веб-интерфейсами, CEF мог бы стать отличным выбором. Но поскольку наш продукт в своей основе построен вокруг веб-приложений и браузерных функций, Electron обеспечивает более удобную для разработки и сопровождения основу.
В чём преимущества CEF
Хотя в WebCatalog мы предпочитаем Electron, у CEF есть важные преимущества для приложений, которым нужна более глубокая интеграция с нативным ПО.
CEF особенно привлекателен, когда у разработчиков уже есть зрелое приложение на C++ и они хотят внедрить современные веб-интерфейсы, не заменяя существующую архитектуру.
Поддержка внеэкранного рендеринга — ещё одно существенное преимущество. Программам для стриминга и игровым движкам может потребоваться отрисовка веб-контента непосредственно в собственных графических конвейерах, а не в обычных окнах настольных приложений. CEF предоставляет устоявшиеся API для таких сценариев.
CEF также даёт разработчикам значительный контроль над интеграцией браузера. Они могут настраивать обработку запросов, навигацию, привязки JavaScript, загрузку ресурсов и взаимодействие экземпляров браузера с нативными компонентами приложения.
Для команд с большим опытом нативной разработки такая гибкость может перевесить удобство Electron.
CEF стоит рассмотреть в следующих случаях:
- Добавление веб-интерфейсов в существующее нативное приложение. Разработчики могут сохранить текущую архитектуру приложения и встроить Chromium там, где это необходимо.
- Создание ПО с особыми требованиями к рендерингу. Внеэкранный рендеринг позволяет интегрировать веб-контент в графические конвейеры и специализированные интерфейсы.
- Глубокая интеграция с нативными функциями на C++. CEF предоставляет нативные API и позволяет детально контролировать поведение браузера.
- Сопровождение существующего приложения на CEF. Переход на Electron может потребовать существенных архитектурных изменений без ощутимых преимуществ.
- Сочетание нативных и веб-интерфейсов. Разработчики могут использовать Chromium для отдельных частей приложения, сохраняя нативные компоненты интерфейса в остальных.
При этом CEF требует большей ответственности за инфраструктуру приложения. Разработчикам может потребоваться самостоятельно реализовать упаковку, обновление, управление окнами и платформенные интеграции.
Для команд, которые уже располагают всем необходимым для поддержки нативных приложений, это может быть вполне разумным подходом. Для команд, ориентированных на веб-разработку и создающих новый настольный продукт, это может добавить ненужную сложность.
Electron или CEF: что выбрать?
Обе технологии зрелые, активно развиваются и позволяют создавать сложное настольное ПО. Выбор в первую очередь зависит от того, создаёте ли вы новое настольное приложение на основе веб-технологий или встраиваете веб-функции в существующее нативное приложение.
| Ваш приоритет | С чего лучше начать | Почему |
|---|---|---|
| Новое настольное приложение на JavaScript или TypeScript | Electron | Полноценный фреймворк для приложений |
| Существующее нативное приложение на C++ | CEF | Интеграция в нативную архитектуру |
| Минимум нативной разработки | Electron | Node.js и JavaScript API |
| Встраивание веб-контента в нативные окна | CEF | Специально предназначен для встраивания |
| Внеэкранный рендеринг и собственные графические конвейеры | CEF | Специализированные API рендеринга |
| Развитые инструменты упаковки и обновления настольных приложений | Electron | Устоявшаяся экосистема распространения |
| Прямая интеграция с нативным кодом на C++ | CEF | Нативные интерфейсы C и C++ |
| Единообразная версия Chromium на настольных платформах | Любой из двух | Оба включают Chromium |
| Сложное управление браузерными сеансами | Любой из двух | Оба предоставляют возможности управления браузером |
| Небольшие дистрибутивы приложений | Ни у одного нет изначального преимущества | Оба распространяются вместе с Chromium |
| Существующая команда JavaScript-разработчиков | Electron | Знакомый стек разработки |
| Существующий продукт на базе CEF | CEF | Можно избежать ненужной миграции |
Для большинства веб-разработчиков, начинающих создание нового кроссплатформенного настольного приложения, Electron обычно является более практичным выбором. Он предоставляет архитектуру приложения, нативные интеграции, инструменты разработки и экосистему распространения, необходимые для создания полноценного продукта без необходимости разрабатывать всё с нуля.
CEF часто оказывается лучшим вариантом для разработчиков, у которых уже есть нативное приложение или которым нужны специализированные возможности встраивания браузера. Его гибкость и прямая нативная интеграция делают его особенно полезным для игровых движков, инструментов стриминга, промышленных приложений и сложных нативных продуктов со встроенными веб-интерфейсами.
Ни одна из технологий сама по себе не является более быстрой или безопасной. Эти характеристики во многом зависят от приложения, его архитектуры и качества реализации.
Итоги
Electron и Chromium Embedded Framework используют одну и ту же базовую браузерную технологию, но решают разные задачи.
Electron призван сделать разработку настольных приложений доступной веб-разработчикам. Он объединяет Chromium, Node.js и нативные API настольных систем в единый фреймворк, позволяющий командам создавать сложные приложения на JavaScript и TypeScript.
CEF предназначен для встраивания Chromium в другие приложения. Он обеспечивает более низкоуровневый контроль над интеграцией браузера и особенно полезен для нативных приложений, которым нужны веб-интерфейсы или специализированные возможности рендеринга.
Обе технологии доказали свою ценность в крупных программных продуктах. На Electron работают такие приложения, как Visual Studio Code, Slack, Discord и Notion, а CEF используется в Spotify, Steam и OBS Studio.
В WebCatalog мы выбрали Electron, поскольку наши продукты в своей основе построены вокруг браузерных функций. Единообразная среда выполнения Chromium, зрелые API управления браузером и экосистема JavaScript позволяют нам эффективно разрабатывать и поддерживать кроссплатформенные настольные приложения.
CEF остаётся отличным выбором для разработчиков нативных приложений, особенно когда Chromium нужно встроить в существующую архитектуру, а не использовать как основу всего продукта.
В конечном счёте решение зависит от того, что вы создаёте. Если вы хотите разработать полноценное настольное приложение на веб-технологиях, Electron обычно будет лучшей отправной точкой. Если вы хотите добавить Chromium в нативное приложение, CEF, скорее всего, окажется более подходящим инструментом.
