Building the All New Box Notes Desktop App

In 2014, we launched Box Notes, a new way to create documents on Box and work with others in real-time. Back then, Box Notes was primarily a web application that you accessed from Box in a web browser. Later that year, we integrated Box Notes into the Box mobile apps for iOS and Android. Today we are very excited to announce the all new Box Notes desktop app for Mac and Windows.

The all new Box Notes for web and desktop is the culmination of a series of strategic product updates that we worked on over the last year, starting with the File Collaboration API. Being able to share and collaborate on individual notes is a key part of the standalone desktop app experience. Next, we built the Recents API (coming soon) to show you the files that you have most recently worked on. Finally, we spent a lot of effort modularizing the Box Notes web app in order to enable quick switching between notes. We used the T3 framework in conjunction with React. Modularization helped us greatly simplify the complex interactions in the app, and made our front-end architecture a lot more extensible for future improvements and additions.

The Box Notes web app and the Node.js service that powers it are built and maintained by a relatively small team of 7 engineers here at Box. When we decided to build a desktop app, we made a couple of key technology choices early on that helped us take on building both a Mac app and a Windows app without expanding the team:

1. We chose Electron as the underlying framework
2. We built the desktop app as a hybrid of web and native components

Electron

The Box Notes desktop app is built on top of Electron, an open source framework that was created by GitHub to power the Atom editor, and has become the bedrock of many new modern desktop applications, including Slack, Visual Studio Code, and now Box Notes.

Electron helped us focus on the core functionality of the Box Notes desktop app, and not worry too much about the subtleties of native app development on different platforms. It abstracted away the underlying OS. The code that we wrote once could be run on both Mac and Windows.

Under the hood, Electron is essentially Chromium bundled with Node.js. This meant that we could take advantage of the vast universe of Node.js modules out there to build our app. In particular, we used the Node.js Box SDK for making calls to the Box API. We wrote a wrapper around the SDK for showing the login screen and storing the API tokens securely in the user's credentials store, using keytar to abstract away the underlying OS differences.

We hit a few challenges along the way with running Node.js on the client. One particularly interesting problem was that Node's https module does not respect the Root CA certificates installed in the client machine's trust store. Many of our enterprise customers' networks contain an SSL intercepting proxy that uses self-signed certificates, in effect blocking Node's https module from receiving and decrypting any incoming HTTPS traffic. We solved this by abandoning Node's https module and making all network calls using Electron's net library instead.

Hybrid web/native architecture

We used a hybrid web/native architecture to build the Box Notes desktop app. A portion of the code is native and packaged with the app when you install it, and the core user interface and editor code is loaded from our servers in a <webview> tag. This allows us to push incremental updates and fixes to the desktop app in the same way that we do for the Box Notes web app. Of course, there are still instances where we need to push native code updates. These updates are less frequent, and we use Electron's built-in Squirrel-based auto updater to deploy them. In the future, we have plans to cache the core UI code on the client to allow the app to load faster, and prepare the app for working offline.

The remote code running inside the <webview> communicates with the host renderer process using what we call the Native Bridge. The renderer uses the executeJavaScript function to talk to the remote code, and the remote code talks to the renderer process using a small preload script. The messages sent back and forth adhere to a strictly defined contract. Our mobile apps use the same architecture to communicate with their respective Webviews.

If you haven't already, give Box Notes a try and share any feedback or questions with the Box Notes team at [email protected]. We are also always looking for talented engineers to join our team and help us make great enterprise software. For more information, check out Engineering Careers @ Box.