Unless you’re a developer, this post will make very little sense to you. But if you’re interested in Toggl mobile apps’ inner workings, then we’re happy to share what we’ve learned working on them.
This is my first post for the Toggl Blog since joining the mighty Toggl Mobile team and I’m really excited about the opportunity to tell you about our work to improve the mobile apps and help you be more productive. That said, keep in mind I won’t be introducing any fancy new features in this post – instead I’ll be talking about the inner workings of the app.
So be warned, this post may get a bit technical. But I hope it can help out some of you fellow developers.
As any development team, at one point we had to face a group of classes growing unwieldy but with purpose rather simple – insert or remove elements from the time entries’ list. I know, any programming language has multiple methods to manipulate lists, but we couldn’t use just any method as there’s something that has become a requirement for any mobile app aiming to stand out: animations. To have them, we need to tell the view exactly what elements have been added or removed (or moved) and from which positions.
This is not as easy as you may think, especially because even if the update requests are always the same we already have two ways to show the time entries (single or grouped) and more may come in the future. Add to equation that lists must also include items other than time entries, like date headers. At the end, we had to write a lot of code to deal with many particular cases. And the more code you write, the more the chances to introduce bugs.
We decided to solve the problem by replacing the classes with a Diff Algorithm – in our case, building a new list of elements from scratch is much simpler (LINQ helps us a lot here, see here a great introduction by one of our colleagues) than applying the update operations one by one. However, we still need to know exactly what has happened in order to notify the UI (add, remove, replace and move events) and trigger the animations. And for this, we delegate the responsibility of calculating a posteriori the diffs between the old and new lists to a generic algorithm which can be reused with different kind of elements sharing an interface.
There are many great Diff Algorithms out there but none could serve all of our needs – particularly detecting moves. Adding this feature wasn’t difficult (essentially, a move is just an insert and a delete), but when you need to apply the diffs to update the list this becomes a bit tricky, as you need to apply some offset to the diffs’ indices to make sure you’re updating the elements in the right places. We also wanted to prevent some elements from moving (like date headers) and for that we had to make up a SoftUpdate to tell the algorithm which elements can be updated, but not moved.
After a lot of trial-and-error, we ended up with an algorithm that’s working fine for our needs and saves us a ton of needless coding. Chances are this situation is frequent in many other mobile apps, so feel free to adopt and tweak our example as you see fit – maybe it’ll solve your problems too.
So where can you find it?
In case you didn’t know yet, the code for Toggl mobile apps is open source and fully available at GitHub! Have a look at our Diff class and adapt it as you see fit. If enough people find it helpful we may create a package for it.
So that’s it for now. I hope you enjoyed reading the post as much as I did writing it. We are working every day to improve Toggl mobile apps so expect more technical articles to come!
And of course, any comment or suggestion is always welcome.