loading...
Cover image for A commentary on spending the weekend with web components

A commentary on spending the weekend with web components

antonderegt profile image Anton de Regt ・4 min read

It’s weekend (not anymore, but it was when this journey started)! Time for something new. In this post you can read about how to get started with web components and my thoughts on the process.

What are we building

A friend of mine thought of a fun project to do. It had something to do with scraping the web for products that were out of stock, due to you know what. We did a pair programming session where we used puppeteer for the scraping, firebase for the database and I wrote a regex with the help of Regex101 to filter the puppeteer results. The next step was to build a landing page. We both have experience with the common JavaScript frameworks and sites like HTML5 UP, but the weekend just started and we only code on new stuff on the weekend, so we decided to play with webassembly and web components.

WebAssembly

WebAssembly

WebAssembly... I'll keep it short on that part. It was fun to play with, but not suitable for our little project. WebAssembly has to be called from JavaScript, so it would add a lot of bulk without adding anything useful. So, I'll keep that on the ToDo list for another weekend. Might build the fastest ToDo app ever on the web 🤔.

Web Components

Web Components

On to the part I did use, Web Components. If you want to know what it is, or would like a refresher, then I suggest this page: Web Components. It gave me a good grasp of the idea behind the technology. What I like most about this is that it could put a stop to all the new JS frameworks coming out every week. You need a datepicker in your app? You need a header? You need a menu? A drawer? Find it here, pop in the component and you're good to go, no need to implement the same component in every JS framework ever created.

Goodbye JS frameworks!

JS Frameworks

After understanding the idea behind Web Components I looked around to find an easy and future proof way to start building a simple landing page. It's a little contrary to the part I most like about it of not needing frameworks, but the weekend is short, so I just got to pick a way to get started fast. For me LitElement stood out the most as a light weight and simple helper to get started.

Get Started

LitElement has a very good guide which helped me build my very first "Hello, World!" in Web Components. We'll go through that guide together to get you started fast! This is one of those get-rich-quick schemes that actually work, trust me.

$ npm install -g polymer-cli
$ npm install lit-element

Create a my-element.js file and add the following:

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {

  render(){
    return html`
      <p>Hello, World!</p>
    `;
  }
}
customElements.define('my-element', MyElement);

Create index.html and fill it up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

  <script type="module" src="./my-element.js"></script>
  <title>lit-element code sample</title>
</head>
<body>
  <my-element></my-element>
</body>
</html>

All you have to do next is:

$ polymer serve

Next Steps

That is as far as the lit-element guide got me, if you want to learn more about what each line means head over to the real guide. To level up, go to Open-WC's code examples. All the basics for a web app are covered, for example passing properties, conditional redering, styles and fetching data. With this resource and prior web experience you should be able to build a cool web app.

Open-WC has a cool starter kit with a lot of boilerplate and get going fast magic, but let's stay away from that path and learn to do this thing from scratch. We should keep Web Components clean, treat them with the respect they deserve for taking on the big JS frameworks. Right now, it positions itself as something you can easily add to your [any JS framework] app. It slowly enters more and more apps, until one day... Some bright day that could be closer than you think, Web Components will take over and everybody will love it. Companies don't have to decide on a tech stack anymore, developers don't have to specialise in anything. There's just... Web Components.

The Landing Page

If you want to know what I build... I just copied K33G and transformed it into something that only works on big monitors. In my excitement about learning something new, I forgot everything that was drilled into me. I still have nightmares where I wake up to my own screaming: "Mobile first! Mobile first! Mobile first!", but this weekend I forgot all my prior training. If you are on mobile and in a sensitive mood please just look at the screenshot below:

Uitverkocht

On a big monitor you are allowed to visit the site here. I can't guarantee it will be up for ever, so be quick.

What are you going to build with Web Components? What have you already build with it? Thanks for reading!

Posted on by:

Discussion

markdown guide