Introducing sbt-web – A Node & WebJar Compatible Asset Pipeline for the Typesafe Platform

Introducing sbt-web

A Node & WebJar Compatible Asset Pipeline for the Typesafe Platform

James Ward ~ @_JamesWard

Asset Pipelines

• Source linting
• Source files => "executable"
• Executable => Optimized / Minified
• Executable => Fingerprinted
• Executables => Concatenated
• Testing

sbt-web

• Incremental
• Parallel
• Node native or Node JVM (Trireme)
• Dependency management with WebJars and/or NPM
• Any sbt project

Current Asset Compilers & Asset Test Frameworks

• sbt-jshint
• sbt-coffeescript
• sbt-less
• sbt-digest
• sbt-gzip
• sbt-mocha
• sbt-rjs

Future Asset Compilers

• Uglify
• ScalaJS
• Sass
• Stylus

Current Status

• sbt-* 1.0.0-M2a
• Super easy API
• Play 2.3 M1

Setup for Play 2.3 M1

addSbtPlugin("com.typesafe.sbt" % "sbt-blah" % "1.0.0-M2a")

sbt-jshint

sbt-coffeescript

$ ->
  console.log("hello, world from coffeescript")

<script src='@routes.Assets.at("index.js")'></script>

sbt-less

body {
    background-color: #000066;
}

<link rel='stylesheet' href='@routes.Assets.at("index.css")'>

sbt-digest

activator start || activator stage || activator dist

find target/web -name "*.md5"

sbt-gzip

activator start || activator stage || activator dist

find target/web -name "*.gz"

sbt-mocha

var assert = require("assert");

describe("Foo", function() {
    it("should correctly add numbers", function() {
        assert.equal(2, 1+1);
    });
});

sbt-rjs

requirejs.config({
    paths: {
        'jquery': ['./lib/jquery/jquery'],
        'bootstrap': ['./lib/bootstrap/js/bootstrap']
    },
    shim: {
        'jquery': { exports : '$' },
        'bootstrap': { deps: ['jquery'] }
    }
});

require(['bootstrap'], function(bootstrap) {
    $('#myModal').modal();
});

<script data-main="@routes.Assets.at("main")" src="@routes.WebJarAssets.at(WebJarAssets.locate("require.js"))"></script>

Learn more

• Play 2.3 Migration Guide
• sbt-web