Astro + Jails - A Perfect Match

Astro.js is a modern framework that prioritizes zero JavaScript by default for static pages, aiming to deliver faster load times and better performance.

It allows developers to build dynamic websites with minimal JavaScript, only loading it when necessary.

This "zero JavaScript" approach helps optimize user experience by reducing the amount of client-side code and improving page speed, while still enabling the flexibility to add interactivity when required. Astro’s focus is on efficiency and scalability.

But you might be wondering:

what can I use to make the static parts of my application more dynamic, taking advantage of Astro's island architecture concept?

---

Zero Client Javascript + Only Client Javascript

Jails is a library designed to bring best practices to software development, specifically in JavaScript for Fron-tend. It focuses solely on adding client-side functionality in the simplest and most elegant way possible, leveraging the full potential of the language.

Jails offers a range of features for your web components, allowing you to choose between building your entire application based on web components or creating solutions that can be distributed agnostically to other projects.

---

How about taking a quick peek?

The markup: src/pages/index.astro

---

---

<script>
    import { start, register } from 'jails-js'
    import * as helloworld from 'components/hello-world'
    register('hello-world', helloworld)
    start()
</script>

<hello-world>
    <h1>Hello World!</h1>
    <p>A simple Counter</p>
    <button class="btn add">+</button>
    <span html-inner="counter">0</span>
    <button class="btn subtract">-</button> 
</hello-world>

The Javascript: src/components/hello-world/index.ts

export default function helloWorld ({ main, on }) {

    main(() => {
      on('click', 'button.add', add)
      on('click', 'button.subtract', subtract)
    })

    const add = () => {
      state.set( s => s.counter += 1 )
    }

    const subtract = () => {
       state.set( s => s.counter -= 1 )
    }
}

---

TodoMVC Example

The Benefits

Astro was built to deliver zero JavaScript and maximize performance. On the other hand, Jails was designed to minimize JavaScript by separating HTML from its JavaScript logic, resulting in smaller bundles and more efficient, streamlined code.

Web components are a great solution for building more agnostic, cross-application compatible solutions, but developing applications with pure JavaScript can be time-consuming.

Jails strikes a balance between developing solutions directly, as we typically do with pure JavaScript, and leveraging the power of modern frameworks for DOM updates, local and global state management, and functionality sharing.

Check out a collection of examples using Jails here: https://stackblitz.com/@Javiani/collections/jails-organization

More: https://jails-js.org/

Thank you!