DEV Community

Javascript Proxy Magic: How I built a 2kB state manager with zero dependencies (and how it got me two different job offers)

Lev Nahar on November 15, 2023

What is a state manager exactly? A state manager is a smart module that is capable of retaining session data (of an application or web application)...

Read full post

Sultan • Nov 16 '23 • Edited

I did a similar library.

import {createState} from '@holycow/state'

// 👇 your store is a hook!
const useUser = createState({
  id: 1,
  name: 'Homer Simpson',
  address: {
    house: 742,
    street: 'Evergreen Terrace',
  },
})

const UserName = () => {
  const {name} = useUser() // 👈 value from the state
  return <div>{name}</div>
}

const {id, name, address} = useUser 
// any values 👆 from the hook can be used outside of components

Lev Nahar • Nov 16 '23

Looks great! Did you also use Proxies?

Sultan • Nov 16 '23

Yes, I used proxy too.

Mike Pearson • Nov 15 '23

MVC doesn't scale. Redux has boilerplate, but it scales.

Lev Nahar • Nov 15 '23

I never said this should replace Redux :) I also don't know if this scales, but complexity wise Redux doesn't have to scale, it's extremely complicated from the get-go.
There is beauty in simplicity.

Mike Pearson • Nov 15 '23

Come on. Complexity isn't binary. Let's say Redux is 3 out of 10 complex. This solution is 1 out of 10 complex for simple apps. Redux will grow to 5 out of 10 complex maximum, well this will grow to 10 out of 10 complex.

And when you say this doesn't replace Redux, do you mean they should use this inside a reducer?

Lev Nahar • Nov 15 '23

Even if this could grow to a "10 out of 10" (whatever that means) complexity, you sure seem to have a very emotional reaction towards a state manager PoC that nobody uses. Have fun with that. Here is a quote from the readme:

"This project is not a replacement for other state management libraries, it's here to give a tiny, native solution for projects that wish to stay relatively small, and still enjoy state management".

Mike Pearson • Nov 15 '23

Don't worry, people will use this. They thought Valtio was a good idea github.com/pmndrs/valtio

I'm not emotional, just direct. I have experience with dozens of state management libraries and I see what happens with each of them. People misuse Redux and it actually does turn into spaghetti code too. I'm about to write an article about that.

I just think it's a false trade-off between simplicity and scalability. I really don't like that the response to unidirectional data flow is to toss it out rather than improve upon the existing tools.

And it doesn't matter what your README says, if two things solve the same problem, even different sides of it, they're going to compete. People will use one over the other. They are substitutes. In a year I bet we see an article like "Why I chose VSSM over Redux" (or Jōtai or Zustand etc). Actually, that's kind of what this article is already.

Lev Nahar • Nov 15 '23 • Edited

If it doesn't matter what my readme says than it doesn't matter what I say.
Have fun with your experience with state management libraries, I will just keep doing me :)
P.S English is not my native language, not everybody is from the US.

Mike Pearson • Nov 15 '23

I didn't notice any English mistakes.

Creating a state management library takes work and I respect that. It's a great learning exercise as well. But beyond that, you might be wasting your time, and I say that out of empathy. There are a lot of simple solutions out there already, and I would in particular recommend looking into Valtio and Jōtai. I created StateAdapt, but if bundle size matters most to you, don't use it - it's around 10kb. But if bundle size matters most to you, I'd recommend using SolidJS or Qwik, since both have built-in mechanisms somewhat similar to what you've created. I think Qwik even uses proxies too.

Dusan Petkovic • Nov 16 '23

We centrally don't need another state management library, but its good to explore different solutions and implementations, which Is what i believe this VSSM is, its perfectly fine and a great way to learn, and its not using anything other than what JS does natively.

Uriel dos Santos Souza • Nov 16 '23

Mike Pearson • Nov 16 '23

When you've never touched a complex application

Jorge Del Castillo • Nov 16 '23

Sorry @mfp22 using your own phrase just being direct. You are wrong. Comparing this in terms of complexity with redux and stating that at most redux is a 5/10 in a complex application is just an incorrect fact. Redux is well known to be one of the least liked solutions due it's complexity. Even after you understand it and I personally like it and used to promote it before will always known that by many developers it is not a liked solution because of it's complexity.

Also know that you did not share your opinion alone it is clear it was an emotional response to protect redux which is completely out of the scope of the conversation in this post. I suggest next time don't overdue it and just share

Mike Pearson • Nov 16 '23

Redux was mentioned in the 2nd paragraph. Redux has limitations. If you think Redux gets beyond 5/10, I look forward to you finding out what 6+ actually looks like, because it's only possible when event handlers have to do too much work. This is always happens when state update logic cannot be colocated with state declarations. It's the reason Flux was created. I recommend watching the original Flux + React talk a few times. Just because you haven't encountered the same problems as the Facebook team yet, doesn't mean you won't.

Mike Pearson • Nov 16 '23

