The tech stack powering Boxy 2, one of the most successful web wrappers for the Mac
After one year of work we have finally launched Boxy 2 and I thought it would be nice to write a post detailing the tech stack powering it and its evolution with respect to the first version of the app.
Boxy is a macOS wrapper for “Inbox by Gmail” that has seen incredible success in the past 18 months in the Mac App Store, reaching more that 20k paid downloads with a growing and engaged user base.
We think 99% of this success can be attributed to the incredible job did by the Inbox team at Google, nonetheless our effort to bring Inbox to the Mac as a native app has really resonated with some users and we are really grateful for that.
The native app
On the client side Boxy is built using AppKit, the official Apple framework for Mac apps. When we started building Boxy, Electron wasn’t nearly as famous as it is today (used at Slack and many other successful teams), but we stand by our choice. The biggest advantage of not going with Electron has been the smaller binary size (Boxy is just 6MB, more than 10 times smaller than the average Electron app) and the faster startup time. The disadvantage of course is that we cannot easily support multiple operating systems, but, as a team of two with just one developer, I think it was best to just focus on the Mac.
Venturing a little bit more in the details, the core experience of Boxy is achieved using a
Most of the unique features of Boxy like reader mode and themes required some interaction between the native app and the web counterpart. This has been done with the excellent
Programming against a moving target while providing the best possible user experience
As I mentioned before, the Inbox app is constantly changing and this sometimes breaks Boxy. To be fast to react to these changes, we have developed a system called
boxy-checker, with Chrome Headless and Puppeteer.
It runs on a Debian VM, hosted on Linode (we use the base plan, which is incredibly convenient) and continuously checks that all the elements of the page on which we rely to implement some cores features are still there. We use Facebook’s Jest (an awesome testing library) and their snapshots feature to do this.
When something is wrong, we get a notification on our
#emergency Slack channel and we rush to work. This makes it easier to fix issues before the first support ticket hits our ZenDesk 🙌