For the past year our team has been building a web application to power our desktop and mobile-web experiences. Over this time, we’ve moved 95% of our site to a new system that provides us with increased performance, reliability and a greater capability to create dynamic & engaging experiences.

This wasn’t always the case. We’ve supported varying degrees of legacy experience for some time - spaghetti PHP, an old Laravel application, jQuery $(DOM).ready() blocks and some isolated bits of backbone.js.

Wattpad.com is a large, interactive website that receives around 50 million pageviews every day. So it’s very important for the code that powers it to run quickly, and scale well.

Our approach towards this challenge has adapted over time, and it will continue to adapt as we iterate over our product and learn new things. But, for the time being, I’d like to share some of the highlights of what we’ve accomplished so far.

Isomorphic MV* Javascript

The foundation of our architecture is a hybrid client / server application built in Backbone / Express. We were inspired by the airbnb article on the topic. Our approach has focused on the following areas:

Speed to glass

In order to get a fast initial load, we render the first page requested by a user on the server-side via Express. Each server loaded page is supported by a thin model and controller.

The model is generally limited to fetching necessary data from the API. Our controllers get/set any necessary application flags and render the view.

Minimize server load

After the initial page load, our Backbone app takes over. It handles routing to subsequent pages, and management of DOM events and interactions.

After initial load, the only direct communication a session has with the server is via our API, leading to significant reductions in data sent back & forth.

Cache whenever possible

We make use of local storage to cache our client models, and further reduce the number of API calls we need to make when moving between pages on our site.

We’ve also make use of a cache-policy header on all our API responses to keep track of the rules around cache-expiry for each specific endpoint.

Reduce duplication

By keeping our server Models / Controllers very thin, by delegating all event and interaction to the Client and by sharing views between the client & server in the form of Handlebars templates, we have significantly reduced the amount of code duplication necessary to run code in two different environments, while retaining the benefits of such a system.

Process Focused

I would be amiss if I didn’t address the importance of process in the role of successful software design. We try to adhere to a set of best practices and principles to help us along the way. We like to think of them as guidelines rather than gospel.

Agile, Iterative

We follow an agile process. Our core team works under a Kanban model, and we take inspiration from Scrum when putting together project teams to deliver a specific set of features. We build MVPs first and iterate over them later, learning and course-correcting as we go.

Test Driven

We write unit tests and integration tests to support our platform. We utilize Mocha/Sinon/Chai for our javascript unit tests and Selenium for integration.

In the past we have focused primarily on code coverage, but lately we are trending more towards a BDD approach focusing on testing the input & output values of public functions from the perspective of the user’s behaviour. We generally try to follow a TDD model and write our tests first (though we do not always succeed).

Continuous Integration

We use jenkins to run both our unit and integration tests on pull requests. Our grunt watch process also runs unit tests on file save, so the developer knows if any local code changes have caused our tests to break.

Code Reviews

All code is committed via pull-request to the master branch of our git repository. Another member of the team must review and approve the PR before it can be merged and deployed to production.

Still Learning

We’ve come a long way in the past year, but we still have a long way to go. I’m looking forward to some of the exciting projects coming down the pipeline. We will try to keep you updated with the things we are working on as we move forward.

- Michael