Goodbye Electron, Hello Flutter

Native cross-platform application development was hard, But now we have a better solution.

Shalitha Suranga
Feb 21 · 5 min read
Image for post
Image for post
Photo by Amine Rock Hoovr on Unsplash

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.

The Electron project solved this problem by introducing a way to build cross-platform applications with JavaScript, HTML, and CSS. Basically, the entire application is like a web application that is running inside a native window.

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.

Electron alternatives

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

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.

Image for post
Image for post
A simple cross-platform app built with Flutter. The screenshot by the author.

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

Flutter desktop is still in the early development phase. Therefore, at this moment, we cannot say that everyone will move to Flutter Desktop from Electron and its alternatives. Further, Electron has a good API for native operating system functions. For example, Electron’s notification API allows displaying a native notification on Linux, macOS, and Windows with the same JavaScript code. Also, Electron’s alternatives have impressive features too. For example, both Neutralinojs and Tauri offer surprisingly lightweight application bundle that is smaller than Flutter.

If Google makes a good Dart API for operating system functions similar to Electron also having a pretty good bundle size, many developers will say goodbye to Electron. If they make it bloaty, Flutter will be the next Electron that makes bloatware. Also, the Flutter Desktop project’s success depends on the flexibility of Flutter’s GUI API and styling support since we can do anything with JavaScript, HTML, and CSS quickly. In other words, we can make custom GUI elements with Electron easily. Importantly, we can easily use web UI toolkits and existing pre-built UI elements.

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.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Thanks to Athif Shaffy

Shalitha Suranga

Written by

Software Engineer at 99x | Apache PMC member | Open Source Contributor (Author of Neutralinojs) | Technical Writer

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Shalitha Suranga

Written by

Software Engineer at 99x | Apache PMC member | Open Source Contributor (Author of Neutralinojs) | Technical Writer

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store