Plain SPA

Modern single-page application deployable as-is without any bundlers

Key Features

This boilerplate uses:

• Sinuous (1247 bytes fast, reactive UI library),
• Storeon (167 bytes event-based Redux-like state manager) and
• Storeon Router (570 bytes modern router) under the hood.

All three tiny libraries come at cost of just 2 kilobytes combined. I chose them carefully to not reinvent the wheel after looking up a lot of lightweight UI and router libraries.

For example Sinuous comes up with tagged templates and observables:

import { observable, html } from './modules/sinuous/index.js'

const counter = observable(0)
const view = () => html`
  <div>Counter ${counter}</div>
`

document.body.append(view())
setInterval(() => counter(counter() + 1), 1000)

The app includes several example routes to show Storeon Router's capabilities.

Background

Although I fell in love with the possibilities offered by today's libraries like Vue or React, the tooling around them throws me off sometimes. Grasping how the dependencies interact with each other. Hundreds of megabytes for transpiling all the code. Recently I had to dig deep into Webpack's internals to figure out how to omit the asset size evaluation of images inside the public folder.

If one deviates from the standard tooling, working with it quickly becomes uncomfortable.

Sine ES6+ features are available in modern browsers by default, there will be no advantage of transpiling in the future (hopefully). In service workers they are used regularly in this very moment.

I wanted to create a simple SPA with some of the glory provided by bigger frameworks, but keep the setup as simple as possible to understand what is actually happening. Plain JavaScript, runnable in the browsers without bundling or a dist directory to deploy.

To drop npm itself as a dependency, the packages in use have been imported manually into js/modules/*. That sure isn't best practice, but let's you clone the repository and execute it in an instant.

Bundling

Doesn't the headline say "deployable as-is without any bundlers"?

Absolutely. The project is ready to ship for production purposes.

However, you can tree-shake and compile htm syntax to hyperscript for a smaller app footprint.

// E.g. the following input:
html`
  <div id="foo">hello ${you}</div>
`

// becomes:
h('div', { id: 'foo' }, 'hello ', you)

Run npm i && npm run build to bundle and minify your app. I tried to decrease the tooling as much as possible. Merely 10 Megabytes (unpacked) of Node modules will be installed.

Finally change the source path to the entry script file inside index.html to /build/bundle.js.

This example application bundled amounts to 3294 bytes in total.

Syntax Highlighting

Syntax highlighting for HTML in ES6 multiline strings is probably not covered by your code editor of choice by default. If you're using Visual Studio Code, I recommend es6-string-html to add support.