The most fascinating thing about learning JS for me was how easy to get into developing applications for different types of platforms, as I mainly work on my Windows PC I wanted to develop some personalized apps that will help me boost my productivity.
Why I did not choose native development over Electron ?
The answer to this question was quite simple for me, since I am really comfortable with JS, that is my main reason, learning a new language like C will come with its own perks but I think its more about starting than making it harder to start, right ?
I started learning it by going to the official documentation, Link and on the main page, you can see the main.js file code and files like "main.js", "preload.js" and "index.html" (only file I am familiar with), main.js, preload.js and renderer.js are the three files we need to be concerned with:
main.js: main.js is like the heart of whole application, basically connecting with node.js takes place using this file only.
preload.js: preload.js has one main responsibility and that is to work as a link between UI (renderer) and main.js or to put it simply it acts as a mediator between UI and system level functions, preload will only expose certain functions to work with UI because of security reasons (that I still have to learn about).
renderer.js: It is a simple js script that will act as the hands of UI, in web its basically a simple js script that will used to make the page interactive, "the barebones UI script", although this exists, when I started using electron with react, there is no use of this file, since react generates the html, css and js file after building.
Two ways I used to scaffold a new project:
- You can use html, css, js and electron: Web development basic pillars html, css and js all three in conjunction can create any type of web page you want, similarly you can use these to create the UI you want with electron as backend a very very simple setup can look like this
here i did not use preload, since preload is optional for very small setups, and
app and BrowserWindow is required from electron as former is the application controller of whole event lifecycle and latter is used to make app's windows.
app has a function "whenReady", and returns a promise which gets fulfilled when electron has been initialized.
- Using React (Vite) and electron: This was my preferred way of doing things, since react makes a lot of things quite easier, first you need to make a project using Vite and then just install electron as a dev dependency, rest is same as before, but here I am using "commonJS" and to prevent any errors, rename .js to .cjs
This is just an early overview of what I learned as I learn more, I'll keep sharing my insights with you, until then,
bye 👋
Top comments (1)
It's new to me — thank you!