rohanprasad / formidable-playbook Goto Github PK

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
    • Tree shaking
    • Source maps
  • Babel plugins - In Progress
  • Other tools - In Progress
  • Performance auditing - In Progress
• The Backend Playbook - In Progress

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

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

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:

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.

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

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.