Live data from Hacker News

Show HN: Cami.js – A no build, web component based reactive framework

github.com

1–10 of 36 posts

Show HN: Cami.js – A no build, web component based reactive framework

#1
Hi Everyone! My main motivation for making this was that I wanted something as powerful as Svelte or React but I wanted no build steps, no JSON API, and I wanted something as close to vanilla js as much as possible. I'm mainly a backend developer, and I wanted to simply return html with some interactive islands when I need to (whose components get 'hydrated' with by backend language's templates).

Some key ideas:

• It's centered around light dom web components • Uses a "reactive element", which uses observables for fine-grained reactivity • Rendering is done through lit-html's tagged templates • A pub/sub store • Easy immutability using immer (it powers the observable updates & also the reducers)

It's my first 'serious' library that I'm using in some work prototypes, and it's also my first 'real' open source project, so comments & feedback would be great!

Show HN: Cami.js – A no build, web component based reactive framework
github.com

Re: Show HN: Cami.js – A no build, web component based reactive framework

#3
Looks good! FWIW I always felt the observable pattern much more intuitive than the redux/reducer style. Something like https://mobx.js.org/

Things get hairy in both, but redux pattern feels so ridiculously ceremonial all to effectively manage a huge global state object with a false sense of "purity".

Observables otoh say "fuck it, I'm mutating everything, do what you want with it".

Re: Show HN: Cami.js – A no build, web component based reactive framework

#6
post #2

Seems like Runes (Svelte 5). Does this support SSR for custom component ?

Yes, Cami uses fine-grained reactivity, so it’s a cousin of similar solutions like Solid signals, Svelte runes, Knockout / and MobX observables.

It doesn’t support SSR as it aims to be backend-agnostic (i.e. you can use python/ruby/haskell, and you can copy+paste the Cami module with no build step and you can start using it).

If you want SSR for the SEO benefits, I think it’s better to render the text-heavy parts as normal HTML for indexing with Google, and then mount the interactive parts with Cami / web components (i.e. “islands architecture”: https://www.patterns.dev/posts/islands-architecture)

Re: Show HN: Cami.js – A no build, web component based reactive framework

#7

this seems pretty cool - I love me some `lit-html`. How do you feel about Cami versus straight up Lit?

You can consider Cami as the light dom sibling of Lit (which uses shadow dom).

Cami loses out on slots & style encapsulation, but you can style Cami components with normal / global css like it’s part of the normal dom. And since there’s no shadow dom overhead, it’s more performant and there is no FOUC if you load CSS in .

Re: Show HN: Cami.js – A no build, web component based reactive framework

#8
post #3

Looks good! FWIW I always felt the observable pattern much more intuitive than the redux/reducer style. Something like https://mobx.js.org/ Things get hairy in both, but redux pattern feels so ridiculously ceremonial all to effectively manage a huge global state object with a false sense of "purity". Observables otoh say "fuck it, I'm mutating everything, do what you want with it".

Thanks! Cami is technically a combination of both. I like the intuitiveness of observables so that’s used:

```

// define observable

this.count = this.observable(0);

// getting

this.count.value;

// setting

this.count.update(value => value + 1);

```

But it also has a redux-like pattern where you can dispatch actions and register reducers with far less ceremony:

```

// define store

const todoStore = createStore({ todos: [], });

// register reducer / producer

todoStore.register('add', (store, payload) => { store.todos.push(payload); });

// subscribe component to store

this.todos = this.subscribe(todoStore, 'todos');

// dispatch

this.dispatch("add", newTodo);

```

It looks like it’s mutating, but both the reducers and update() uses immer* under the hood, so we still respect immutability under the hood.

Cami supports redux devtools so you can use that for time-travel debugging too.

—-

* https://github.com/immerjs/immer

Re: Show HN: Cami.js – A no build, web component based reactive framework

#9

this seems pretty cool - I love me some `lit-html`. How do you feel about Cami versus straight up Lit?

Wondering the same thing. What is the value proposition versus using other popular web component libraries like Lit?
Post reply on HN