DEV Community

Cover image for Want to help with Cardboard? JS/TS Vanilla Reactive Framework
Keff
Keff

Posted on

Want to help with Cardboard? JS/TS Vanilla Reactive Framework

Intro

What's up, I'm Manolo from Spain! I've been a professional developer for almost a decade. I've worked professionally for almost all that time. I'm now currently unemployed and have started to work on some side projects.

I'm in the process of building Cardboard on my own, as a side project.

It's a very simple, yet powerful reactive framework, to create web applications without the need to write any HTML. You don't need to build, use JSX, or compile. It works out of the box, and it's plain JS. Similar to VanJS in philosophy but with another flavour, and different features.

Cardboard provides most stuff other bigger frameworks offer:
Here is a list of some of the features it offers (there more though):

  • [showing/hiding elements]: You can conditionally add and remove items from the DOM whenever a state changes.
  • [enabling/disabling elements]: enable and disable elements manually, or based on a state.
  • [add/remove classes]: add and remove classes from elements manually, or based on a state.
  • [add/remove attributes]: add and remove classes from elements manually, or based on a state.
  • [templates]: It allows you to create text templates that interpolate some state values, and update whenever the state changes.
  • [custom reactions]: If there isn't a built-in method that handles some reactions for you, there are methods that allow you to build your own.
  • [reusable components]: You can create reusable components, like in any other framework.
  • [CSS in JS]: You can create style tags, and write the CSS directly as a JS object.
  • Typed: Cardboard aims to be 100% typed, meaning it will suggest any suggestable properties, methods, etc...(i.e. style properties, etc...)

Here's a sneak peek

const Counter = () => {
  let counter = state({ count: 0 });

  return button()
    .text(`Clicked $count times`, counter)
    .clicked((_) => counter.count++);
};

// Counter will be added to the body, as it's the attached tag.
attached().append(Counter());
Enter fullscreen mode Exit fullscreen mode

That's just the peak of the iceberg, for a better vision of what it does, head over to the repo and check out the README and examples!

It's the first time I've shared a project in Hacktoberfest, but I thought that Cardboard could be a good candidate.

Pledge

I would love to have some help with it, as I think it can be very powerful.

You can help me out in a couple of ways:

  • Comment in this post and give me your feedback on Cardboard
  • Go over to the repo and give it a star, so more people can find it!
  • Test it and report bugs and feature requests!
  • Help improve the docs and examples
  • Open your IDE and start contributing to it. There are some issues open, but feel free to work on other stuff. Just drop a PR and we will take a look!

That's all! Hope to see you around. And happy coding :)

Top comments (0)