Using Reactive Extensions for data binding in Scala.js

The Problem

In my previous post we have written a simple app with Scala.js. In the end we managed to do everything we wanted to, but as we added more and more code a problem appeared – state management, the real app killer. Although our app didn’t do anything advanced, state handling and UI updates forced us to write a lot of additional code.

That post has shown that Scala.js allows us to write browser apps, but it also demonstrated that these apps can be vulnerable to other ills of frontend programming. To fix this issue we need to simplify our codebase. One way to do that is by adding a binding between the UI and what data our app holds. This way if the data changes in one place it will be automatically propagated to the other. We will implement this using Reactive Extensions.

What are Reactive Extensions?

Reactive Extensions

Reactive Extensions (Rx for short) is a library originally introduced by Erik Meijer to the .NET framework. Rx aims to allow the composition of asynchronous and event-based programs using Observables. It might sound confusing at first, but the idea gets intuitive after you try it out. Observable can be seen as a source of events, hence “event-based”.

We don’t know when an event might happen, that’s why it’s “asynchronous”. We can observe the source and react on events, thus sources are called Observable.

Consider an app that counts the number of clicks on a button. The button will be our Observable and it will emit a “Click” event each time it gets clicked. Using Rx we can create a stream of “Click” events where each will update a counter. This is the idea behind Reactive Extensions in a nutshell.

After being introduced to .NET the idea quickly spread across other languages, including Scala. In our post we will use Scala.Rx created by Li Haoyi. We’ve chosen this implementation as it’s fully compatible with Scala.js. It’s no surprise if you consider that creator of Scala.Rx is also the person behind Scala.js.

Reactive Implementation

To simplify our organizer we want to create a graph that will propagate changes in our data from one side of the app to another. We will aim to create a graph as depicted below.


Round shapes represent event sources of various kinds – time, user input, and web. Even our TODO data might be used as an event source. Events are then passed to calculations – block shapes with round edges. Based on the calculated values we update the UI. I will explain it step by step. Let’s start from our sources. In Scala.Rx we create them using Vars as follows:


It get’s slightly more complicated with other Vars, so let’s define a helper trait.


That looks quite complicated at first glance, but really it isn’t. All we do here is create a Var that updates when a browser event happens – interval tick or elements onClick handler. We will put those helpers to good use in our main code.


Having that in place, we can add dependent calculations. In order to make Scala.Rx do it’s magic we need to put all calculations depending on sources inside Rx blocks or Obs. It’s as simple as:


If you compare this new solution with the diagram above, you will find out that they are basically the same. Thanks to Rx we’ve turned a stateful spaghetti code into a simple flow. Neat.

What is the difference between Rx and Obs?

Rx is a definition that automatically captures Vars and other Rxs in it’s block. When those captured elements change, the capturing block is evaluated again with the new values and the capturing Rx is updated. Obs can be thought as a more advanced Rx. You can do a few more tricks with it – like perform side effects and explicitly define dependencies (which we use in this example).


As you can see Rx was immensely useful for reducing boilerplate code and creating a simple flow of values in the system. Reactive Extensions have proven their worth.

Creating this bidirectional flow is a step in the right direction – it helped us to manage state. Still when the app grows so does the graph and potentially it may get big and complicated later on. Modern frontend apps deal with this issue by using encapsulated components and unidirectional flows … but it’s something for another post.

PS. Special thanks to lihaoyi for creating the great code – Scala.Rx. It wouldn’t be possible without you.

[UPDATE] I would like to say sorry to Sébastien Doeraene who is the author of Scala.js and was omitted in these blog posts. Without his hard work Scala.js would not come to life. Thank you Sébastien.


Do you like this post? Want to stay updated? Follow us on Twitter or subscribe to our Feed.

Read more


Patryk Jażdżewski

I'm a software consultant always looking for a problem to solve. Although I focus on Scala and related technologies at the moment, during the last few years I also got my hands dirty working on Android and JavaScript apps. My goal is to solve a problem and learn something from it. While working with teams I follow "The Boy Scout" Rule - "Always check a module in a cleaner state than when you checked it out". I think this rule is so good, that I extend it also to other aspects of software development - I try to improve communication patterns, processes and practices ... and all the things that might seem non-technical but are vital to success.

Latest Blogposts

05.12.2023 / By  Michał Talaśka , Michał Talaśka

Advantage of Team-Extension: success through speed, cost-efficiency and quality.

Traditional hiring vs team-extension In the fiercely competitive arena of IT, companies grapple with strategies that will drive them ahead of the curve. The goal is straightforward yet immensely challenging: achieving operational excellence and innovation prowess. Herein, a pivotal factor emerges—the acquisition of top-tier talent proficient in driving tech objectives forward with expert skills. Choosing […]

30.11.2023 / By  Matylda Kamińska

Scalendar December 2023

Event-driven Newsletter As we bid farewell to another year filled with technological evolution and groundbreaking innovations, we are happy to present the December edition of our monthly roundup, featuring key events from the realms of Scala, Software Architecture, Frontend, and Go. In this compilation, we capture the month, highlighting noteworthy conferences, meetups, and developments that […]

24.11.2023 / By  Sylwia Wysocka

Navigating the Future at Web Summit 2023: A First-Timer’s Reflection

Insights and Reflections: My First Web Summit Experience Join me, a business development specialist from Scalac, on my first-ever journey through the buzzing halls of Web Summit 2023 in Lisbon. As I stepped into this ocean of innovation and opportunity, I was filled with a mix of excitement and curiosity. What unfolded over the next […]

Need a successful project?

Estimate project