/buildless

Write react-like apps without a build process

Primary LanguageJavaScriptISC LicenseISC

Buildless

A small (20k) compilation of Preact, Preact Router, and HTM - along with a few of my own inventions - that allows you to write modern web applications with little-to-no framework, and without a compilation step.

The goal here is that you should be able to create apps whose source runs directly in the browser - just like the olden days - but which take can take full advantage of JavaScript features that modern browsers now ubiquitously support.

What?

A minimal buildless app looks like this:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Buildless app</title>
    <script type="module">
      import { render, useState, html } from 'https://unpkg.com/@fordi-org/buildless';

      const ClickCounter = () => {
        const [count, setCount] = useState(0);
        const increment = () => setCount(count + 1);
        return html`
          <div>
            <button onClick=${increment}>
              Clicked ${count} times
            </button>
          </div>
        `;
      };

      render(html`<${ClickCounter}/>`, document.body);
    </script>
  </head>
  <body></body>
</html>

That's it. No build required. Just serve up that file. If you're feeling like that's too terse, you can throw all your code into an index.js, and replace that script tag with <script async defer type="module" src="./index.js"></script>.

What's the catch?

Browser support. Buildless relies on ES Modules support in your browser, which means that, for example, IE users are lost (though Edge users will work).

So... documentation?

Everything in preact, preact/hooks, and preact-router is exported from the one module, so they are most of your documentation, along with a preact-bound instance htm, and the Buildless tools.

Go. Play. Build some neat stuff.

But what if I want to build anyway?

*sigh* fine. Go here for information on how to make a production build.