Component Based Architecture

Here at Uplift Agency we use components to structure the web applications we build for our clients. It is working out very well for us so I wanted to take a moment to share some of the benefits of this approach. This article won't get very technical (subscribe for future articles that will go into the nitty gritty).

The path to components

Component based layouts have been around for a long time, but they haven't caught on in the web community until recently. If we look at the history of web development though we can see the baby steps that got us here.

BEM

BEM methodology taught designers and frontend developers to structure their HTML and CSS in a component-like way. It did not address the javascript side, but it taught us how to reduce complexity by keeping style specificity low. Here's what a BEM component would look like:

<div class="comment">
  <img class="comment__img" src="..." alt="..."/>
  <p class="comment__body">...</p>
</div>

.comment { ... }
.comment__img { ... }
.comment__body { ... }

Angular Directives

Angular directives were the first introduction to custom elements for many developers. They encouraged encapsulating logic and resulted in cleaner templates.

<tabs>
  <pane title="Settings">...</pane>
</tabs>

Webpack, Browserify

Webpack and Browerify made it incredibly easy to bundle up scripts into one file, eliminating the cost of having one javascript file per component. Combined with CSS preprocessors, we could structure our components like this:

/component-name
  /component-name.html
  /component-name.js
  /component-name.scss

React Components

React introduced us to virtual DOMs and improved the performance of components. Most frameworks would first insert the typically-blank custom element before populating the content inside of it. React can evaluate the resulting markup before inserting it into the DOM.

Web Components

The W3C is working on the Shadow DOM and custom elements specifications, which will standardize web components in the browser. Polymer allows us to play around with Web Components today.

The Good Stuff