This document introduces Scala.js, which compiles Scala code to JavaScript. Scala.js allows developers to write frontend code in Scala while targeting JavaScript and accessing JavaScript libraries and frameworks. Some benefits of Scala.js include type safety, a rich standard library, and the ability to share code between backend Scala and frontend JavaScript applications. However, Scala.js does have some drawbacks such as larger compiled code size and lack of direct support for some JDK features in JavaScript. The document discusses how Scala.js works, mapping of Scala types to JavaScript, wrapping JavaScript libraries for use in Scala.js, and manipulating the DOM and making AJAX requests.

1. Intro to Scala.js
Marius Soutier
Freelance Software Engineer
@mariussoutier
Write JavaScript in Scala

2. What is Scala.js?
Scala.js compiles Scala to JavaScript
object HelloUg extends JSApp {
override def main(): Unit = {
// FP for the win
var res, i = 0
val values = js.Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
while (i < values.length) {
res = res + values(i)
i += 1
}
println(res)
}
}
$c_Lug_HelloUg$.prototype.main__V = (function() {
var res = 0;
var i = 0;
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
while ((i < $uI(values["length"]))) {
res = ((res + $uI(values[i])) | 0);
i = ((1 + i) | 0)
};
var x = res;
var this$2 = $m_s_Console$();
var this$3 = this$2.outVar$2;
$as_Ljava_io_PrintStream(this$3.tl$1.get__O()).println__O__V(x)
});
$e["ug"] = ($e["ug"] || {});
$e["ug"]["HelloUg"] = $m_Lug_HelloUg$;

3. But Why?
• Web development is moving to client-side apps,
JavaScript is the browser’s only language
• JavaScript is beyond broken
• Maintaining a large JavaScript project can be difficult
• Keeping up with JavaScript’s ecosystem is nigh-
impossible
(See JavaScript Drinking Game)

4. Obligatory JavaScript: The Good Parts
Reference
But that’s enough JavaScript bashing for today

5. Scala.js to the Rescue
• We all love Scala
• Type-safety, packages, traits, …
• Rich standard library
• Share code between backend and front-end
• Full editor support (same file suffix)
• Access to all JS libs and a lot of the Scala ecosystem

6. Scala.js’ Future

7. • Size of compiled JavaScript
• Compile Speed
• JS libraries must be wrapped
• Scala is developed with JVM in mind, some things
just don't work in JS land, some JDK parts missing
• Front-end developers might not want to learn Scala
(slackers!)
Drawbacks

8. • Scala libraries available for Scala.js
• Scalatags, ScalaCSS
• Shapeless, Scalaz, Cats, Monocle
• Sharing code inside a project via common cross-compiled
sbt sub-project
• Data exchange via JSON
• upickle
• JavaScript doesn't necessarily understand your JSON,
e.g. Longs aren't that long in JavaScript
Sharing Code & Data

9. How Does It Work?
.scala
.class
.sjsir
run/test
~fastOptJS
fullOptJS
Google
Closure
-opt.js
-fastopt.js
Rhino / Node.js
Rhino / PhantomJS
No DOM
DOM
-jsdeps.min.js
jsDependencies ++= Seq(
"org.webjars" % "jquery" % "1.10.2" / "jquery.js",
"org.webjars" % "angularjs" % "1.4.8" / "angular.js" dependsOn "jquery.js"
)

10. Targeting JavaScript
Scala / JVM JavaScript
Byte, Short, Int, Float, Double Number
Unit Undefined
Char, Long Scala classes
Custom Scala classes JavaScript class with @JSExport
NullPointerException,
ArrayIndexOutOfBoundsException,
ClassCastException, StackOverflowError, …
Undefined
Reflection -
String.split JS RegEx is different
Pattern Matching on Byte, Short, Int, Float, Double Determined by runtime value, not type

11. JavaScript Native Types
JS-native Type Maps to Example JS
js.FunctionN scala.FunctioN val fn: js.Function1[Int, Int] =
(i: Int) => i * 2
var fn = function(i)
{
return i * 2;
};
js.Array[T] Seq[T] js.Array(1, 2, 3) [1, 2, 3]
js.Dictionary[T] mutable.Map[String, T] js.Dictionary("a" -> 1, "b" -> 2) {"a": 1, "b": 2}
js.UndefOr[T] Option[T]
val some: js.UndefOr[Int] = 1
val none: js.UndefOr[Int] =
js.undefined
Option(1).orUndefined
1
undefined
1
js.TupleN TupleN js.Tuple2(42, “Scala UG") [42, "Scala UG"]

12. Dynamic JS
When interacting with JavaScript libraries, its dynamic
nature can’t always be ignored
val guest = js.Dynamic.literal(
name = "Scala User Group"
)
But we can give it a nicer interface
trait Guest extends js.Object {
val name: String = js.native
}
object Guest {
def apply(name: String): Guest =
js.Dynamic.literal(name = name).asInstanceOf[Guest]
}
import js.Dynamic.{global => g}
g.console.log(guest)
val dom = g.document
val p = dom.createElement("p")
p.innerHTML = s"Hi ${guest.name}!"
dom.getElementById("main").appendChild(p)

13. Wrapping JS Libs (1)
Read documentation and infer types

14. Wrapping JS Libs (2)
import scala.scalajs.js
import scala.scalajs.js.annotation.JSName
object Numeral {
def apply(n: Double): Numeral = new Numeral(n)
def apply(): Numeral = new Numeral(0)
}
@JSName("numeral")
@js.native
class Numeral(n: Double) extends js.Object {
def format(formatString: String): String = js.native
def unformat(formatString: String): Double = js.native
def add(number: Double): Double = js.native
def subtract(number: Double): Double = js.native
def multiply(number: Double): Double = js.native
def divide(number: Double): Double = js.native
def value(): Double = js.native
def difference(number: Double): Double = js.native
}
jsDependencies ++= Seq(
"org.webjars" % "numeral-js" % "1.5.3-1" / "numeral.js" minified "min/numeral.min.js"
)
Numeral(totalValue).format("0,0.00")

15. Manipulating the DOM
libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.8.2"
)
import org.scalajs.dom._
val main = document.getElementById("main")
val p = document.createElement("p")
val text = document.createTextNode("Hi Scala User Group!")
p.appendChild(text)
main.appendChild(p)

16. AJAX
import org.scalajs.dom.ext.Ajax
import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
val eventualUsers =
Ajax
.get(url = "/users/")
.map { xmlHttp =>
xmlHttp.status match {
case 200 =>
import upickle.default._
read[Seq[User]](xmlHttp.responseText)
case other =>
Seq.empty[User]
}
}

17. • Export classes to JS for use from other JS code
• Can even publish as NPM module
Using Scala.js from JS
@JSExport
case class ExportedUser(
@(JSExport@field) name: String,
@(JSExport@field) email: String
)
@JSExport
@ScalaJSDefined
class Foo extends js.Object {
val x: Int = 4
def bar(x: Int): Int = x + 1
}

18. Questions?