Here some small gems I’ve learned over the years regarding front-end development and architecture; it’s short and sweet.
A good UI structure:
- Contains modular elements that can be composed into a page layout.
- Has clear boundaries so things can be unhooked (so called pluggable)
A good UI module:
- Never assumes information about its surroundings
- Like a black box: if given the right data, will work just fine.
- Is encapsulated as much as possible with its own state and interactivity
- Is usage agnostic, meaning it can be removed and placed elsewhere without breaking, even if it requires external resources or API endpoints to function (e.g. forms, JS functions)
- Has corresponding JS and CSS that follow the same principles
- Is semantic (meaningful naming conventions)
- Is DRY (Don’t Repeat Yourself)