How Four Native Developers Wrote An Electron App

Today we released the new GitHub Desktop Beta, rewritten on Electron.Electron is a well-known on-ramp for web developers to build desktop apps using familiar web technologies: HTML, CSS, and JavaScript.

GitHub logo
GitHub
•
GitHub Engineering
•6 min read•intermediate•
--
•View Original
AngularElmHaskellHTMLJavaScriptObjective-CPureScriptReactSwiftTypeScriptWebpack

Overview

The article discusses the journey of the GitHub Desktop team, composed of native developers, as they transitioned to building an Electron app. It highlights the reasons for the rewrite, the advantages of using Electron, and the trade-offs involved in this decision.

What You'll Learn

1

Why rewriting an application can lead to better maintainability across platforms

2

How to leverage Electron for cross-platform app development

3

When to consider trade-offs between native and web technologies in app development

Prerequisites & Requirements

  • Understanding of native application development concepts
  • Familiarity with Electron framework(optional)

Key Questions Answered

Why did the GitHub Desktop team decide to rewrite their application?
The GitHub Desktop team chose to rewrite their application to unify two distinct codebases for macOS and Windows, which were causing double the work and maintenance issues. This decision aimed to streamline development and facilitate future support for Linux.
What are the trade-offs of using Electron for app development?
Using Electron allows for shared logic and UI across platforms, but it also presents challenges such as differing user expectations on Windows and macOS. The team had to adapt their design to meet platform-specific behaviors while maintaining a consistent user experience.
How does the development experience differ between native apps and Electron?
Developing with Electron offers a more flexible and rapid feedback cycle compared to native app development, where changes require longer compile and launch times. This enables developers to iterate more quickly and stay focused during the development process.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Framework
Electron
Used to build the GitHub Desktop application for cross-platform compatibility.
Programming Language
Typescript
Chosen for its expressive type system to enhance code quality and maintainability.

Key Actionable Insights

1
Consider consolidating codebases when developing cross-platform applications to reduce maintenance overhead.
By unifying the codebase, teams can minimize bugs and streamline feature development, making it easier to support additional platforms in the future.
2
Leverage the web technologies ecosystem when building applications with Electron for greater flexibility.
The wide array of tools and frameworks available in the web ecosystem allows developers to choose the best solutions for their specific needs, enhancing productivity.
3
Adapt UI elements to meet platform-specific user expectations even when using a shared codebase.
Understanding the nuances of user interface design across different operating systems can improve user satisfaction and usability, which is crucial for application success.

Common Pitfalls

1
Assuming that a single codebase will automatically solve all cross-platform issues.
While a unified codebase can reduce maintenance, it can also introduce challenges in meeting the distinct expectations of users on different platforms.

Related Concepts

Cross-platform Application Development
Native Vs. Web Technologies
User Experience Design Principles