Getting Started With Electron : A Beginners' Guide



Welcome back, folks. After several hectic months, I found some time to write a blog post. I have to apologize for not updating my blog for a long time. Today I am going to write the first post of my new section 'Programming Guides'.This post is about 'Electron' and after reading this you can start building cross-platform desktop apps with JavaScript, HTML, and CSS. I will cover the beginners' guide in the following steps.

  1. Introduction to Electron
  2. The architecture of Electron Applications
  3. Setting up the environment
  4. Future plans 


Electron JS first released in January 2013 and it was initially known as Atom Shell. The name Electron was given in April 2015. Electron is an open-source framework developed and maintained by GitHub which can be used to build cross-platform desktop application using web technologies. You may wonder after reading my next sentence. Notable software we use in our day to day lives such as Atom, GitHub Desktop, Visual Studio Code, Skype, Slack, Etcher, MongoDB Compass and WhatsApp have been developed using Electron. I should thank Fiqri Ismail (https://lk.linkedin.com/in/fiqriismail) who gave me the opportunity to learn about ElectronJS during last SLDF meetup. If you are living in Sri Lanka and interested in emerging technologies you have to join Sri Lanka Developer Forum.


Electron applications have a simple architecture and when talking about the architecture we have to discuss Main Process and Renderer Process. Main process is the process that runs package.json's main Script and it is responsible for managing all the renderer processes to display GUI of the application in a single browser window. Renderer processes get created for each and every web page opened. You may wonder now why I used words like a browser window, web page even though we are talking about desktop applications. The reason is Electron uses Chromium and it's multiprocessor architecture to run the application. Now things become more technical. If you want to find more about Electron Architecture refer to the official documentation.



Now it's time to try out things practically. First, let us set up the development environment. I will follow the procedure defined for Linux as I use Deepin as my primary operating system. First thing you have to do is install Node.js.Then you have to install an editor. I prefer using Visual Studio Code. You can download the VS Code using the link below. Now we can build our first Electron Application.

Create an empty directory for your Electron project. Then what you need to do is create a package.json file. The easiest way to initialize project using npm init. Next step is installing Electron. For that type following command in terminal.
npm install --save-dev electron
This will add Electron as a dev dependency to your project. Then you have to create two files named 'main.js' and 'index.html'.' Main.js' is the starting script of the app. You can include below code to the relevant files and start the application using npm start. 



//main.js file
const electron = require('electron')
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.on('ready', createWindow)
<!--index.html file-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>



Watch the video below to see the demo. I am hoping to meet you soon with the next part of this series which will probably about creating a point of sale system using Electron. Since Electron project is an open-source project if you have great ideas to improve Electron contribute to the project. Be safe until we meet again.

References

Electronjs.org. (2019). Documentation | Electron. [online] Available at: https://electronjs.org/docs [Accessed 9 Sep. 2019].

Comments

Post a Comment

Popular posts from this blog

Useful Tools For React Developers

Image
Welcome back to D Guides folks.This post is valuable for newbies for react development.I am sharing about few tools you can use when developing react applications.It is important leaning tools like these same as understanding a framework like React.These tools will help us to maintain high code quality. 1. Prettier Prettier is a tool which will format the code consistently according to the standards.First step to do is install prettier as a developer dependency.Why developer dependency is the next question hops into your mind.We don't need to have prettier as a dependency when we are deploying the application so that is why it is installed as a developer dependency.Then we need to install prettier plugin for vs code.VS Code is my first choice when doing web development.Then we are changing two things in preferences.First thing is enabling format on save.Other option we are enabling is require config.By that we ensure that prettier will run only on the projects prettier h...
Read more

Huawei Nova 2i

Image
Welcome back for New Phones section.Today I am going share information about Huawei Nova 2i.What is so special about this phone.This phone has a quad camera setup.That means phone contains four camera.Would you believe it? Let's head on to full specifications.The price is also very reasonable( LKR 43900 with Company Warrenty) and has so many specs more than to the price.This phone has a spcial option for camera.That is 'Shoot First,Focus Later'.You can change the focused object even after taking the photo . Next I am going t explain a little bit about duel  camera technology.These days all phones come with tw o camera and has become a trend in 2017.One camera get all the details and other one help to get depth details.And also  the durability of this phone will be higher than the other phones as it has a full matal body.The other special feature is this phone is also has the infinity display concept. Next feature will be a good news for the hard users.Th...
Read more

Best Tech Gadgets To Gift For Christmas 2017

Image
As Christmas is near I decided to help last minute shopping people and show some gift ideas.You have  two more days before Christmas.All these items are under 100$.Let us see what they are. 1.Kindle Fire HD. This is the best gift for the book loving tech kids. The price is 99.99$ This product will definitely help the kid to improve knowledge The best part is you can lock internet and apps you do not want your kid to use can be locked by parental password.So no more worries about your kids. 2.Fitbit Alta Fitness Tracker This is suitable for any health conscious person or any person do exercise and running. Price is 80.49$ This can track you steps,burnt calories,distance you walked,your sleep pattern and heart rate. 3. Vtin 4k Action Camera Here is the best gift for travel guys/stunt guys. Supports upto 64GB micro SD and wifi upto 15 meters This is a water proof camera. The price is 79.99$ 4.Sony RF995RK Wireless RF Headphones The pr...
Read more