Presentation: Make Your Electron App Feel at Home Everywhere
This presentation is now available to view on InfoQ.com
Watch video with transcriptWhat You’ll Learn
- Hear about Electron and how it can be used to develop cross-platform apps.
- 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.
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?
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.
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?
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.
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?
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.
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?
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.
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?
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.
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?
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.
Who is the core persona that you're talking to and then what do you want that person to leave with?
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.
Similar Talks
License Compliance for Your Container Supply Chain
Open Source Engineer @VMware
Nisha Kumar
Observability in the SSC: Seeing Into Your Build System
Engineer @honeycombio
Ben Hartshorne
Evolution of Edge @Netflix
Engineering Leader @Netflix
Vasily Vlasov
Mistakes and Discoveries While Cultivating Ownership
Engineering Manager @Netflix in Cloud Infrastructure
Aaron Blohowiak
Optimizing Yourself: Neurodiversity in Tech
Consultant @Microsoft
Elizabeth Schneider
Monitoring and Tracing @Netflix Streaming Data Infrastructure
Architect & Engineer in Real Time Data Infrastructure Team @Netflix
Allen Wang
Future of Data Engineering
Distinguished Engineer @WePay
Chris Riccomini
Coding without Complexity
CEO/Cofounder @darklang
Ellen Chisa
Holistic EdTech & Diversity
Holistic Tech Coach @unlockacademy