Dec 20: Open-sourcing OvertureJS – the JS lib that powers FastMail

This blog post is part of the FastMail 2014 Advent Calendar.

The previous post on 19th December was about Mailr. The following post covers our file storage backend.

Technical level: medium

Every so often we’re asked what library we use to build our awesome webmail. We don’t use Ember, Angular, React, or even jQuery. Instead, we use something we’ve developed internally over the last four years. And today, we’re making it open source under the MIT License. It’s called Overture, and it could be the start of your next great web app.

Overture is a library of most of the general-purpose frontend code that powers FastMail. It’s a powerful basis for building really slick web applications, with performance at, or surpassing, native apps.

At its heart, there’s a really powerful object system (originally inspired by SproutCore many years ago), which adds support for computed properties, observables (methods that trigger when properties change), events (which can pass from object to object) and bindings (to keep the property of one object in sync with another). The implementation is solid and extremely efficient, and allows you to write clear declarative-style code.

The datastore module provides the tools you need to manage the data in any CRUD-style application. It can keep track of client-side changes and efficiently synchronise with a server. Live-updating queries on the local cache allow your views to immediately update and feel completely responsive. Support for copy-on-write nested stores and a built-in Undo Manager give complete control over mutating data.

The view system uses the sugared DOM method to render views, which has many advantages over a standard template system, such as speed, XSS-invulnerability and access to the full power of JS, rather than a cut-down second programming language. The implementation in Overture lets you define views, which are essentially self-contained UI components, and easily nest other views inside.

There’s also one-line support for animating views. You declare the layout property and its dependencies, and Overture will handle animating it between the different states. Full support for drag and drop, localisation, keyboard shortcuts, inter-tab communication, routing and more mean you have everything you need to build an awesome app.

Overture is only 65 KB minified and gzipped, and has no dependencies (except for Squire if you want to use the rich text editing component). It supports all the browsers you’d expect including IE8+ (there’s a special little library you need to include for IE8 support).

There’s fairly complete API documentation available on the Overture website, and I’ve thrown together a classic Todo demo app. It’s a good showcase of what you can build in less than a day with Overture, and it’s heavily commented to help you understand what’s going on; use your browser web dev tools, or check out the source in the Overture repo, which is of course hosted on GitHub.