Want to get started with web components?

#webdev #javascript

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.

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 is for you!

FicusJS 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, and we recommend this as a general starting point.

Aligns with standards

FicusJS 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 is using a hello world example.

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

<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

The hello world example creates a new custom element
using the createComponent function and registers it to the hello-world tag. It uses the lit-html renderer (multiple renderers are available) for creating HTML from tagged template literals.

Once registered, the tag can be used multiple times in HTML and instances can be programmatically obtained using document.querySelector
or element.querySelector