Introduction

Monocle Giraffe is the most beautiful way to browse Imgur on Windows Phone and Windows 10. Monocle Giraffe not only supports all the features of Imgur, it integrates other APIs to provide enhanced experience.
Want to share image directly instead of a link? Monocle Giraffe will do that. Want to browse images by Subreddit? Monocle Giraffe has got you covered. Want to download entire albums? Yup! Monocle Giraffe.

Challenges

Universal API

Monocle Giraffe is a UWP app. That means, whether you launch the app on a device - be it a Windows Phone, a full blown desktop, or anything in between - it is the exact same app. While this gives a lot of power to the developer, it is not without its challenges.

First and foremost, we must scale the UI correctly according to the screen sizes. Fortunately, XAML screen size triggers do a lot of heavy lifting for us. Despite of that, some UI bugs creep through. I was able to squash them with help of some C# code. The app scales seamlessly between screen sizes.

Hardware capacity is another challenge major challenge when you’re targeting a wide variety of devices. Monocle Giraffe uses various parameters to detect what features should be enabled for the current device. For example, Phones and other low powered devices do not render GPU hungry frosted glass surfaces and gracefully switch to solid gray color. While more powerful devices load and render entire comment trees at once, low powered devices lazily load comments as user scrolls to them.

Enhanced Search Experience

I have always found Reddit search lacking. To provide a great user experience, Monocle Giraffe needed to provide a great search experience. While tried working with Reddit’s APIs, they simply weren’t relevant enough. Here’s the secret sauce behind Monocle Giraffe’s search experience: It doesn’t use Reddit’s APIs at all. Monocle Giraffe actually invokes an AWS Lambda which provides this enhanced search experience. This Lambda function gathers data from multiple sources, applies some heuristics, and then comes up with relevant search results.

UI Controls

Many of the UI controls that Monocle Giraffe uses simply weren’t available (in the SDK as well as third party toolkits) when Monocle Giraffe was built. Some components had to be built from scratch while some others are existing components in disguise.

The Flowing GridView: This is one of the trickiest bit. The GridView bundled with the SDK forces us to use cells of fixed height and width. However, our images have different aspect ratios. It would not be just to put them all in boxes of same size. So, Monocle Giraffe starts with a blank canvas (literally, it uses XAML Canvas from the SDK) and renders cards on them. Lots of tiny performance optimizations had to be made to make this work fluidly on low powered devices. Here is the full code.

Comments View: Imgur comments have a tree like structure. It would be no-brainer to use a TreeView from one of the libraries. However, lazy loading is very tricky with those. Solution? Monocle Giraffe’s comment view is actually a ListView in disguise. All the comments just use a left padding proportional to their depth. The C# code-behind for this view handles expansion and collapse of comment threads. Full code can be found here.

The Results

All things considered, Monocle Giraffe is a success on multiple fronts. From engineering and product management perspective, this app was a turning point. I got to push boundaries of UWP platform as it was being introduced. Overcoming challenges was a great learning experience and taught me a lot of things about optimizing user interfaces. This app truly forced me to go beyond the tutorials and create something of my own from scratch. Monocle Giraffe helped me change from mindset of “making an app by implementing the API” to “making an app to provide value to the user”.

On a commercial level, Monocle Giraffe was as successful as can be expected from a Windows Phone app. It became wildly popular among the Reddit and Imgur crowd. A few people joined in to help with design and development. It even got press coverage from the likes of Windows Central.

But don’t take my word for it. Try it out for yourself.