formidable-playbook

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
- The Frontend Playbook
- Webpack plugins
- Start with good base plugins
- Code splitting
- Shared libraries
- Scope Hoisting
- Tree shaking
- Source maps
- Babel plugins - In Progress
- Other tools - In Progress
- Performance auditing - In Progress
- The Backend Playbook - In Progress

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.

$3

#### 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 for v1 | Collapse identical code chunks to a single reference |
| OccurrenceOrderPlugin | Maybe for v1 | 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.

#### Scope Hoisting

Scope hoisted bundles try to place bundle modules into a global bundle scope so
as to reduce the overhead of function calls for each bundled module. The problem
and scope hoisting solutions are discussed in detail in Nolan Lawson's 2016
article
"The cost of small modules"

#### 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.

$3

$3

$3

The Backend Playbook - In Progress