Web Components Club

Skip to main content

007: Managing state

One of the first things that was a concern for me with web components was state management, or rather, a lack-of it. Managing state in a trivial manner is something I've become almost reliant on with the React and Vue work that I do and the thought of going back to DOM based state management was not even an option.

I'd been mulling around with some ideas, but I noted down that Redux works in a vanilla stack well, so I'd just go with that.

After some more thought though, I tweeted this:

I’ve been thinking about super lightweight JS things recently and I think a < 100(ish) line state system is doable.

Obviously no where near as powerful as Redux, MobX or Vuex, but handy for smaller projects.

I’m going to have a play and maybe write some stuff about it.

— @hankchizljaw on Twitter

I took that thinking further and created a prototype, which I sent to Chris Coyier from CSS-Tricks to see if he would publish a new tutorial about how to write a state management system from scratch. That got published and went down really well with folks. This, along with this system's successful use on mybrowser.fyi, which was my first proper project with web components (I'll make some notes on that in another article), made me think that others could benefit from a more "plug and play" version, so I made Beedle.

Making an open source library

I'm not overly strong with open source stuff, so I was nervous. The approach I took was to put together some really quick prototypes that would need state management and then refactor the existing system from mybrowser.fyi until it became self sufficient and useful for those prototypes.

I then documented the library up, wrote some tests and put it all out there. Hopefully it'll help some folks out — not just vanilla JavaScript fans, but also folks using React and Vue et. al.

Long-term concerns

I've enjoyed working with ES6 Modules, so creating and subsequently relying on an npm package is a concern now. There might well be a way to get the best of both worlds that I'm not aware of yet. It's something to add to the very long list of things to learn about. I'm also not averse to working with a lightweight bundler, like I made for Beedle.

I am happy that I can managed state with a dependecy that's less than 1kb when compressed 🙂