Intro to sbt-web

Marius Soutier!Freelance Scala Developer

@mariussoutier

Asset handling in Play 2.3

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 ‘emAdopt 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

Enter sbt-web

sbt-js-task!Write sbt tasks that execute!JavaScript using js-engine!

- But let’s focus on sbt-web today -

sbt-js-engine!Execute JavaScript in sbt!Trireme / Node / Nashorn

sbt-web-driver!Execute DOM-based JavaScript!

WebDriver

sbt-web!Project Layout!

Assets!Error Reporting

WebJars!Dependency Management

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 :=

• Append / override values via +=, ++=

Just Enough sbt

Setting[Task[T]]

Setting[T]

libraryDependencies += “org.webjars” % …

name := “demo”

• Settings are scoped by project, configuration, or task; default configuration is Global

• Reuse existing settings and scope them for your needs

Scopes

compile in Compile

compile in Test

sourceDirectory in (Compile, packageBin)

Setting Dependencies

webTarget

staging Directory

target

target/web/stage/

Settings depend on other settings Eases making small changes

target := “target”

webTarget := target.value / “web”

webStaging := webTarget.value / “stage”

Global Configuration

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>

Default Project Layout

- Play overrides src/main to app -

public

Test Assets

Directories

Assets

Plugin

webTargetGlobal

sourceDirectory

sourceManaged

resourceDirectory

resourceManaged

nodeModuleDirectory

nodeModuleDirectorypublicsource

Directory

sourceManaged

resourceDirectory

resourceManaged

nodeModuleDirectory

webModule Directory

webModule Directory

webModulesLib

staging Directory

Test Assets

Tasks

Assets

assetsGlobal

nodeModules

webModuleswebJars

pipelinestage

assets

assets

…

compile

compile test

Source Tasks

CoffeeScript *.coffee

JavaScript

LESS *.less

CSS

Compile sources to public assets Analyze sources

Integrates with error reporting

src/main/assets/

target/ web/ public/

public in AssetssourceDirectory in Assets

sources in Assets resources-managed/ main/resourceManaged in Assets

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

Play’s Assets router is aware of both digested and gzipped assets

pipelineStages := Seq(digest, gzip)

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)

Source Plugins

sbt-digest Fingerprinting

sbt-gzip Gzip assets

sbt-rjs RequireJS integration, minify JavaScript

sbt-uglify Minify/uglify JavaScript (without RequireJS)

Asset Plugins

WebJars• Client-side dependency management, including transitive

dependencies

• Packed in Jars, resolved like normal dependenciesby sbtlibraryDependencies += "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

• 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

NPM

Writing sbt-web tasks- Demo -