Isomorphic application

[jhollingworth]

So that I can have better SEO and initial render time I want to be able to render the representation of the application on the server. i.e. isomorphism.

Concurrency issues

One of the biggest problems right now is that everything in Marty is a singleton. However you could also think of createStore, createActionCreators, etc as registration functions. If we have an internal registry of all types, action creators, etc we could then create new instances of them. The interface you return from createStore would just be a proxy to whatever instance of the store you specify

var FooStore = Marty.createStore({
  id: "foo",
  displayName: "Foo"
});

var FooActionCreators = Marty.createActionCreators({
  id: "foo",
  bar: function () { ... }
});

var instance = Marty.createInstance();

instance.getActionCreators("id").bar(123);

var html = Marty.renderToString(<Foo/>, instance);

(De)Hydration

Stores have the getInitialState() function which is where you get the initial state of the store and, if required, make any HTTP calls to hydrate the store.

var Store = Marty.createStore({
  getInitialState: function () {
    SomeAPI.getSomeState();

    return [];
  }
});

I propose we allow you to specify the initial state on the server which, when the store is loaded, is passed to the stores getInitialState

var Store = Marty.createStore({
  getInitialState: function (serverState) {
    if (serverState) {
      return serverState;
    } else {
      return [];
    }
  }
});

This way you can do any transformations (e.g. turning the object into a immutable object).

Marty.renderToString(component, instance) would a string that should be injected into the page that would include the html as well as the initial dehydrated state.

<div class="foo">...</div>
<script type="text/javascript">
   (window.__marty||(window.__marty={})).state={someStore:{foo:'bar'}}
</script>

[vesparny]

This is basically what https://github.com/yahoo/fluxible does, I used it in Morpheus and it worked very well.

Maybe you can take inspiration from there, it would be great to see Marty as a full fledged flux solution, managing context and server-side rendering.

[likidu]

+1, isomorphic feature for me is probably the most important reason I switched from AngularJS.

[jhollingworth]

Yup! If you have a look at https://github.com/jhollingworth/marty-express we consume implement a node.js middleware which consumes react-router routes and automatically renders them if you request the URL. It also will intercept http requests in the http state source, fully qualifies the URL and forwards headers from the original request. If all goes well a browser version will work on the server with a couple of small changes

On 18 Feb 2015, at 8:23 pm, AlanVerbner notifications@github.com wrote:

@jhollingworth will this work with https://github.com/rackt/react-router ?

—
Reply to this email directly or view it on GitHub.

[AlanVerbner]

Lol...yeah...I found it just after posting the comment 😊

[Dakuan]

This is preventing us from adopting marty for a new project. We are using fluxxor at the moment which while excellent does involve a lot of boilerplate around async data fetching. Have some time before we need to commit though!

[jhollingworth]

It's on the way, I'm hoping the isomorphic stuff will be in beta by the end of next week

[jhollingworth]

In v0.9 branch