(Also I never use Redux anymore. It's just better than the knee-jerk reactions to it that never tried to understand what problems it was trying to solve.)

Lev Nahar • Nov 16 '23

Mike what’s the point of arguing about such opinionated things? You’ve made your point, too bad it was not in a very nice way, but we will get over that. What is the purpose of this?

Mike Pearson • Nov 16 '23

It must be nice not being opinionated like me. I can't help that when I see "Redux is too complicated" I get flashbacks from the battles I've fought in dozens of MVC codebases. I'm just sharing what I've learned. I would appreciate it if I were you. It's less nice to say nothing. I'm done. Good luck.

Lev Nahar • Nov 16 '23

Alright mate

Ivan Jeremic • Nov 19 '23

Valtio over Redux for any app size I disagree on all points from @mfp22

Mike Pearson • Nov 19 '23

Give me any complex app on GitHub using Valtio and I'll make it simpler. By complex I don't mean "big" like 30 pages - I mean pages with multiple kinds of events and effects, maybe heavily asynchronous. Maybe a real-time dashboard or something. I'll diagram the data flow and show that the number of relationships and things to keep track of decreases. I'll use StateAdapt, which is more unidirectional than Redux.

Junior Nascimento • Nov 20 '23

Anything that uses redux is already doomed

Mike Pearson • Nov 20 '23

Sure Jan

Rich Winter • Nov 16 '23

Something I notice is that you may be picking out only one value, but you are always returning the entire state from the getter function. I get that you're not working on it any more, but I'd look up "dependency injection" to specify the data you want in the getter function.

Lev Nahar • Nov 16 '23

I agree, it can definitely be improved (in more than one way).
Before writing this article I went over the code for a few minutes and noticed some issues.
I don't think I will be working on it, but if you really feel like it I don't mind letting others contribute. (Or we can just leave it as it is and take mental notes, lol).

Steeve • Nov 16 '23

I get PTSD just thinking about all the unnecessary complications - dispatchers, reducers, middleware! I just wanted to declare some variables, please make it stop.

I felt the same haha. We just want something simple, 0 deps, and performant 🤷‍♂️

Good article; keep building and creating!

Adaptive Shield Matrix • Nov 16 '23 • Edited

Jotai and Zustand - both manage to be simple, 0 deps and performant.
And they scale as good as Redux as well.

Steeve • Nov 16 '23

Thanks for sharing!

Lev Nahar • Nov 16 '23

Thanks for the support !

Peter Vivo • Nov 15 '23

qwik framework is also use Proxy behind of scene with useStore , this is one of main reason why I preferred compared react. But my daily based jobs depend on react and I think for a couple of years React stay as leading framework/library for UX.

Lev Nahar • Nov 15 '23

Heard about qwik, I'll have to check it out!

Friday candour • Nov 16 '23

💪💪💯. State management libraries don't have to be so complicated.

For the react thing, i am one of the the software engineer behind the web development framework.
github.com/FridayCandour/cra...

Don't forget to share.

Slobi • Nov 15 '23

I wonder why a Proxy is not built into the JS object, it is a bit limiting. There is a need, as in the Pisma project, which essentially made it but with an extra build step. Python has setattr and getattr for this purpose.

Lev Nahar • Nov 15 '23

Yea, there is definitely a need. I would actually love to see that in the future.

Slobi • Nov 15 '23

By the way I like your lib style, JS with d.ts 🤩 interesting and original approach, well done 👏 I like that you have subscription implemented I would put more thought into definig subscriptions, it looks a bit ambiguous.

Lev Nahar • Nov 16 '23

Thanks! I honestly dislike TS quite a lot but it has it’s uses. The subscription model is definitely ambiguous, far from perfect. Honestly if I were to rewrite it today I’d probably do it differently. Either way, this lib is more of a novelty than anything at this point 🙂

Manish Mehra • Nov 15 '23

To showcase your passionate projects, you have to land on an interview first and how do you that in 2023? 😆

Nice take. Passion will push you far in programming world. Keep building things and improving your craft. The job will find you.

Lev Nahar • Nov 15 '23 • Edited

Haha yeah, you sure have to land an interview first.
I think that it is really hard for beginners and graduates, for sure. But do what you have to do, upsell yourself. Send messages to employees, to HR, don't be shy! Be professional and always interact with other people in the community.

Once you get to somebody on the phone, act like you are the most sophisticated web developer out there.

Just make sure you do not lie, and remember you do have to know enough to give off a confident vibe, but when you get the first offer it's much, much easier.

Dusan Petkovic • Nov 15 '23

You never know, maybe it becomes popular one day :)

Do you think it can be done by removing the additional createState function, and just initialize it with createVSSM

What do you think about me contributing just for the fun of it?

Lev Nahar • Nov 15 '23 • Edited

Feel free to, could be fun 🙂
I think it’s possible!

Jorge Del Castillo • Nov 16 '23

Amazing article

Karishma Shukla • Nov 16 '23

Great work 💯

Lev Nahar • Nov 16 '23

Thank you!

K.Mohith Gupta • Nov 15 '23

Any plans on going deep dive to explain the implementation? Would really love to know as I can't seem to understand most of the logics haha ;)

Lev Nahar • Nov 15 '23

I wouldn’t mind writing such a post (I have to refresh my memory as well, haha). Do you think others will also find it useful?

Iskandar Reza • Nov 16 '23

I would find it useful. As a matter of fact just a couple days ago I was looking for a super simple state manager to use in a project I'm working on. I ended up just using session storage for now coz that was even simpler for the task I had, but I might need to upgrade to a better system later.

K.Mohith Gupta • Nov 15 '23

Of course, this might help us understand the basics of how state management actually works. Instead of blindly using it, we should understand it I believe.