Electron JS Inter Process Communication ( IPC ) Explained - 2024 Beginner Friendly Guide
Ғылым және технология
Electron.js makes creating Desktop apps very easy especially if you are already familiar with JavaScript, CSS and html. However, there are a few concepts to that might need getting used to one of them of is inter process communication and that's what this video is about!
We will start out by going through processes in Electron. Then we will create an Electron app to start learn how to implement the three main patterns of Inter-process communication:
1. Main Process to Renderer Process
2. Renderer Process to Main Process
3. Two way
Chapters:
00:00 - Processes in an Electron App
00:18 - The main process
00:51 - The Renderer Process
01:26 - How do processes communicate?
01:40 - Create a new project to learn from doing - we will use electron-forge
03:15 - examine project's scaffolding and files created
03:46 - preload script
04:43 - What if we wanted to access Node.js built-ins from our renderer process? - practical example
06:40 - expose Node’s process.versions in mainworld using Context Bridge
10:06 - Send a message from renderer to main and allow users to input a URL that open a webpage in a new window
12:23 - using ipcRenderer.send
13:44 - setting a listener in main process [ IpcMain.on ]
14:31 - Create new window to display inputted URL
13:31 - Trigger ipc Communication through renderer
16:11 - two way ipc Communication
17:27 - ipcRenderer.invoke
17:50 - Open dialog for selecting files [ dialog.showOpenDialog ]
18:44 - ipcMain.handle + async callback function
20:58 - get filepath from main process once user makes a selection
Links:
Electron Forge Docs:
www.electronforge.io/
Electron.js Docs:
www.electronjs.org/
#electronjs
#codingtutorial
#IPC
#softwaredevelopment
#javascript
#nodejs
#codingtutorial
Пікірлер: 15
Hi 👋 I hope you find this video useful to you! I would also love to hear your thoughts and any suggestions you might have for me! 😊
A lot of the videos are outdated due to the Electron 20+ sandboxing things and needing to run preload to expose certain nodejs modules. Great video explaining how everything works!
@PikoCanFly
2 ай бұрын
Thank you! 😊
Good job
I found your channel on reddit. It's pure gold
@PikoCanFly
20 күн бұрын
Thank you very much!
AWESOME.... TRULY SPEECHLESS!!!!! 💯💯💯💯💯💯THANK YOU VERY VVVERY MUCH!! 🤗🤗🤗🤗
@jcurbelob
2 ай бұрын
By the way for all audience, i just recently asked a video for this theme, and less than a week later here it is. So ask yours right away , here is teacher Piko for you. !! 👌
@PikoCanFly
2 ай бұрын
You are very welcome! So glad you like it! 😊
Really good explanation, even I understood it, and I thought it would be too advanced for me 👍Great job
@PikoCanFly
2 ай бұрын
So glad you like it 🤗
Amazing job++ Tnx a lot for the up-to-date electron. Are you thinking of creating a react-electron video implementing navigation and db (sqlite, or any kind). It would be more than perfect.
@PikoCanFly
Ай бұрын
I am so happy you liked the guide! Regarding your question, absolutely! I'm considering creating a video to delve deeper into these topics sometime in the future. :)
why no one focus on electron js if it can build desktop application. May be something wrong with this framework. I am hardly seeing any recent tutorial for electron js mostly 3-4 year old
@PikoCanFly
2 ай бұрын
Apps built with Electron include Discord, Visual Studio Code, Slack, Skype, Postman, and many others. Electron is regularly updated and maintained by GitHub. While it may not be trending at the moment, it remains a widely used and proven reliable framework.