Software Engineering Daily: Electron and Desktop App Engineering with Shelley Vohr
Episode Information:
- Title: Electron and Desktop App Engineering with Shelley Vohr
- Host: Software Engineering Daily (Josh Goldberg)
- Guest: Shelley Vohr, Principal Software Engineer at Microsoft (Electron Team)
- Release Date: August 5, 2025
- Description: Technical interview exploring the Electron framework and desktop app engineering with Shelley Vohr.
1. Introduction and Background
Josh Goldberg introduces the episode by providing an overview of Electron, a framework that allows developers to build cross-platform desktop applications using web technologies like JavaScript, HTML, and CSS. Electron packages web applications with a native-like experience by bundling them with a Chromium browser and a Node.js runtime. This approach enables a single codebase to run seamlessly on Windows, macOS, and Linux, making it a popular choice for applications such as VS Code, Discord, and Slack.
Shelley Vohr, the guest, is a Principal Software Engineer at Microsoft, specializing in Electron. With extensive experience in both web development and C programming, Shelley discusses her role and contributions to the Electron project.
[01:24] Shelley Vohr: "I see software engineering as, I don't know, basically just being able to solve fun, interesting puzzles that challenge the way that I see things, challenge my brain."
2. Shelley Vohr’s Journey into Software Engineering
Shelley shares her early interest in how things work, highlighting her experience programming a TI-84 calculator during high school. This curiosity extended to her first computer, where she spent considerable time understanding its functionalities and limitations. Realizing the potential of programming languages to interact with systems like macOS opened new horizons for her, leading her to pursue computer science academically and professionally.
[02:41] Josh Goldberg: "Was it by any chance a TI84 calculator that you were programming?"
[02:47] Shelley Vohr: "It was indeed, yes."
Her proactive approach led her to secure an internship at a small startup, Embedly, where she gained invaluable experience in production software and learned to adapt quickly in a dynamic environment. This foundation set her up for subsequent roles, including an internship and eventual full-time position at GitHub, where she became involved with Electron.
3. Understanding Electron and Its Evolution
Electron and Atom, an editor developed by GitHub, were both initially part of the same team. Electron was created to enable Atom as its first major application. Each component serves distinct purposes:
- Electron: A JavaScript framework that facilitates the creation of cross-platform desktop applications using web technologies.
- Atom: An editor built on Electron (now sunsetted), serving as a practical example of an Electron-based application.
Shelley emphasizes that while Electron leverages web technologies for UI components, it also integrates native capabilities through Node.js, allowing access to system-level APIs that are otherwise inaccessible in standard web applications.
[05:12] Josh Goldberg: "Atom is an editor that built on that. That's like one of the canonical examples of an Electron app."
[05:17] Shelley Vohr: "Yes, it has since been Sunset, but it was basically the first major use case for Electron."
4. Technical Deep Dive: How Electron Works
Shelley provides a comprehensive overview of Electron's architecture:
- Core Components: Electron combines Chromium (for rendering web content) and Node.js (for backend functionalities) to create a cohesive environment where web technologies can be used for desktop applications.
- Process Architecture: Electron utilizes a multi-process architecture with a main process (browser process) and multiple renderer processes. Communication between these processes is handled via Inter-Process Communication (IPC).
- Tooling and Distribution: Tools like Electron Forge assist in building and distributing Electron applications across various platforms. Automation plays a significant role in managing permissions, releases, and backports.
[07:31] Shelley Vohr: "Electron is a framework that essentially enables you to write desktop apps using web technologies. However, it is actually ultimately a fair amount more complicated than that."
5. Tooling and Automation in Electron
Shelley discusses the importance of tooling within the Electron ecosystem. Given the small size of the Electron team (approximately 25 members), automation is crucial for efficiency. Key areas of automation include:
- Permissions Management: A YAML-based system allows for streamlined permission handling within Electron's repositories.
- Release Process: Automated bots facilitate releases, with designated release captains ensuring timely and accurate deployments.
- Backports: Automated systems handle backports to stable release lines, surfacing failures for manual intervention when necessary.
[09:53] Shelley Vohr: "Our whole release process is also automated. Certain people with permissions you can trigger the bot to do releases in Slack and then people with permissions have the two FA access to be able to approve the release via otp."
6. Decision-Making: When to Automate
Shelley addresses the common challenge of determining whether to automate a task or handle it manually. She emphasizes the importance of evaluating the risk-reward calculus, considering factors such as:
- Impact: What problem is the automation solving?
- Efficiency: Will automation save significant developer time in the long run?
- Complexity: Is the task prone to errors when done manually?
Shelley uses the metaphor of chicken sexing to illustrate the development of intuition through experience, enabling her to make swift decisions about automation feasibility.
[13:33] Shelley Vohr: "Anyone that knows me well enough knows that I love a metaphor. Josh, are you familiar with the art of chicken sexing?"
7. Electron’s Integration with Chromium and Node.js
A significant portion of the discussion revolves around Electron's relationship with Chromium and Node.js:
- Chromium Integration: Electron strategically depends on various layers of Chromium content, ensuring that only necessary components are bundled to maintain efficiency.
- V8 Engine Management: Electron consolidates the V8 JavaScript engine versions from both Chromium and Node.js, resolving conflicts by shipping a single, updated V8 version.
This integration allows Electron to leverage the latest web APIs while maintaining control over performance and security.
[14:04] Shelley Vohr: "Chromium is fundamentally almost an operating system. I think there is a misconception that every single Electron app ships with all of Chromium. That is actually not the case."
8. Communication Between Processes in Electron
Shelley explains how IPC (Inter-Process Communication) facilitates message passing between the main and renderer processes in Electron applications. This mechanism ensures that compute-heavy tasks and UI management are efficiently handled by the appropriate processes, maintaining both performance and security.
[20:34] Josh Goldberg: "How would they communicate or how do I do message passing there?"
[20:40] Shelley Vohr: "So essentially Chromium is a multi process architecture."
9. Community and Governance within Electron
Electron operates under the OpenJS Foundation with a governance model that includes various working groups such as:
- API Working Group
- Releases Working Group
- Ecosystem Working Group
- Upgrades Working Group
Shelley highlights the collaborative nature of Electron's governance, allowing contributors from different companies to participate and guide the project's direction. This structure ensures that Electron remains responsive to the needs of its diverse user base.
[26:03] Shelley Vohr: "Electron is part of the OpenJS foundation and has a governance model as a result of that. And we have representation from a fair amount of different companies who participate in a variety of different working groups."
10. Performance Considerations and Criticisms
Performance has been a longstanding critique of Electron-based applications. Shelley addresses these concerns by explaining that:
- Performance Improvements: Continuous updates to Chromium contribute to overall performance enhancements within Electron.
- Architectural Choices: The way developers architect their Electron applications significantly impacts performance. Shelley emphasizes that Electron is a flexible toolbox, and responsible usage can mitigate common performance pitfalls.
She also references contributions from companies like Slack, which have actively invested in improving Electron's performance through direct contributions to the project.
[31:21] Shelley Vohr: "Electron, technically speaking, it's a framework. It's not really like something that's like halfway done or in development."
11. Future Directions and Investments in Electron
Looking ahead, Shelley expresses optimism about Electron’s adaptability and ongoing improvements. Key areas of focus include:
- Security Enhancements: Continually refining security measures to protect applications built with Electron.
- Ease of Use: Streamlining development processes to make Electron more accessible to new developers.
- Upstream Collaboration: Maintaining strong relationships with upstream projects like Chromium to leverage performance and feature updates.
[39:01] Shelley Vohr: "Electron, technically speaking, it's a framework. It's not really like something that's like halfway done or in development. It's something that a lot of big name companies have been using for many years."
12. Community Engagement and Contributions
Shelley emphasizes the importance of community contributions, whether through direct code contributions or detailed bug reports. She encourages companies and individual developers to actively participate in Electron’s governance and development process to help shape its future.
[27:14] Josh Goldberg: "Are there any particular apps that you use that a lot of folks would know that are surprisingly written Electron?"
[25:51] Shelley Vohr: "Yes. Actually Notion is also a great contributor to the Electron project."
13. Handling Criticism and Misconceptions
Shelley shares experiences of handling misconceptions and criticism, such as being mistakenly associated with Electron running on mobile platforms. She maintains a positive outlook, viewing criticism as an opportunity to address misunderstandings and improve the project.
[49:24] Shelley Vohr: "I went accidentally viral on Reddit like four years ago because someone on Twitter got really mad online about the fact that Electron was broken for this use case on mobile."
14. Personal Interests and Final Thoughts
In a lighter vein, Shelley touches upon her interest in constructed languages (conlangs), drawing parallels between linguistic structures and software engineering’s problem-solving nature. She concludes by reinforcing the importance of empathy and open communication within open-source communities.
[45:11] Shelley Vohr: "A conlang is a constructed language. It's essentially a language that you kind of, you know, write out of, not thin air, but that, like, you kind of construct itself."
Conclusion
The episode provides an in-depth look into Electron, exploring its technical underpinnings, community dynamics, and future prospects through the expertise of Shelley Vohr. Listeners gain valuable insights into building robust desktop applications using web technologies, the importance of tooling and automation, and the collaborative spirit that drives open-source projects forward.
Notable Quotes:
- [02:41] Shelley Vohr: "I see software engineering as... being able to solve fun, interesting puzzles that challenge the way that I see things."
- [07:31] Shelley Vohr: "Electron is a framework that essentially enables you to write desktop apps using web technologies. However, it is actually ultimately a fair amount more complicated than that."
- [13:33] Shelley Vohr: "Anyone that knows me well enough knows that I love a metaphor. Josh, are you familiar with the art of chicken sexing?"
- [31:21] Shelley Vohr: "Electron, technically speaking, it's a framework. It's not really like something that's like halfway done or in development."
Connect with Shelley Vohr:
- GitHub: Codebiter
- Twitter, Bluesky, Mastodon, Twitch, YouTube: @Codebiter
For more insights and discussions, visit the Software Engineering Daily website.