Thinnest Modern Web Application Stack

Preact is a new framework that claims to be a "[f]ast 3kB alternative to React with the same modern API". It has a new development tooling called WMR which allows for very easy and convenient local development.

a month ago

Latest Post GitHub Actions - Quickstart Guide by Tyler Moon

Web application frameworks (aka. platforms, languages, stacks) are more plentiful than ever in 2020. Most of the well known frameworks (Angular, React, Vue.js) are getting quite heavy these days with many dependencies weighing them down. The benefit of so many dependencies is that they have many useful features baked in. If starting a new application for an enterprise usage then one of these frameworks makes sense. But, for a simple side project there is a new project that makes things much easier to get running, with way less JavaScript baggage involved.


Preact is a new framework that claims to be a "[f]ast 3kB alternative to React with the same modern API". It has a new development tooling called WMR which allows for very easy and convenient local development. This framework is very lightweight and renders quickly. In addition to the slim Virtual DOM, the WMR can compile everything down to plain JavaScript and HTML so that the browser can render it even faster.


Another big benefit of WMR is not having to manually download NPM packages. Just import the package and the tooling takes care of the rest, including a smart dependency caching system.

Prerequisites

WMR Installation

To install WMR onto your system create a new directory for the project, then run the following command:

npm install -D wmr

This command will install WMR and save it as a dev dependency for the project.

Simple Example Web App

In this article we are going to create a simple web app that pulls a listing of GitHub repos based on the keyword "Preact" and displays the number of stars and description of each one.

Index.html

To start lets add a new /public/index.html file to the directory created in the first step.

<!DOCTYPE html>
<html>
    <head>
        <!-- Load in stylesheet -->
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <!-- Load entrypoint JavaScript for Preact-->
        <script type="module" src="/index.js"></script>
    </body>
</html>

This HTML file just serves as the entrypoint for the application. Preact will then be injected at line 9 where it will manipulate the Virtual DOM to add more content.

Index.js

Create a new file /public/index.js and add the following Preact function code:

import { render } from 'preact';
import { useState, useEffect } from 'preact/hooks'
import { Result } from './result'

// URL for GitHub API
const SEARCH = 'https://api.github.com/search/repositories';

// Main App function
export default function App() {
    // Track state using the preact/hooks
    const [items, setItems] = useState([]);

    // Load in the data from the API
    useEffect(() => {
        fetch(`${SEARCH}?q=preact`)
            .then(res => res.json())
            .then(data => setItems((data && data.items) || []));
    }, []);

    // Render the JSX output to display the list
    return (
        <div>
            <h1>GitHub Listings for "Preact"</h1>
            <div class="list">
                {items.map(result => (
                    <Result {...result} />
                ))}
            </div>
        </div>
    );
}

render(<App />, document.body);

This is the main component of the application. On load it will query the GitHub API for results, then display a list of them rendering out the Result component (See next section).

Result.js

For each of the individual results we want to handle the results. Create a new file /public/result.js to hold a new Preact component.

export const Result = result => (
    <div class="list-item">
        <div>
            <a
                href={result.html_url}
                target="_blank"
                rel="noopener noreferrer"
                class="link" 
            >
                {result.full_name}
            </a>
            {" - "}
            <strong>{result.stargazers_count}</strong>
        </div>
        <p>{result.description}</p>
    </div>
)

Style.css

Finally lets add a bit of styling to our otherwise boring application. Create the /public/style.css file and add the following stylesheet:

.list-item {
    padding: 1rem;
    margin: 1rem;
    background: #69c499;
}

.link {
    color: #000000;
    font-weight: 700;
    text-decoration: underline;
}

.list {
    border: 1px solid black;
}

div {
    display: block;
}
h1 {
    color: #dbe5be;
    text-align: center;
}
body {
    padding: 1rem;
    font: 16px/1.65 system-ui;
    background-color: #53747c;
}

Run the Local WMR

To run the local WMR with hot reloading simply execute npm run start and then navigate to http://localhost:8080/index.html to view the site. If everything worked it should look like the following.

Build and Serve Production version

In order to compile into a single HTML file and one JavaScript file run: npm run build. To launch a simple webserver to test out the HTML version run npm run serve. The site should look the same as the development version from the previous section, however, it should now load much faster!

Summary

In this article, we explored the WMR and Preact systems to create simple, really fast, web applications.

Tyler Moon

Published a month ago