Live Reload

aka Hot Module Swapping

Is amazing because

• 0.1 seconds - users feel like their actions are directly causing something to happen on the screen.
• 1 second - users notice the short delay, but they stay focused on their current train of thought.

Switch to Keynote

Using

1. Add to configDependencies

{
    "name": "place-my-order",
    "system": {
        "configDependencies": [
            "live-reload"
        ]
    }
}

Using

2. Start web socket server

# steal-tools live-reload

API

live-reload module

import reload from "live-reload";

reload(render);

function render(){
    $("body").append(template(new AppState()));
}

reload(fn)

Called at the end of a reload cycle.

reload(moduleName, fn)

Called after moduleName is reloaded.

import reload from "live-reload";

// Re-initialize the router.
reload("app/router", function(router){
    window.router = router;
    router.start();
});

reload("*", fn)

Called after any module is reloaded.

Includes the moduleName as the first argument.

reload.dispose(fn)

Called when the module is being destroyed.

import reload from "live-reload";

window.sideEffect = "i am a side effect";

reload.dispose(function(){
    delete window.sideEffect;
});

Reloading example

Make your css plugin incorporate live-reload

Reload cycle

1. Message sent from server to client

With the name of the module that changed.

Reload cycle

2. Walk up the parentMap

{
    "restaurant/list/list.stache": {
        "restaurant/list/list": true
    },
    "header.component": {
        "index.stache": true
    },
    "models/order": {
        "index.stache": true
    },
    "index.stache": false
}

parentMap

Reload cycle

2. delete modules

Calling dispose callbacks as you go

Reload cycle

3. re-import deleted modules

Call any callbacks for these modules

Reload cycle

4. Call cycleComplete callbacks

Live-reload server

Gets your dependency graph

Same technology used to load in the client

{
    "restaurant/list/list.stache": {
        load: { source: "..." },
        dependencies: ["can/view/href/href"]
    },
    "restaurant/list/list": {
        load: { source: "..." },
        dependencies: ["restaurant/list/list.stache"]
    }
}

Dependency Graph

Recycle graph

Create a new dependency graph with the changed module, merge into master graph

Check dependencies

System.translate(source).then(function(source){
    load.source = source;
    return System.instantiate(load);
}).then(function(result){
    if(!same(oldDependencies, result.dependencies)) {
        // We have to load this graph
    }
});

// before
[
    "can",
    "restaurant/list/list.stache"
]
// after
[
    "can",
    "retaurant/list/list.stache",
    "models/order"
]