curve

Mobile development 2/3 – different approaches

Mobile development 2/3 – different approaches

Following the first episode in this mini series on mobile development, this episode will explore the responsive and hybrid solutions further as we build the skeletons of a small PlanningPoker [1] card app.

**Please note that it is not the purpose of this blog to present the smartest card app ever imagined, but more to hint the different approaches.**

The responsive website

We’ll start with a shot at a responsive solution with support for card viewing at all sizes. So, when the user resizes the browser window the card must resize while keeping it’s proportions. Also, we need to support browsing through the different cards, and the most obvious way to do so, is to allow the user to swipe the cards left and right?!

Figure 1: Responsive website

Implementation

The logic in this simple web app lies in the handling of the swipe, deciding which card to show and the actual presentation of the card itself.

While it’s technically possible to craft a styled div-based version, it’s seems more appropriate to use a HTML5 canvas and draw the card. Something along the lines of

<div id="main">
    <canvas id="card-canvas" width="320" height="480"></canvas>
</div>

We’ll be using the excellent Hammer.js for swipe handling, and a possible implementation of a swipe handler looks like this:

var hammerTime = new Hammer(canvas);
hammerTime.on("swipeleft", function (ev) {
  currentCard = (currentCard + 1) % possibleCards.length;
  drawCard.draw(canvas, possibleCards[currentCard]);
});

Drawing the card is relatively easy using canvas drawing primitives – one pain point though, is the use of a custom font, in this case the Google Play font. Different browser versions has different requirements for using embedded fonts, so ensuring the correct version is a bit of a bother. Use Font Squirrel Generator for packing up font files and receive their suggestions for correct styling.

@font-face {
    font-family: 'playregular';
    src: url('../../Fonts/play-regular-webfont.woff2') format('woff2'),
         url('../../Fonts/play-regular-webfont.woff') format('woff'),
         url('../../Fonts/play-regular-webfont.ttf') format('truetype'),
         url('../../Fonts/play-regular-webfont.svg#playregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Also, the module Font Face Observer is great for handling the loading of the fonts, which is also a topic in its own.

So, we’re left with a working prototype at http://strongmindspokerplanning.azurewebsites.net/. You should be able to swipe left and right using your mouse and the card resizes responsively.

Hybrid approach

When handed the responsive web site URL, implementing a primitive WebView wrapper is easy. You can do this in several ways, either natively on the platform of your choice or, you can use a Xamarin Forms WebView for cross-platform compatibility.

The (C#) code can then be written as simple as:

public class CardWebPage: ContentPage
{
    public CardWebPage()
    {
        Content = new WebView
        {
          Source = "http://strongmindspokerplanning.azurewebsites.net"
        };
    }
}

Then, for instance, the Android version looks like this:

Figure 2: App using WebView

But, we should dig a little deeper in case we were to release this version. For instance, there are general presentation issues and issues when rotating the WebView. On the upside is a single code base, although using two different technologies. If you stick with a suitable subset of compliant HTML5 and CSS you have a unified approach to your mobile app with all the before mentioned benefits from running on the mobile platform itself. Also, notice that the web site need not be external to your app – the Xamarin.Forms WebView allows you to embed the web page within the app itself.

But, all-in-all this hybrid approach leaves us with the impression of two opposite turning gears, which could easily collide in an odd mix up of limitations in either of the two technologies.

In the next and final article, we’ll look into the all Xamarin solution to alleviate some of the miseries. Please, find the article below.

References

[1] PLANNING POKER ® is a registered trademark of Mountain Goat Software, LLC. Sequence of values is (C) Mountain Goat Software, LLC

Do you need help with Xamarin?

Morten Hoffmann

CEO

T: (+45) 3095 6416