Ionic Framework as a Web Site


Oh iOS 9, I’m not going to miss you when iOS 10 drops. But with Apple’s pattern lately of breaking more and more Cordova/Hybrid compatibility in their new iOS releases, WkWebView in iOS8 and now Url’s with hash’s\window.location in iOS9. When Apple uses the slogan “Nothing’s changed, but everything” it should be “Nothing’s changed, but our degraded support for your Hybrid applications”.

Sorry I’m a little sore. It wouldn’t be so bad if their review times weren’t 7 days long (in the best cases lately) and asking for a expedited review was akin to asking your overly protective mother if you can stay out late after the movie……wait off track again sorry, gotta focus.

The above is the reason why Resgrid launched “Web Edition’s” of our mobile apps. The same app (more or less) as you get through the store but delivered via the browser, We are eagerly awaiting Ionic Lab’s Deploy to be released and available to be used on Store applications. Ionic if you need any testers were willing Smile.

Ionic doesn’t recommend using the framework for websites, it’s specifically designed for high performance hybrid mobile applications. But there if very little standing in the way for you to turn your Ionic application into a web application. But why would you want to do this?

  1. An Edge/Trial/Free Version of your app
  2. An online demo
  3. Supporting Desktop/Laptop users

For Resgrid we wanted a web edition that we can updated on the fly or use automated deployments.

Cordova, Plugins and Device Access

The first area you will run into issues is if your trying to access Cordova. In a web site you will not have access to the Cordova (as there is no ‘device’ for it to broker calls to). For Resgrid we had only a few instances where we needed an actual Cordova device, some of them where:

  1. Check if a device is an iPhone or Android
  2. Opening a file using the File Opener
  3. Getting the device UUID/UDID (via a plugin)

So here’s a simple Angular service we wrote to give us a check, isPhone(), before we do any device access or show features that require a device.

