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 від фреймворків на основі системних вебподань. CEF містить Chromium, а не покладається на браузерний рушій, встановлений операційною системою. Тому перехід з Electron на CEF не робить застосунок значно меншим автоматично.
Розробникам, для яких головним пріоритетом є менший розмір пакетів застосунку, варто розглянути альтернативи на кшталт Tauri, що використовує системні вебподання.
Ні 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, можуть залишатися вразливими до проблем, уже виправлених у самому 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, що важливо для сумісності. На відміну від фреймворків на основі системних вебподань, вони дають нам змогу використовувати відому версію 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, найімовірніше, буде доречнішим інструментом.
