How I Re-built My First Multi-Platform App

So I decided to rebuild wiilo.

I’d built four Apps back-to-back, and I figured it was time to revisit my first App as I’d received some customer feedback and I had made some observations about it’s performance.

My main piece of customer feedback was for the ability to look up a destination and receive a weather report for that destination. Handy for travellers.

My own observations were around the animations that were in use in the App. It appeared that the CSS animations were sometimes freezing or not running. There were other issues around ensuring the App provided a meaningful message should it not have permission to use location or did not have network access.

Features aside, I then needed to determine what framework to build my App with. The first version used Intel XDK’s App Framework. I decided I’d look around for something else because I was struggling a little with getting v3.0 of App Framework working to my liking.

Poking around I came across a nifty framework called Phonon. It is brilliant. I ended up building my wiilo App from the ground up with this framework. I also used it’s language translation module to translate the user interface to nearly 20 different languages.

Then I tried putting the work into Intel XDK and compile it. This is when dismay set in. My App simply would not work in Intel XDK. I searched high and low for a solution. Nowhere could I find an answer.

I had to start again. Again.

Learning for next time: compile in Intel XDK early and often to find out whether or not the technologies of choice are worth pursuing.

After hunting around for a while I couldn’t find a decent framework that I wanted to invest time in. I thought about revisiting Framework7 or Ionic. Framework7 does not support Windows platform Otherwise, it’s great. Ionic (the version Intel XDK supports) also doesn’t support Windows platform.

I had been using a responsive web framework called Materialize, which is great. But it’s used for building responsive web sites, and this is not quite the same as building Apps. The main difference – in my mind – is that a web framework scales down from large screen to small screen and to screens in the middle, allowing the developer to create an experience that may be the same or similar (yet different) depending on screen size of the device. Materialize does this very well. The bit it doesn’t do is lend itself as an App framework. In an App paradigm (in my view), the framework should have a sticky header, a sticky footer, and a body. Sometimes you might not want these things, but I did for my wiilo App. The header was to display the current location or the searched for location, and the footer was to provide navigation buttons.

Materialize’s native header and footer were not really what I needed. I also needed some special scripts in order to navigate from page to page.

So I created screen.js.

Screen.js uses flexbox to create a header, footer and body area. The nice thing about flexbox is that if specific flex object is not used, the other flex objects will fill the remaining screen without any additional thought. Nice. The downside about flexbox is that the browser must be modern in order to use it. This is not so much a problem in the mobile device world (at least not as far as I am concerned).

I decided to use jQuery 3.0.0 for two reasons. This version had just been released. And I like jQuery. Materialize also plays nicely with jQuery. And the widgets I had identified to use in my App also played nicely with jQuery.

I then went about building my App using Materialize, and put my Screen.js add-on over it, and I went ahead building the core functionality of my new version of wiilo. The only piece missing was language translation. I found a surprising array of language translators out there. And frankly, none of them are as nice as the one included with Phonon (including the one I eventually used). The library I did use is called l10n.js. Don’t get me wrong, this library is excellent. It’s just a tiny bit less user-friendly for modifying innerHTML content than Phonon’s i18n. And l10n.js’ management of JSON files is not as “DRY” as Phonon’s implementation.

So, I ended up rebuilding my wiilo App from the ground up. And I ended up creating an entirely new GitHub asset in order to make web frameworks work in a smart device app way. And I compiled an App every time I added a piece of core functionality (and thankfully each compile worked flawlessly – thank you Intel XDK).

In case you’re wondering, I’d love feedback as to whether or not you’ve been able to get your web framework of choice to work with Screen.js. Theoretically there’s no limitation – apart from the feature/functions within the framework you’re using. Of course, the framework you choose must be HTML5 compatible.

Additional Note: I also found a nifty add-on called fastclick.js, which really makes your App perform in at the smart device’s user interface as if it were built from native. You’ve really got to try this one out.