intro to sbt-web
DESCRIPTION
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.TRANSCRIPT
![Page 1: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/1.jpg)
Intro to sbt-web
Marius Soutier!Freelance Scala Developer
@mariussoutier
Asset handling in Play 2.3
![Page 2: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/2.jpg)
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
![Page 3: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/3.jpg)
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
![Page 4: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/4.jpg)
• .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”
![Page 5: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/5.jpg)
• 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)
![Page 6: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/6.jpg)
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
![Page 7: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/7.jpg)
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>
![Page 8: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/8.jpg)
Default Project Layout
- Play overrides src/main to app -
![Page 9: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/9.jpg)
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
![Page 10: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/10.jpg)
Test Assets
Tasks
Assets
assetsGlobal
nodeModules
webModuleswebJars
pipelinestage
assets
assets
…
compile
compile test
![Page 11: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/11.jpg)
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
![Page 12: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/12.jpg)
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)
![Page 13: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/13.jpg)
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
![Page 14: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/14.jpg)
sbt-digest Fingerprinting
sbt-gzip Gzip assets
sbt-rjs RequireJS integration, minify JavaScript
sbt-uglify Minify/uglify JavaScript (without RequireJS)
Asset Plugins
![Page 15: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/15.jpg)
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
![Page 16: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/16.jpg)
• 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
![Page 17: Intro to sbt-web](https://reader034.vdocument.in/reader034/viewer/2022042614/5593152e1a28abe05f8b45d7/html5/thumbnails/17.jpg)
Writing sbt-web tasks- Demo -