Introduction to Scala.js and an experimental report on introducing Scala.js into a real-world app.

1. Scala.js & friends
SCALA
ALL THE
THINGS
Chris Birchall
Content API team

2. Nightwatch

3. Nightwatch: a perfectly good app
● Node.js + Server Sent Events
● Concise, well written JavaScript
● Reliable
● Only one problem…

4. IT’S NOT
WRITTEN IN
SCALA

5. Scala.js to the rescue
● Compile Scala code to JS
○ Implemented as a compiler plugin
● Supports almost any Scala code
● Interop with 3rd-party JS libs
○ (with a bit of boilerplate)
● Generated JS size is not outrageous
○ Hello world is about 100k
Credit: scala-js.org

6. Hello world in 2 slides

7. Hello world in 2 slides

9. 3rd-party JS interop
● Use js.Dynamic
○ i.e. throw type safety out of the window
○ Quick to write, feels like writing normal JS
● Write a Scala facade for your JS lib
○ Typesafe, assuming the facade matches the JS

10. js.Dynamic

11. Scala facade

12. Dependency management
● Facades can be published and shared
● Also support for WebJars
● The sbt plugin can write all deps to a single
.js file, à la browserify
libraryDependencies +=
"be.doeraene" %%% "scalajs-jquery" % "0.8.0"
TRIPLE SQUIGGLE!
<script src=”my-scalajs-app-jsdeps.js”></script>
<script src=”my-scalajs-app.js”></script>

13. Scala.js-ifying Nightwatch
● Untyped hashes → case classes
● Scala facades for moment.js, Rickshaw
● JS if/else chains → Scala pattern matching
● uPickle for JSON deserialization

14. Scala.js-ifying Nightwatch
Before 106 lines of JS After 216 lines of Scala
Facades
Case classes

15. Chained if/else -> pattern match
Before After

16. Problems along the way
● Obscure Scala.js bugs
○ e.g. .className doesn’t work sometimes
● Unexpected uPickle behaviour
● Trial and error getting facades to work
○ Gave up and settled on facade + Dynamic hybrid
● Brainmelt from Scala/JS context switching
○ e.g. trying to write Scala strings with single quotes
(All in all, > 5 hours to port 100 lines of code)

17. Credit: The Atlantic
Result: Kinda sorta typesafe JavaScript!

18. Hang on a sec
What’s this?
CSS?
But...

19. IT’S NOT
WRITTEN IN
SCALA

20. ScalaCSS to the rescue?
Erm, no.
DSL is virtually undocumented
Gave up after a bit of fruitless
trial and error.
Not quite ready for primetime.

21. On to the next victim

22. IT’S NOT
WRITTEN IN
SCALA

23. There, that’s better
http://lihaoyi.github.io/scalatags/

24. Conclusions
Should I use Scala to replace my ...
JavaScript Probably not.
Boilerplate and bugs outweigh type
safety benefits.
CSS Nope.
Just use Sass like everyone else.
HTML Maybe.
Scalatags could be useful as a
templating lang, to replace e.g. Scalate