Example apps / todomvc about overmind HOT 15 CLOSED

Thank you @100ideas for opening this issue to discuss, maybe even in a broader sense, what we can do, to understand overmind and its concepts better, because, IMHO it is really worth it. Now why is that so?

I have been following @christianalfoni and the great guys around him, well, actually for a long time already since they started the development of Cerebral. They are a group of very creative and ambitious people, who are doing one main thing all day long since these days, namely to think about the implications of state management and how it could be done better.

Now there's one caveat, when someone is creative: Things are changing all the time - they get better and better, but they change. So the challenge in software development here seems to be, to create an api, that keeps its promises for a longer time, while not having (too many) breaking changes. You need to have a very clear picture of the methodologies and how they solve a complex problem best and that can take lots of iterations, which often will lead to breaking changes.

At this point I see a huge advantage in Overmind. I think it can be said, that Overmind is the result of working (about two years?) on Cerebral. The Overmind api is thought through in so many ways. For me it feels a bit the same as when I thought "wow, the Vue api is thought through very well".

By taking concepts from Angular and React, the Vue api kept a great promise: It is easy for a newcomer to start with and it offers everthing you need. To accomplish this great thing, as a root for its ongoing success, Evan, the creator of Vue, had a clear picture of which methods were the best for a certain problem. He knew this stuff, before he started to develop Vue itself. I'd say, the same applies to Overmind. Even better, as a Vue user I can say, that Overmind is a perfect addition to Vue for some important reasons, let me explain...

I am developing a complex application for a long while now, not knowing, how complex it can become, when I started, haha. Vue was excellent and fun to work with, because you see results almost immediately. With its concepts, you have all you need in a single Vue component and can combine/compose componens further. The concept of Lego bricks, small pieces you can build great stuff from. But here is the thing: After your app gets more complex each day, it also gets more and more complicated to introduce certain features, that are relavant for the entire app. In Vue, we as developer, have two options for state management: It can be done in the component itself or it can be done in the Vuex store. The templation is huge, to do a lot in the component, until the component should communicate with other components, then you will want to use Vuex. Basically Vue folks tend to say: "If you have a complex app, use Vuex!" I guess, what they mean is, that things are getting terribly complicated, when business logic is directly bound to components, like it is done with the data and method property of Vue. I feel, it is not a perfect separation of concerns, the view layer and the business logic layer is not separated here and that can put you in trouble. Lets get back to Overmind...

If a Vue user wants to use Overmind for state management, it has consequences ;) I'd say good ones, but consequences: You have to drop the state related Vue methodologies, which are woven tightly into the Vue components properties and use Overmind instead. This might sound silly to mention but still worth it, because that's a thing: You won't use a huge part of Vue (which you got familiar to) anymore! But why is it worth it, especially when some main concepts of Vuex are the same as in Overmind?

There are some important reasons coming to mind:

• You have a clear separation of concerns and no temptation anymore, to mix state management and general business logic into components.
• The composability of components gets a lot better, because they are not carrying business logic.

These two reasons are a lot about discipline, you can achieve both things with Vuex, you just have to be clear about your software design decisions beforehand, which, let's be honest, we are not always.

So I think, using Overmind leads to clean, functional software design from the beginning, PLUS, and this is huge: It offers a superior api for composing asynchronous processes with its operators and concepts for separating side effects ecetera. Overmind is like a teacher, trying to explain to you, how to effectively design great software.

Of course this all can't be seen from a beginner, when s(he) is reading the Overmind manual the first time. But I like the manual for the reason, that great concepts should be possible to explain with a few simple words and this is exactly, what the documentation tries to accomplish. Of course it is a bit too sparse/short here and there, but that can be fixed soon.

Once Overmind gets adopted, there will be tons of people, going to explain, for example in articles and tutorials, how it works. But for that to be happen, Overmind needs one thing first: A finalized, perfectly stable api without breaking changes for at least two years. I am pretty sure, @christianalfoni and his guys are exactly working on that right now, so it's like a countdown till we see Overmind taking off very soon!?

from overmind.

@limal Thanks a bunch for taking the time for this feedback!

I will take all your feedback into account and update the getting started guide, this is such a good example of the creators writing the docs... too many assumptions, so huge thanks for pointing it out :-)

from overmind.

I have just started using Overmind this evening. Below is my feedback on creating a simple login form app with it.

It's great once I got it working but the experience on completing my first POST request with Overmind was unnecessarily frustrating due to lack of a more detailed and working examples on your website.

Please consider changing your example at Get Started from GETing data from a server to POSTing it instead. It's easier to infer a GET version from a POST than the other way around.

The main problem was that the examples on the Get Started page simply resulted in run-time errors (outdated?). I had to consult the codesandbox on the homepage to make some progress. Then there was no explanation on how to pass arguments to the actions. Plus you could show how one could fire action inside an onclick handler instead of using React's useEffect. At first I thought that I had to always use React's useEffect in order to trigger Overmind's actions as its object contain an effect property. A less confusing example for a beginner like me would be to show how to trigger an action on user's click on a button.

I've finally found out about a payload for actions on the API page. But honestly RTFM was my last resort and I feel I should have got that piece of information from the Get Started tutorial instead.

from overmind.

