Skip to content

Instantly share code, notes, and snippets.

@neftaly

neftaly/gist:e3977aa5206ae04f6844

Created March 26, 2015 09:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save neftaly/e3977aa5206ae04f6844 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save neftaly/e3977aa5206ae04f6844 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
<link href="./app.min.css" rel="stylesheet">
<script src="./app.min.js" defer></script>
</head>
<body>
<div id="app">{{{ output }}}</div>
<script type="application/javascript">
var initialState = {{{ state }}};
</script>
</body>
</html>
@neftaly
Copy link
Copy Markdown
Author

neftaly commented Mar 26, 2015

Here's some free extra sample code.

Bundler starting point (client.js, transpiled to app.min.js):

/*global initialState*/
"use strict";

import myApp from "./myApp";

let serverState = (window && window.initialState) ?
    window.initialState : {};

let clientState = {
    environment: "client", // or whatever
    target: location.hash.replace("#", "") // or whatever
};

// Object.assign doesn't seem to work in Babel, be aware! 
myApp(mixin(serverState, clientState));

@neftaly
Copy link
Copy Markdown
Author

neftaly commented Mar 26, 2015

myApp.js (called from both client.js and server.js) :

"use strict";

import Immstruct from "immstruct";
import actions from "./actions";
// or however you want to do it

export default function init (params) {
    // Explicitly define the props you expect, for POLP
    let {
        environment,
        target
    } = params;

    let structure = new Immstruct({
        appState: {
            target,
            someBitOfState: "blah"
        },
        dataState: require("./resources/example.json")
    });

    return actions(structure, environment);
}

@neftaly
Copy link
Copy Markdown
Author

neftaly commented Mar 26, 2015

actions.js (this is way more handwavey, do it your own way):

"use strict";

import React from "react";

import RootComponent from "../components/RootComponent";


export function renderToString (structure) {
    return React.renderToString(
        <RootComponent rootCursor={structure.cursor()} />
    );
}


export function renderToDom (structure) {
    React.render(
        <RootComponent rootCursor={structure.cursor()} />,
        document.getElementById("app")
    );
}


export default function actions (structure, environment) {
    // Actions go in here

    if (environment === "server") {
        return renderToString(structure);
    }

    structure.on("swap", () => renderToDom(structure)); //or whatever 
    return renderToDom(structure);
}

@neftaly
Copy link
Copy Markdown
Author

neftaly commented Mar 26, 2015

Server.js is just your node application server, handlebars, and a require/import pointing to myApp.js (with the right env etc passed through). I missed out some code passing the state object back, but that's all pretty simple.

Also, I just realized I used let a lot. I think it will instead become a best practice to use const for practically everything, by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment