Introducing Yahnac: Where RxJava Meets Firebase and Content Providers
What’s Yahnac you might ask? Yet another Hacker News client, because there are never enough Hacker News clients out there!
For those who don’t know, Hacker News is a social news website focusing on computer science and entrepreneurship and it is run by the startup incubator Y Combinator. In general, content that can be submitted is defined as “anything that gratifies one’s intellectual curiosity”.
Not so long ago Y Combinator announced a long awaited API for Hacker News. Although it was pretty basic and simple, the most exciting piece of news to me was that the API was built using Firebase.
In terms of features, Yahnac allows you to read all Hacker News content from Top Stories to Jobs. On top of that, you’ll be able to add Bookmarks and keep them as long as you like.
If you are interested in knowing how Yahnac has been built, please do Read on!
A confession to make
Doctor, I have to confess. I like Loaders, Content Providers and their boilerplate. There is no point arguing if they are the best solution for everything, they are not.
A few months ago RxJava started to become popular amongst Novoda. Applications like Digital Concert Hall and The Sun have been developed with reactive approach and the results are amazing.
Also, I’m lucky enough to have people like Benjamin Augustin, Volker Leck and Antonio Bertucci around the office, who strongly believe in the benefits of reactive programming and it’s applications to Android.
Following these principles I started a journey to wrap all these Framework specific solutions together with Rx and Firebase, a very different approach to conventional Rest APIs.
Architecture
The principle is very simple, it doesn’t matter how the data is retrieved from the network since all I really care is to store it into the database in a meaningful way and display it as quick as possible. These very distinct responsibilities can be handled by Rx on the networking layer, SQlite in the database layer and Loaders in the UI layer.
Leveraging all the network and data manipulation onto Rx together with Firebase makes a lot of sense. Firebase data is retrieved by attaching an asynchronous listener to a Firebase reference. The listener will be triggered once for the initial state of the data and again anytime the data changes.
Based on the current implementation of the API, one needs to retrieve to 501 Firebase instances in order to display a list of 500 top stories. One call will retrieve the id of all the items in the Top Stories page, then one needs to do another call for each one of those id and retrieve the data from the news item.
Rx seems like a perfect candidate to solve all this, it’s reactive approach allows to deal with all the recursive calls and threading seamlessly. It also allows to manipulate that data and provide with the output that the database layer needs. The output of this will be ContentValues, which is what a ContentProvider needs.
On the UI layer, once we are using ContentProvider it’s very easy to decide how to display the content. CursorLoader allows you to retrieve a Cursor with the desired data, it all made sense!
There was only one step more to be take, and that was to solve the incompatibility of RecyclerView and Cursor, in following post I’ll deep dive into the actual implementation details and issues, stay tuned if you are interested.
Supporting different form factors
I had several doubts regarding the UI and how it would look like in different form factors. At the beginning I thought about using a Multi Pane but after using the app for a while something didn’t feel right.
The navigation wasn’t very clear on landscape so I decided to use a Staggered Grid like the one Etsy made so popular back in the days.
Same goes for smartphones, the UI will adapt from one column to two.
We live in a Material world
No decent app nowadays should be shipped without Material Design principles and after talking and presenting about it I couldn’t be different.
The majority of articles are shown in a WebView, that does not leave a lot of space for transitions and fancy animations. The application has no pictures therefore beautiful Palette can’t be added, not the best case scenario is it?
However, Material is not just animations and colors. Several aspects like typograhpy, spacing and ripples can easily be applied making a big difference.
Another of the features that all Material applications show these days is the quick return pattern. It’s a great idea and allows the user to enjoy more content while scrolling.
Right, how do I get it?
There’s more to come
The application is not finished, there are several feature that I’d like to add like being able to publish a news item or replying to comments. Do yo fancy contributing? Please do! The source code is available in GitHub and all PRs are welcome.
Originally published at www.malmstein.com on March 28, 2015.
