Appendix A. UI flows and threads for SquareRt and Countr

 

In chapter 6 we looked at the user flows for SquareRt and Countr, and you saw how to break them down by layer (view, view model, or model), and by thread (UI or background). Let’s now look at a full breakdown of these flows with the help of the handy diagram that was introduced in figure 6.19.

A.1. SquareRt

There’s only one user flow in SquareRt, shown in figure A.1.

Figure A.1. The SquareRt app is pretty simple, with only one flow that the user can take.

Mapping this to the different layers and threads is relatively simple. The calculation is fast, so it can can run on any thread. Figure A.2 shows this flow broken down.

Figure A.2. The SquareRt user flow is trivial: the view handles the user interactions, the view model passes values straight through, and the model can calculate on the UI thread.

A.2. Countr

Countr has four user flows, as shown in figure A.3.

Figure A.3. The user flows for the Countr app: showing, adding, deleting, and incrementing counters

A.2.1. Loading counters

The first user flow is loading counters from storage and showing them on the UI. Loading from storage happens in the model layer and on a background thread. The list of counters is then shown in the UI, back on the UI thread. Figure A.4 shows this flow.

Figure A.4. The first user flow for Countr loads counters on a background thread and then updates the UI from the UI thread.

A.2.2. Adding a counter

A.2.3. Deleting a counter

A.2.4. Incrementing a counter