Goodbye Electron, Hello Flutter
Native cross-platform application development was hard, But now we have a better solution.
Undoubtedly, native applications are the best since they have good performance even on low-end computers. GUIs (Graphical User Interfaces) of native applications are rendered natively by the operating system’s core graphics library. Besides, native applications directly use the operating system API for their features. But native application development is hard if we consider cross-platform support. The reason is that the system APIs are different in each operating system.
Why is Electron bad?
Electron is good because it reduces the cross-platform application development time like magic by enabling teams to do rapid feature delivery. However, the applications built with Electron often become bloatware because of the framework’s massive resource usage. Therefore, running a hybrid-application properly on a low-end machine is a dream. I wrote the following story about my experience with this situation.
There are quite many alternatives out there for Electron: Tauri, Neutralinojs, and Electrino. Those projects are solving the issues in Electron but not the main native cross-platform application development problem. Those alternatives typically render the application into the web browser component in the user’s operating system. But still, everything is made out of bulky HTML. HTML elements and stylings are not instantly rendered on the screen. Firstly, the HTML structure will be loaded into the memory as a DOM-tree. After that, the web browser creates the render-tree by combining the DOM-tree and stylings. Finally, the web browser will draw elements on the screen using a 2D graphics library with the render-tree data.
Therefore, when your application’s GUI becomes a bit complex, there is possible performance degradation. But, these Electron alternatives are great options for small-sized or medium-sized cross-platform applications.
The million-dollar problem in cross-platform app development
The most critical problem in cross-platform application development is that; how to render the same GUI on different operating systems. On the other hand, we can easily use a modern programming language to handle native system calls. The are several ways to solve this cross-platform GUI problem. Each option comes with various sorts of pros and cons.
- We can use an existing generic platform-independent method to draw graphics with a widely-supported programming language. Well, it's about using a web browser to render the application. With this option, even every web developer can make apps for any operating system. But bloatware will say Hello.
- We can make a wrapper library for the GUI for each operating system GUI API. This method looks like a pretty good way to solve our problem. But, we will face a problem if we need to customize GUI elements a bit further. Besides, it is literary impossible to make custom GUI elements.
- We can make our own widgets framework. After that, We can make a cross-platform graphics library to render those widgets. Besides, we can choose a programming language that performs well with our widgets framework. This method is an outstanding solution. But it needs a lot of work to be done.
Flutter team solved this cross-platform application development problem by using the above third option. Flutter already had a cross-platform 2D graphics library developed called Skia. Therefore, they made their own widget framework for it. They optimized their existing Dart language for building user interfaces and handling native operating system API calls. However, This idea is not a new one. Libraries like SDL are already built with this concept. But Flutter offers a simple and powerful widgets framework, especially for building modern application software.
Each widget created with the Flutter widgets framework will be rendered natively on screen via the Skia graphics library. Flutter initially supported mobile app development. Nowadays, it can be used to build desktop apps and single-page web apps too with one codebase. I created a simple app and checked its memory usage and disk usage on the Linux platform.
Let’s create a simple Flutter app.
$ flutter create myapp
I made the binaries for Linux using the following command.
$ flutter build linux
So here is my simple app.
The results are promising compared to Electron.
A simple Flutter app took 50 megabytes on disk and 25 megabytes of memory on Linux. Electron usually takes twice of these numbers.
The future of Electron and its alternatives
In fact, modern hardware will be on Electron’s side because today’s powerful hardware can hide Electron’s performance issues for the user. However, developers who really love the native performance will pay so much attention to Flutter’s progress.