Memilih technology stack Electron.js untuk aplikasi desktop tidak punya jawaban dari satu survei resmi. Riset periode 1 Januari 2025 hingga 22 Oktober 2026 menggabungkan inspeksi repositori besar, artikel pengalaman developer, unduhan npm, dan State of JavaScript 2025, tanpa polling khusus populasi pengguna Electron. Pola yang muncul berulang meliputi TypeScript, React, electron-vite, Tailwind dengan shadcn/ui, SQLite lewat better-sqlite3, Vitest, Playwright, dan electron-builder, namun setiap angka npm atau persentase survei web harus dibaca dengan label populasinya masing-masing.
Selanjutnya, bila Anda belum memetakan arsitektur tiga proses Electron, mulai dari Apa Itu Electron JS? Halaman ini fokus pada keputusan lapisan teknologi dan kekuatan bukti, bukan tutorial instalasi perintah.
- Tidak ada survei Electron-only 2025–2026. Temuan kategori adalah kecenderungan sampel, bukan suara mayoritas seluruh developer desktop.
- Pisahkan adopsi nyata di repo, preferensi developer, rekomendasi komunitas, unduhan npm, dan GitHub stars. Jangan satukan menjadi satu skor.
- React teramati pada 6 dari 10 observasi proyek atau artikel dalam laporan sumber, bukan 60% developer Electron global.
- electron-vite, electron-builder, dan Electron Forge menjalankan fungsi berbeda dalam pipeline dev versus distribusi.
- Matriks rekomendasi di akhir artikel adalah interpretasi editorial, bukan hasil voting.
Ringkasan lapisan technology stack Electron.js pada sampel riset
Electron memisahkan main process Node.js, renderer Chromium, dan preload sebagai jembatan API terbatas. Karena itu, library yang populer di SPA browser tidak otomatis cocok tanpa mempertimbangkan native module, sandbox, ukuran installer, dan jalur update.
Tabel berikut merangkum lapisan yang paling konsisten muncul pada sampel Mistral (6 repo aplikasi, artikel dev.to 2025–2026, template, dan metrik npm periode 19 September–18 Oktober 2026). Kolom keyakinan mengacu pada laporan sumber, bukan verifikasi independen redaksi untuk setiap sel.
| Lapisan | Temuan pada sampel | Pembanding | Keyakinan laporan |
|---|---|---|---|
| Bahasa | TypeScript di main, preload, renderer | JavaScript tetap valid | Tinggi |
| Frontend | React | Vue lewat template, vanilla di VS Code | Sedang–tinggi |
| Styling | Tailwind CSS v4 | SCSS custom (UI-TARS) | Sedang |
| Komponen UI | shadcn/ui | TanStack Table untuk grid data | Sedang |
| Dev dan bundling | Vite via electron-vite | Webpack, gulp di proyek legacy | Tinggi |
| Database lokal | SQLite, driver better-sqlite3 | electron-store untuk config KV | Tinggi |
| ORM | Tidak ada pemenang | drizzle-kit hanya pada Dyad | Belum terukur |
| State UI | Zustand | Redux Toolkit, Pinia (Vue) | Sedang |
| State async | TanStack Query | Hanya 2 observasi proyek | Rendah–sedang |
| Unit dan integration | Vitest | Jest, Mocha di basis lama | Sedang–tinggi |
| E2E | Playwright | WebdriverIO di dokumentasi resmi | Sedang–tinggi |
| Packaging | electron-builder + electron-updater | Electron Forge (resmi, dipakai Dyad) | Tinggi |
| Package manager | npm dan pnpm | Yarn 1 pada proyek lama | Sedang–tinggi |
Versi runtime Electron bergerak cepat. Sebelum mengunci matriks kompatibilitas Chromium dan Node, pantau liputan rilis seperti Electron 45 atau Electron v44.9.0 agar rebuild native module mengikuti ABI yang didukung.
Metodologi riset dan arti kata terbanyak
Berikut prioritas bukti menurut laporan Mistral: survei dan polling umum, pengalaman developer, repositori aplikasi nyata, lalu dokumentasi resmi hanya untuk validasi teknis, bukan suara preferensi. Inspeksi langsung mencakup VS Code, Joplin, Signal Desktop, Bitwarden, Dyad, dan UI-TARS-desktop, ditambah tiga artikel pengalaman dev.to, template electron-react-boilerplate dan shadcn-electron-app, serta State of JavaScript 2025 (N sekitar 10.900 responden).
Lantaran rentang 1 Januari 2025–22 Oktober 2026, proyek yang didirikan lebih awal tetap relevan sebagai snapshot stack 2026, bukan bukti keputusan awal tahun 2026 semata. Reddit dan aplikasi closed-source tidak terwakili. Jangan menjumlahkan responden SoJS, komentar Hacker News, unduhan npm, dan stars GitHub menjadi satu denominator.
Setidaknya, unduhan npm (jendela 19 Sep–18 Okt 2026) hanya proxy aktivitas paket seluruh ekosistem Node.js. Contoh: electron sekitar 32,8 juta unduhan per bulan, electron-vite sekitar 4,76 juta, better-sqlite3 sekitar 47 juta, Vitest sekitar 487 juta. Angka itu bukan jumlah developer Electron unik dan tidak boleh disebut pangsa pasar desktop.
Mengapa popularitas stack web belum membuktikan adopsi Electron
Lantaran aplikasi desktop membawa Chromium dan Node.js di setiap instalasi, framework UI ringan di browser tidak menjamin RAM rendah bila banyak renderer, background task, atau jendela aktif. Native module untuk SQLite, keychain, atau enkripsi memaksa rebuild per platform dan langkah CI yang jarang muncul di proyek web murni.
Namun keamanan mengubah daftar library. Renderer seharusnya tidak memegang Node.js mentah. Context isolation dan panduan keamanan Electron mendorong API sempit lewat preload dan contextBridge. Meski React 85% responden framework di SoJS 2025, angka itu tetap statistik ekosistem web, bukan bukti adopsi Electron.
Jadi utilitas kecil cukup electron-store untuk preferensi, sementara aplikasi offline-first dengan relasi dan migrasi schema cenderung ke SQLite. Sync cloud menambah backend, auth, dan resolusi konflik di luar daftar trending JavaScript tahunan.
TypeScript dan JavaScript pada Electron
Menurut inspeksi laporan sumber, VS Code, Joplin, Signal Desktop, Dyad, dan UI-TARS-desktop memakai TypeScript. Meskipun State of JS 2025 melaporkan sekitar 40% responden menulis 100% kode dalam TypeScript, angka itu konteks ekosistem JS, bukan persentase developer Electron.
Manfaat teknis terasa pada kontrak data antar proses Electron serta refactor IPC. TypeScript compile-time tidak menggantikan validasi input runtime di setiap channel. JavaScript tetap masuk akal untuk prototipe internal atau tim yang belum siap toolchain TS. Artinya TypeScript konsisten pada proyek besar yang diinspeksi, bukan kewajiban universal.
React, Vue, atau vanilla JavaScript di renderer
Tetapi React muncul pada 6 observasi proyek atau artikel: Joplin, UI-TARS-desktop, data-peek, Aurafy, Spider Pro, dan Desktop Starter App. Satuan observasi itu bukan survei acak. Alasan yang disebut developer indie meliputi ekosistem shadcn/ui, Monaco, TanStack, dan ketersediaan talenta, dengan trade-off kompleksitas re-render.
Vue 3 hadir lewat template electron-vite-vue dan Quasar, namun tidak muncul pada repo yang diaudit. Walau absen dari sampel audit, Vue tetap bisa dipakai di lapangan. VS Code membuktikan skala ekstrem bisa tanpa framework web, pola yang tidak generalizable untuk pemula. Svelte, Angular, dan Solid tidak punya bukti kuat pada sampel Electron khusus periode ini.
Untuk melihat stack produk nyata di luar artikel riset, bandingkan dengan katalog 36 contoh aplikasi Electron.js yang memverifikasi bukti per produk.
Tailwind, shadcn/ui, dan alternatif styling
Jadi pisahkan tiga peran: utility CSS (Tailwind), kit komponen copy-paste (shadcn/ui), dan library fungsional seperti TanStack Table. data-peek memakai Tailwind 4 dan shadcn/ui, Spider Pro Tailwind, Desktop Starter mengikuti pola serupa, dan repositori resmi shadcn-electron-app memvalidasi kombinasi electron-vite plus shadcn. UI-TARS-desktop memakai SCSS, bukti styling custom masih hidup.
Ternyata Bootstrap, MUI, dan Ant Design tidak muncul pada sampel penelitian. Itu tidak membuktikan ketidakpopuler di seluruh Electron. Pertimbangkan maintainability tema, dark mode, aksesibilitas keyboard, dan ukuran CSS setelah purge sebelum mengikuti tren template.
electron-vite, Webpack, gulp, dan Electron Forge
Kemudian electron-vite menyusun entry main, preload, dan renderer berbasis Vite. Laporan sumber mencatat unduhan bulanan naik dari sekitar 316 ribu (Oktober 2025) ke sekitar 4,76 juta (Oktober 2026) menurut metrik Best of JS dan npm. electron-react-boilerplate bermigrasi ke electron-vite menurut inspeksi repo. Webpack tetap di Bitwarden, sementara VS Code dan Joplin memakai pipeline gulp sendiri. Kategorikan itu sebagai existing project, bukan label deprecated otomatis.
Electron Forge adalah toolchain resmi untuk scaffolding, makers, dan publish. Dyad memakai Forge. Sedangkan jangan membandingkan Forge dengan electron-vite seolah keduanya bundler yang saling menggantikan. Alur umum: bundler dev (electron-vite atau Webpack) lalu packaging (electron-builder atau Forge makers).
SQLite, better-sqlite3, dan electron-store
Walau SQLite adalah engine embedded, Joplin memakai driver sqlite3 klasik, sementara proyek dev.to 2025–2026 mengaitkan better-sqlite3. Driver sinkron itu sederhana untuk local-first, namun query berat di main thread dapat membekukan UI jika tidak dirancang ulang. Native rebuild wajib saat ABI Electron berubah.
electron-store menyimpan key-value JSON untuk konfigurasi, bukan pengganti query relasional. sql.js, Dexie, dan lowdb menawarkan jalur tanpa native binding dengan trade-off performa. Akhirnya data-peek memakai pg, mysql2, dan mssql untuk koneksi server eksternal, bukan database embedded di installer.
Unduhan better-sqlite3 sekitar 47 juta per bulan mencakup seluruh npm, bukan pengguna Electron saja. Aurafy dan Desktop Starter melaporkan WAL dan synchronous FULL untuk integritas data finansial lokal.
ORM: belum ada pemenang yang terbukti
Namun sumber riset tidak membuktikan popularitas ORM khusus Electron. Dyad memakai drizzle-kit, satu observasi tidak cukup untuk klaim Drizzle mengalahkan Prisma. ORM tetap keputusan kebutuhan migrasi, schema, footprint binary, dan DX tim. SQL langsung plus migrasi manual masih valid untuk aplikasi kecil. Status hasil riset: belum ada pemenang ORM Electron yang dapat ditetapkan dari sampel ini.
Zustand, TanStack Query, dan library state lain
Selanjutnya Zustand tampak pada data-peek, Spider Pro, UI-TARS-desktop, dan eigent (empat proyek dalam laporan). TanStack Query pada data-peek dan Aurafy untuk fetching async, fungsi berbeda dari state UI Zustand. Redux Toolkit masih besar di npm umum namun jarang muncul pada sampel Electron terbaru. Pinia relevan untuk Vue. Tidak semua aplikasi membutuhkan library state global.
IPC aman, Fuses, dan native module
Setelah pola referensi memisahkan main process untuk API privileged, preload untuk fungsi terbatas lewat contextBridge, serta renderer tanpa nodeIntegration, validasi argumen per channel wajib tetap di runtime. CSP plus update Electron terdukung membantu, sementara Electron Fuses mengurangi attack surface tanpa menjadikan binary kebal reverse engineering.
Kemudian Aurafy mendokumentasikan jebakan ELECTRON_RUN_AS_NODE yang mengubah perilaku require electron. Abstraksi type-safe seperti electron-trpc disebut niche. Bitwarden memakai electron-rebuild, Joplin skrip rebuild sendiri, Dyad rebuild keychain khusus, semuanya mengingatkan native module harus lulus CI multi-OS.
Vitest, Jest, Playwright, dan QA desktop
Sedangkan Vitest muncul di Dyad, UI-TARS, Beekeeper Studio, plus data-peek. Joplin dan electron-react-boilerplate masih memakai Jest, bagian VS Code memakai Mocha. VS Code dan Joplin memakai Playwright, UI-TARS memakai helpers Playwright dengan peran berbeda tiap repo. Dokumentasi testing Electron juga membahas WebdriverIO.
QA desktop menambah uji multi-window, dialog native, permission filesystem, smoke test installer, plus channel updater. Agar rilis stabil, rencanakan unit untuk logic murni, integration untuk IPC, dan E2E untuk alur kritikal pengguna sebelum rilis produksi.
Packaging, updater, npm, dan pnpm
Ternyata electron-builder plus electron-updater muncul pada Joplin, electron-react-boilerplate, Desktop Starter, dan data-peek. Unduhan npm sekitar 22,3 juta per bulan untuk builder versus sekitar 5,4 juta untuk @electron-forge/cli, perbandingan paket npm, bukan pangsa pengguna Electron. Forge dipakai Dyad sebagai jalur resmi.
Aurafy melaporkan draft GitHub Release menyebabkan 404 updater sampai publish. Signing dan notarisasi macOS perlu direncanakan sejak awal. VS Code dan Bitwarden memakai npm, Signal plus Dyad memakai pnpm, Joplin masih Yarn 1. Pilih manager berdasarkan lockfile, monorepo, plus konsistensi rebuild native, bukan ranking unduhan global. Dokumentasi resmi menjelaskan alur distribusi pada panduan update Electron dan overview distribusi.
Proyek nyata yang memetakan stack Electron 2025–2026
Artikel pengalaman developer indie melengkapi inspeksi repo enterprise. data-peek (dev.to, 2025) memakai Electron 38 dengan React 19, TypeScript, Tailwind 4, shadcn/ui, Zustand, better-sqlite3, electron-store, electron-vite, pnpm, Vitest, plus electron-builder untuk GUI database. Rohit Gill menekankan driver Node di main process sebagai alasan utama dibanding runtime alternatif, dengan ukuran binary sekitar 150 MB sebagai trade-off yang diterima. Aurafy (William, dev.to) membangun jurnal trading lokal dengan React, better-sqlite3 WAL, TanStack Query, plus Tailwind, lalu menemukan jebakan electron-updater pada draft GitHub Release serta perilaku ELECTRON_RUN_AS_NODE yang merusak asumsi require electron.
Spider Pro (methamorphe) menangani crawler SEO lebih dari 100 ribu halaman dengan React 19, Vite, Zustand, better-sqlite3, plus virtualisasi TanStack Table, sehingga satu berkas .db per proyek tetap portabel. Joplin (arsitektur resmi) tetap on Electron dengan React, TypeScript, SQLite lewat driver sqlite3, gulp, Jest, Playwright, electron-builder, plus Yarn 1, bukti pipeline lama masih produktif tanpa migrasi big-bang. VS Code (Microsoft) memakai TypeScript dan UI custom tanpa framework web, dengan gulp, Mocha, Playwright, plus npm, contoh skala ekstrem yang tidak sebaiknya dijadikan template pemula.
Signal Desktop memvalidasi baseline TypeScript penuh, pnpm, rolldown, plus skrip rebuild app-deps untuk aplikasi keamanan-sentris. Dyad (Will Chen) memilih Electron Forge, Vitest, drizzle-kit, npm, plus rebuild keychain, menunjukkan jalur resmi Forge hidup di proyek AI app-builder 2025–2026. UI-TARS-desktop (ByteDance) menggabungkan React, TypeScript, monorepo pnpm turbo, Vitest, Playwright helpers, plus SCSS, pola yang mirip proyek indie modern meski timnya besar.
Matriks rekomendasi stack menurut skenario
Grid di bawah hanya interpretasi editorial dari bukti sampel di atas plus dokumentasi keamanan resmi Electron. Angka atau urutan baris bukan statistik voting developer desktop.
| Skenario | Arah stack | Trade-off utama |
|---|---|---|
| Baru belajar | Electron + TypeScript + template Vite (Forge atau electron-vite) + satu frontend | Pahami main, preload, renderer sebelum menambah dependensi |
| Desktop sederhana | Baseline + Tailwind atau CSS standar + electron-store bila perlu | Belum perlu ORM, SQLite, atau server state |
| Local-first | Baseline + SQLite dan better-sqlite3 + migrasi dan backup | Native ABI, query sinkron berat, recovery data |
| Data intensif | Local-first + virtualisasi + Zustand bila perlu + Vitest dan Playwright | Performa, test boundary, ORM opsional |
| Komersial multi-OS | Stack fungsional + builder atau Forge + updater, signing, CI per OS, Fuses | Biaya rilis dan security sepanjang lifecycle |
Untuk eksplorasi cepat dengan AI tanpa mengunci stack produksi, lihat Belajar Membuat Aplikasi Electron Menggunakan AI sebagai jalur terpisah dari keputusan jangka panjang.
Kesalahan populer saat membaca riset stack Electron
- Menganggap persentase React di SoJS sama dengan persentase pengguna Electron.
- Menyebut 4,76 juta unduhan electron-vite sebagai jumlah developer Electron unik.
- Mengartikan stars electron-react-boilerplate sebagai jumlah instalasi produk.
- Menyatukan semua tool populer per kategori seolah satu proyek wajib memakai semuanya.
- Menyamakan SQLite, better-sqlite3, electron-store, dan PostgreSQL sebagai pengganti satu sama lain.
- Membandingkan electron-vite dengan electron-builder tanpa membedakan tahap pipeline.
- Menyatakan Drizzle, Zustand, atau tRPC wajib untuk setiap proyek.
- Mengabaikan validasi runtime IPC dan rebuild native module.
- Menunda installer, signing, notarisasi, dan updater sampai akhir sprint.
- Menyimpulkan Vue tidak dipakai hanya karena absen dari sampel audit.
Pernyataan bukti riset stack Electron dari sampel 2025–2026
Laporan Mistral merangkum proyek dan pengalaman developer pada rentang 2025–2026 dengan pola berulang: TypeScript dan React paling konsisten di lapisan bahasa dan frontend, electron-vite tumbuh pesat pada proyek baru, SQLite dengan better-sqlite3 kuat untuk local-first, sementara Tailwind, shadcn, Zustand, Vitest, Playwright, dan electron-builder kerap muncul bersamaan pada observasi yang sama. Tidak ada survei khusus Electron yang membenarkan peringkat mayoritas untuk seluruh developer desktop.
Jadi developer Electron kerap meminjam toolchain web yang sedang kuat, lalu menyesuaikannya dengan constraint multi-process, native module, keamanan, dan distribusi. Verifikasi berikutnya sebaiknya artikel implementasi terpisah agar tidak bentrok intent dengan halaman definisi dan halaman riset ini.
FAQ singkat seputar technology stack Electron.js
React, Vue, dan TypeScript di Electron
Electron tidak mewajibkan React. Vue, vanilla JS, atau stack custom tetap valid bila Anda menjaga keamanan renderer, preload sempit, plus build multi-entry yang konsisten di CI. Vue hadir lewat template electron-vite-vue dan Quasar Desktop meski sampel riset lebih sering menampilkan React.
Proyek modern cenderung TypeScript karena kontrak IPC dan refactor skala menengah ke atas lebih aman dengan tipe statis di ketiga proses. JavaScript tetap boleh untuk prototipe internal yang hidup singkat.
SQLite, driver, dan electron-store
Aplikasi Electron tidak wajib SQLite. Engine itu cocok untuk data relasional lokal plus migrasi schema, sementara preferensi sederhana bisa memakai electron-store. SQLite adalah engine embedded, better-sqlite3 driver Node sinkron ke berkas .db, electron-store hanya key-value JSON untuk konfigurasi.
Peran electron-vite, Forge, dan electron-builder
electron-vite fokus dev bundling multi-entry. Electron Forge menyediakan scaffolding resmi dan makers. electron-builder fokus installer plus channel auto-update. Ketiganya bukan substitusi satu fungsi.
State, ORM, dan native module
Aplikasi sederhana tidak perlu Zustand atau ORM. Tambahkan library hanya bila kompleksitas UI atau schema data membenarkan dependency extra. Native module lintas OS membutuhkan @electron/rebuild atau skrip setara di CI, uji artefak per platform, lalu rencanakan upgrade Electron mengikuti dukungan tiga versi terakhir upstream.
Technology Stack Electron.js Paling Banyak Dipilih Developer Berdasarkan Riset 2025–2026
