Component Based Architecture

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.

Baby Steps

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

Beer

Reusability

If constructed properly, a component should only be concerned with the data it is passed in and have no side effects. A component should not depend on the structure of the application. This allows it to be used in multiple places and across multiple projects.

Testability

Testing components individually is more manageable and straightforward than testing the behavior of an entire application at once. As an analogy, if all the puzzle pieces are tested individually, you can be reasonably sure that they will fit together.

Puzzle Pieces

Clean Code Structure

Components make it very easy to split up our templates, logic, and styles in separate files. This makes it easier for new developers to find things and designers to get down and dirty in the HTML & CSS.

The Future

If you're a FE engineer, give components a try! And if you already have, I'd love to hear your thoughts: what did you learn? Do you agree that components are the future or do you see a different path? Send us an email at [email protected].

More Resources

  • Electron 7 is here

    But what is explicitly different about Electron 7? There will be Chrome 78, V8 v7.8 and NodeJS v12.8.1 of course. The big new feature will be a way to call functions in the main process from the renderer. You'll be able to do something like:

  • Building Our First React Native Application

    Overall our experience with React Native was a positive one, but there were a few bumps along the road.

  • Set up Heroku SSL using Let's Encrypt

    You built your first app on Heroku and want to set up a custom domain. Everything is going well until you realize you need to serve your website over https. Unfortunately Heroku does not integrate with LE (yet) so you'll have to do some manual labor. Lucky for you, it's easy to do so!