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

Deep Dive Into Azure Global Infrastructure

Image
Have you ever wonder when you deploy an app into cloud how exactly it is hosted in cloud? Or maybe is it safe to host an app in cloud and how they maintain high availability?This post will clear  all your doubts  and free your mind. What is a Datacenter? Inside of a Datacenter Azure Datacenter is the smallest node or the exact physical location where our resources reside.But datacenters are not exposed to end users.These datacenters act exactly as the on premises servers.But since these datacenters are cloud datacenters you have extra capabilities which will help you grow with the customer base (Scale Up) or vice versa (Scale Down) for a lower cost than creating and maintaining own servers. Curious about Azure Regions ? Azure has more Regions than any other cloud provider.If you want the exact numbers there are 58 global regions and a region is a set of datacenters inside a latency defined perimeter.Most of the time we deal with these region when we deploy re
Read more

Bigger Picture Of Node Event Loops

Image
Even though you are a beginner for node js you all know that Node.js is single threaded.But we use Node.js for powerful backends and we can include concurrence functionality into a Node.js application using events and call backs.In simple terms 'Event Loop' is what permits Node.js to perform non blocking I/O operations.Node.js uses event in large scale and it is the reason behind the speed when comparing to other technologies in the same stack What exactly is 'Event Loop' ? Everything happens in Node.js platform is because of events.'Event Loop' mechanism is inside the library called 'Libuv'.Since there is only one thread both userland code (code of the user) and event loop run in that same thread.Every callback is handled by the so called mechanism 'Event Loop'.Every userland code running in a Node application is a callback.Event Loop is behind the huge success of Node.js development.As I mentioned earlier every Node application i
Read more