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/"
            }
        }
    }
}

Deploy to Heroku

Add deployment to CI