(function () {
    'use strict';

    angular.module('responder.utils').factory('deviceUtils', deviceUtils);

    deviceUtils.$inject = ['$q', '$timeout', '$ionicPlatform', '$cordovaDevice'];
    function deviceUtils($q, $timeout, $ionicPlatform, $cordovaDevice) {

        return {
            getDevice: function () {
                if ($cordovaDevice)
                    return $cordovaDevice.getPlatform();

                return "Web";
            isPhone: function () {
                if (typeof (cordova) !== "undefined")
                    return true;

                return false;
            isWinPhone: function() {
                if ($cordovaDevice)
                    if ($cordovaDevice.getPlatform() == 'WP8' || $cordovaDevice.getPlatform() == 'Win32NT' || $cordovaDevice.getPlatform() == 'WinCE')
                        return true;

                return false;

WebSQL\SQLite Plugin

Oh SQLite, your awesome, but not all at the same time. If your using SQLite as a backend storage system you can fall back to WebSQL without any API changes, but there’s a catch, WebSQL is deprecated and unsupported in Firefox and IE. Chances are it will be unsupported more and more as time goes on.

The solution? YDN-DB. YDN-DB is an abstraction over a number of different database implementations. In our implementation below we tell YDN-DB the order of priority for it to use as a backing database store in the options {mechanisms} array. We’ve told it to use SQLite first, if that’s not available/support use IndexedDB, then WebSQL, then NoSQL LocalStorage and finally memory.

(function () {
    'use strict';

    angular.module('').factory('localDbService', localDbService);

    localDbService.$inject = ['$q'];
    function localDbService($q) {
        var db;
        var valid = true;

        return {
            init: function () {
                var deferred = $q.defer();

                // Order of preferred storage mechanisms.
                var options = { mechanisms: ['sqlite', 'indexeddb', 'websql', 'localstorage', 'memory'] };

                try {
                    db = new ydn.db.Storage('ResgridResponder', dbSchema, options);

                    db.onReady(function (err) {
                        if (err) {
                        } else {

                            // Occurs when the database halts and catches fire!
                            db.addEventListener('fail', function (event) {
                                var err = event.getError();
                                console.log('connection failed with ' + + ' by ' + err.message);
                                db = null; // no operation can be placed to the database instance
                                valid = false;

                            // Occurs when a database error (i.e. a query error) occurs
                            db.addEventListener('error', function (event) {
                                var e = event.getError();
                                // common errors are AbortError, ConstraintError and UnknownError (possibliy for Quota exceed error).
                                // log error for debugging
                                console.log('connection failed with ' +;
                } catch (e) {
                    console.log("Unsupported browser, cannot use WebSQL");
                    valid = false;

                return deferred.promise;

With these changes, replacing SQLite and check to ensure we are on a phone before trying to use any Cordova or Cordova Plugin functionality, we were able to quickly use Gulp to build our site and deploy it to a Azure Web App.

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

Why Resgrid moved away from Gravatar


As a developer and technology guy in general I like the convince of Gravatar. Sites enabled with it just pick up my profile picture based on my email address, nothing additional I need to do to set that up, which is always nice. So when we started working on Resgrid and wanted to throw in a profile picture/avatar is was a no brainer, we used Gravatar.

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer and career fire departments, EMS, (SAR) Search and Rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).


But as time went on I noted that very few users in our system ever set one up. Even customers that really wanted profile pictures (some use those images to determine the rank or capabilities of their personnel) never setup Gravatar’s.

This past week I had the opportunity to talk to one of those customers. To see why they never used it, their response was 2 fold. 1.) They didn’t want YAS (Yet Another Service) with credentials to remember and 2.) Admins\Officers couldn’t set pictures up for their personnel.

I noticed the pain myself with the Gravatar service when I was working on the ability for personnel to update their own profiles from the mobile app. There seems no easy way from within the context of an application to allow users to update their picture. On a mobile app I’m not going to bounce users outside the app to try and use another website JUST to update a profile picture.

So where did we go wrong? Is Gravatar a bad tool?

When designing a product or service it will inevitably have a target audience. Stack Overflow is geared toward developers and technical folk. But Resgrid targets first responders who are usually not highly technical. It’s nothing for a developer to sign up for YAS, were used to it. But for people who aren’t technical even the simplest account setup is a huge barrier to cross.

As a developer I didn’t put myself in the context of my target audience, I took something that I do normally and applied it to my customers. For the most part anytime you do this, your going to fail.

So is Gravatar a bad tool/service? No it isn’t, but it does have a target audience, just like everything.

So when should you use Gravatar?

  1. You have a technical audience that doesn’t mind YAS. (i.e. for a security/privacy oriented product/service I wouldn’t use it even if the target audience is developers)
  2. Profile pictures aren’t an important part of your product or service
  3. Users are only in charge of their own profile pictures
  4. You don’t have a mobile app where users can update their profile from
  5. Your product or service is dealing with Word Press (since acquiring Gravatar anyone with a Word Press account has a Gravatar)

The lesson here? Always think about your target audience and build the product or service for them. Evaluate what your doing and using and apply that filter to it.

Why Unit Test without Mocking your EF Repository


Every once and a while I get a fair amount of flak about how I unit test my services. I’m a firm believer in the Onion Architecture and Repository Patterns and the techniques developed at Online Advisors for implementing those patterns are still better then any other implementation I’ve seen.

Y87zIwvThe repository itself is generic and thin. You can see an implementation on this GitHub page. With the underlying data store implementation hidden behind a generic interface that makes it very easy to mock the calls to the database, but should you?

Any Unit Testing purist will tell you that Unit Testing is only testing one small, isolated, functional unit of code. When that unit of code go out of scope it needs to be mocked. This is all well and good, and I do a fair amount of testing like this. But then Entity Framework Code First and automatic migrations came along, coupled with SQLCE or LocalDB why mock your repository?

When my repository method is generic (i.e. a Get, Save, Delete) there is no real logic in there. But when I test it I gain the added benefit of verify that data going to the database and back is correct. Additionally using the Seed method of Entity Framework it’s very easy to scaffold in test data that can be utilized by the test.

Anyone who’s mocked complex data structures knows your basically writing a lot of that by hand, or storing it in a file and deserializing it to be served up to tests. If your going though that trouble, then why not just use EF, Code First, Automatic Migrations and Seeding? It really is a time saving once you got the data in the seed statement.

Additionally it’s helped me find concurrency and data access issues. Because of how unit tests are executed using a lightweight SQL instance I was trace down race conditions and slow LINQ statements. None of which would have been possible by just testing the service or logic layer in isolation.

When I test this way I still call it unit testing. The way it gets the data, either through an In-Memory array, Mock or LocalDB is not what’s being tested. As long as my repository method itself has no code or logic it will be side effect free.

This isn’t without it’s faults and it’s not perfect. Based on their very nature SQLCE and LocalDB are very lightweight version of SQL Server. This means they can’t perform the way normal SQL does, operate in the same way or even use some of the same data types. For example SQLCE doesn’t support the Geo data type.

So it may not be perfect for every scenario or database. But if it’s an option, will be side effect free and won’t cause interdependency issues between tests then really is the difference between that and Mocking? Besides the fact that your exercising more of your code base?

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

Go to Top