Keeping things lean with js library.

VanJS

VanJS: World’s smallest reactive UI framework - Everyone can build a useful UI app in an hour

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello = () => div(
  p("👋Hello"),
  ul(
    li("🗺️World"),
    li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
  ),
)

van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())

HTMX

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

1
2
3
4
5
6
7

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

Lit

Lit is a simple library for building fast, lightweight web components.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import {html, css, LitElement} from 'lit';

import {customElement, property} from 'lit/decorators.js';


@customElement('simple-greeting')

export class SimpleGreeting extends LitElement {

  static styles = css`p { color: blue }`;


  @property()

  name = 'Somebody';


  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}

AlpineJS

A rugged, minimal framework for composing JavaScript behavior in your markup.

Strawberry

Zero-dependency, build-free framework for the artisanal web.

1
2
3
4
5

<p sb-mark="message">Placeholder</p>

<script>
  data.message = 'Hello, Strawberry!';
</script>

TwinSpark

Declarative enhancement for HTML: simple, composable, lean. TwinSpark transfers lots of the common logic from JS into a few declarative HTML attributes.

Tram-Lite

Tram-Lite is a library that helps developers build native web-components, and makes building simple native javascript applications easier and more elegant!

1
2
3
4
5
6
7
8
9

define`
  <custom-title color="blue">
    <style>
      h1 { color: ${'color'} }
    </style>

    <h1>${'title'}</h1>
  </custom-title>
`;

1
2
3

<body>
	<custom-title title="Welcome to Tram-Lite!"></custom-title>
</body>

Reken

Fast, reactive, HTML compliant web pages without virtual DOM overhead or build tools. Reken Dutch singular verb for calculate

CrankJS

Crank is a web framework where components can be defined with sync functions, async functions and generator functions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import {renderer} from "@b9g/crank/dom";

function Greeting({name = "World"}) {
  return <p>Hello {name}.</p>;
}

function RandomName() {
  const names = ["Alice", "Bob", "Carol", "Dave"];
  const randomName = names[Math.floor(Math.random() * names.length)];

  // TODO: Uncomment the button.
  return (
    <div>
      <Greeting name={randomName} />
      {/*
      <button onclick={() => this.refresh()}>Random name</button>
      */}
    </div>
  );
}

renderer.render(<RandomName />, document.body);

UnPoly

The unobtrusive JavaScript framework for server-side web applications

Unpoly enables fast and flexible frontends for server-rendered HTML views. It has no dependencies and plays nice with existing code

*