Recently read that codesandbox had switched over to overmind (awesome!) so ended up browsing through the codesandbox-client source trying to see how overmind itself had changed since I last checked it out ~9 months ago, with particular interest in seeing how "real-world" features (like managing relational data in a normalized way by id) had been implemented* - the lack of which previously had been the primary reason I didn't pursue using OM.

Anyway, found the "Help us test Codesandbox with Overmind"
(codesandbox-client #2375) issue but was confused for a bit because the info is stale (overmind is live in production, no user settings necessary, for my acct at least). Ultimately saw in browser dev tools that overmind was bundled into the codesandbox client.

So: since this is overmind code running in production for a fairly complicated app, I think it could be a good source of excerpts and examples about how to "do things the overmind way"? Maybe @christianalfoni or some of the other codesandbox devs could comment on which, if any, of the codesandbox-client app/src/app/overmind/* files or modules in particular might be useful as a learning reference, annotated and excerpted in the docs perhaps or at least called out with links.

* seems like APIs used by the overmind app are where this happens, passing the app a relatively small and flat slice of state.

from overmind.

Here is also a small example app that demonstrates some cool features
https://codesandbox.io/s/mmym0wv2pj

from overmind.

@sanohin cool, thanks! I like the monolithic single-file approach you used, makes it easy to review the whole example code quickly and better understand how all the parts of overmind work together.

from overmind.

Hi guys and thanks for building these examples! I am not sure how to best expose them to others, though lets keep the issue open for now at least :) Let me know if you have any ideas!

from overmind.

@christianalfoni in the spirit of constructive feedback, I will say that I did RTFM, like backwards and forwards, but I still didn't have a good understanding of how things worked. But it was obvious that the overmind api was sleek and efficient and I felt reassured that it was worth learning.

Perhaps the docs are unconsciously minimal so that the minimalistic but powerful design of overmind would stand out?

Effective speakers and presenters will try to reinforce each point they want the audience to remember three or four separate times. When writing documentation, this can feel redundant, but I think bigger examples that show the entire code file getting bigger (not just snippets) would do the trick without feeling redundant to newcomers.

Good job so far!

Not sure how hard it would be to drop FormidableLabs/react-live into the documentation, but if easy would be an even more effective way to demonstrate code. EDITED forgot codesandbox embeds are on the homepage ;p

from overmind.

@ArnoBuschmann Thanks a bunch for that summary and I totally agree with you :) Cerebral was our "Evan at Google" period. Learning, experimenting etc. Overmind has a very clear idea:

{ state, actions, effects } and as little abstractions as possible to achieve that with excellent typing support. It is scary how similar Cerebral v5 { state, sequences, providers } API is. It is the same bare boned concept, but the way you express stuff is just not typescript friendly.

So when we could change store.set('foo', 'bar') to state.foo = 'bar' using proxies we had our first Typescript issue solved. And then with the op-op spec, we got the typing solved for a functional API as well. It was then we decided to build a new framework as another API change of Cerebral would ruin the project and also we would loose what is great about Cerebral... sequences. It is a really awesome way to compose logic... it just happens to not be Typescript compatible.

So this core concept of { state, actions, effects } will not change, the API will not change after official release. We have just made sure that we can safely extend with new operators, we can extend with new configurations that for example provides state machines etc. But everything is built on this core idea :)

from overmind.

@christianalfoni I just had time to play around a bit with Overmind with React hooks and Typescript.
Great efforts to make Overmind in Typescript 👍
I made todoMVC implementation based on overmind: ^19.0.1 and overmind-react: ^20.0.1 here, since this issue is still open.
I am totally new to Overmind, I am not sure if I did everything on good practise especially usage of functional approach (aka Operator) in todoMVC.
It feels like logic of todoMVC is not complicated in order to use Operators.
I felt quite troublesome to use Typescript with Overmind through my usage. Especially all the typing wiring happens under overmind/index.ts.
It might be nice that any of the core team member can have some inputs on this todoMVC example :)

from overmind.

I just forked this todo list perf public codesandbox where I fixed some implementation problems that would slow the app. Let me know if I missed anything and feel free to use it if it helps.
https://codesandbox.io/s/react-overmind-perf-todo-xj7t1

And also I just shared a code example on another issue that illustrates how the items of the lists are synced derived from the example above
https://codesandbox.io/embed/react-overmind-list-sync-8e2v1?fontsize=14

from overmind.

@christianalfoni I think the best examples could be forked by overmind and referenced/embeded in the docs.
Maybe we could have a page of examples as well were each of them is accesible. And the project's README could have a link to that page.

from overmind.

@corlaez Having examples is a really good idea. Hm, I will need to think about how to introduce it, though yeah... will get this in :)

from overmind.

@100ideas This is a really good idea. Ives (creator of Codesandbox) has asked me about writing an article on the Overmind transition. I have not really found a good way perspective on writing such an article, but I think what you point out here could be a really good way to to approach it.

Basically write about how certain things are solved with Overmind and where Overmind kinda shines with a project like Codesandbox. Cause that is often where discussions go wrong. Too much theory.

We are running a development run for a few weeks now after new years, but will have some cooldown time I would like to dedicate to this for sure :)

from overmind.

I have something in mind related to this announced tomorrow 😄

from overmind.