author Ahmad Muhardian

9 Framework Javascript untuk Membuat Aplikasi GUI/Desktop


Framwork Javascript untuk membuat aplikasi 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

Website Electron
Website Electron

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

Dokumentasi Electron
Dokumentasi Electron

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 Eelectron.

Perbedaannya, NW.js dibuat oleh Intel sedangkan Electron dibuat oleh Github.

Website NW.js
Website NW.js

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.

Website App.js
Website App.js

Dokumentasi App.js bisa kamu baca di halaman ini.

4. Meteor

Meteor adalah framework javascript untuk membuat aplikasi mobile, web, dan dekstop. 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.

Website Meteor
Website Meteor

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 labih baik dan ringan.

Website Proton Native
Website Proton Native

Proton Native menggunakan library:

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 />);

Demo Proton Native

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:

Demo aplikasi 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:

Demo DeskGap

8. Carlo

Carlo merupakan altenatif untuk Electron yang menggunakan Google Chrome dan Chromium.

Perbedaanya 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 Eelectron. Elektron memakan sekitar 130MB untuk node_modules sedangkan Carlo hanya 2MB saja.

Contoh aplikasi desktop dengan Carlo:

Demo Aplikasi 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.

Contoh Aplikasi NodeGui
Contoh Aplikasi NodeGui

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 menginkan panduan dan dokumentasi yang lengkap, saya sarankan memilih Electron. Karena komunitasnya banyak dan dokumentasinya juga tesedia 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?