Membuat Prototipe Dengan Electron
Poin yang sangat positif dengan keberadaan Electron adalah terbentuknya mindset yang menghindarkan anda sebagai pengembang antarmuka aplikasi untuk selalu berpikir kalau aplikasi browser-based tampilannya harus konsisten atau bersifat cross-browser dan malah terjadi efek sebaliknya yaitu membangun aplikasi Electron akan membawa anda untuk berpikir bahwa anda bisa memanfaatkan fitur yang spesifik yang hanya terdapat di Chromium, yaitu browser (library) yang dipakai di platform Electron.
Teknologi JavaScript, HTML5 dan CSS saat ini sudah sangat banyak dipakai untuk membangun aplikasi desktop maupun mobile yang memang keberadaannya menggeser penggunaan teknologi plugin seperti Adobe Flash ataupun aplikasi desktop berdasarkan Flash seperti Adobe AIR yang sebenarnya secara konsepsi dan struktur bahasa, teknologi lama tersebut mengimplementasikan EcmaScript 4 dan sangat mirip Java yang menurut saya jauh lebih canggih sebenarnya, cuman teknologi tersebut bersifat closed-source dan dimonopoli oleh satu perusahaan, Adobe, jadi terdapat vendor-locking di situ.
— -
Ok kembali lagi ke Electron,
Ada beberapa catatan yang yang akan saya tulis disini yaitu mengenai konsep dasar dan beberapa tips untuk prototyping (membuat prototipe) memakai Electron.
Stack
Seperti yang saya katakan sebelumnya, Electron memakai browser Chromium untuk rendering UI, anda bisa mengaksesnya melalui class Browser Window dan untuk operasi native atau sebagai back-end menggunakan teknologi tercinta saat ini yaitu Node.js sehingga pasti anda bisa menggunakan npm untuk menyediakan fungsionalitas yang anda cari.
Poin sangat penting yang perlu anda ingat mengenai diagram sederhana dari stack Electron diatas itu adalah
“Engine rendering Chromium dan back-end Node.js di Electron itu masing-masing berjalan di proses yang berbeda”
Sehingga konsekuensinya adalah pasti ada mekanisme tertentu jika antar proses tersebut harus berkomunikasi.
Ada beberapa fungsi-fungsi yang sangat inti yang fungsinya melibatkan komunikasi antar dua proses tersebut,
ipcRenderer
Electron menyediakan ipcRenderer untuk mengirimkan data (pesan) ke proses utama Node.js.
ipcMain
Sebaliknya untuk mengirimkan data dari proses utama Node.js ke Browser Window atau proses render, Electron menyediakan fungsi yang bernama ipcMain.
remote
Kebanyakan fungsionalitas native seperti menu, dialog hanya terdapat di proses utama Node.js bukan di stack rendering atau di Browser Window sehingga untuk memanggil fungsi-fungsi tersebut Electron menyediakan fungsi yang benama remote atau lebih tepatnya fungsi ini memungkinkan proses renderer untuk meng-import modul-modul yang ada proses utama.
Hanya saja ada beberapa masalah jika anda harus memanggil fungsi yang mempunyai callback, silahkan anda baca lebih lanjut di dokumentasi Electron.
webContents.executeJavascript
Sebaliknya untuk mengeksekusi JavaScript ataupun fungsi native DOM anda bisa memakai webContents.executeJavascript()
ipcMain, ipcRenderer, remote maupun webContents.executeJavascript merupakan cara-cara berkomunikasi antar proses utama Node.js dan proses render di Browser Window
Pertanyaan mendasar yang timbul adalah kenapa harus ada komunikasi antar proses?
Beberapa kebutuhan yang memang sering ditemui jika membangun aplikasi menggunakan Electron, setidaknya dari pengalaman saya seperti dibawah ini
Akses DOM di Browser Window
Manipulasi DOM oleh proses utama sangat diperlukan, misalnya untuk mengupdate data di tampilan pada renderer
dari proses utama
Kirim Data dari Browser Window ke Main Proccess
Dalam beberapa aplikasi yang saya buat seringkali harus mengolah data HTML atau scrapping HTML dan dalam kasus seperti ini biasanya setelah Browser Window misalnya dotdBrowserWindow harus me-load page URL maka ketika event dom-ready anda baru bisa mengirimkan data-data HTML ke proses utama di main.js
dotdBrowserWindow akan mengeksekusi ipcRenderer dan mengirimkan data HTML dengan event HTMLData. Perlu anda perhatikan bahwa kode diatas itu memang semacam proses injection script.
Setelah event HTMLData terjadi maka anda bisa mendengarkan event tersebut melalui ipcMain dan memproses data yang ditumpangkan di event tersebut.
Akses Fungsi di Main Proccess
Jadi apa perbedaan antara perintah berikut
const { dialog } = require(electron);dan perintah
const { dialog } = require(electron).remote;Perintah pertama hanya bisa digunakan di wilayah proses utama (main.js) dan perintah kedua digunakan di wilayah proses renderer.
Lalu yang manakah yang harus dipakai? jawabannya sangat tergantung pada aplikasi yang akan anda buat. Jika misalnya untuk memilih file di komputer
dialog.showOpenDialog();dan hasil data di proses di renderer tentu saja perintah kedua yang memakai class remote itu yang harus anda pakai dan demikian juga sebaliknya.
Showcase
Aplikasi notifikasi desktop untuk ebook gratis dari Packtpub. Kode murni memakai vanilla JavaScript…yup, no React, no Redux, no transpilation sh!t.
Github
https://github.com/junwatu/pepefe
Tentang Saya
Programer yang tidak terlalu bertendensi ke bahasa pemrograman tertentu, meskipun saya termasuk fans berat dari Node.js tetapi selama problem terselesaikan ok saja kalau harus pakai “old tech”.
— Repositori kode saya ada di sini.
