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

26.03.2023 / By  Daria Karasek

Scaling Applications: Best Practices and Strategies

As your application gains popularity and usage, ensuring it can handle the increased traffic and demand is essential. Scaling your application increases its capacity to handle more users and data. This guide offers tips and best practices for scaling your applications effectively. Understand Your Application’s Architecture. Before you can scale your application, it’s essential to […]

24.03.2023 / By  Daria Karasek

Maximizing Your Apache Kafka Investment with Consulting Services

If you’re using Apache Kafka for your data streaming needs, you may face challenges or want to optimize your implementation. Our consulting services can guide you in improving your Kafka setup, addressing issues, implementing best practices, and utilizing new features. What is Apache Kafka? Firstly, companies use Apache Kafka as an open-source distributed event streaming […]

20.03.2023 / By  Daria Karasek

7 Tips for a Successful Development Career in Fintech

Fintech is one of the world’s most exciting and fastest-growing industries. The fintech industry is worth approximately $180 billion (Deloitte). The fast-growing space is projected to reach $174 billion in 2023. And is predicted to reach $188 billion by 2024. It offers a unique set of career opportunities for future fintech developers.  If you’re thinking about beginning a […]

Need a successful project?

Estimate project