Tip 49: Build Applications with Component Architecture

Organizing code

Organizing files can be a challenge. Front-end code—HTML, CSS, JavaScript—can be particularly challenging because the code is made of different languages and file types.

Do you arrange code by file type? What about when CSS is tied to a single HTML file? Do you keep them in different directories but with similar file names?

For a long time, developers would keep files separated by type. The root directory would contain a css directory, a js directory, an img directory, and so on.

Organizing files like this showed good intentions. Everyone wanted to keep different areas of concern separate. The HTML markup (what a site contains) is different from the CSS (how a site looks), which is different from the JavaScript (how a site responds). It seemed like they should be in separate directories.

The problem was that the pieces aren’t really separate concerns. Except for a few global styles, CSS is built to work with specific markup. What happens when that markup is removed? If you have disciplined developers, they’d remove the relevant CSS. But most of the time, it stayed. It was never used—it just took up space.

Component architecture

As developer tools improved, a new pattern emerged. The new pattern is component architecture. A component is the combination of all relevant code into a single directory. You then build a web page or application by adding pieces one at a time—a button is in a sidebar, which is in a page—until you have your working application.

Component architecture isn’t without problems. The biggest problem with component architecture is that it depends on build tools ...