search

Mobile development 2/3 - different approaches

Following the first blog in this mini series on mobile development, this second blog post 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?! 

Responsivewebsite

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.

Apphandleswipedrawcard

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:

Appusingwebview

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 blog post, we'll look into the all Xamarin solution to alleviate some of the miseries.

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

STRONGMINDS 

STRONGMINDS er et software-udviklingshus i vækst. Vi har solid erfaring med cloududvikling og integration af forretningssystemer og andet udstyr. Vi laver solidt software-håndværk, der giver værdi til din forretning, og du er altid velkommen til at kontakte os, så vi kan drøfte dine muligheder. 

Kontakt Icon Kontakt

STRONGMINDS 

INCUBA - Katrinebjerg

Åbogade 15 

DK - 8200 Aarhus N

 

T: (+45) 7026 6416

E: info@strongminds.dk

ERFA-gruppe for software-udviklingschefer

STRONGMINDS After Work er en ERFA-gruppe for softwareudviklingschefer i Østjylland med en LinkedIn-gruppe og relevante gå-hjem-møder, der kan skabe samarbejde, dialog og relationer. Sammen vil vi løfte og udvikle niveauet og miljøet for softwareudvikling som profession. Er det noget for dig, så kontakt os gerne.