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:
- A project called
play-with-scalajs-exampleand 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. - A very interesting and more advanced usage of Scala.js is
TodoMVCand this is a part of theworkbench-example-appproject 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.