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, можуть залишатися вразливими до проблем, уже виправлених у вихідному проєкті.
Для команд, які створюють програмне забезпечення для відображення довільних вебсайтів, підтримка безпеки має бути невіддільною частиною життєвого циклу застосунку, а не періодичним завданням.
Поширення: відомі застосунки на 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 має перевагу
Хоча у 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 та API 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, імовірно, буде доречнішим інструментом.
