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, нито една от двете технологии не премахва автоматично допълнителното потребление на ресурси, свързано с изпълнението на съвременен браузърен двигател.
И двете технологии могат да използват множество процеси за визуализация, графично ускорение, мрежова комуникация и други браузърни функции. Потреблението на памет и натоварването на процесора зависят до голяма степен от показваното съдържание, броя на активните браузърни инстанции и начина, по който приложението управлява ресурсите си.
CEF може да предложи повече гъвкавост при интегриране в съществуващо нативно приложение. Разработчиците могат да използват Chromium само за частите от интерфейса, които изискват уеб технологии, а останалите функции да реализират директно с нативен код.
Например графично приложение може да използва CEF за панел с настройки или вграден уеб интерфейс, като същевременно запази нативната реализация на графичния си двигател, обработката на документи и другите функции с високи изисквания към производителността.
Приложенията с Electron също могат да изпълняват нативен код чрез разширения за Node.js, външни процеси или нативни модули. Архитектурата на Electron обаче като цяло е насочена към изграждане на самото приложение с уеб технологии.
Една особено полезна възможност на CEF е извънекранното изобразяване. Вместо да показва уеб съдържание в традиционен браузърен прозорец, CEF може да изобразява съдържанието в буфери, които хост приложението обработва и показва самостоятелно. Това е ценно за приложения като игрови двигатели, софтуер за стрийминг и инструменти със собствени системи за изобразяване.
Electron може да поддържа специализирани процеси на изобразяване чрез допълнителни интеграции, но CEF предлага извънекранното изобразяване като утвърдена част от своя API за вграждане.
За разработчиците, които оценяват производителността, най-полезните показатели включват:
- Време за стартиране: Колко бързо приложението става готово за използване.
- Използване на паметта: Потребление на ресурси при типично браузърно съдържание и нативни функции.
- Натоварване на процесора: Производителност при изобразяване, навигация и фонови операции.
- Размер на приложението: Размер за изтегляне и заемано дисково пространство след инсталиране.
- Изисквания към изобразяването: Дали приложението се нуждае от обикновени прозорци или от персонализирано извънекранно изобразяване.
Важно е също да се прави разлика между CEF и платформите, базирани на системни компоненти за уеб изглед (webview). CEF включва Chromium, вместо да разчита на браузърния двигател, инсталиран от операционната система. Затова преминаването от Electron към CEF не води автоматично до драстично по-малко приложение.
Разработчиците, за които по-малките пакети на приложенията са основен приоритет, могат да разгледат алтернативи като Tauri, която използва предоставените от системата уеб изгледи.
Нито Electron, нито CEF трябва да се смята за категорично по-бърз без сравнителни тестове на конкретна реализация.
Сигурност и актуализации на браузъра
И Electron, и CEF разчитат на браузърната архитектура и механизмите за сигурност на Chromium, но разработчиците са отговорни за правилното конфигуриране на приложенията си.
Electron предоставя функции като изпълнение на процесите за визуализация в защитена среда (sandbox), изолация на контекста и комуникация чрез IPC между привилегированите функции на приложението и уеб съдържанието. Документацията му за сигурност препоръчва ограничаване на достъпа до Node.js, внимателно валидиране на IPC съобщенията и третиране на отдалечено зареденото съдържание като недоверено.
CEF също поддържа многопроцесната архитектура и защитната изолация на Chromium. Тъй като обаче CEF се интегрира в приложение, контролирано от неговия разработчик, хост приложението отговаря за определянето на това кои браузърни функции, разрешения и нативни възможности да бъдат достъпни.
CEF поддържа JavaScript обвързвания и комуникация с нативния код, което позволява на разработчиците да свързват уеб съдържанието с функциите на приложението. Тези интерфейси трябва да се проектират внимателно, особено при показване на уебсайтове на трети страни.
| Аспект на сигурността | Electron | CEF |
|---|---|---|
| Защитена среда на Chromium | Поддържа се | Поддържа се |
| Привилегирован нативен достъп | API на Node.js и 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. Широкото му разпространение, утвърдените инструменти и участието на големи технологични компании го правят привлекателен за екипи, които създават нови продукти с уеб технологии.
Двете платформи имат различни силни страни, защото са насочени към различни архитектурни изисквания.
Защо избираме Electron в WebCatalog
В WebCatalog избрахме Electron за основа на нашите междуплатформени настолни приложения, защото той съответства много добре на изискванията на продуктите ни.
WebCatalog позволява на потребителите да превръщат уебсайтове в настолни приложения, да управляват независимо множество акаунти и да организират приложения в macOS, Windows и Linux. Нашият софтуер трябва да поддържа уебсайтове, създадени от хиляди различни разработчици, с различни системи за удостоверяване, механизми за съхранение, браузърни API и JavaScript библиотеки и платформи.
И Electron, и CEF предоставят еднаква среда за изпълнение на Chromium, което е важно за съвместимостта. За разлика от платформите, базирани на системни уеб изгледи, те ни позволяват да използваме известна версия на 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 има предимство
Въпреки че Electron е предпочитаният от нас избор в WebCatalog, 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 | API за Node.js и JavaScript |
| Вграждане на уеб съдържание в нативни прозорци | 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 вероятно е по-подходящият инструмент.
