Where Java is a compelling choice to run server-side code due to its robust JVM that can be run anywhere, JavaScript is increasingly becoming the dominant choice on the client side due to its flexibility and light runtime-embedded environment as well as its growing set of tools already available in the browsers. Despite its popularity, JavaScript being a dynamic language does not offer the type of safety that languages such as Java or Scala provide. The experimental but fast-growing Scala.js initiative aims at compiling Scala to JavaScript and in my view offers a really good alternative for those who want to benefit from the power of the Scala type system all the way to the browser.
Setting up a project demonstrating the usage of Scala.js can be done in a couple of minutes and is explained in the sample "getting started" project available at https://github.com/sjrd/scala-js-example-app.
The example consists of a small HTML page containing a playground <div>
element as illustrated in the following HTML code:
<!DOCTYPE html> <html> <head> <title>Example Scala.js application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <h1>Example Scala.js application - development version</h1> <p>After having compiled and packaged properly the code for the application (using `sbt packageJS`), you should see "It works" here below. See README.md for detailed explanations.</p> <div id="playground"> </div> <script type="text/javascript" src="./target/scala-2.10/example-extdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/example-intdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/example.js"></script> </body> </html>
The div
element will be dynamically populated as:
<p> <strong>It works!</strong> </p>
The tiny snippet of code written in Scala and compiled to Javascript to achieve this is given in the following
main
method:
package example import scala.scalajs.js import js.Dynamic.{ global => g } object ScalaJSExample { def main(): Unit = { val paragraph = g.document.createElement("p") paragraph.innerHTML = "<strong>It works!</strong>" g.document.getElementById("playground").appendChild(paragraph) } /** Computes the square of an integer. * This demonstrates unit testing. */ def square(x: Int): Int = x*x }
Once we have the access to the DOM of the HTML page through the js.Dynamic.global
object, this simple Scala main
method constructs a new paragraph node and adds it to the existing "playground"
node.
The additional square
method is used to illustrate a unit test written against the Jasmine JavaScript test framework.
The execution of the main
method is triggered by the one line added to the js/startup.js
file:
ScalaJS.modules.example_ScalaJSExample().main();
The generated code produced by default by Scala.js can be quite big because of dependencies to Scala libraries. Scala.js offers an optimization through Google's closure compiler that reduces the size and optimizes the JavaScript code execution when targeted for production environments.
What is the next step now? Well, we can refer interested readers to a couple of more projects that we find interesting with regard to this book:
play-with-scalajs-example
and available at https://github.com/vmunier/play-with-scalajs-example deals with a simple integration sample of Scala.js and the Play Framework that we have covered in the previous chapters.TodoMVC
and this is a part of the workbench-example-app
project available at https://github.com/lihaoyi/workbench-example-app/. It demonstrates a sample web app for making To Do Lists, a reference app specified to compare different implementations done in various languages, but has the innovative approach of being reactive in addition to being written in Scala compiled to JavaScript. A direct link to the resulting reactive web app is available at http://lihaoyi.github.io/workbench-example-app/todo.html and is rendered in a browser, as shown in the following screenshot:There are already a number of projects around Scala.js listed on its home page at http://www.scala-js.org/. As Scala.js is maturing quickly, many more projects should be soon available.