Modulo.js

After years of development as a side project, and now months of using it on production sites, Modulo.js hit Alpha v0.0.64 this week I'm finally getting time to introduce to the world! So, hello world, meet Modulo!

Anyone into trying a new, fun little open source framework with a tutorial and lots of documentation? Read on!

In a nutshell, Modulo.js is: React/Vue in 2000 lines or less

Modulo.js is a single 2000 line file without any dependencies. It is HTML-first, and browser-first, and integrates with only a few lines of code in any HTML file. It immediately enables you to write productive Web Components. It has most of the features you'd expect from frontend or JAMStack SSG stacks with React.js or Vue.js including state, props, directives, liquid-style templating, data binding and reactive forms, global store and sub/pub, server-side rendering, hydration, DOM reconciliation tools, and more.

Learn more, and play around with the online, interactive tutorial here: ModuloJS.org

Introducing: Modulo.js

Getting started

Using Modulo, there's no "npm install". Just try pasting this into a file, saving it as HTML, and continue developing:

<script Modulo src="https://unpkg.com/mdu.js">
    <Component name="Greet">
        <Template>
            <h2>Hey there, <slot></slot>!</h2>
        </Template>
    </Component>
</script>
<x-Greet>Modulo</x-Greet>

Getting started: NPM

Of course, if you prefer NPM, try running this (also no previous install needed):

npm init modulo

It's like Vue.js or React.js - but simpler

I wanted Modulo to be easy to pick up for other frontend developers, and I want students who learn with Modulo to feel comfortable if they later end up using React.js, Vue.js, or Svelte:

<!DOCTYPE html>
<template Modulo>
  <Component name="HelloCount">
    <Template>
        <button @click:=script.countUp>Hello {{ state.num }}</button>
    </Template>
    <State
        num:=42
    ></State>
    <Script>
        function countUp() {
            state.num++;
        }
    </Script>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-HelloCount></x-HelloCount>

Super easy declarative API templating to save dev time!

Most importantly, I want Modulo to be a declarative, ultra-light, expressive, and easy to use framework, to rapidly assemble sites in a modern and performant way.

For example, look how easy it is to add an API. It's all declarative, no custom JavaScript code required:

<!DOCTYPE html>
<template Modulo>
  <Component name="EmbedAPI">
    <Template>
        <strong>Name:</strong> {{ staticdata.name }} <br />
        <strong>Site:</strong> {{ staticdata.homepage }} <br />
        <strong>Tags:</strong> {{ staticdata.topics|join }}
    </Template>
    <!-- Use StaticData CPart to include JSON from an API or file -->
    <StaticData
        -src="https://api.github.com/repos/modulojs/modulo"
    ></StaticData>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-EmbedAPI></x-EmbedAPI>

Alpha 64 - Ready, or not?

This newest version might still have some bugs or "gotchas" -- hence the "alpha" designation -- so use with that in mind. However, it is totally usable for small-to-medium JAMStack-style sites -- and, in my biased opinion, actually very pleasant to use, as over the summer I've used it now to power about half a dozen public or production sites for different clients / projects. So, if you like it, try using it and let me know any bugs and gotchas!

Thanks for reading, and I hope you enjoy using my framework and learning material. Looking forward to seeing what you all might build with it! 👷 🏗️ 📦

Blog

Modulo.js - A full-featured Web Components framework in only 2000 lines

michaelb