Build Your Own JavaScript Micro-Library Using Web Components: Part 1

If you've ever wondered how libraries like 

 work under the hood, this is a great exploration of what you need to know. Using Web Components means that your own micro-library, which we build in this series, will work easily with any JavaScript codebase. This achieves greater levels of code reuse. Let's dive in.

When building with Web Components, you will rely heavily on the set of specifications that make up Web Components: 

The main benefits Web Components bring to the table: reuse, interoperable, accessible, having a long lifespan, are due to their reliance on browser specifications. Had we adopted a library or framework, we might have lost some or all of these characteristics in the user interfaces built with it. UI components coded with some libraries aren't interoperable with other JavaScript libraries or frameworks, which puts a hard limit on reuse.

Even though we gain these benefits from Web Components, we have lost any benefit JavaScript libraries have to offer. Frameworks and libraries like React, Vue, Angular, and Svelte provide an abstraction around browser specifications. 

React, for example, famously opted for a purely functional approach, giving engineers "hooks" to manage side effects in user interfaces. JavaScript libraries and frameworks provide architectural patterns that make life easier on the part of the web developer, offering features not available with browser specifications alone, like data binding and state management. 

What if we could retain the benefits of Web Components while also gaining the architectural design of a JavaScript framework? Indeed, there are many such Web Component libraries already. Now you get to build your own.

, we'll demystify the inner workings of Web Components libraries as you get to develop your own. Using TypeScript decorators, we'll develop a new interface that simplifies development but doesn't compromise on performance. 

The micro-library we'll code optimizes to less than 1Kb of minified JavaScript. Among its features is that it allows the components we develop to transform from something like this:

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot =
      this.attachShadow({
        mode: "open",
      });
    const template =
      document.createElement(
        "template"
      );
    template.innerHTML = `
    <style>
    :host {
      display: block;
      width: 100%;
      font-family: var(--font-default);
      font-size: var(--font-body-sm);
    }
    <div class="container"></div>
    `;
    shadowRoot.appendChild(
      template.content.cloneNode(true)
    );
  }
}
customElements.register(
  "my-component",
  MyComponent
);

...to instead use a TypeScript decorator named 

@Component({
  selector: "my-component",
  style: css
    :host {
      display: block;
      width: 100%;
      font-family: var(--font-default);
      font-size: var(--font-body-sm);
    }
  ,
  template: html
    <div class="container"></div>
  ,
})
class MyComponent extends HTMLElement {
  constructor() {
    super();
    attachShadow(this, {
      mode: "open",
    });
  }
}

Advantages Of Our Micro-Library's Approach

 symbol, followed by the name of the decorator 

 where the developer can declare the tag name, CSS style, and HTML template.

These are the advantages of using class decorators to handle templates and styling:

 decorator that allows you declare a tag name, styling, and template with a cleaner interface than before, you'll also code a method decorator that simplifies binding event listeners to custom elements. Instead of typing 

this.addEventListener('click', this.onClick)

 method and still provide the same functionality? It could look something like this:

@Listen('click')
onClick(ev: MouseEvent) {
    // do something here
}

If all of this seems foreign, don't fret. Coding decorators is much like coding any JavaScript 

. Providing these framework-like features to custom elements may be easier than you think. 

Think of a micro-library as a collection of prewritten code used for common development tasks that has a small footprint. Micro-libraries may have similar functionality as much larger libraries but with way less code that optimizes down to a few Kb or maybe even less than 1 Kb. That's why they are "micro". 

Micro-libraries have existed for a while. Famously, Preact is a ~3 Kb alternative to the ~45 Kb React. Micro-libraries exist, in part, to provide a more performant alternative to popular JavaScript libraries. In the context of custom elements, micro-libraries are an interesting solution because we can gain the functionality of a JavaScript library with little expense with regards to performance.

In Parts 2-4 of this micro-library tutorial series, I'll show you how to identify reusable parts of Web Components code and abstract logic away from each component implementation in a functional manner. You'll code a class decorator that handles declaration of a component selector, styling and template. You'll learn how to use method decorators to attach event listeners to DOM elements. You'll have a basic Web Components micro-library you can expand upon and use in actual apps.

For a deep dive into Web Components, check out our latest book - 

Fullstack Web Components: Complete Guide to Building UI Libraries with Web Components

. It covers how to build robust UI libraries and entire applications using Web Components. 

AUTHOR

Steve Belovarich

If you've ever wondered how libraries like React, Preact, or Svelte work under the hood, this is a great exploration of what you need to know. Using Web Components means that your own micro-library, which we build in this series, will work easily with any JavaScript codebase. This achieves greater…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Build Your Own JavaScript Micro-Library Using Web Components: Part 1

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript