sbt-web is the foundation for all client-side concerns in Play 2.3. It offers a new asset pipeline that integrates with the existing JavaScript world.

1. Intro to sbt-web
Asset handling in Play 2.3
Marius Soutier!
Freelance Scala Developer
@mariussoutier

2. Motivation
• Play’s client-side support not flexible enough,
too opinionated which technologies it supports
• Can’t keep up with speed of innovation in the
JavaScript world (see JavaScript drinking game)
• If you can’t beat ‘em, join ‘em
Adopt Node APIs and make them run on the JVM
at full speed
• Factor out asset handling into sbt plugins to build
community independent from Play

3. Enter sbt-web
sbt
sbt-web!
Project Layout!
Assets!
Error Reporting
sbt-js-engine!
Execute JavaScript in sbt!
Trireme / Node / Nashorn
sbt-js-task!
Write sbt tasks that execute!
JavaScript using js-engine!
WebJars!
Dependency
Management
sbt-web-driver!
Execute DOM-based JavaScript!
WebDriver
- But let’s focus on sbt-web today -

4. Just Enough sbt
• .sbt and .Scala build files
• Build is an immutable collection of
key-value pairs (String -> T)
• Tasks are computed settings
• Assign / override values via :=
Setting[Task[T]]
name := “demo”
• Append / override values via +=, ++=
Setting[T]
libraryDependencies += “org.webjars” % …

5. Scopes
• Settings are scoped by project, configuration, or task;
default configuration is Global
• Reuse existing settings and scope them for your needs
compile in Compile
compile in Test
sourceDirectory in (Compile, packageBin)

6. Setting Dependencies
target
webTarget
staging
Directory
Settings depend on other settings
Eases making small changes
target/web/stage/
target := “target”
webTarget := target.value / “web”
webStaging := webTarget.value / “stage”
Global
Configuration

7. Inspecting settings
• show <setting-key> to check the value of a setting or
result of a task
• inspect <setting-key> to understand setting’s
hierarchy and dependencies
• Use the key, not the name of the val in code
• Access scoped settings via <scope>:<setting-key>

8. Default Project Layout
- Play overrides src/main to app -

9. public
Global webTarget
Test Assets
Directories
Assets
Plugin
source
Directory
source
Managed
resource
Directory
resource
Managed
webModules
Lib
nodeModule
Directory
webModule
Directory
nodeModule
Directory
public
source
Directory
source
Managed
resource
Directory
resource
Managed
webModule
Directory
nodeModule
Directory
staging
Directory

10. Test Assets
Tasks
Assets
assets
Global
node
Modules
web
Modules
webJars
stage pipeline
assets
assets
…
compile
compile test

11. Source Tasks
Compile sources to public assets
Analyze sources
Integrates with error reporting
CoffeeScript
*.coffee
JavaScript
LESS
*.less
CSS
src/main/assets/
target/
web/
public/
sourceDirectory in Assets public in Assets
sources in Assets resources-managed/
main/
resourceManaged in Assets

12. Asset Pipeline
Input
Assets
Name
Hashing
(digest)
GZip
Output
Assets
Tasks operating on assets sequentially
Each stage operates on mappings and passes to next one
pipelineStages := Seq(digest, gzip)
Play’s Assets router is aware of both digested and gzipped assets

13. Source Plugins
sbt-coffeescript Convert CoffeeScript to JavaScript
sbt-jshint JavaScript linting
sbt-stylus CSS preprocessor
sbt-less CSS preprocessor
sbt-mocha Server-Side JS Testing
sbt-scalajs Convert ScalaJS to JavaScript (TODO)

14. Asset Plugins
sbt-digest Fingerprinting
sbt-gzip Gzip assets
sbt-rjs RequireJS integration, minify JavaScript
sbt-uglify Minify/uglify JavaScript (without RequireJS)

15. WebJars
• Client-side dependency management, including transitive
dependencies
• Packed in Jars, resolved like normal dependencies
by sbt
libraryDependencies += "org.webjars" % "bootstrap" % "3.2.0"
• sbt-web auto-extracts WebJars to
target/web/web-modules/lib
• Mapped to jsDelivr CDN automatically by Play’s Assets controller
• Assets in sub-projects are exported as a WebJar

16. NPM
• Node Package Manager
• Becoming popular for client-side dependencies
• js-engine resolves and auto-extracts dependencies
defined in package.json
• Disclaimer: Does not seem to work 100% yet

17. Writing sbt-web tasks
- Demo -