45 ms·
Overmind.js – Frictionless State Management
- deleted 6y ago[deleted]
- feoren 6y agoRead through the overview and the introduction and literally could not tell what Overmind was supposed to be helping with. Everything shown looks like just basic examples of using state normally in JavaScript. What does it actually do?
- Waterluvian 6y agoThese core application libraries all need a section: “how it differs from Vanilla|Redux|etc.”
- deepstack 6y agoLib like this or Redux seems like to try to better help people who don't have CS back ground to develop. Anyone who had CS training should be able to state management in plain JS or other general purpose programming language.
- sjogress 6y agoThe main boon of Redux et al in my experience is that they impose some rules as to where and how state changers are handled, meaning less weird inconsistencies when working in a team (especielly if the team members change over time).
- bauerd 6y agoJust because you can doesn't mean you should. A CS degree doesn't mean you won't reinvent the wheel poorly.
- Udik 6y agoJust to state the obvious: there isn't much to reinvent in a wheel, but certainly it's not a one-size-fits-all kind of object. That wheel might have been designed by a team of brilliant engineers and built with the latest super materials, but if it's a race car's wheel I wouldn't mount it on a bicycle.
- nkozyra 6y agoI don't recall my cs program actually dealing much with state management as a standalone concept. I feel like you could take this stance on almost any framework or library.
- concerned_user 6y agoProbably because JavaScript as it is used in browsers and especially React is asynchronous and in CS you traditionally study classic programming languages which are mostly synchronous code, even if it is multi-threaded you still command where and how access to shared data happens most of the time. In JavaScript and React asynchronous aspect is mostly hidden from you hence need for things like Reudx.
- nkozyra 6y agoNo I understand the concurrency challenges with state, my point was that's not really a topic that's front and center.
- onion2k 6y agoRedux was first released more than 5 years ago, it's had more than 3000 commits merged from more than 800 developers, and there have been 69 releases. That's a lot of learning about how to do state management in JS. I would argue that's beyond what an individual developer could ever do. Mobx has similarly large numbers - almost 3000 commits from more than 400 developers. No doubt other popular state libraries also have those sorts of numbers. If you need a general state management library you'd be crazy to write your own. You might be able to do 90% of what the big, popular libraries have done, but that's just settling for something 10% worse for no good reason. Why give up all that knowledge, testing, and creativity when you can build on top of it? Let other people make the mistakes.
- christophilus 6y agoThe facts are correct, but your conclusion doesn’t follow.
- deepstack 6y agoHaving more developers, commits and code doesn't mean better software! In general CS course I took in Uni over 20 years ago, one learns about data structure and state of an application with multiple threads. It is something 'web developer' lacks as web was originally meant to be a document based. I am not saying developers can't pick that up during their development career, it is just that the bar for being a developer has being simnifically lowered in the last few years. It turned more into a buzz word now days.
- onion2k 6y agoIt is something 'web developer' lacks as web was originally meant to be a document based. This is unrelated but it's something that annoys me. Even in Tim Berners-Lee's original memo proposing the web he stated "Hypertext allows documents to be linked into "live" data so that every time the link is followed, the information is retrieved. If one sacrifices portability, it is possible so make following a link fire up a special application, so that diagnostic programs, for example, could be linked directly into the maintenance guide." The idea that the web could be about more than static documents was there right from the beginning. [1] https://www.w3.org/History/1989/proposal.html https://www.w3.org/History/1989/proposal.html - Live Links section
- bfrydl 6y agoI think the people disagreeing with this greatly overestimate what is actually contained in a library like Redux. An entire ecosystem sprang up around it and most of it is completely unnecessary and overly complex. The base library itself is almost nothing at all and should not be hard for anyone with experience to independently create.
- CGamesPlay 6y agoThis appears to be a competitor to Redux, but with more batteries included? I was disappointed to see this wasn't answered in the FAQ--might be worth mentioning at least there, if not as an entire article on the site. For a great example of this, see the Pulumi docs. They list many potential alternatives and why you might choose one or the other. https://www.pulumi.com/docs/intro/vs/ https://www.pulumi.com/docs/intro/vs/
- tsujp 6y agoSide note: thank you Pulumi looks great, been wracking my head around reducing the _insane_ verbosity of using HCL for Terraform.
- baron816 6y agoIf you want a really frictionless state management library for React, please try out my library https://github.com/baron816/use-structure https://github.com/baron816/use-structure It lets you make state updates using native JavaScript mutation APIs. It uses Proxies to convert those mutable updates to be immutable so that your component updates correctly. This will work: ... const arr = useStructure([]); ... <button onClick={() => arr.push(1, 2, 3) }>Add value</button> But you could use deeply nested arrays/objects/Maps/Sets. Or you could use your own class with its “mutating” methods. If you know basic JS, you should be able to use it without worries.
- wereHamster 6y agoSo… like immer / use-immer?
- raoulj 6y agoIt doesn't look like it (from what I gather about `use-immer`). What's being suggested is updating React state via a mutable API on the data value itself. `use-immer` wraps the useState/useReducer functional updaters with a call to immer, whereas `use-structure` suggests mutating the data, which is what every React-beginner instinctively tries to do when they first get started with React. Same idea of using Proxies as immer though. This is really interesting! Great idea.
- splendidHaiku 6y agoI thought about changing my slightly verbose react state updates to immerjs but your lib looks even simpler. I dont think it can be simplified any further, really great, thank you.
- czynskee 6y agoThis looks pretty cool, I love your use of proxies. Along with that though, I'm curious if you've done any performance testing comparisons? This could very well be out of date now but at some point I read that accessing properties on a proxied object are like 600 times slower than a regular JS object. I wonder if that could be a bottleneck if you're doing state updates on, say, scroll events or something. I've been able to notice performance hiccups in these cases even just using React state. Of course debouncing usually helps.
- inglor 6y agoCan someone explain the benefit of using this over the (already existing and popular) reactive libraries? I've found a combination of MobX/RxJS to be a good fit for most applications that need reactive state and don't use a framework (like Vue or Svelte) that already ships with reactivity. Looking at this - it looks very similar except that it requires a global mutable variable (which I'm not a fan of, kind of like MobX state tree but without the serialization fun). Someone please sell me on this :]?
- progx 6y agoI see no advantage over Svelte stores. Did I missed something?
- christianalfoni 6y agoHi there and thanks for the feedback on "Why even choose this". Will update the front page! But to answer your question. The main reason Overmind and its predecessor Cerebral (https://cerebraljs.com/ https://cerebraljs.com/) was developed is application insight. The complexity of what we build on the web these days is way beyond the scope of what our brains are able to comprehend. What effects are triggered and what state changes are made is difficult to infer reading code and using low level debugging tools. Basically understanding what actually happens when you open the browser and interact with the application. So the main reason Overmind should catch your interest is its debugger. It is not there just to debug errors, it is there to constantly give you a mental image of the whole application at the abstraction level of the application itself. The second reason Overmind was developed is to reduce the amount of concepts of APIs required to get going with an application. Most developers, arguably, think about code imperatively. "I have this thing I want to do, let me just do it". That is why Overmind has a base concept of an "action", where you can access any state, effects and other actions you have defined in your application... and just do it. This, arguably, lowers the threshold of understanding and scaling up your app. When you get into concepts related to time complexity Overmind provides operators. When you get into concepts related to state complexity Overmind provides statemachines and statecharts. It is important to understand that Overmind does not let you just free wield state changes. You can only run state changes in actions and unlike Mobx you can use async code as normal. The state changes are bound to the action execution itself, again creating a more straight experience with less concepts to learn. The third reason is TypeScript. We have all felt the pain of Redux boilerplate and with TypeScript it does not become better. Overmind has the goal for you to spend as little effort as possible telling TypeScript about your application, it should just understand it. Basically help developers move to TypeScript by gaining as much benefit as possible with as little typing as possible. Now, Overmind was not built to send a message that mobx-state-tree and redux are bad solutions. It is intended to be a healthy alternative in the ecosystem showing that controlled mutability is a valid approach and hopefully be an inspiration that we can push visual tooling way beyond what we are doing currently. To get more details on controlled mutation VS value comparison (immutability) I wrote an article here: https://itnext.io/updating-uis-value-comparison-vs-mutation-tracking-9f6fe912dd9a https://itnext.io/updating-uis-value-comparison-vs-mutation-...
- cannedslime 6y agoSeems like every new JS framework comes with new ways to over engineer a simple list / todo app. Joking aside, im sure this is useful for state management, where it matters.
- christianalfoni 6y agoExactly! :) It is very difficult to convey "When does this solution pay back its cost". If you can get by with only React as state management, great. There are so many factors that ties into friction. Everything from the experience of the team, preferences, size of project, how clear the domains of the project is, ability to separate and isolate, typescript or not etc.
- dazhbog 6y agoDid anyone use freezer.js before?
- fouc 6y agocheck this out http://meiosis.js.org http://meiosis.js.org
- Udik 6y agoSilly question: is state management used outside of the frontend world? The last time I developed desktop apps (it was a long time ago) no-one had ever felt the need to remove state from the individual components and add it to a global store. So, do very complex desktop applications use redux-like state management nowadays?
- eliseumds 6y agoLots of complex applications have always been using state machines, this is not a concept that originated from web front-end development. You can find them in Delphi, Visual Basic, QT, etc.
- Udik 6y agoA state machine is a much more general concept and has many different uses.
- bufferoverflow 6y agoApplications that need to have state, surely have it. Most applications store their state in sessions / memcached / redis / databases. But, of course, some apps must have real time state management that is shared among thousands of users. Think high-traffic low-latency trading engines. Think multiplayer games.
- Udik 6y ago> Applications that need to have state, surely have it. You seem to believe that state is synonymous to "reactive store". Also, sessions/ memcached/ dbs have little to do with application state management.
- ramoz 6y agoI've built something similar to this in a large app with a lot of networking/async data updates... except these synchronous state mechanisms and parent to child pass-downs are still super annoying with React. I ended up with a couple global queues (custom, async data pub/sub, similar to Rx) that each component could to subscribe to. A more reactive state management makes things a lot more simple. Only bare-minimum stateless children components (like buttons) are passed props with parent state.