9 Framework Javascript untuk Membuat Aplikasi GUI/Desktop
Javascript adalah bahasa pemrograman yang biasanya digunakan untuk membuat aplikasi web.
Namun…
Sejak kemunculan Nodejs, Javascript menjadi bisa digunakan untuk membuat aplikasi selain web seperti Desktop, Mobile, IoT, Server, Game, dll.
Pada kesempatan ini, kita akan membahas framework apa saja yang digunakan untuk membuat aplikasi Desktop dengan Javascript.
Mari kita mulai…
1. Electron
Electron (dikenal juga dengan Atom Shell) merupakan framework yang dibuat oleh Github. Electron menggunakan Nodejs sebagai backend dan Chromium sebagai front-end. 1
Contoh aplikasi yang dibuat dengan Electron:
Selengkapnya kamu bisa lihat di halaman ini.
Electron memiliki dokumentasi yang lengkap dan juga tersedia dalam bahasa indonesia. Dokumentasi ini dapat dibuka melalui https://electronjs.org/docs
2. NW.js
NW.js sebelumnya dikenal dengan sebutan node-webkit adalah sebuah framework yang sama seperi Electron.
NW.js menggunakan Nodejs dan Chromium seperti Electron.
Perbedaannya, NW.js dibuat oleh Intel sedangkan Electron dibuat oleh Github.
Dokumentasi NW.js dapat kamu baca di halaman ini.
3. App.js
App.js juga sama seperti Electron dan NW.js. Namun, project App.js ini sepertinya sudah lama ditinggalkan.2
Karena itu, di websitenya menyarankan untuk menggunakan NW.js dan Electron.
Dokumentasi App.js bisa kamu baca di halaman ini.
4. Meteor
Meteor adalah framework javascript untuk membuat aplikasi mobile, web, dan desktop. Meteor awalnya bernama Skybreak. Lalu pada bulan april 2012, framework ini dinamai ulang dengan Meteor.3
Meteor dikembangkan oleh Meteor Development Group, sebuah startup yang diinkubasi oleh Y Combinator.
Contoh aplikasi yang dibuat dengan Meteor:
Selengkapnya kamu bisa lihat di halaman ini.
5. Proton Native
Proton Native adalah framework Javascript yang dikembangkan oleh Gustav Hansen ( kusti8). Proton Native didesain sebagai alternatif untuk Electron.
Proton Native menggunakan Widget native dari sistem operasi. Sehingga tidak memerlukan Chromium seperti Electron. Ini akan membuat performanya lebih baik dan ringan.
Proton Native menggunakan library:
- Libui/ Libui-node untuk membuat native widget menggunakan GTK3, Cocoa, dan Windows API;
- React-reconciler untuk state management dan rendering.
Proton Native menggunakan React, sehingga kita juga dapat menggunakan JSX di sana. Berikut ini contoh kode program dengan Proton Native:
import React, { Component } from 'react';
import { render, Window, App, Button } from 'proton-native';
class Example extends Component {
render() {
return (
<App>
<Window title="Example" size={{w: 300, h: 300}} menuBar={false}>
<Button stretchy={false} onClick={() => console.log('Hello')}>
Button
</Button>
</Window>
</App>
);
}
}
render(<Example />);
Penjelasan lengkapnya dapat kamu baca pada dokumentasi Proton Native.
6. Vuido
Vuido adalah framework untuk membuat aplikasi Desktop yang berbasis Vue.js. Aplikasi yang dibuat dengan Vuido dapat berjalan di atas Windows, OS X, dan Linux. Vuido menggunakan native komponen juga seperti Proton Native.
Vuido juga menggunakan library Libui/ Libui-node untuk membuat tampilan GUI.
Berikut ini contoh demo aplikasi yang dibuat dengan Vuido:
Untuk dokumentasi Vuido, kamu bisa baca di website resminya https://vuido.mimec.org/.
7. DeskGap
DeskGap merupakan alternatif untuk Electron. DeskGap tidak menggunakan Chromium seperti Electron. DeskGap menggunakan WebView untuk menampilkan HTML, sehingga lebih ringan dibandingkan Electron.
Pada MacOS DeskGap menggunakan WKWebView, pada Windows menggunakan IWebBrowser2 atau WebViewControl (jika tersedia), dan pada Linux akan menggunakan WebKitWebView.
Platform yang didukung DeskGap terbatas dan juga dokumentasinya belum begitu lengkap.
Kekurangannya mungkin saat kita ingin menggunakan CSS terbaru, WebView kadang tidak mendukung.
Contoh demo aplikasi desktop dengan DeskGap:
8. Carlo
Carlo merupakan alternatif untuk Electron yang menggunakan Google Chrome dan Chromium.
Perbedaannya dengan Electron:
Carlo menggunakan Google Chrome atau Chromium yang terinstal di sistem operasi. Sedangkan Electron membawa sendiri Chromium di dalamnya.
Ini membuat ukuran paket node_modules
Carlo lebih kecil
dibandingkan Electron. Elektron memakan sekitar 130MB untuk
node_modules
sedangkan Carlo hanya 2MB saja.
Contoh aplikasi desktop dengan Carlo:
9. NodeGui
NodeGui adalah library open source yang berbasis Qt 5 dan mendukung styling seperti CSS. NodeGui merupakan kombinasi dari Nodejs dan Qt. Aplikasi yang dibuat dengan NodeGui dapat berjalan di atas Mac, Linux, dan Windows.

NodeGui memiliki renderer khusus untuk React yang bernama React NodeGui, sehingga kita bisa menggunakan React untuk membuat aplikasi dengan NodeGui.
Kamu Akan Pilih yang Mana?
Bingung mau pilih yang mana?
Berikut ini kesimpulan dari saya:
Jika kamu menginginkan panduan dan dokumentasi yang lengkap, saya sarankan memilih Electron. Karena komunitasnya banyak dan dokumentasinya juga tersedia dalam bahasa indonesia.
Jika kamu ingin menggunakan WebView, maka saya sarangkan menggunakan DeskGap. Tapi mungkin tidak mendukung CSS terbaru.
Jika kamu menginginkan aplikasi yang ringan dan cepat, saya sarankan Proton Native atau Vuido. Karena menggunakan widget native dari sistem operasi. Tapi widget-nya lebih sedikit dibandingkan Electron.
Jika kamu menginginkan aplikasimu dapat digunakan juga untuk mobile dan web, saya sarankan menggunakan Meteor.
Sementara App.js tidak saya rekomendasikan, karena sudah lama tidak dikembangkan lagi.
Jadi, kamu akan pilih yang mana?