DEV Community

Daniel Wedding
Daniel Wedding

Posted on

Exalt: Sparking the Creation of Web Components

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


Exalt Banner

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.

image

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>
        `;
    }
}
Enter fullscreen mode Exit fullscreen mode

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] })
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
        `;
    }
}
Enter fullscreen mode Exit fullscreen mode

With this example, we can setup the component like:

<say-hello name="John Doe" />
Enter fullscreen mode Exit fullscreen mode

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

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

That covers the basics. If you would like to keep an eye on the project, we would appreciate if you would star the project. Until next time.

Discussion (1)

Collapse
teamflp profile image
G Paterne

J'aimerais bien apprendre ce Framework. Je viens à peine de l'installer.
Mais quel serait la procédure pour créer un composant et une route ?