ElectronJS: #1 Fall in love with JavaScript!
Honestly speaking I've always looked at JavaScript with very gloomy lenses and most of it comes from my neglect towards learning web stack technologies. I've never thought of myself as someone who'll program websites or web-apps hence I hardly spent any time learning what JavaScript is what else can be done using it. During the lock-down I got so bored of chilling with Netflix that I decided I'll at least check what JS is, this is when I came across ElectronJS the magical JavaScript framework used to develop cross-platform applications using the same tech stack developers use to develop websites i.e. <HTML>, CSS and JS. Not only was it satisfying but also super cool to actually see applications behaving the way you wish them to in GUI without using C# or C++. Although my CSS skills are poor and the UI I make looks like it was designed in the early internet era, i would say for those who'll like to learn a little of JS and a little of electron I'll love to share what I know until now.
I created a small App / Widget called Focus!
What is does is present a setup window (shown above) to user to enter the tasks and their respective priorities. It than stores the listed tasks in an internal array and renders a small widget which can be innocently placed anywhere on your screen to show you your task, its priority, the time elapsed since the task started and the overall progress according to all the tasks. The widget looks something like this.
There are many components in electron but we'll limit our discussion today on the ones that were used in this project. Electron apps are based on two processes main process and renderer process.
Main Process:
The process which initiates the main app, and issues the main window. It is the core of the inter-process communication chain and lives as long as any of the child renderer processes are alive as well. It contains the back-end code which runs and manages your app.
Renderer Process:
It is a process invoked by the renderer for rendering the HTML page in the BrowserWindow. It's major task is to render the UI elements of the page. When you log your console from a script running in the renderer process it doesn't even show in the debug console of the electron app.
BrowserWindow:
Electron renders the windows as objects of class BrowserWindow. Whenever you have to issue a new window to your UI you use the same (for our case we did it for the main task setup window and next time for the widget window), your windows can be frameless, transparent, time-base temporary and what not. The root <div> container takes up the internal space of your app's window.
// Creating a new window.
const win = new BrowserWindow({
webPreferences: {
nodeIntegration: True
},
frame: true,
show: false
});
// Setting up a callback to run when window is ready.
win.once('ready-to-show', () => {
win.show();
});
})Looking at the code-snippet above you can proudly make a bold statement that Javascript is the best language to start coding in. Also it's so humble that it even works on Internet Explorer! ;).
IPC:
IPC stands for Inter process communication, since we've already discussed that windows are rendered by the rendered processes and the main backend runs on the main process we now come across this boulder named "How to move data across process?" i.e. what if the local data i have in my main process is to be displayed in a window, how would i communicate that to the intended process ? (As in our example the tasks list was stored in the main setup window's process while we had to display them in the widget window.) This is the place where IPC comes to our rescue. They are queues which deliver data through "key":value pairs. Hence the sender can do something like this:
// Sending from one renderer process to another.
// Here win.webContents.id is the id of the process we wish to
// communicate to, 'TaskArray' is the key that will be used to access
// the value *taskArray which is an Array object.
ipcRenderer.sendto( win.webContents.id, 'TaskArray', taskArray);where as the receiver can receive it using something like this:
let taskArray; // Creating an object to store.
ipcRenderer.once('TaskArray', (event, arg) => {
taskArray = arg;
});And that's it, I can walk through my code but that'll be boring so I've left a link below for you to check that out. Though I would love to share the HTML and CSS portion of the project too but honestly the amount of CSS that I know right now is limited to this (and I am shamefully proud of it :D):
The code for the project has found a home on my GitHub.
There will be future posts on how we can do complex stuff such as using AWS services in our apps to supercharge their capabilities. I hope this Electron series motivates people to pickup JavaScript and create something!
I hope you enjoyed reading the blog.
