Intro to sbt-web
-
Upload
marius-soutier -
Category
Software
-
view
253 -
download
2
description
Transcript of Intro to sbt-web
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 -