Presentation: Make Your Electron App Feel at Home Everywhere

Track: Pushing the Web Forward: JavaScript, Frameworks, Transpilers, and WebAssembly

Location: Pacific DEKJ

Duration: 4:10pm - 5:00pm

Day of week:

Slides: Download Slides

This presentation is now available to view on InfoQ.com

Watch video with transcript

What You’ll Learn

  1. Hear about Electron and how it can be used to develop cross-platform apps.
  2. Learn practical techniques for building desktop apps.

Abstract

Electron gives you the power to write a single application for Windows, MacOS and Linux. But Electron apps can easily feel out of place among other applications, exactly because you have so much freedom in designing your UI. This feeling of something being "off" often comes down to the details, not your overall UI. Kilian takes you through the process of making your app feel at home on all three platforms, making you aware of the pitfalls and how to avoid them.

Question: 

You're talking about Electron. Is it an introductory talk on what is Electron or is it, once you already know what Electron is, the next steps like day two?

Answer: 

I'm going to spend a little time getting everyone up to speed on what exactly Electron is. Then we're gonna dive into the 'day two' stuff and really spend time on the details. Everyone uses apps that just doesn't feel right on their operating system. It can be made in Electron, but it can also be made in Qt or Java or some other cross platform framework. But then there are other apps also built with these cross-platform frameworks and they just feel right. I really want to spend time on explaining how to get to that level of quality using Electron.

Question: 

A lot of Electron talks that I've seen or people I've talked to have been just talking about web techniques inside of this harness that executes on the desktop. Is this a web talk on the desktop side or is this a desktop talk that happens to use JavaScript?

Answer: 

It's definitely a desktop talk. What you do in that Electron app, like whether you use React or Vue or just plain HTML and CSS, that's just a part of your app. The shell around it, the part that makes Electron Electron, is what really makes a difference as to whether an app feels native and integrates well. So that's where we'll be spending most of our time.

Question: 

With that said, if you have Electron or if you have React skills or Angular skills, these are things that you can take to this experience?

Answer: 

Because Electron uses Chromium for rendering the UI, you can use whatever web technology you want. You can use React or Vue, but you could just as well write your entire app in Rust and compile it to a web assembly and then run that as your desktop app using all the benefits that Electron gives you in terms of the ease of integrating with the rest of the operating system. It's up to you.

Question: 

When you say dive deep into Electron, can you give me an example of a use case or a technique, tool, or tip, something that you're going to dive into?

Answer: 

One of the things that people often don't realize they miss, but that a lot of apps don't have, is that apps don't tend to remember where they were when they were closed. But all the best ones do. What you want to do in your app is keep track of where on the screen your app is. What are its dimensions. How many windows are open, etcetera. Then when the user re-opens your app, it should restore to the same state it was when you closed the app. It's not a difficult thing to do, but if you come from the web it's not something you think about. It's a really low effort, high quality, high return on the investment feature. It's these things that make the difference between a delightful and frustrating experience.

Question: 

You're really talking about techniques for building a desktop app and that kind of native desktop experience. It just happens to be using Electron and happens to be using JavaScript?

Answer: 

These techniques could just as well be built using other frameworks. Electron is in my opinion the first framework that really delivers on the cross-platform promise. There are other cross-platform frameworks, but as you can see from the adoption of Electron, people really use it for cross-platform software. So I'm using Electron to show what to pay attention to when building cross platform desktop apps, but it should generally be applicable to other frameworks too.

Question: 

A lot of times we talk about languages and techniques we focus only on the good parts. Do you go into some of the gotchas of Electron and some of the things to watch out for?

Answer: 

There are some considerations that you need to think about, especially coming from a web perspective. If you look at a web page, then if there's a memory leak in your page that's not such a big deal, since people refresh your page quite often. If a page is open for 10 minutes, that's a pretty long time! But a desktop app can be open for hours and hours and hours. So even small memory leaks can have big problems. And it's probably a good idea to spend some time on how to measure that and what you can do about it.

Question: 

Who is the core persona that you're talking to and then what do you want that person to leave with?

Answer: 

The core persona is people that are comfortable in using web technologies that have heard of Electron and what it can do, that want to get a head start in creating desktop apps the right way. What I want them to leave the talk with is, if they haven't tried Electron then have them try Electron. And if they have tried it, they pick up a technique or two or three to improve their app and make it feel better across platforms. 

Speaker: Kilian Valkhof

Front-end Developer & User-experience Designer @Firstversionist

With over 20 years of experience developing web experiences, and over a decade of creating desktop applications, Kilian is at home in a wide variety of technologies. Nowadays, he creates software that help developers and designers be better at their job at his company Firstversionist, with Polypane, a browser for developers and designers, and Superposition, an app that extracts design tokens from websites and exports them to code and design tools.

Kilian writes about various topics, from design to machine learning, on his personal website, kilianvalkhof.com and is a frequent contributer to open source software. Kilian is part of the Electron governance team that oversees the development of the Electron framework.

Find Kilian Valkhof at

Similar Talks

Evolution of Edge @Netflix

Qcon

Engineering Leader @Netflix

Vasily Vlasov

Mistakes and Discoveries While Cultivating Ownership

Qcon

Engineering Manager @Netflix in Cloud Infrastructure

Aaron Blohowiak

Monitoring and Tracing @Netflix Streaming Data Infrastructure

Qcon

Architect & Engineer in Real Time Data Infrastructure Team @Netflix

Allen Wang

Future of Data Engineering

Qcon

Distinguished Engineer @WePay

Chris Riccomini

Coding without Complexity

Qcon

CEO/Cofounder @darklang

Ellen Chisa

Holistic EdTech & Diversity

Qcon

Holistic Tech Coach @unlockacademy

Antoine Patton