Выбір стакана JavaScript GUI на адказе таго, што насправды завантажуюць вашы корыстувальнікі

Пошук „JavaScript GUI toolkit“ зазвычай дае спіс, у яком Electron і Material UI паказуюцься як канкурэнты. Аднак гэта не так: адна з тых сістэм дае можлівасць стварыць вікно, якае можна запусціць, а другая — кнопкі, якія можна разместіць у гэтым вікні, і большасці рэальных продуктавых прымусканае викорыстоўваць абодве. У гэтым кяліку гэтыя два элементы роздзеляюцца, апісваюцься основныя варыянты кожнага з іх, а таксама ставіцца адна спраўа для абоўх: сколькі коду застаецца на комп’ютерах корыстнікаў і сколькі з яго насправды было неабходна?

Два слоі, якіе іншыя мовы выкарыстоўваюць разам

У экасистемах такіх, як Qt, GTK чыста WinForms, GUI toolkit адразу виконвае ўсё: він ачынае натыўнае вікно і забезпечвае элементы интерфейсу, якія знаходзяцца ў ям. JavaScript раздзеляе гэту адпаведальнасць між двума типамі інструментав, і самэ плутанне ў пораўнаннях выступае з-за сумешчэння гэтых інструментав.

• Desktop shells ператвараюць веб-код у програму, яка можа быць запусканая. Яны з’являюцься як каркас для прыемнік: натыўнае вікно, інтеграцыя з панеллю завад, адказ на запиты да локальных файлаў і прыемнік для установкі. Віджэты не ўключаюцца да гэтага пакету.
• Component libraries забезпечваюць інтэрактыўныя элементы, такія як кантракты, табліцы, прыстроі для выбору даты і дыялогавыя кансолькі. Яны працуюць у браузеры і не залежнаць ад таго, чы розмішаны ўоны ў прыемніку на рабочым столе чы ў звычным вікні.

Продукт для рабочага столу можа сумаваць Tauri з MUI; веб-продукт можа выкарыстоўваць толькі MUI. Выбор прыемніка і выбор бібліятэкі компанентаў — гэта два адналежныя рашэння.

Пытанне, якое насправдзе разлічва варыянты

У дзеяных экасістэміках ліцензаванне ўжо ёсць выніклы фактар, адказны за тое, чы не будзе прымусаваць вас зробіць свой продукт адкрытым кодам. У сфере JavaScript GUI практычна всё розповсюджваецца пад ліцензыяй MIT, таму ліцензыя рэдкасцю скурчвае спектар можлівасцей. Тое, што скурчвае спектар, — габарыты. Для шэлів разлік становіць каля калькулятора ў колька мегабайтаў проты калькулятора ў колька сотняў мегабайтаў. Для бібліятэкаў компонентаў разлік — межа між адправкай цэлай системы дизайна і адправкай толькі тых некалькох компонентаў, якія вы насправды викорыстоўваете. Хавайце гэты пытанне ў сваім увазе працюючы з абомя часткамі, якія паказаны нижэй.

Нумеры версій, указаныя тут, адпраўдаюцься да npm у момент напісання; пераканайцеся ў реестрыях, прытаму як павергацца на іх. Чырвоныя деталі пра версіі для настольных выкананняў, уключаючы новейшыя рантаймы, можна пазнакоміцца у нашай статыце пра порэванне варыянтав Electron, Tauri, Electrobun і Deno для настольных выкананняў.

Шэлы настольных выкананняў

Electron: стандарт, які вже апробаваны і ўключае сабе браузер

Electron (версія 44.3.0 у момент напісання, ліцензыя MIT) дадаўся як завіснае элемент для разработкі:

npm install --save-dev electron

Ён аб’яднаець цэлыя браузер Chromium плюс среду выконання Node.js з вашым прыемам. Інтэрфейс — это веб-сторанка, а бэкенд — Node. Яго самым большым прынтаментам ёст кансольна зроўнасць: VS Code, Slack, Discord, Figma і 1Password всі створаны на яго аднойчыні, а для пакавання, автападзялок, падпісвання коду і адчыткі пра збоі існуюць добра задокументаваныя інструменты, якія вядомы багатым командам.

