Exalt: Sparking the Creation of Web Components

Daniel Wedding — Sat, 07 Aug 2021 04:01:04 +0000

As PHP begins to age, JavaScript begins to evolve as the superior language. With this in mind, it needs to be easy to make a customizable and easily managed website or web application. In the world of JavaScript web apps, development is made easier through the use of frameworks; a framework such as Exalt

So, what is Exalt?

Exalt is a JavaScript framework that prioritises speed, size, cross-compatibility, and code management in order to produce websites, apps, and component libraries.

What do I get if I use Exalt?

Exalt not only has its priorities but also aims to make development easier. With Exalt comes a cli, toolchain with customizable replacements, component simplicity, and a router. If you are a Visual Studio Code user, we also have an extension to add syntax highlighting and autocompletion.

How does Exalt compare to other frameworks?

According to this article, Exalt is ranked #1 for the smallest minified framework even with all the features it brings.

What does development look like?

Here is a simple HelloWorld component:

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("hello-world")
export class HelloWorld extends Component {

    render() {
        return html`
            <h1>Hello World!</h1>
        `;
    }
}

If you want to add settings, such as shadow root, or custom styles, here is how to do so:

import style from "./hello-world.css";

@options({ shadow: true, styles: [style] })

Now, say I wanted to change the page on variable change, I would use Exalt's reactive system.

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("my-clock")
export class Clock extends Component {

    date = super.reactive(new Date());

    render() {
        return html`
            <h1>Current Time: ${this.date}</h1>
        `;
    }

    mount() {
        this.timer = setInterval(() => this.date = new Date(), 1000);
    }

    unmount() {
        clearInterval(this.timer);
    }
}

In this case, the time gets updated and the component gets rendered all over again without disturbance of other components or reload of the page itself. If you would like to use it globally, check out the store api.

If you would like to customize the component from outside of it, in the render process of it, then you can use attributes:

import { define } from "@exalt/core/decorators";

@define("say-hello")
export class SayHello extends Component {

    render({ name }) {
        return html`
            <h1>Hello ${name}!</h1>
        `;
    }
}

With this example, we can setup the component like:

<say-hello name="John Doe" />

When rendered, "Hello John Doe" will be displayed.

Here's a link to the repo: https://github.com/exalt/exalt