Want to get started with web components?
Tags: webdev, javascript
Published: 2021-04-07 19:49:29

Browsers have improved _greatly_. Many of the reasons to reach for a big framework like React or Angular have gone away.

You don't have to rely on a complex build system, bundlers, or other tooling to ship your Javascript to users anymore.

Browsers have support to import Javascript modules directly. You don't have to template your components in JSX and add all the baggage and complexity of a build tool - you can use Javascript [tagged template literal syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

If don't want to pull in the complexity of a large framework like React or Angular, but still want to build applications with components, [FicusJS](https://docs.ficusjs.org) is for you!

[FicusJS](https://docs.ficusjs.org) is a set of lightweight functions for developing web applications. It is focused on creating web components, managing application state plus a pub/sub event bus.

## What are web components?

Web components are a set of browser APIs that allow you to create new custom, reusable, encapsulated HTML tags for use in web applications.
Web Components work across modern browsers and can be used with any JavaScript library or framework that works with HTML.

## Go build-less

Browsers have improved a lot over the past years. It's now possible to do web development without requiring any build tools, using the native module loader of the browser. We think this is a great fit for [FicusJS](https://docs.ficusjs.org), and we recommend this as a general starting point.

## Aligns with standards

[FicusJS](https://docs.ficusjs.org) aligns with standard browser APIs which means it is not based on any proprietary code or libraries.

As it is based on standards, it has longevity and is a good choice for enterprise web applications.

## Try it out

The easiest way to try out [FicusJS](https://docs.ficusjs.org) is using a hello world example.

Create an `index.html` file and copy the following between the `<body>` tags.

```html
<hello-world></hello-world>

<script type="module">
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers/lit-html'
import { createComponent } from 'https://cdn.skypack.dev/ficusjs@3/component'

createComponent('hello-world', {
  renderer,
  handleClick (e) {
    window.alert('Hello to you!')
  },
  render () {
    return html`<div>
<p>Test component</p>
<button type="button" @click="${this.handleClick}">Click me!</button>
</div>`
  }
})
</script>
```

> Alternatively, fork this Codepen to see it in action - [https://codepen.io/ducksoupdev/pen/GRZPqJO](https://codepen.io/ducksoupdev/pen/GRZPqJO)

The hello world example creates a new [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
using the `createComponent` function and registers it to the `hello-world` tag. It uses the [lit-html](https://www.npmjs.com/package/lit-html) renderer ([multiple renderers are available](https://github.com/ficusjs/ficusjs-renderers)) for creating HTML from [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

Once registered, the tag can be used multiple times in HTML and instances can be programmatically obtained using [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
or [`element.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)