TIA Engineering: How we rebuilt Tech in Asia’s front end

Photo credit: Pixabay

When I first joined Tech in Asia (TIA) about seven months ago, the engineering team was a small team; just the four of us working on the web portion. Six months later, we are still a small team of less than 10 people, but have accomplished so much, especially on the front end stack.

Problem

Back then, TIA’s main website was powered by two separate platforms: a web application built using Laravel for the company/investor database (formerly known as Techlist), and WordPress for the rest of the pages. Each of the platforms’ front end was served respectively by the platform itself; using Laravel’s views and the Blade templating system, and a custom-built WordPress theme for the WordPress side.

While that worked for a while, we started encountering numerous problems when it comes to optimizing assets between the two platforms. They were using fundamentally different systems; Browserify versus WordPress’ script loader (wp_enqueue_script) for scripts, SASS versus traditional CSS for stylesheets.

The redesign was an opportunity to rebuild the front end from scratch.

Having the front end served individually for each platform is a maintenance nightmare when it comes to shared content. For example, if we had to update the styling of the navigation bar, we had to apply it twice; one on WordPress, the other on Laravel.

Re-working our web architecture

The redesign was an opportunity to restructure our entire web architecture and rebuild the front end from scratch. We would continue to use WordPress to manage editorial content, maintain the existing company/investor database and build future functionalities using Laravel. All content will be sent to our front end and mobile application via REST API.

Transitioning PHP applications to serve as a REST backend is a growing trend:

1. WordPress 4.4 saw the REST API infrastructure integrated into core as the first step of a multi-stage rollout.
2. Automattic, the company behind WordPress.com, released Calypso, a redesigned admin interface powered by React, still using WordPress as a backend via REST API.
3. Recent Laravel releases saw new features with more emphasis to assist developers in building RESTful applications using the framework.

The front end stack would be separate from the two platforms, powered by a front end JavaScript framework. This means that knowledge of PHP is no longer required for this stack, increasing our options when hiring engineering talent.

React became a no-brainer choice for the front end framework. Its advantage over rendering performance over other frameworks like Ember and Angular was a natural fit for pages that involve a lot of DOM changes, like the article page with infinite scroll and the “live” commenting system.

Building a custom Bootstrap theme

One of the main disadvantages to using Bootstrap is framework bloat. But, we love Bootstrap. So how do we solve the bloat problem?

We built a custom Bootstrap setup by downloading the SASS source of Bootstrap 3, disabled unused components / scripts, override the original variables to our needs, and wrote new styles for each of our new components. By ensuring all original and custom SASS code go through the same compilation process, we solved the problem of having duplicate / unused styles in our previous setup.

We have also structured our SASS files based on the 7-1 pattern. By having a separate SASS file for each custom component and page, we will be able to lazy load the styles like what we are doing now for JavaScript files via webpack.

Re-learning JavaScript

Growing Flux

Routing

Abstracting “Components” in React

Moving forward