A practical guide to building modern applications

This is our playbook. It is the foundation that allows us to architect & design systems that move our client projects forward. In it, you will find practical approaches for building frontend & backend javascript applications. This is a living document, and we intend to share our knowledge as we continue to work towards making the web a better place.

The Architecture Playbook

Have a single infrastructure

A unified development effort should use a single infrastructure to control all similar projects.

The Frontend Playbook

Our frontend infrastructure is based around webpack builds, but most of the guidelines / goals apply to any build tool.

Webpack plugins

Start with good base plugins

Webpack has a rich plugin ecosystem, including both core and open source modules. Webpack also has a straight forward interface to write your own plugins.

A short list of plugin recommendations for best frontend performance include:

Plugin Recommend? Notes
UglifyJsPlugin Yes Minimize code
DedupePlugin Yes Collapse identical code chunks to a single reference
OccurrenceOrderPlugin Maybe Reorder module and chunk ids by occurrence count
DefinePlugin Maybe Define constants for better optimization
lodash-webpack-plugin Maybe Optimize lodash

Code splitting

Code splitting is a Webpack feature that enables a JS bundle within a single build to be split up and loaded on-demand in smaller parts. Code splitting is appropriate within a single page and build.

Shared libraries

Webpack shared libraries are slightly different from code splitting scenarios in that the common dependencies are shareable across builds and require a two-part build. In a first step, a common shared bundle and manifest is created. Then, in a second step, entry points ingest the manifest and omit any libraries included in the shared bundle. Shared libraries are appropriate for better long term caching within a single app across deploys and across different projects / real HTML pages.

Tree shaking

Tree shaking is a transformation process for ES6 modules whereby ESnext exports that are not used in a Webpack bundle can be isolated during code bundling and removed entirely by Uglify dead code elimination.

Source maps

The Webpack SourceMapDevToolPlugin creates source maps which allows a developer to view / debug developer-friendly source code instead of the optimized, mangled, and minified JS bundle of a frontend web app. Source maps should be enabled for both development and production.

Babel plugins - In Progress

Other tools - In Progress

Performance auditing - In Progress

The Backend Playbook - In Progress