📦 Cardboard.js: Building a Simpler, More Intuitive Framework

Hey there! Hope you’re having an amazing week! 🚀

If you’re new here, let me introduce you to Cardboard.js—a lightweight, reactive web framework that lets you build dynamic web apps with just JavaScript or TypeScript. No HTML templates, no unnecessary boilerplate—just clean, reactive code.

Curious? Check out the repository to dive right in!

This post is a devlog and changelog about the latest updates to Cardboard.js. It’s all about making the framework more intuitive, developer-friendly, and powerful. Let’s dive into what’s new and why it matters!

🚀 The Big Picture: Making Names Make Sense

One of the biggest challenges in any framework is naming things. Names should be intuitive, descriptive, and align with industry standards. In this update, I focused on renaming key concepts in Cardboard.js to make them easier to understand and use.

Here’s what’s changed:

🏗️ Mount Points: A Cleaner Way to Attach Elements

Previously, Cardboard used the term attach for managing where elements are added in the DOM. While functional, it wasn’t very intuitive. So, I’ve renamed it to mount points, a term that’s more familiar to developers.

What’s New:

• attach → mountPoint
• detach → restoreMountPoint
• attached → getMountPoint
• tag.attach → tag.mount

New Utilities:

• resetMountPoints() → Resets to the first mount point.
• clearMountPoints() → Clears all mount points.
• withMountPoints(tag, cb) → Temporarily sets a mount point for scoped operations.

Before and After:

Here’s how the new API makes your code more readable and intuitive:

Before:

attach(div1);
p.attach('Child of div1');
attach(div2);
p.attach('Child of div2');
detach();
p.attach('Child of div1 again');
attached().append(p('child of div1'));

After:

mountPoint(div1);
p.mount('Child of div1');
mountPoint(div2);
p.mount('Child of div2');
restoreMountPoint();
p.mount('Child of div1 again');
getMountPoint().append(p('child of div1'));

🔄 Observables: A More Familiar Name

Previously called Consumables, these reactive objects hold values and notify listeners when the value changes. While the functionality was great, the name wasn’t. So, I’ve renamed them to Observables, a term that’s widely recognised in the developer community.

Why This Matters:

Using familiar terminology reduces the learning curve and makes the framework more approachable for new users.

🧠 Computed Observables: Smarter State Management

Cardboard now supports computed observables, which let you derive new reactive values from existing ones. For example:

const count = createObservable(10);
const isAbove18 = compute(count, (newVal) => newVal >= 18);

Previously, this was called intersect, but I’ve renamed it to compute to align with industry standards.

✨ Built-in Compute Helpers: Now Even Better

Cardboard offers a set of pre-built compute helpers like greaterThan and isEmpty. These were standalone functions, but now they’re available as methods directly on Observables for cleaner, more readable code.

Before:

const isAbove18 = greaterThan(age, 18);

After:

const isAbove18 = age.greaterThan(18);

🔄 Lifecycle Events: Standardized Names

Lifecycle events have been renamed to align with common conventions:

• start → mounted
• removed → unmounted
• beforeRemove → beforeUnmounted

🎯 Why These Changes Matter

At first glance, these changes might seem small. But they make a huge difference in how intuitive and enjoyable Cardboard.js is to use. By adopting familiar terminology and simplifying APIs, I’m making it easier for developers to pick up the framework and start building amazing things.

🌟 What’s Next?

I’m aiming to release the first stable version of Cardboard.js before the end of the year! There’s still a lot to do, but I’m excited about the progress so far.

If you’re interested in contributing or just want to follow along, check out the GitHub repository. Every star, issue, or pull request helps!

❤️ Join the Community

If you find Cardboard.js interesting, I’d love your feedback! Whether it’s trying out the framework, reporting bugs, or suggesting features, your input is invaluable.

👉 Visit the GitHub Repository

Let’s build something amazing together!