Другіяй прынтаментам — цэлкава аднойчынаецца візуальная прыводка. Калі вы аб’яднаеце браузер, прыемак выглядае аднакова на Windows, macOS і Linux, і вы тэстуеце яго на адной версіі Chromium, а не на трох разных системных веб-відглядачах. Кроме таго, ён цэлкава прадуманы для JavaScript, таму будь-які разработчык фронтэнду можа працаваць над галоўным процэсам.

Цена за гэта — кожны даплін несе ў сабе браузер. Аб’екты, якія ўключаюць дапліны, зазвычай мають розмер ад 80 да 200 МБ, і чытайучы, калі корыстувач запускае калькольнік такіх даплінаў, спрацоўвання RAM шыбка зрастае. Адпаведальнасць за аптэчаванне гэтага вбудованага Chromium таксама несе корыстувач, пры чым гэта трэба робіць за свайм графікам выданняя.

Tauri: системны webview плюс бэкенд на Rust

Tauri (версія 2.11.4 на момент напісання, з двойным ліцэнсам Apache-2.0 або MIT) мае сопственную команду для стварэння:

npm create tauri-app@latest

У зменшэнні розмяру пакетаў Tauri вастоўляецца webview, які ўжо є ў операцыйной системе, а яго задні кантэйнер напісаны на мове Rust, а не на Node. Разлік у розмяре є структурным, а не падчас налаштавання: за звычайнымі даннымі розмяр пакетаў Tauri станавіць прыблізна 3–10 МБ, тады як у Electron — 120–200 МБ; кроме таго, він выкарыстоўвае на 50–75 процэнаў меншае колькасць памяці і запускаецца быстрэй. Паколькі гэты разлік вынікае з архітектуры, а не з налаштаванняў, ён застаецца незменным у всіх версіях.

Модэль безпекі таксама разніцяецца. У Electron фронтэнд-JavaScript можа з’яўіцца да операцыйной системы через Node, якщо толькі не заблакана гэта можлівасць. У Tauri фронтэнд запускаецца без права доступу да системы; прывілейованыя операцыі выконвуюцца за дапамою функцый на мове Rust, якія фронтэнд запрашвае па імени, а Tauri v2 адкрыў систему можлівасцей, якая кантролюе, якія API можа выклікаць кожны вікн. Tauri 2 таксама падтрымлеў iOS і Android, чаго Electron зовсім не робіць, і гэта мае значэнне для команд, якія хочуць адной базы коду як для настольных, так і для мобільных прыстроёў.

Недактарыя рэальны. Кожна платформа здольна аднакоўсці пры выкананні веб-відгляда трохку адрознава, таму тепер вы тэстуеце тры двайнікі замест адного. Для чаго-небудзь за межамі фронтэнду патрабуецца Rust. У Windows Tauri выкарыстоўвае WebView2, які є практычна на всіх сучасных установках, але іноды патрабуецца спецыяльны бустрапер. Розумнае правіла: якшо размер пакета ўжо не вызывае прытворання кліентаў, выбіранне Tauri чыста для заўмнення мегабайтаў — гэта занадто ранняя оптымізацыя. Яго трэба выкарыстоўваць тады, калі патрабуюцца компактныя інсталяторы, мінімальнае выкарыстанне памяці, строгейшая ізоляцыя або версія для мобайльных прыстроёў.

NW.js: старэйшы пакетнік Chromium

NW.js (v0.115.0 на момент напісання, MIT) інсталюецца як звычайны пакет:

npm install nw

Ён таксама ўключае Chromium і фактычна з’явіўся ранейшы за Electron. Яго асоблівасцю є тое, што Node і DOM дзеляюць аднам контэкстам, таму веб-стораніца можа безпасобна вызываць API Node, без роздзелення на процесы main і renderer у Electron. Для дзеярых застосоўкаў такой падход простыш у розумеенні. Але ў зворатную сторону – значна меньшая спяльнота: менш матэрыялу для навучання, менш інструментаў для пакавання та меньша дапамога, калі вы застрялі, пры тым размах бандла застаецца такім жа, як у Electron.

