Easy to start
Writing your first component takes only 3 steps. You can follow these steps in your text editor by either 1) creating a new, blank HTML file or 2) opening an HTML file from one of your existing web apps or projects:
Step 1: Define Modulo
Step 2: Define Component
Step 3: Use Elsewhere
Next Step: Continue Learning
Modulo v0.0.72
Download directly:
⤓ Modulo.js
⤓ Starting Templates...
NPM
Run in shell to download template & start fresh:
npm init modulo
Why Modulo?
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 component middleware 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 or Vue" - Modulo is "batteries-included" and uses familiar terminology. 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 ways in at roughly 1500 SLOC, (mostly) 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!