Using the modern web platform

The web platform is a steadily-evolving beast, and anyone who works on the web must pay attention to the state of things, or else be left behind. In the past couple of years, the web platform has been surging forwards with lots of nice new toys—some that make it easier for us to do our work, and some that make new features possible (such as offline support).

This post takes a look at some of the things we’ve been doing with it all this year, and some of what is to come.

The FastMail web interface is a complex app with a legacy going back quite a few years; Topicbox, on the other hand, is a smaller and newer code base, so we’ve been using it as a staging ground for various improvements throughout this past year—and it’s been going well. In the coming year we’ll be continuing to work on these improvements, and starting to apply the best parts of them to FastMail, as well as working on a few new projects.

Using new JavaScript features

After being dormant for quite a while, JavaScript language development has become active these last few years, with some syntactic/language features like ES6 classes and modules, and some library features like promises.

We’ve been progressively updating Overture, our library which is the foundation for the FastMail and Topicbox web interfaces, to use a lot of these new techniques, making our lives a bit easier. Various experimental work is still ongoing. The end result of all this is code that is easier to work with, so that we can implement new features more quickly, and avoid making various common mistakes. The ability to maintain higher code quality with various tools is also good.

We’re also steadily updating the Topicbox code base to use some more modern conventions, and FastMail will follow later next year.

Service workers and offline support

The FastMail web UI was always well engineered to be able to cope with an unreliable internet connection, but it can’t yet start without an internet connection at all—offline support has only started making it into browsers in the past couple of years. I’ve really been looking forward to adding offline support to FastMail.

So, we plan to use service workers to implement offline support in Topicbox and then FastMail; already most browsers support service workers—Firefox and Chrome have it, Edge has an experimental implementation and Safari is working on it.

One less obvious benefit of offline support is much faster app startup time: rather than needing to contact the server a few times to get the code, account details, list of mailboxes, list of emails and so forth, your browser will already have all of these things stored locally (presuming you already logged into your email).

Browser compatibility

So far I’ve been talking about new browsers and new features; what about old browsers?

You’re safe: we actively monitor which browsers and tools people are using to access our services and take care to avoid breaking things for our customers. (As an example, in our recent calendar changes we diligently tested almost all the calendar clients our customers use.)

Over the coming year we will cease to support some very old browsers; we still support IE 8+ now, but in practice we have almost no one using IE 10 or older, and it holds back development in a few places (we want to be able to use SVG, for example), so we will be dropping support for those browsers. IE 11 will still be supported for the indefinite future (roughly 5% of our desktop customers use it).

For other old browsers that aren’t Internet Explorer: we use various techniques to make sure that things keep working without special effort, despite the new features we use; in Topicbox, for example, we use Bublé to translate our new JavaScript syntax into the lowest common denominator (that takes care of language features), and core-js to polyfill all the library features that we depend on.

(Fun fact: earlier this year we replaced our small collection of manually-selected polyfills and replaced it with core-js; this actually restored support for IE 10, which Topicbox hadn’t formerly supported! But due to some flexbox, image and font rendering issues we decided not to actually support IE 10. But see the principle: polyfills do the heavy lifting of basic old-browser compatibility.)

We only load core-js if it’s necessary, so that up-to-date browsers aren’t penalised. Tech people may be interested in how we determine whether it’s needed or not, because I think we’ve come up with the most efficient check around:

if ( !Object.values ) {
    // Fetch and load core-js before continuing
}

Object.values is pretty much the most recently supported feature in core-js and browsers, so if the browser supports Object.values, it supports everything we need. (We checked this quite carefully.) This makes the overhead practically nil for modern browsers, while retaining support for older browsers at a very low cost. The browsers that need core-js under this test are: IE, Safari ≤ 10.0, iOS ≤ 10.2, Chrome ≤ 53, Firefox ≤ 46 and Edge ≤ 13. No current browser releases (excluding IE 11) need core-js.<!– I expect that in a few years’ time we’ll decide on a new baseline, but this should do us for a while. I’d like to play with too: it’d do as a feature detect, allowing you to keep new syntax intact as well. –>

Using new CSS features

As part of this goal of migrating things to the standard web platform, we’re also replacing Less with PostCSS, assisted by plugins like cssnext, so that what we’re writing is as close to normal CSS as possible, and we can slowly over time remove more and more magic build process, leaving just the code.

The most important new CSS feature that we’re using is custom properties, which allow you to write code like this:

:root {
    --color-brand-teal: #009688;
    --button-background: var(--color-brand-teal);
}

.v-Button {
    background-color: var(--button-background);
}

… and then, putting the variable declarations in a separate theme file, have the button style be equivalent to:

.v-Button {
    background-color: #009688;
}

FastMail’s existing theme system is heavy: it compiles an entirely new version of all the styles for each module (base, mail, calendar, &c.) with the theme’s variable declarations, and then reloads all its stylesheets when you change theme.

For now, we’re still compiling the variables out with cssnext in Topicbox, because IE doesn’t support them; but we think it’s feasible to leave the variables in, using native support in modern browsers, and performing the transformation in the browser via postcss-cssnext for old browsers. That way we achieve our goal of maintaining compatibility for old browsers, while still using fancy new features.

A few of our customers like to customise their themes, and this will help them, too; if you don’t like a particular shade in our dark theme, for example, you can override that specific colour in one easy and clearly-labelled place, and it’ll be updated in all the places that use that colour.

Looking to the future of the web

The future is bright! The web as a platform continues to improve, and FastMail and Topicbox continue to improve along with it. In this coming year we plan to deliver some major feature improvements, and we hope you’re looking forward to it as much as we are!