Neutralino: самы маленькі можлівы кэйсер

Neutralino (CLI v11.7.2 на момент напісання, MIT) працюе за дапамогою глобальна встановленага CLI:

npm install -g @neutralinojs/neu

Это лёгкій натыўны бінарны файл, створаны навакола системнага веб-відглядача, без Node і Chromium. Размеры такіх пакетаў зазвычай станавяць 1–5 МБ, яны нават меньшыя за Tauri, адколькі ў іх менша канфігурацыя фрэймворку. Якщо вам проста трэба абгорнуць існуючы веб-інтерфейс, дадаць айконку на панелі задач, простую можлівасць зберагчыка дадзеных і обмежаны доступ да файлаў, то Neutralino — гэта мінімальная структура, якая выпануе цю задачу. У ёй самая маленькая екасістэма і найвужэйшы набор натыўных можлівасцяў сярод чатырох, таму яго трэба вважаць інструментальным фрэймворкам, а не платформай для складных прыемлень.

Бібліятэкі компанентаў

Усё, што знаходзіцца ў гэтым разделе, працуе ў браузеры, таму кожны варыянт працюе на однакова хораша як у станцыйным шэле, так і ў звычнай вікнонцы. У гэтым случае пытанне розмеру пераходзіць з велічыны інсталлятора на тое, сколькі коду бібліятэкі ваш пакет транспортуе разам з сабой.

MUI: максымальны спектар можлівасцяў, Material як стандарт

MUI (версія 9.4.0 на момент написання, ліцензія MIT) інсталюецца разам з ягоўм двіжкам стылю Emotion:

npm install @mui/material @emotion/react @emotion/styled

Серед бібліятэкаў компанентаў React гэта самая вялікая і давольна стабільная, і яна следуе системе Material Design ад Google. Асортымент компанентаў вельмі вялік, дакументацыя высокай якосці, а ўжо ўсталяваныя інструменты для обробкі дадзеных можа адмаўляцься большымі ўпорамі дадзеных. Якщо вам патрэбны які-небудзь компанент, MUI практычна навядома яго мае, і хтось вялікай шанцай вучора задаў пра яго тое ж самае пытанне.

Гэта таксама дасцяжная бібліятэка. Новая інсталляцыя займае або-альколі 19 MB у падметку node_modules; гэта не тое, што доходзіць да корыстнікаў, але гэта свідчыць пра ёё масштаб. Файл з компанентамі, які вы апрабоўваеце, залежыць ад правільнай роботы механізмау tree-shaking, і якщо вы не інвестуеце ў стварэнне сабскіяўных тэм, усё будзе выглядаць як Material Design, што аднім камандам падходзіць, а іншым здаецца обмежваючым.

shadcn/ui: копіюйце код адынайча, замест таго кабелюваць залежнасць

shadcn/ui (CLI v4.21.0 на момент напісання, MIT) — гэта не пакет, які трэба імпортуваць. Яго CLI стварыяе проект, а пасля копіюе адзінаковыя компаненты ў яго:

npx shadcn@latest init
npx shadcn@latest add button dialog

Кожны компанент спалюе прымітывы Radix UI з стайлінгам Tailwind, і пасля запуску CLI гэты проста код аднаходзіцца ў вашым репазітарыі. Якшо кнопцы трэба іншая праця, вы рэдагуеце саму кнопку; няма компанента-обгорака, няма API для стайлізацыі, з яким трэба борцаць, і няма адпаведальнага за падтрымку, якога трэба пераканваць. Гэта таксама дапамагае залишыць бандл чыстым: якшо дадаце чатыры компаненты, то толькі гэтыя чатыры будуць ў вашай выпускной версіи.

Цена власнення — это тыя, якія неабходна для падтрымкі. Жодны npm update не павярэжыць вашы компаненты; апгрейд означае перакопіюванне та ручную налагодку змян. Кроме того, ён выкарыстоўвае Tailwind, што робіць яго непадходячым для проектаў, якія ім не выкарыстоўваюць. Гэты падход працуе, таму што ён зміняе звычны компрэс межы зручнасці та індывідуалізацыі: вы отрымляеце надзейны пункт запуску та повную контроль, а ў замяну апдэты стаюць вашай проблемай.

