codes added

Author: sanjanapackt

section 1/diagram.jpg

@@ -0,0 +1,11 @@
+ok, so now that we know what electron is and some of the benefits of using it, lets look at how it actually works. So Ive created a diagram to explain as much as I can about the inner workings of Electron.
+
+So down here we have our operating system, whether mac, windows or linux and then everything in this grey box is electron. When you run an application on your machine, you run something called processes. When creating an electron app, we create a main file to be executed and that main file runs something called the main process. Every electron app has one main process. This main process is responsible for interacting with the native GUI of the Operating System. It creates the GUI of your application. Its powered by the node.js runtime. 
+
+Starting up only the main process doesnt give us an application window. These are created by the main process in the main file by using something called the BrowserWindow module. Each browser window then runs its own process called the renderer. The renderer process actually runs an HTML file which can then reference css, javascript and do just about anything else that a frontend web app would do. The renderer uses the chromium engine to display the window but what makes it even more powerful is that it also has node.js integration built in. So even in the rendere you can import modules like you can in the main process. you can have muleiple renderers and windows although most apps have one main window.
+
+I know many of you guys are web developers so I like to explain it in a way where I compare the main process to the backend of a web app. and then the renderer as the front end. And this frontned can use anything you want you can use a framework like react, which we will do in the last project or just vanilla javascript. Your interface can be as simple or as intricate as you want. Now when it comes to communicating between these two processes, we use somethig called IPC (Inter-Process Communication). On the main side we use IPCMAIN and on the render we use IPC renderer. If youve ever use websockets, its similar to socket.io. We can send events back and fourth with optinal data. So instead of using http with a full stack  web app, we use IPC.
+
+Also in the renderer we have acces to all the DOM properties and methods we have acces to in the browser as well as the devtools, because again, were using the chromium engine.
+
+So hopefully this gives you the gist of the inner workings of electron. As we move along and you start writing some code, this will make more sense. Now lets move on and get our environment setup.