Production workflows

DoneJS amazingly includes

Algorithm for creating progressively loaded bundles.
Ability to bundle assets into your dist/ folder
Build to native applications; iOS and Android with Cordova, Windows, Mac and Linux with NW.js.
Deploy your app to run off a CDN; S3 and Divshot currently supported.

steal-tools

Tools for manipulating a dependency graph.

With steal-tools...

Create progressively loaded bundles
Export your library into various formats (AMD, CommonJS, Steal)
Listen to changes in the graph and be notified via websocket (live-reload uses this)
Bundle assets with your production builds (images in css, fonts, etc.)

(switch to algorithm slides)

steal-bundler

StealTools

var stealTools = require("steal-tools");

stealTools.build({

}, {
    bundleAssets: true
}

steal-bundler Types

Inferred assets
Globbed assets
Steal asset

Inferred API

exports.find = function(bundle){
    return [
        {
            path: "path/to/some/font.off"
        },
        {
            path: "path/to/some/image.png"
        }
    ];
};

exports.rewrite = function(source, bundlesPath, assets){
    // Modify source by dissecting assets
    return source;
};

Native app builds

steal-cordova + steal-nw

Integrate with StealTools build process
Are thin layers around existing libraries

Add steal-cordova to build

Weird bits

Cordova and NW.js apps run on the file:// protocol
Do not have same origin restrictions
Need to use hashchange for routing
Have to point XHR requests to external service

Deploying

Deploy to

CDN for static assets
Heroku for server

donejs-deploy

Supports Divshot and S3

Services API

exports.properties = [
    {
        "name": "bucket",
        "desc": "This is your bucket",
        "default": function() { ... }
    }
];

exports.deploy = function(package, options){
    // Do the deploy
};

Challenges

Two step deployment, deploy to server and CDN
Assets are no longer relative to the page

Tilde helper

~

<img src="{{~ 'path/to/image.png'}}" />

<img src="{{~ some.prop}}" />

Rules

can.baseURL
Using Steal
- System.renderingLoader.baseURL
- System.baseURL
location.pathname

Rendering contexts

When server-side rendering there is the context that the app runs in on the server and there is the context that represents the client, the renderingLoader acts on behalf of the client.

{
    "name": "place-my-order",
    "system": {
        "envs": {
            "production": {
                "baseURL": "https://somecdn.com/place-my-order/"
            }
        }
    }
}