Electron + React + Python (Part 1) — Introduction
From Development to Production
This will be a huge blog, so it would be best to split it up based on the target of our discussion. I don’t know how many parts I’ll have to split this into, but let’s get started anyway.
So you planned to write a Desktop app for some reason and you don’t want to learn C++ / Java for the sake of writing a native application. Well, you are in luck because GitHub’s Atom Shell aka Electron is here for you.
There are three major benefits of writing an app with Electron:
- You can re-use your HTML, CSS knowledge to write the UI part in no time.
- You can re-use your JavaScript knowledge to write the business logic of the app.
- It works…
Then what is this blog about?
Why?
Before we even dive down to why use X and why use Y, let us try to answer a very basic question, The reason I had to invest a massive amount of time trying to experiment with different combinations and config parameters is because every single blog on the internet just wrote about “How to get started”, nobody talked about how to complete the build. And that is what was so annoying about all those articles. Any fool can figure out how to start out, the real grind begins when you get to the details of the app. But I hope to hit the escape velocity with my take on the subject.
We will cover coding, structure, architecture and distribution in subsequent article and just so you know, we are already making use of this build pipeline and tech stack in https://github.com/fossasia/pslab-desktop .
The Tech Stack — Reasoning
Now let’s talk about why we need React or Python in an Electron App.
1. React
It is perfectly fine to use everything minimal, plain old HTML, CSS and JS will do just fine for your UI, but for how long? React opens up so many possibilities and makes the code logic flow naturally through a very well designed UI language. The state management system is also brilliant and the most crucial thing that will definitely make your life easier is the life cycle methods offered by React class components. Making use of react also lets you take advantage of well known React oriented libraries like Material UI React, and Styled-Components. These things are game changers and can transform your UI from a complete garbage to an absolute gem that your users will enjoy.
Oh, by the way, React UI are blazing fast…
But that is not the best part, we will not configure React on our own, but rather let the crowd favorite CRA do it for us. CRA (Create-React-App) will not only abstract out all the webpack config files, but will also make sure your react dependencies stay updated. This will help in keeping your code up to date in the long run.
2. Python
The task that is being performed by python in our case was inevitable and could not be performed by JavaScript because we lacked the libraries to do so. We did not have the time to write everything again for JS so we figured a way to make use of python in the electron app. If you can do everything with JS and have the necessary libraries to do so, then you don’t need this. For example, if you need to predict some value using a model you trained via TensorFlow, then this would be one such use case.
Bear in mind that this could be extended to any language as long as you get your hands on a a library that can deal with the communication.
3. Electron
In short, it gives you the platform to make use of the above two. It becomes more interesting when we go into the details of how electron works. But for now, let us just say, it will provide you the space on which react will render the UI, it will provide the means for your UI to talk to the python code, it will also provide APIs to talk to native system features like filesystem, notifications etc.
In the upcoming article, we will talk about the architecture from a birds eye perspective so as to give you a clear understanding of the position of each of the components in the data flow diagram discussed above. We will also talk about the communication details between each of the fragments that will make the app work in harmony.
Next article:
