Use components without a frontend framework

Frontend frameworks

Within this post, I will show you one, of many ways to use components without a frontend framework. Do not get me wrong, I like frameworks like Vue.js, React, or Angular. At our company, we write JavaScript with Vue.js on a daily basis.

But sometimes those frameworks are too much. Especially when building simple websites instead of complex web applications. In these cases, we do not use a framework at all and just write HTML, CSS, and JavaScript.

Components

If your source code gets messy there is often an easy way to improve it. Move your source code into smaller chunks – divide and conquer.

Splitting your source code into multiple components is a well-known way to structure your project. Things get isolated, readable, clear, reusable, extendable, and maintainable. In fact, that is what most of the frontend frameworks do themselves.

Welcome to BEM

BEM (Block Element Modifier) is a methodology to organize your frontend. It is mostly known in the world of CSS, but I am going to show you how to use it for JavaScript, too. Please remember, BEM is a methodology and not a framework. It will come with zero dependencies.

A card block

In BEM the components are called blocks. It is just different terminology for the same thing.

Now, imagine a card block (source code).

HTML

We use HTML for the structure and content of the card block. Of course, you can use programming languages, template engines, or other tools to improve the HTML part of the block.

<article class="card card--highlight">
    <figure class="card__figure">
        <img class="card__image" src="#">
        <figcaption class="card__caption">#ffed00</figcaption>
    </figure>
    <h2 class="card__headline">Corporate yellow</h2>
    <p class="card__description">This yellow is defined as #ffed00. It is a very nice color. It is one of our corporate colors at visuellverstehen.</p>
</article>

CSS

We use CSS for the presentation and style of the card block. Of course, you can use pre processors, post processors, or other tools to make CSS more comfortable to use.

.card {
  font-family: sans-serif;
  line-height: 1.5;
  padding: 1rem;
  max-width: 20rem;
  border: 0.25rem solid #f6f6f6;
}

.card.card--highlight {
  border-color: #ffed00;
}

.card__figure {
  margin: 0;
}

.card__image {
  display: block;
  width: 100%;
  height: 6rem;
}

.card__caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.card__headline {
  font-size: 1.5rem;
  font-weight: bold;
}

JavaScript

We use JavaScript for the functionality of the card block. Of course, you can use all kinds of tools to improve how you write JavaScript (Babel, TypeScript, ESLint, webpack, …).

(function () {

  var initializeCard = function($card) {
    console.log('Do whatever this $card block should be doing.');
  };

  document.addEventListener('DOMContentLoaded', function() {
    var $cards = document.querySelectorAll('.card');

    for (var i = $cards.length - 1; i >= 0; i--) {
      initializeCard($cards[i]);
    }
  });

}());

Sometimes blocks have to communicate with each other. For that, there are at least two good options: Custom events and stage management.

Learn the basics

It is remarkable how much can be done just using HTML, CSS, and JavaScript. That is one reason why I encourage everyone to learn the basics.