

- ELECTRON MAC OS FRAMEWORK HOW TO
- ELECTRON MAC OS FRAMEWORK DRIVER
- ELECTRON MAC OS FRAMEWORK FULL
- ELECTRON MAC OS FRAMEWORK CODE
ELECTRON MAC OS FRAMEWORK FULL
While we generally trust the local Slack application to run with full access to the desktop and Node.js, allowing remote content to directly access desktop features and Node.js is insecure - if someone were to Man-In-The-Middle Slack, they would have full control over user computers! To prevent this, we use a feature of Electron ported from Chrome Apps called the WebView element (unrelated to Apple’s WebView view mentioned above). On macOS, these renderer processes are labeled “Slack Helper ” you’ll see one for every team, plus three extra for crash reporting, the GPU, and the process that hosts the team switcher.
ELECTRON MAC OS FRAMEWORK DRIVER
For us, this means that we can restart individual teams that crash or have other issues without affecting the rest of the app, as well as protection from GPU driver issues via a separate GPU process. The Chromium Multi-process ModelĮlectron inherits Chromium’s multi-process model - the main application as well as every Slack team that you’re signed into live in a separate process with its own memory space. Our app has migrated from a CoffeeScript application written with vanilla DOM APIs to a modern ES6 + async/await React application, and we’re currently incrementally moving our app to TypeScript. Technology Stackĭespite being the first production Electron application outside of Atom, the Slack Desktop application has been kept fairly up-to-date with regards to web technologies.
ELECTRON MAC OS FRAMEWORK HOW TO
So, when we looked into how to modernize the Mac app, moving to a unified codebase across Mac, Windows, and Linux was an easy choice.

It was useful for us to be able to share our app with coworkers using macOS, for things like design feedback. Since very early in the development of the Slack Electron app, we’ve had a working macOS version (albeit with many missing features). We’ve written about Electron before, but to summarize, Electron is a platform that combines the rendering engine from Chromium and the Node.js runtime and module system. Separately, when we created the Slack Windows application, we couldn’t use the existing codebase, so we decided to bet on a brand new platform called Electron. Furthermore, WebView was tied to the operating system’s version of Safari, meaning that we didn’t have many options when older versions of macOS had an issue in Safari that affected our app. New features such as HTTP/2 are only coming to Apple’s new WKWebView view, and moving to this would effectively require a complete rewrite of the application. While that served us well for a long time (including the retrofitting of multiple-team support), this architecture was starting to show its age.

Originally, the Slack desktop application was written using the MacGap v1 framework, which internally used WebView to host web content inside of a native app frame. Since there isn’t much information out there about how to do this with Electron, we wanted to dive into a bit more detail about how our hybrid application works.
ELECTRON MAC OS FRAMEWORK CODE
Unlike a 100% in-box approach that some other apps take, Slack takes a hybrid approach where we ship some of the assets as part of the app, but most of the assets and code are loaded remotely. There are, of course, different ways to build desktop applications with web technologies. We built it with Electron, and, as a result, it’s faster, sports a frameless look, and has a number of behind-the-scenes improvements to make for a much better Slack experience.

Today we’ve just shipped a new version of the Slack Desktop application for macOS.
