I want to extend the whole idea behind my notes for the Principles of Reactive Programming course. I will include here some interesting materials that I have found over the last week. Likely, Scala is a really wide field to discover something new. The idea is to tie topics from the course to the articles and to form a better understanding of the whole Scala language.
Introduction to Reactive Programming
In the imperative programming when you have, for example, a variable
a = b + c, then the changes of
c will not affect the
a. The core idea of Reactive Programming is simple — when you change
c, then the
a automatically changes too, based on new values of
What is Scala.js actually?
Let’s take a look in the past. I was influenced by the GWT project a lot when I just started to learn Java. At first, I thought that Scala.js is something similar. And it is mostly used to create admin consoles for websites. But this is a really different topic.
Furthermore, you can reuse the same code for client and server by using Scala.js, this is a relief for many developers who needed to write a lot of similar code on front end and back end.
Before we start
I base my example mainly on materials from a Hands-on Scala.js book. If you want to learn Scala.js, you should definitely read this book. It provides comprehensive examples and covers most of the topics on this library.
sbt configuration file
First thing we need to do is to configure our project. I will not spend much time on this part, since it is covered well in the official tutorial of the Scala.js library. First of all, we add the below line to the
Then, enable the Scala.js plugin in the
build.sbt file. Eventually, we add two dependencies: scala-js-dom and Scala.Rx libraries. The scala-js-dom library adds dom manipulation functionality to the Scala.js. Here is the complete
Probably, you have notices that we use
%%% for dependencies. This allows compiler to use proper version of a library for each platform: Scala.js and Scala-JVM.
In the current application we will build a simple page where we get a mouse position and draw a rectangle on a canvas under the cursor.
Here is a Scala source file for that:
- Initial entities.
- Reactive variables.
- Event handing.
The first line is the
@JSExport annotation. It indicates that the entity (object, method etc.) will be exported to the JS file.
Next, check the function definition:
Then, there is a simple block where we set
We are going reactive!
The first thing we define is a mouse position. The
Point class is wrapped in a class named
Var. When the
Var value is updated, it forces to recalculate all connected entities such as
You can get the current value of both
Rx by calling
center(). This is equivalent to
entity.apply() method call.
Obs class observes
Var entities and does some post-processing (side-effects) when the observed value is changed.
skipInitial means that the body of
Obs will not run after the declaration and it will be evaluated only after a change of an observed value.
Next, we append our created reactive entities to the provided
<div> element. So the content of that
<div> changes when the mouse position is changed.
Finally, we define two events. First, for the
ESC button to clear the screen. Second, to set the mouse position.
See how mouse position update is declared?
This can be rewritten as
Yes, this is another syntactic sugar in Scala.
Wait. WAIT! If you look closer at the
appendChild function, then you will see that it needs a
Node type there, not
Rx! This is actually the magic of Scala, it is called
implicit. I have already mentioned that a bit in the previous article.
The main idea is that when the observer finds out that the value of
Rx entity is changed, it replaces the previous
<div> element with a new one.
Here is a part of an HTML file, which is used for production:
First, we place two
<div> elements for displaying the position of a mouse cursor and a canvas, where rectangles are drawn.
opt (means optimized), there is a version which have
fastopt suffix, it is used for developing and contains additional information for debugging.
The project can be built with
sbt fastOptJS and
sbt fullOptJS commands for develop and release versions respectively. By default, the output HTML file is placed in a
<project path>/target/scala-<scala version>/classes/ folder.
We run our
start function by calling
article.MousePosition().start method and providing necessary parameters.
Live demo and source code
We have successfully completed the example. There are several things that I did not mention here, since they are not so important. You can see the complete source code below.
I really like both Scala.js and Scala.Rx libraries. They can help you to write a better code in their own way. Scala.js — by providing static typing and the power of Scala libraries. Scala.Rx — by implementing a new programming paradigm which can help you to write a cleaner code.
Now we can see the result. Yay!