By Sai Sarath Chandra, Alibaba Cloud Tech Share Author and Alibaba Cloud MVP
Before we talk about ElectronJS, we need to take a step back and see how Desktop applications are made. We will also analyze the issues with the current way of developing Desktop applications. After that, we will explore how to create a fully functional invoice application backend using ElectronJS.
App Development on Desktops
Windows
Let's talk about how windows-based apps are created. Most people use C++, C# (C Sharp), VB (Visual Basic) for development. This may include using/reusing some open source .NET libraries to make applications across all the windows ecosystem like Windows store, windows phone, windows desktop application.
MacOS
On Mac, we have a clear abstraction of technologies we use to create applications. We have the "Cocoa" layer, which includes all the technologies we require to create the application user Interface. "Media" layer has all the tools and technologies required for the Media operations which include the 2D and 3D animations, Photo & Video editing.
There is also a "Core Services" area where we can perform all the low-level network operations, string & data manipulation. "Core OS" exposes all the API / provides functionality for all the CPU and GPU to perform high-performance tasks. "Kernel & Device Drivers" provides support for file systems, networking, security, inter-process communication, programming languages, device drivers, and extensions to the kernel. This level also exposes the Mach kernel environment, device drivers, BSD library functions (libSystem), and other low-level components
As you see there is a lot you need to learn about the technologies & frameworks in order to develop apps on MacOS. Note that there is no similarity with the Windows technology stack we are using.
Linux/Ubuntu
Linux is one of the most popular OS for developers, so we want our products reach Linux users. I will be talking about both Ubuntu and Linux together. Linux typically uses Python or other libraries for the User Interface of the application. For Linux, if you need services like 3D and 2D rendering, you will need OpenGL. Linux Kernel exposes the low-level functionalities.
What Is with Web Technologies?
Web development is one of the hottest topics out there and there is no surprise that the population of web developers is rather high. There are also a lot of web developers available who can design and create apps with amazing UI/UX. They are easy to find because these technologies are standard and are being used by top companies in the world for their production projects. There are innumerable frameworks out there helping other teams, backed by tech giants in the industry.
In the fast pacing world, businesses need to cope with the rapid and constant changes in the tech industry. This means your product needs to be prototyped faster and available for all platforms, as well as with a single codebase, support for more features, and great UI/UX. If we just depend on conventional methods, we need a lot of capital and time to achieve this. Instead, if we use web technologies, we can reuse a lot of open source frameworks and solve issues efficiently.
What Is and Why ElectronJS?
ElectronJS helps us develop cross-platform applications by using existing web technologies. You don't need specific skills, for most cases, to develop apps with Electron. If you are a web developer and are interested in developing an app with Electron, then make sure you check out the following tutorials on this series.
If you want your application to be available for all the platforms we talked about, you need to deploy your app using different technologies. This is very manual and time consuming. Now if we talk about ElectronJS, it is obvious that this is a JavaScript based framework. Because all the platforms support web technologies, ElectronJS helps in developing Cross-Platform apps easier. Popular applications that use ElectronJS include Visual Studio Code, Slack, and Atom Editor.
ElectronJS Features
Security
You don’t need to think much when migrating your existing application to ElectronJS as the application we are creating is a desktop application and data stays locally in the system. Because of this, you can ensure data security. In case you need to store data in the cloud, check whether your cloud network has enough security functions beforehand to avoid any unwanted surprises.
Low-Level Accessibility
Before starting out, you also have to check whether all the functionalities you are providing for your desktop application are also available in ElectronJS. In my experience ElectronJS provides enough control to have the extended interactive features in your application, such as Keyboard Shortcuts. It also provides low-level accessibility to the hardware & operations system components.
Hardware accessibility
Developers can get complete access to the all hardware level access API’s exposes over the JavaScript/Plugin. There is no need to compromise for the feature if you want to migrate to Electron JS.
Performance
ElectronJS thrives in this aspect. If proper care is taken while developing (load only what you need), ElectronJS can show some great gains in the terms of performance when compared to native applications. ElectronJS saves a lot of time and provides more options to play-with or develop by having a single code base for all the major platforms. These are the major problems when we deal with native development of applications, which are all effectively solved by ElectronJS.
However, a lot of people say that ElectronJS is very memory hungry. I agree with this statement, but only if you develop the applications without proper care.
Code and App Management
As a Product Owner, you don’t need to maintain different teams for each platform and you will be relieved from the hassle of re-explaining your requirements with different teams. It will also reduce the auditing work to make sure the product has the same functionality across platforms.
As a Developer, you need not worry about different codebases. If you encounter a bug on any platform, you can fix it at the code base. The bug will never show up on other platforms. However, you should still keep an eye on the OS level functionalities.
Reusability
Because we are using a single code base, it means we can use this for both web applications and desktop applications. We are, in a way, also reusing the base code across different platforms since we “code once, distribute everywhere”.
Production
The more known frameworks we use, the more support we get. This in turn gives us more open source libraries we can reuse and the decreased time to production but with more features
Deployment / Build
This is one of the interesting aspect of the ElectronJS. There is an electron-packager module available that helps us bundle the whole code base into the respective packages. Although people debate that Electron takes a lot of memory, but as I said, ElectronJS needs a little care during development to avoid this.
UI / UX
With web technologies, you are open to multiple technologies that provide great User Interface (UI) & User Experience (UX) to all your users with great comfort. Also, you can be sure that you are providing same experience to all your users across different platforms.
Cost and Time
You will save a lot of development time and money because for the tech stack we use, there are a lot of developers who can do it for less and achieve good results. You can save a lot of time using the single code base and any developer can work on anything.
History of Electron
When we talk about any technology we need to talk a little about the history behind it. Let's briefly look at the history of Electron.
Electron was founded by Cheng Zhao, during the development of Atom a cross-platform text editor on 15th July, 2013. It is made open source, developed & Supported by GitHub using C++, JavaScript, Objective C & Python at core. It was intended to make the cross-platform development easier for Atom creation.
Deep Dive into Electron JS:
A typical ElectronJS application uses HTML, CSS, JavaScript, and Node JS on top of chromium engine for development. Don’t let the word Chromium scare you. Chromium is nothing to learn about if you are a web developer developing for browsers/client-side applications. If you are accessing lot of native functionalities then you need to look deeper into the Chrome engine (Chromium) for more information.
You can also use other frameworks on top of the basic setup like Next.js, Vue.js, and Angular 5. This will make your development easier by keeping the applications more pre-defined and modularized, which in turn makes debugging and comprehension easier. You can also create unit-test cases to make sure your changes are not breaking any existing any existing functionality.
High Level Architecture and Use Case of Electron
I have created a simple use case diagram which shows how electron works at the core level.
Let’s see how ElectronJS works.
1.Client launches the ElectronJS application typically from a preferred platform like Windows/MacOS/Linux based Ubuntu.
2.Application makes a request to the window using the main process
a.Main Process: This is responsible to send and receive request, transfer data between different windows, you can think of it as a central exchange for all the windows. All the memory management like creation and destruction of windows are handled here.
3.Main Process make a request to launch window along with the renderer.js (Renderer process).
a.Renderer Process: This is the additional js file we will reference in every html in the window. You can access the complete DOM in Renderer Process. You can also use it in the HTML but using Renderer Process is a cleaner way to do that. As your application grows, you will appreciate this approach.
4.Sign in window will be launched and attaches to the main process, available for operations
5.The user enters the login information, then you will handle the button click in the renderer process & make a request to the main process for launching the Product Window.
6.The main process will receive the respective information via an event listener & launches the Product window based on the request using Renderer Process.
7.This loop continues for the whole application until the complete use case is solved.
If you are still unsure, well there's nothing to worry about. Our following tutorials discusses the whole concept with a live application created using ElectronJS, with the backend database as Alibaba Cloud ApsaraDB for MongoDB.
Alibaba Cloud ApsaraDB for Mongo DB as Backend
Desktop applications are prone to losing data during system crash or any natural calamities. To save our precious data, we will be connecting our project with a backend deployed on the cloud. We will be performing some data analysis on the data stored.
The reason we choose Alibaba Cloud ApsaraDB for MongoDB because of the simple low cost and high availability. I will demonstrate my experience of how we can securely connect to this popular service and leverage it to our use.
What's Next?
The next tutorials will be a simple two-part step-by-step tutorial, which clarifies a lot of concepts if you are new to ElectronJS. Part 1 of the tutorial talks about designing the front-end of the app and Part 2 of the tutorial discusses the details of the backend with ApsaraDB for MongoDB.
We will see in detail how an ElectronJS app is created from scratch with different components like ipcRenderer, ipcMain, print functionality. We will also explore how to package/build an Electron app for production and distribution purposes. At the end of the tutorial, you should be able to create interactive charts and use the open source libraries to create an awesome UI in no time.
Whenever using a new technology, you are more likely than not to encounter some roadblocks. That's why I'll share some tips and tricks, as well as give you a heads-up for some pitfalls I faced during my development, which can save you a lot of time.
Then we will create the backend service based on NodeJS using ExpressJS node module and host it in the ECS instance. We will expose this publically for the Electron App to access.
