[mobx-starter] Example with optional isomorphism

[nightwolfz]

I've just pushed an example with optional isomorphism and a nice way to structure your application.

All components get access to the state and all methods that affect the state (actions)
State is stored in one giant JSON object.
When state changes, components are re-rendered.

https://github.com/nightwolfz/mobx-starter

Inspired by one of the comments here asking for more examples, still a work in progress.

Enjoy !

This is a watered down version of what I'm using for https://instmsg.com/ (under development, over 100+ actions, 100+ components, sockets/MQTT...). Super maintainable so far :)

[mweststrate]

Really cool! Gonna try to take a closer look later today

[nightwolfz]

Documentation was written on the spot, eventually I will add some proper docs.
At the moment it's just an example of how useful mobx can be.

I will also add authentication / account management, sessions and a chat box (socket example) to it. That should cover most cases.

[mweststrate]

Tops! See also https://twitter.com/mweststrate/status/706922018730541056 :)

[nightwolfz]

I guess I can't back down anymore. Thanks Obama!

[mweststrate]

:)

[rickmed]

@mweststrate don't let him back down! :)
@nightwolfz dude, that looks so awesome, I wish I could understand it a bit more (it's really over my head), specially the server side and the reasoning to give all components access to all actions.

[nightwolfz]

@rickmed I have just added mongo support with user registration and auth.

I'm trying to emulate Flux/Redux's unidirectional flow in different way.

In the case of redux, you have actions, a dispatcher and reducers.

Here we just have actions, which are just namespaced functions (namespace = action filename) that affect the state.

All the re-rendering is taken care by mobx so you can only focus on two things:

What to name your action? and what should it do?

[Edit]

Sorry had to remove it guys cos it contained some "work related" code :(

Enjoy whoever got a shot at it !

[worifon]

@nightwolfz
Oh no! please give me chance to get it. I will use it for learning purpose only.

[mweststrate]

Closed the issue. It's not available anymore 😢

[bySabi]

RIP

someone already clone it?? ...
It have a proper license for reanimate it ?? ...
we need start a change.org request ?? ...

[nightwolfz]

It's not that hard to re-create a simple version of it. The basis for it is in https://github.com/nightwolfz/ryan (the @connect decorator).

You will need your context to contain two things: your state and your store which is a collection of functions that I like to call actions. The store itself has no state.

You just have to figure out how to pass that context into your actions (yes, you need to pass actions to actions, it's a graph).
You'll probably want that context in your react-router routes as well for handling auth/roles.

If your components end up looking like this:

import React from 'react'
import { connect } from 'ryan'

@connect
class Home extends React.Component {

    render() {
        const { state, store } = this.context

        return <section>
            <h1>Home</h1>

            {state.user 
                ? <p>Welcome back, {state.user.username}</p>
                : <a onClick={() => store.user.login()}> Login </a>
            }
        </section>
    }
}

export default Home

You're are on the right path.

[bySabi]

Github has made us lazy! not body forked before 'The Grant Delete' :-(

Is a lost for "HumanityX"

We still have ryan. And Yes! I already forked it :-)

Let´s see if "slow brainers" like me can assemble 'MobX, 'React-router async', '...' puzzle.

The mobx-starter poster for for nostalgics.

UPDATE:
The mobx-starter Collector`s Edition 'poster'

[nightwolfz]

@bySabi that README is awful :) I updated it a bit right before removing everything

https://gist.github.com/nightwolfz/aeaa0e144402e45b824c

[bySabi]

@nightwolfz I update 'poster' :-)