Weapons of Frontend Construction (WFC)

by Christopher Oliver

Introduction

A toolbox used for implementing effective frontend design processes and frameworks.

The goal of this project is to identify common problems faced when implementing frontend solutions within greenfields and brownfields projects.

This guide will cover (as simply as possible) useful methodologies for addressing design problems on the frontend, as well as methods for implementing practices to simplify problem solving.

Getting Started

It's important to understand that in order to build a maintainable and effective frontend implementation, you need to know what the rules are that you need to follow.

For instance, it would be bad to build a house without a blueprint.

And consider that you did have a blueprint to build the house from, but the blueprints did not follow building standards.

In both scenarios, you would be forced at one stage or another to take it apart, and build it again from scratch.

Enter design standards.

As a rule, we are going to use Angular's LIFT principle as a guideline toward creating maintainable, and scalable projects.

LIFT represents the following:

L - Locatable: You should be able to locate something at a glance
I - Identifiable: You should be able to identify something at a glance
F - Flat: It should utilize a flat structure (No more than 3 navigation levels)
T - T-DRY - Try-to-be-DRY - Try-to-be-Don't-Repeat-Yourself: Don't repeat yourself...

The relevant sections have been listed below (in order) to assist you in navigating through this documentation:

1. Product Design
2. Project Architecture
3. CSS
4. HTML
5. JavaScript
6. Frameworks