Scala.js tutorial: How to start building single-page web applications

Table of Contents1 - Single-page applications2 - 1. Getting started (dependencies)3 - 2. Create hello3.html4 - 3. Create Hello3.scala5 - 4. Run the code!6 - Summary/Discussion7 - Resources8 - More facades9 - Other tutorials in this series10 - Bonus!11 - Source code

In this final, third part of my three-part introductory series on Scala.js I’ll demonstrate a technique that can help you build single-page web applications with Scala.js. That is, the body of your HTML page will look like this:

    <div id="root"></div>          

    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-jsdeps.js"></script>
    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-fastopt.js"></script>

After that, your entire application will then be written in Scala/Scala.js, which is converted into JavaScript code in the scala-js-hello-world-fastopt.js file.

A Scala.js tutorial: “Hello, world” with an HTML button click

Table of Contents1 - 1. Create a new HTML page2 - 2. Make updates to use jQuery3 - 3. The new Scala code4 - 4. Setting the main class5 - 5. Running this example6 - Discussion7 - Summary

In my first “Hello, world” Scala.js tutorial I showed how to get started with Scala.js, including some necessary setup/configuration work. That tutorial ended by showing how to get the string “Hello, world” displayed in a browser.

In this tutorial I’ll take this a little further and show how to create an HTML button you can click that results in the string “Hello, world” being displayed in a JavaScript alert window. When the button is clicked, the alert window will be displayed by your Scala/Scala.js code.

Getting started with Scala.js (a “Hello, world” example)

This is the first tutorial in a three-part series on getting started with Scala.js. This tutorial will demonstrate the proverbial “Hello, world” introduction. After this “Hello, world” tutorial, the next two tutorials will show some more powerful things you can do with Scala.js.

How to define an `equals` method in a Scala class (object equality)

Table of Contents1 - Solution2 - A Scala `equals` method example3 - Discussion4 - Example 2: A Scala `equals` method with inheritance5 - Implementing hashCode6 - See Also

Scala problem: You want to define an equals method for your class so you can compare object instances to each other.

Back to top


If you’re new to Scala, a first thing to know is that object instances are compared with ==:

"foo" == "foo"   // true
"foo" == "bar"   // false
"foo" == null    // false
null == "foo"    // false
1 == 1           // true
1 == 2           // false
1d == 1.0d       // true

case class Person(name: String)
Person("Jess") == Person("Jessie")   // false

This is different than Java, which uses == for primitive values and equals for object comparisons.

Fixing the Scala error: java.lang.NoSuchMethodError: scala.Product.$init$

As a note to self, when you see a Scala error message that looks like this:

java.lang.NoSuchMethodError: scala.Product.$init$(Lscala/Product;)V

it probably means that you have a mismatch in the Scala versions you’re using in your project. For instance, I just tried to use a library I compiled with Scala 2.12 with Spark, which was compiled with Scala 2.11, and I got that error message. In this case I was able to resolve the problem by recompiling my library with Scala 2.11.

Using `puts` or `echo` instead of `println` in Scala

As my mind was wandering off earlier today, I started to wonder what it would take to create a Ruby puts or PHP echo statement in Scala. (For some reason my brain can never type “println,” and puts or echo are much easier to type.)

One simple way to mimic a puts or echo method is to use Scala's ability to rename things on import:

scala> import System.out.{println => echo}
import System.out.{println=>echo}

scala> import System.out.{println => puts}
import System.out.{println=>puts}

scala> echo("foo")

scala> puts("foo")

scala> puts(1 + 1)