It’s all about time: Building a performant Stopwatch with MobX and React — fast
In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables.
In this tutorial we are going to build a simple stop watch App step by step. The source code is available on GitHub. Our endproduct will look like this.
Why MobX?
The main author of MobX, Michel Weststrate puts its best in this tweet:
So basically MobX is a library that should make your life as a developer a little bit easier. So how does MobX work? The main idea are observable: In the application one marks variables as observable and defines a function that should run when the observables change.
Counter Example
Let’s look at a simple counter example. We assume we have a simple html page like this:
The idea is to display in the span 0 at the beginning and increase/decrease the counter when the corresponding button is pressed. Here is the JavaScript code:
The code is simple: We save our counter in a Object called CounterStore and make it observable. We implement the render function so that it updates our display and tell MobX that when the observables change, it should run this function. The result can be seen here:
The source code can be found in this GitHub repository.
Implementation of a stop watch
Now that we have learned the basics of MobX, let’s have a look how to use it with React. First of all, we will need to install the bindings for React:
npm install --save-dev mobx-reactThese bindings work with decorators, an upcoming JavaScript feature. You can read more about them here.
In the following example we are going to use the strict mode. In addition to autorun and observables, we will need to understand two more concepts:
- computed values: These are values that can be derived from the observable state. For example, if the observable state contains the first name and the last name of a person, the computed value could be their full name. These computed values work as getters and are only updated if the dependent value changes.
- actions: Actions will be used to group the code. In the strict mode, one can only change the values of the
observableswith calling an action. This makes the code more safe.
Let’s begin by creating a Timer class. The timer class will hold two values: The passed milliseconds since the timer started running and saved milliseconds for the combined time that has passed in previous runnings.
The code is pretty straight forward: We have the two actions saveTime and reset to manipulate the internal observable values. The computed values are totalMilliSeconds which adds the saved and the current time together and display which gives a formatted string.
It’s now time to write the Store class which manages the running state, the start time, the current timer and the saved laps:
One of the nice things about MobX here is that we don’t have any difficulties of using asynchronous functions like setTimeout: MobX does only care that observables change and that we use action to change it. It will automatically react to those changes and rerender the necessary components. In our measure function we just check whether isRunning is set and update the milliseconds. Now it’s time to build our actual component.
As a side note, this will be our only component that has a state. We pass the store down to all the children. We create now a simple stateless Component that displays the laps with a left Text (Patch 1, Patch 2, …) and on the right side the display:
Lastly, we create our main component: It will contains simple buttons. These buttons will display depending on the store. When clicked they will call an action of the store. MobX will automatically update the component that it needs if an observable is changed.
And now we are done with our simple application. For the curious the source code is available at this GitHub repository.
Further reading
MobX is great framework for building fast and performant apps. The choice between Redux and MobX comes down to how much control we want to have about the application and how much we let our frameworks do the job. To learn more about MobX we highly recommend this video and the GitHub repository. There is also an interesting blog post about why it might be a good idea to use the power of MobX to avoid setState in React.
