React without React? How Wagtail Changed My View of UI

#webdev #wagtailcms #opensource

Last year, I learnt React from Full Stack Open. I was quite fascinated by the idea of components because of how they act like Lego blocks.

Until very recently, I used to think that React is the only way to create UI components for websites.

Exploring Wagtail taught me otherwise.

I now know two ways to create UI components without React.

1. UI components in Django templates (for Wagtail)

I created a simple Wagtail site to showcase some of my Hange Zoë artworks. This was the first time I used "React without React".

For example, I created an image component (image.html) that can be used in many pages and even in other components.


{% load wagtailimages_tags %}

<div class="overflow-hidden rounded-4">

    {% if variant == "large" %}

        {% srcset_image image width-{500,800} sizes="(max-width: 600px) 500px, 800px" %} 

    {% elif variant == "medium" %}

        {% srcset_image image width-{300,800} sizes="(max-width: 600px) 300px, 800px" %}

    {% elif variant == "thumbnail" %}

        {% image image fill-200x200 %}

    {% elif variant == "hero_image" %}

        {% image image fill-500x500 %}

    {% endif %}

</div>

It behaves exactly like an Image.jsx in React. It also supports variants through context variables (like props).

The code is available on my GitHub.

2. Custom HTML tags using Web Components API (only HTML and JS)

I decided to explore an alternative look for the bakerydemo home page as part of my GSoC proposal.

I wanted a quick way to create a simple static site, so I avoided using a Python framework like Django or Flask. I researched a little, and I found out about the Web Components API. It is a feature of the browser that allows creation of custom HTML tags.

It was a bit difficult to understand at first, but I am enjoying it.

For example, I created a <my-image> custom tag that has many variants defined as CSS classes.


class MyImage extends HTMLElement {

    connectedCallback() {

        const src = this.getAttribute("src")

        const alt = this.getAttribute("alt")

        const variant = this.getAttribute("variant")

        this.innerHTML = `

        <img src="${src}" alt="${alt}"

        class="${variant}" />

        `

    }

}

customElements.define("my-image", MyImage)