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++ или платформенные UI-фреймворки.
Интеграция 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 | Браузерные источники, оверлеи и браузерные док-панели |
Spotify — особенно хорошо документированный пример использования CEF. На своей официальной странице открытого ПО компания публикует версии 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, скорее всего, окажется более подходящим инструментом.
