Example apps / todomvc

I’ve looked around on github and codesandbox but haven’t found any projects demonstrating overmind in more complex applications - just a lot of “Overmind demo 1” clones.

There used to be a demos package 606f1a64fdd8069001b68bbe045598af86f255bd in this repo but it was removed nov 13 2018 9ecab0605751b435ce104701df5f7e0264dba737

1. it would be nice if there were a list that gathered examples as they are developed. I’ll use the comments to this issue to do so for now.

2. As a first step, I adapted the overmind routing tutorial to a react js app (and found a bug in the last tutorial step as I did so #219)

3. There are a couple of TodoMVC apps using overmind on codesandbox, but all the ones I checked are broken due to breaking changes in later overmind versions.

4. therefore, since overmind is still changing, I guess its more important to have a few good example apps that are consistently maintained rather than a big list of outdated examples. I would be happy to help with one of these - maybe todomvc?

---

overmind example apps

• Overmind demo 1 - react: fetch items from remote API and display in filterable list
• overmind “state-first” routing tutorial: page.js for routing, demonstrates using actions & effects to make & join multiple api calls with state and trigger routing
• Mock username list w/ pagination & search: single-file app demonstrating overmind state & operators w/ react using createConnect. (thanks @sanohin)
• overmind-forms-example: form generation and validation using overmind-forms. Demonstrates namespaced and merged overmind state trees.

[ArnoBuschmann]

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!?

[christianalfoni]

@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 😃