BreakingExpress

How we constructed a Linux desktop app with Electron

Tutanota is a safe, open supply electronic mail service that is been out there as an app for the browser, iOS, and Android. The consumer code is revealed beneath GPLv3 and the Android app is on the market on F-Droid to allow everybody to make use of a very Google-free model.

Because Tutanota focuses on open supply and develops on Linux shoppers, we needed to launch a desktop app for Linux and different platforms. Being a small crew, we rapidly dominated out constructing native apps for Linux, Windows, and MacOS and determined to adapt our app utilizing Electron.

Electron is the go-to selection for anybody who needs to ship visually constant, cross-platform purposes, quick—particularly if there’s already an internet app that must be free of the shackles of the browser API. Tutanota is strictly such a case.

Tutanota is predicated on SystemJS and Mithril and goals to supply easy, safe electronic mail communications for everyone. As such, it has to offer lots of the usual options customers anticipate from any electronic mail consumer.

Some of those options, like fundamental push notifications, seek for textual content and contacts, and assist for two-factor authentication are straightforward to supply within the browser because of fashionable APIs and requirements. Other options (akin to computerized backups or IMAP assist with out involving our servers) want less-restricted entry to system sources, which is strictly what the Electron framework offers.

While some criticize Electron as “just a basic wrapper,” it has apparent advantages:

  • Electron allows you to adapt an internet app rapidly for Linux, Windows, and MacOS desktops. In truth, most Linux desktop apps are constructed with Electron.
  • Electron allows you to simply convey the desktop consumer to characteristic parity with the online app.
  • Once you have revealed the desktop app, you should utilize free growth capability so as to add desktop-specific options that improve usability and safety.
  • And final however definitely not least, it is a good way to make the app really feel native and built-in into the consumer’s system whereas sustaining its id.

Meeting customers’ wants

At Tutanota, we don’t depend on huge investor cash, relatively we’re a community-driven venture. We develop our crew organically primarily based on the growing variety of customers upgrading to our freemium service’s paid plans. Listening to what customers need will not be solely essential to us, it’s important to our success.

Offering a desktop consumer was customers’ most-wanted feature in Tutanota, and we’re proud that we will now provide free beta desktop shoppers to all of our customers. (We additionally carried out one other extremely requested characteristic—search on encrypted data—however that is a subject for one more time.)

We appreciated the thought of offering customers with signed variations of Tutanota and enabling features which might be unimaginable within the browser, akin to push notifications through a background course of. Now we plan so as to add extra desktop-specific options, akin to IMAP assist with out relying on our servers to behave as a proxy, computerized backups, and offline availability.

We selected Electron as a result of its mixture of Chromium and Node.js promised to be one of the best match for our small growth crew, because it required solely minimal adjustments to our internet app. It was notably useful to make use of the browser APIs for every little thing as we received began, slowly changing these elements with extra native variations as we progressed. This method was particularly useful with attachment downloads and notifications.

Tuning safety

We have been conscious that some folks cite safety issues with Electron, however we discovered Electron’s choices for fine-tuning entry within the internet app fairly passable. You can use sources just like the Electron’s security documentation and Luca Carettoni’s Electron Security Checklist to assist stop catastrophic mishaps with untrusted content material in your internet app.

Achieving characteristic parity

The Tutanota internet consumer was constructed from the beginning with a stable protocol for interprocess communication. We make the most of internet employees to maintain consumer interface (UI) rendering responsive whereas encrypting and requesting knowledge. This got here in useful once we began implementing our cellular apps, which use the identical protocol to speak between the native half and the online view.

That’s why once we began constructing the desktop shoppers, lots of bindings for issues like native push notifications, opening mailboxes, and dealing with the filesystem have been already there, so solely the native (node) facet needed to be carried out.

Another comfort was our construct course of utilizing the Babel transpiler, which permits us to jot down your entire codebase in fashionable ES6 JavaScript and mix-and-match utility modules between the totally different environments. This enabled us to speedily adapt the code for the Electron-based desktop apps. However, we encountered some challenges.

Overcoming challenges

While Electron permits us to combine with the totally different platforms’ desktop environments fairly simply, you possibly can’t underestimate the time funding to get issues good! In the tip, it was these little issues that took up rather more time than we anticipated however have been additionally essential to complete the desktop consumer venture.

The locations the place platform-specific code was crucial induced a lot of the friction:

  • Window administration and the tray, for instance, are nonetheless dealt with in subtly alternative ways on the three platforms.
  • Registering Tutanota because the default mail program and organising autostart required diving into the Windows Registry whereas ensuring to immediate the consumer for admin entry in a UAC-compatible method.
  • We wanted to make use of Electron’s API for shortcuts and menus to supply even commonplace options like copy, paste, undo, and redo.

This course of was sophisticated a bit by customers’ expectations of sure, generally circuitously suitable conduct of the apps on totally different platforms. Making the three variations really feel native required some iteration and even some modest additions to the online app to supply a textual content search just like the one within the browser.

Wrapping up

Our expertise with Electron was largely optimistic, and we accomplished the venture in lower than 4 months. Despite some relatively time-consuming options, we have been stunned in regards to the ease with which we might ship a beta model of the Tutanota desktop client for Linux. If you are , you possibly can dive into the supply code on GitHub.

Exit mobile version