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.
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'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 🙂