Ant Design: створаны для насыцэных корпаратыўных экранаў

Ant Design (v6.6.3 на момент напісання, MIT) выйшаў ад Alibaba і інсталюецца як адна пакетная структура:

npm install antd

Ён прысвячаець самы ўпоўненны комплект компанентаў для бізнес-інтэрфейсаў з великай колькасцю дадзэнняў: розвіталыя табліцы, складныя формы, спісы пераказаў, выбіранне з дрэва. Для кансоールаў адпаведальных за адарожненне та внутрашняя апаратура, кампонент, які вам патрэбен, верагодна ўжо існуе. Ён таксама являецца найбольшай бібліятэкай у гэтым списку — пасля інсталяцыі займае або-та 61 МБ на дыску, прыблізна у тры разы больш за MUI, а яго выразная візуальная ідэентычнасць значна складнейасць для замены, чым у Material.

Mantine: хорашы стандартныя настройкі без занадта агрэсывных прагненняў

Mantine (версія 9.6.1 на момент напісання, ліцензыя MIT) раздзеляе своія основныя компаненты з пакетам hooks:

npm install @mantine/core @mantine/hooks

Команды, якія сачуць, што MUI занадта диктуючы і shadcn/ui занадто інтэрвеніруючы, частаца прабываюць тут. У яго ёсць большы набор компанентоў, разумныя стандартныя настройкі, простая система тэмавання, моцная падтрымка TypeScript і адлежныя можнасці для рэжыма темнай панелі без дадатковых налаштаванняў. Нават як околачынку, пакет hooks, з адпамогай для выяўлення кліка за межамы, локальнага хранення дадзеных і запытак да медыя, ёсць корыстны сам па сабе. Яго спяльнай адументнасці меньшая, чым у MUI чы су Ant Design, таму можна спакоюча чакаць меньшыя колькасці расширэнняў трохі чужых разработчыкаў і меньшыя готавыя рашэння.

Radix UI і Headless UI: прыменне без стайлізацыі

Radix UI (v1.1.23 на момент напісання) і Headless UI (v2.2.10), оба пад ліцэнзай MIT, інсталююцца адпаведна па прымітывам чы як адзін пакет:

npm install @radix-ui/react-dialog
npm install @headlessui/react

Это прымітывы без стайлінгу. Яны абараняюцься пра повадкі викорыстоўвання, навігацыю за дапамой клавіатуры, кантроль фокуса і доступнасць, а всі візуальныя рашэнні залучаюцца да вас. Такое раздзеленне ўжоць цэнітэ, калі бо доступныя віджеты ўскладненыя, чым здаецца. Правільны дыалог павінен заставаць фокус усередине сябе пад час адкрывання, вернуць яго пасля закрыцця, закрывацца нажатыем клавішы Escape і правільна аанунсавацца праз тэхналогіі дапамогі; правільны выпадаючы список патрабуе навігацыю за дапамой стрэлкавых клавіш, можлівасць выбору праз набіранне тэксту і разумнае розташоўвання блізка краям вікна перагляду. Большасць команд недаўаюць ціну гэй працы і выкладзяць праекты, якія ў мелкіх деталях не працуюць.

Radix — гэта фундамент, на якім будуецца shadcn/ui, а Headless UI падтрымваецца камандай Tailwind. Вочныя затраты заключаюцца у тым, што вам павіннаеся самостайна напісаць увесь стайлінг, што і є галоўной метай, але застаецца рэальной працай.

PrimeReact: шырока падтрымка для нестандартных компонентаў

PrimeReact (v11.1.0 на момент напісання) належыць да сяброўскай групы PrimeFaces, якая таксама включае Angular, Vue і Java:

npm install primereact

