modulo.js

A small, modular JavaScript Web Component framework

Beginner-friendly features inspired by React, Svelte, and Vue.js
Only 2000 lines of dependency-free, self-building JavaScript
A "no fuss" drop-in for existing web apps or JAMStack static sites

Zero set-up - Like the "golden age" of jQuery, just drop it into any HTML file. Unlike jQuery, that 1 file packs in many of the creature-comforts of a modern component framework, without any dependencies or new syntax to learn. You can even compile to a single JS file, directly from your browser!

A gentler learning curve - Modulo's declarative, synchronous HTML-first approach was designed to be easier for coding newbies to pick-up—in fact, useful components can be developed without writing any JavaScript code!

~~Progressive Web Apps~~ Progressive Enhancement - Modulo makes few assumptions, and renders components mixed with plain HTML for easier integration into backend apps. SPA's and PWA's are fine and all, and Modulo could be used for these as well, but what about all our existing server-side apps in Ruby on Rails, Python, Go, or that one home-grown PHP monster that will never go away? Sprinkle in some Modulo components to make your "traditional" web apps shine.

Component Parts - Modular "Lego blocks" for your components! Combine Script, Style, State, Props, and Templates to make components that with these features.

Everything is transparent and swappable - Component Parts (CParts) are a flexible form of component middleware: You can create custom CParts to support your backend APIs, "mix and match" your favorite JS templating languages (e.g., JSX or Handlebars), or fine-tune DOM-resolution behavior, either globally, or on a per-component basis. Lifecycle callbacks are especially powerful, allowing you to hook your own code into the DOM or any steps of the rendering process.

A novel approach to component development - Modulo's separation of CPart development from component development allows JavaScript developers to write pure JS to wrap APIs, and component developers to tie it all together with "low-code".

"It's like React" - Modulo is "batteries-included" to function like React.js or Vue.js. You get encapsulated components with state management, two-way data binding, props, computed values, smart DOM resolution, event directives, and more. You even get a simple importing and namespacing system, which can "self-pack" your components into a single JS file!

Clean & concise - The code-base of Modulo itself is intentionally kept short & sweet: It's roughly 1500 SLOC, 80 char line limit, 4 spaces of indent, and a low-complexity imperative style. When something goes wrong (which it probably will since it's new), it's easier to "git blame" Modulo.

A basis for whatever comes next - Writing your own framework? Modulo's core for loading & mounting CParts is only ~500 SLOC. Read the source code, fork away, and swap the "batteries-included" for your own!