You are viewing content from a past/completed QCon

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: Tuesday

Slides: Download Slides

Share this on:

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

2020 Tracks

  • The Future of the API: REST, gRPC, GraphQL and More

    Web-based API continue to evolve. The track provides the what, how, and why of future APIs, including GraphQL, Backend for Frontend, gRPC, & ReST

  • Resurgence of Functional Programming

    What was once a paradigm shift in how we thought of programming languages is now main stream in nearly all modern languages. Hear how software shops are infusing concepts like pure functions and immutablity into their architectures and design choices.

  • Social Responsibility: Implications of Building Modern Software

    Software has an ever increasing impact on individuals and society. Understanding these implications helps build software that works for all users

  • Non-Technical Skills for Technical Folks

    To be an effective engineer, requires more than great coding skills. Learn the subtle arts of the tech lead, including empathy, communication, and organization.

  • Clientside: From WASM to Browser Applications

    Dive into some of the technologies that can be leveraged to ultimately deliver a more impactful interaction between the user and client.

  • Languages of Infra

    More than just Infrastructure as a Service, today we have librarys, languages, and platforms that help us define our infra. Languages of Infra explore languages and libraries being used today to build modern cloud native architectures.

  • Mechanical Sympathy: The Software/Hardware Divide

    Understanding the Hardware Makes You a Better Developer

  • Paths to Production: Deployments You've Always Wondered About

    Deployment pipelines allow us to push to production at ever increasing volume. Paths to production looks at how some of software's most well known shops continuous deliver code.

  • Java, The Platform

    Mobile, Micro, Modular: The platform continues to evolve and change. Discover how the platform continues to drive us forward.

  • Security for Engineers

    How to build secure, yet usable, systems from the engineer's perspective.

  • Modern Data Engineering

    The innovations necessary to build towards a fully automated decentralized data warehouse.

  • Machine Learning for the Software Engineer

    AI and machine learning is more approachable than ever. Discover how ML, deep learning, and other modern approaches are being used in practice by Software Engineers.

  • Inclusion & Diversity in Tech

    The road map to a inclusive and diverse tech organization. *Diversity & Inclusion defined as the inclusion of all individuals in an within tech, regardless of gender, religion, ethnicity, race, age, sexual orientation, and physical or mental fitness.

  • Architectures You've Always Wondered About

    How do they do it? In QCon's marquee Architectures track, we learn what it takes to operate at large scale from well-known names in our industry. You will take away hard-earned architectural lessons on scalability, reliability, throughput, and performance.

  • Architecting for Confidence: Building Resilant Systems

    Your system will fail. Build systems with the confidence to know when they do, you won't.

  • Remotely Productive: Remote Teams & Software

    More and more companies are moving to remote work. How do you build, work on, and lead teams remotely?

  • Operating Microservices

    Building and operating distributed systems is hard, and microservices are no different. Learn strategies for not just building a service but operating them at scale.

  • Distributed Systems for Developers

    Computer science in practice. An applied track that fuses together the human side of computer science with the technical choices that are made along the way