Ён праставляе сабою вельмі шырокі спектар можлівасцей — ад дыяграм і організацыйных схем да таблыц у формате дрэва, календараў, віджетаў для завантажэння і цэлаг комплекту элементаў вводу, з якіх багато іншыя бібліятэкі зовсім не маюць. Калі вам патрэбна чагось нестандартнага, варта спачатку пераканацца тут.

Перад тым, як выкарыстоўваць яго, самі пераканацца ў умовах ліцэнзыі. Метаданыя ў npm вядуць да файла з ліцэнзыяй (“SEE LICENSE IN LICENSE.md”) у замен на ідэнтыфікатор SPDX, а выпускчы таксама продае платныя тэмы і шаблоны разам з бесплатным пакетам. Основная бібліятэка є адкрытым кодам, але перад стварэнням комерчыяго продукту на ёй трэба прачытаць фактычныя умовы.

Ішчы тры бібліятэкі, якія варта розглянуць

• Chakra UI (v3.37.0, MIT) ставіць доступнасць на першае месца і форматуе компаненты за дапамою пропсаў; ён знаходзіцца чыста межу між комплексным падходам MUI і прымітнымі элементамі Radix.
• daisyUI (v5.7.34, MIT) — это плагін для Tailwind, які запоўнюе класы компанентаў заместа самых компанентаў React, тое ўсё яго можна викорыстоваць таксама ў Svelte, Vue чы статычным маркапе.
• HeroUI (v3.2.4, MIT), перайменаваны наступнік NextUI, спаўнаючы Tailwind з React Aria.

Короткія керавальнікі для выбору

Для настольных прыстроёў:

• Апробаваная экасістэма, ідэнтычная візуалізацыя ў всіх месцах і команда, якая работае толькі з JavaScript, спакойна падкрэпляюць выбор Electron.
• Малыя розмеры пакетаў, мала колькасць памяці, строгейшыя правілы безпекі чы мета для мобільных прыстроёў спакойна падкрэпляюць выбор Tauri.

Тонкій абляцыя навакол існуючага веб-інтэрфейсу наводзіць на Neutralino.

Патрэба ў Node і DOM у аднам спяльным контексте наводзіць на NW.js.

Што стосуецца бібліятэкі компанентав:

• Патрэба ў практычна всіх компанентах плюс чырвоныя дакументацыі наводзіць на MUI.
• Патрэба кантролюваць і змяніць код у проекте Tailwind наводзіць на shadcn/ui.
• Інтэнзыўныя экспертызныя экраны для падпрыемстваў наводзіць на Ant Design.
• Хорашы стандартныя настройкі без якіх-лебе адчувальных прагнень наводзіць на Mantine.
• Адзін створаны система дизайна з абезпекаемасцю, якая ўжо рашана за вас, наводзіць на Radix або Headless UI.
• Незвычны, спецыялізаваны компанент наводзіць на PrimeReact.

Есць адна правіла, якая перакрывае весь спіс: якщо ваша каманда вже добра ведае адзін з гэтых інструментоў, гэтае кіраванне практычна завжды мае большую цэню, чым лягкія прыемлівасці ў іншых варыянтах.

Заключэнне

У обох слоях співтоварыства спискі функцыйяў здзейснілі значны саюз; гэтыя проекты мелі рокі, каб скопіюваць адзін у аднаго хорашыя ідеі. У пытанні вагі ўсё ж існуюць разлікі, якія відчуваюць корыстнікі. Выбор между Electron і Tauri ставя пытанне вагі для всей аплікацыі: запакаваць браузер і забезпечыць прыведамасць, чы ўжо спакаваць тое, што надае ОС, і такім чынам прагледзець розмер пакета у двадцать і болей разоў. Выбор между MUI і shadcn/ui прыменяе гэты компроміс да слоя компанентаў: павярнуцца на цэлы система дизайна, які падтрымваюць іншыя, чы ўжо купіць толькі тые элементы, якія трэба, і самостайна ўтримваць іх. Перш чым працаваць над порэванням табелей функцыйяў, неабходна выявіць, на якай стороне гэтага компромісу знаходзіцца ваш продукт, і тады спіс кандыдатаў зазвычай выбіраецца сам.