Overview of Scala.js from a GWT developer perspective
This is Scala, not Java
The initial setup is pretty straightforward. There is only one build tool for scala (sbt), and one plugin for Scala.js, so no questions asked. A Scala.js project does not require any special structure, a simple project structure is enough. A requirement for working with Scala.js is NodeJs. Then, a project can be initialized by running the command:
sbt new scala/scala-seed.g8
from the command line. You will then be prompted to enter the name of the project, the version, and the organization name (equivalent of groupId in Maven). Then, we need to add the Scala.js dependency and configuration to our build.sbt file (equivalent to pom.xml). Our build.sbt file looks something like:
The configuration is minimal, so no big effort is required.
Using the framework
After setting up the project, all we need to do is to create an entry point class which extends JSApp object.
1. interacting with the DOM: Scala.js has a pretty comprehensive API for interacting and manupulating the DOM in the same fashion as from vanilla JS. In fact, this is the core focus of Scala.js: there are no by default custom ui components to build the ui. For example, the code for creating a button with an event listener looks like:
For performing a HTTP request using an XmlHttpRequest, the code would look like:
Let’s suppose we want to parse G-Widgets Rss feed and create a list with all the titles, we would then do something like:
Compiling and Devmode
One really neat thing about Scala.js is its short compile time. After a code change, the compiling does not take more than 9s (for this simple app) to rebuild the .js, which pretty encouraging and less frustrating. The choice of the web server (if needed) is left open. For example, a server with a live reload extension may be come handy. Scala.js offers two compile modes fastOptJS and fullOptJS. when running fastOptJS (equivalent to draft mode in GWT), the compiler does less optimizations and thus the compile time is shorter. This is ideal for development. fullOptJS, on the other hand, uses Google's closure compiler to produces a highly compact and optimized .js file.
This was an opinionated introduction to Scala.js. The main advantages that Scala.js can offer is a boilerplate free project setup and a fast compile time. GWT is more mature and is more used than Scala.js, but GWT can learn from Scala.js in terms of reducing the compile time and the boilerplate to setup the project. On the other hand, some Scala.js advocates are not aware of GWT evolution and sometimes give inaccurate assement of GWT abilities. For example, Greg Dorell in his recent Devoxx talk stated that "GWT does not work" because it does not provide good import/export to js capabilities. He was clearly ignoring that GWT also introduced JsInterop. GWT still wins in terms of ecosystem and community. We will do a more detailed comparison in the coming posts. To sum up, Scala.Js is an attractive alternative to developing a web application. For Java developers, the language barrier may be present, but the learning curve would not be really steep because both Java and Scala are JVM languages and have similar concepts.
Full code can be found here: https://github.com/zak905/scalajsdemo