JavaScript Open Day 2015 Review

Last Friday, 26th June, I trundled into the big smoke (London town) to attend the very first JavaScript Open Day. The event was put on by Microsoft and it was another chance for them to show that they’re opening up in terms of how they see external developers, and how these developers see them. The day was a single track affair hosted in the lovely St James’ theatre.

From a MobileCaddy point of view we were interested in attending for several reasons; not only did we see this as another great chance to continue learning and to see what was coming along in the future in terms of JS (ES7 + others) but we also wanted to see what MS had in mind for mobile, especially if they had any views on hybrid apps. It’s clear that MS are trying to shift their brand in respect to how developers view them, but are they pushing energy into how enterprise (who have been woo’d by Apple of late) also see them?

The event was compered by Christian Heilmann, a former evangelist at Mozilla and now with Microsoft. He’s someone I follow on twitter, and even though I don’t always agree with him, I recommend you do the same – follow him that is, not necessarily disagree with him. Who knows how he has the time to write and digest so much information but some of it is gold-dust.

Keynote: Innovation Vs Impatience – Chris Heilmann

Chris – I believe he’s happy with being addressed like this – also kicked off the day with a talk through some of the downsides of being involved in such an active and exciting technology such as JavaScript. He pointed out that he’d just recently seen this article on 9 libraries for working with localStorage.

He makes a good point that there’s a lot of opportunity for collaboration that goes missing; It should be noted that this a common situation in other languages also. The keynote then covered a list of the signs of impatience and details around the reasons for them and their downsides.

    • Polyfills – Although it enables devs to have a common implementation across browsers it does mean that old code can linger on and that older environments can be asked to do things that aren’t performant.


    • Libraries and Frameworks – Of course these can be truly time-saving, but it does mean that devs can be left un-exposed to vanilla JavaScript and the power of the language.


    • Transpilers – These enable devs to write code (now) using the latest bleeding edge syntax, which can of course lead to better code. However using transpilers does mean that, for example, writing ES6 code and transpiling it will result in ES5 code and so browsers that support ES6 won’t get to use the power of it. Essentially you take a hit on the newer browsers not being able to fulfil their potential.


Chris also covered some things that were picked up during Microsoft’s development of Edge (their new browser). It was interesting to see how they were fixing issues in webkit so that their own implementation was also correct. There was a whole load more content (including funny gifs) so go and grab the slides here.

ES6 Now: The Good, The Bad, and The Hype – Andrea Giammarchi

Now I should be open here, a fair amount of Andrea‘s talk passed me by without me completely following… I’ll put a positive spin on it and say that it’s likely that he’s just too clever for me. In essence, though, he took us through what was new in ES6… but not just that. He also took us through how the new features could be achieved before ES6, along with pitfalls (and bonuses where applicable). The code used in his presentation and the presentation itself can be found on github.

Development Workflows – Peter Müller

Peter, who works for Citrix on their project management product Podio, was up next and talked about development workflow tools. His opening gambit of “I wanted to use ES6, I didn’t want to write a 900 line gulp file” hit the nail firmly on the head when it comes to the state of tooling in today’s developments workflows.

I wanted to use ES6, I didn’t want to write a 900 line gulp file – Peter Müller

Being involved in our MobileCaddy tooling (such as our mobilecaddy-cli) I understood all too well how tough it is to make tools that are not just easy to use, but also simple… it’s getting this balance right that is so hard. When trying to take repetitive tasks away from the user (or dev) you can very easily slip into a scenario where your tooling, although easy to use, is far from simple. In fact this reminded me of this vid in Google’s HTTP 203 series. easy-vs-simlpe Peter then demonstrated a new project of his that hopes to help; Fusile. Fusile aims to be an asset (pre)compiler for web projects. It essentially mounts a fuse file system on a target directory and does on-the-fly compilation (etc), with the idea that any parts of your workflow can target these files without the need of repeating the set of compilations and transpiling. I can see how a tool like this could reduce configuration and possibly numbers of tools in your toolset, but of course it comes with the downside of being yet another possibility to consider when you first start-out.

Understanding Data Created by IoT Devices – Bianca Futuna

Bianca, a tech evangelist and IoT expert at Microsoft, was up next with a talk named Understanding Data Created by IoT Devices. To be honest this seemed a little out-of-place in the day’s program, and although ultimately quite interesting it seemed as much more like a subtle (or not) sales pitch for Microsoft’s Azure product. With this in mind I won’t cover the presentation in any detail, but point you off to the Azure site, that you can follow, if you’d like.

Installable Web Apps (1) – Andreas Bovens

Now we’re onto something interesting! Andreas is a product manager at Opera and gave us a talk on how web apps are really able to start taking on native apps and offering really rich and valuable experiences to their users. He talked through a few of the features and capabilities that were coming (or already available in some form) to web apps that would help push their value;

    • Device APIs – such as
        • Vibration


        • Geo-location




    • Add to Home Screen
        • Currently in Opera and Chrome




  • Ability to specify display mode and orientation (also via media queries)



    • Push Notifications – Let’s just not annoy our users though, eh.


There are conditions of use to all (or most) of the above, but they certainly show a bright future for web-apps, and perhaps for all apps built with standard web technologies. Andreas showed us examples and explanations of the above, I’d like to share them but can’t find a link to his presentation (yet).

Installable Web Apps (2) – Martin Kearn

As a(nother) tech evangelist at Microsoft Martin took us through some more Microsofty aspects of web-apps and what they are doing to embrace them. The core of the talk focused around manifold.js and how it is the “simplest way to create hosted apps across platforms and devices”. It’s a nifty project that can take a project or site and create a hosted app based upon what it can derive. It looks like a very useful tool for getting started on a new project, and one I can’t wait to try out. Martin also covered how Windows 10 has made it possible for hosted web apps (like those created by manifold.js) to access the native APIs. This is very nice to see, and you can see how these apps could really provide a seamless experience to users of the platform. He lastly showed a demo of how these web apps can be run inside Mirosoft applications such as Outlook and Excel using office.js. This sparked a lot of interest, and could potentially be a real hit within enterprise.

The Toxic side of Free – Remy Sharp


Remy, creator of the incredible JS Bin, gave us a talk on his journey with the project, and specifically some of the bad stuff he’s had to deal with. He covered issues he’d seen from all sides of bad;

  • Financial
    • Stolen credit cards
    • JS Bin Pro
  • Spam
  • Scams
  • Hacks (DDoS, deliberate and accidental)
  • Illegal (and sometimes disgusting) pornography

It was a hugely honest, educational and entertaining talk… I do hope you get the chance to catch it at some point or read up on the story once he’s published it (he mentioned there should be blog posts coming along).

On a lighter note, terrorist attacks

You could see the passion that Remy had had at one point in time for this project, and how deep down he’d like to really love it again.

Predicting the Future with Azure Machine Learning – Amy Nicholson

This was another sales-pitchy talk, and again although it was interesting and well delivered by Amy I shan’t be detailing it here. Again head over to the Azure site for info.

Tomorrow’s World of Web Development – Steve Sanderson

This was an incredibly entertaining and very well put together piece by Steve. It was an exploration of some of the technologies that are being looked at but aren’t quite ready for mainstream (read production) release.


The presentation was in a live-coding form, and was delivered perfectly. It’s not an approach that always works well, but when it does it’s high impact. In fact I got so drawn in that I forgot to make notes all the way through, so I’m afraid you’ll have to just make do with what I can remember.

Web Components

Web Components are a way of creating new re-usable HTML elements. These elements can contain HTML, CSS and JavaScript – Take a read up on them at Steven used an example of turning a standard HTML table into a web component that took in the same input data but rendered it in a Minecraft theme.

Async + Await Functions

This ECMA 2016 proposal contains async / await syntax for promised based asynchronous code. What? OK, so essentially callback hell in JS can somewhat be avoided through the use of Promises, but they in themselves can cause some confusion about how and when errors can be caught. The introduction of async / await can make your code even more understandable, which is definitely a good thing. The folk over at pouchDB have a pretty good write-up on this. The good(ish) news is that you can already use this syntax today if you’re using transpiling (or at least some flavours of).

Bitcode to JavaScript

So this blew my mind… I don’t know if I have been under some kind of rock, but I’d missed all this before. Steve demonstrated to us, by using emscripten, that he could have SQLite (a DB written in C) running as JavaScript inside node… basically he had a full SQLite DB running in a JS app. There must be endless uses for this… I just cant think of any right now. Either way, this is cool!

Parallel JavaScript

Steve showed some demos of how using things such as SIMD.js (Single Instruction Multiple Data) and SharedArrayBuffer could drastically speed up processor heavy applications and get JavaScript truly making use of the hardware available. Dave Herman has a decent blog post on what they’re doing at Mozilla on this.

Constraint Based Layout

We were shown how you could use Grid Style Sheets and VFL (Visual Format Language) to build complex visual layouts, (more) simply. GSS uses the same constraint based algorithm as used in ios apps to control and create fluid layouts. Here is a nice vid form last year’s Fluent conf on GSS.


All in, it was a very good day… especially considering it was free. And I suppose with that in mind I should be less hard on Microsoft for having the Azure based talks in the program.

Big thanks go to the organising team at Microsoft and all the speaker and event helpers, it all ran very smoothly.

There was certainly a lot of food for thought in the presentations, and a real demonstration that the whole ecosystem is still moving very quickly. And that thankfully it’s aware of this and trying not to make the same mistakes as it has done before. The future seems very bright and the hope that open development based upon standard technologies will continue to grow in popularity and strength is real.

Device Apps – 0.0.3 Release

Yesterday version 0.0.3 of both our pre-built device apps for Android and iOS were released.

This was a minor build incorporating 2 new Cordova plugins that we hope will come in useful.

Both projects contain pretty good documentation and the LocalNotification one is also supported in the ngCordova project (which you might want to use in your application).

Angular-JS June Meetup Review

Monday just gone saw the return of the AngularJS meetups to London, and this time I was trigger-happy enough to manage to bag myself a spot. The meetup, as usual, was over subscribed, and with a 300 capacity it’s one of the most well-attended meetups that we currently attend.



This event was hosted at the pretty fantastic Bloomberg offices in Central London, and I really wish I hadn’t eaten earlier on that day as the free grub and drink was top-notch. In writing this I note that I always mention the food and drink at meetups… I hope this doesn’t distract too much.

Anyhoo, big thanks to Bloomberg for the great facilities and what-not.

Nifty SHAs of Code – Peter Bacon Darwin

The headline talk was ingeniously titled Nifty SHAs of Code and was presented by none-other than Peter Bacon Darwin, lead developer for Angular JS 1.x, and someone who is personally admired. The talk’s focus point was really around how users of Open Source projects can help the projects along through getting involved, even if it’s just writing better issue tickets. Now I say just here, but really a good issue ticket is worth it’s wait in gold.

The presentation took the form of a story through one application’s upgrade process from Angular 1.3 to 1.4. Along the way the app broke and Peter showed us how a ticket could be raised and how a PR could even be put together and submitted. The general gist was that contributing to a project – even one as vast and highly used as Angular – shouldn’t be seen as a daunting task.

No more shrug reports

When raising a ticket it’s best to cover as many details as possible. Detailing the scenario that the bug was seen in, as well as expected behaviour and environment details (such as browser versions, library versions) can really help. I know that from my time at previous development roles I’d be more than happy to reject any ticket that lacked the fundamental details needed to assist me.

I’d reject any ticket that lacked the fundamental details

Peter showed us some examples of brilliant issue tickets… check this one out, it’s a belter.

The next step

We then moved onto debugging, fixing and testing the bug and a fix for it. Again, this shouldn’t be seen as something that only immortals should do. In fact Angular, and a lot of projects offer some great guidance on how to contribute to such projects.

Peter’s slides can be found here.

Lightening Talks

The evening continued with a round of lightening talks. These were shorter presentations of about 10 minutes that covered some small piece of tech or project.

Doug McIvor – Data Explorer

Doug, who works for Bloomberg showed off an internal project that essentially formed a fully dynamic spreadsheet-style app that pulls in data from over 200 tables and 2000 fields. The idea being that anyone of Bloomberg’s data sources could be compared and analysed alongside each other.

The app was, of course, built in Angular but the core focus of the talk was on how the app was optimised for speed. He detailed how the app dynamically bought in chunks of data into the DOM and then replaced those as the user scrolled both horizontally and vertically. I’d seen this approach several times before, the first being in my early days of Android development and more lately in the implementation of the wonderful collection-repeat directive the Ionic folk have put together. The idea being that the number of DOM elements is reduced such that there are only just enough to cover those in view and a buffer outside, then these are updated and replaced as the user scrolls around.

Michael Watson – SVG

Michael took us on a brief tour of the SVG element, and how it is something to be embraced. The talk was short but to the point and he showed us how SVG attributes can be bound from Angular scope variables, and as such can become pragmatically created and modified.

SVGs… start using them

Michael’s project can be found on github

Svilen Gospodinov – $http Caching

Svilen, who works for Skimlinks had the graveyard shift for the meet-up, but this didn’t get in the way of him passionately talking through some of the details relating to the built in caching available in the $http service.

He talked us through a few examples using the cacheFactory including how to set cache limits, set defaults and the likes.

The topic has lots of syntactic detail, so I’d rather not just regurgitate it here. Instead Svilen’s slides can be found here.

I’ve not yet had to use the $http service as within the MobileCaddy architecture we assume offline as our default state, and our API calls handle all caching for the developer. With that in mind as well as advising you took a look at the docs I should probably do the same. If you’re interested in our MOREs design for mobile applications then take a look at this short article.

Announcing protractor-ionic-locator

In a previous post we wrote about how end2end testing Ionic applications with protractor could throw-up some issues. One of these issues was the assumption that Protractor’s repeater locator could be used to identify items that were output by Ionic’s collection-repeat directive. As a follow-up we are pleased to announce protractor-ionic-locator, an open-source NPM package that can be used to find Ionic specific elements within your Protractor end2end tests.

The first drop covers the specific case of collection-repeat but the idea is to add more locators that would be useful to Ionic developers.

Imagine, for example, that we have code like this;

We can now use protractor-ionic-locator’s collRepeater locator to select the collection-repeat items in the same manner that we’d use Protractor’s repeater locator.

The package, as at the time of writing, also supports (a subset of, not .rows() etc yet) the default locator’s functionality so it should be able to also select ng-repeat lists too

The package is open source and can be found on github here and NPM here, so please feel free to fork and contribute.

End2end Testing Ionic collection-repeat with Protractor



I have been recently building out the end2end test suites for our MobileCaddy Seed and Shell applications. The core goal was to give Salesforce mobile application developers a starting point on which they could add their own test suites and specs, giving them a head-start when end2end testing Ionic apps. During this process I ran into a couple of “gotchas” when dealing with Ionic’s collection-repeat directive. This post should highlight the issues, propose some work-arounds and also lay the outline on how we rectify the issues we’ve seen.

This post assumes you know about Protractor, if not you can read up here, but the long-and-short is that it’s a testing tool built for AngularJS applications. It is assumes you are familiar with Ionic’s (incredibly brilliant) collection-repeat directive.

The Scenario

I’m going to use our Time & Expenses mobile application for Salesforce as our example (you can download it from github). The main screen of our application simply lists projects that are assigned to our currently logged in user. This list uses Ionic’s collection-repeat to populate the DOM with our projects, and with our application in test mode the list should contain 5 projects. What I want to do is use Protractor to end2end test that our app starts up and that this screen has 5 projects listed.

Salesforce Project List

With this in mind our application code looks something like this;

And our test like this;

We’re using the repeater locator to pull out the list of items in our collection-repeat and then we’re checking this against our expected number of projects… or at least that’s what we wanted to do.

The Issue(s)

After running our protractor test we run into the following error;

So what happened? Well actually Protractor doesn’t support collection-repeats in it’s repeater locator. That’s OK right because we can work around this and use a different locator perhaps. In our case we can use the binding locator and look for project.Name. This could be the first stab at our new code;

Let’s run our test again, and this should work right?

Wrong! Here’s what we get;

Where did that count of 20 come from? We only have 5 projects.

After digging into the Ionic code I can see that collection-repeat currently creates 20 DOM items, regardless of if there are less or not.

Hmmm… so what can we do?

The Work-Arounds

The first step, mentioned above, is to use an alternate locator instead of repeater. But this only takes us so far.

The second step (which is admittedly ugly) is to spec our test like this;

Now we’re using the binding locator and also checking that the 5th element has some content and that the 6th is empty. Of course this is not ideal, but hey, this is a work-around right… and does it work?


Our (planned) Solution

There are actually two prongs to what we’re going to do to make this nicer and better;

1) Pull Request to Ionic for collection-repeat

We currently have a PR submitted to Ionic to dynamically scale the number of DOM elements created in a collection-repeat. This will remove the need to check, for example, the content of elements that shouldn’t really exist.

2) Create a protractor-ionic-locator Package

UPDATE: We have launched our protractor-ionic-locator package… check it out. This adds a custom locator to select collection-repeat lists (with more locators to follow)

We’ll update as both of these progress… but in the meantime we hope that our write-up here might save you some time when end2end testing Ionic mobile applications.

Ionic View Title not Updating Solution

We recently noticed that we’d had issues getting the view title of an element to be updated based upon a scope variable. In the cases we were having issues we were setting the view-title attribute of the ion-view directive. This codepen demonstrates the issue;

See the Pen Ionic ion-view view-title not binding by Todd Halfpenny (@toddhalfpenny) on CodePen.

To get around this issue you can use the ion-nav-title directive instead and this should resolve the issue. From my investigations it looks like this issue seems to only arise if you’re using JavaScript promises to obtain the data. This codepen demonstrates the work-around.

See the Pen Ionic ion-view Title updated using ion-nav-title by Todd Halfpenny (@toddhalfpenny) on CodePen.

I call it a work-around as I doubt the former behaviour of the view-title attribute is as the Ionic devs intend it, and indeed their is a bug open on github for it.

We hope this short blog helps a few folk out.

Ever thought about building Ionic Apps for enterprise? Well Mobilecaddy makes it a breeze to build offline, robust Ionic apps for Why not sign up to our beta?

Ionic UK April Meetup Review

As per our preview post, some of the MobileCaddy crew headed to the latest Ionic UK meetup last night… and just like the last one it was a cracking evening. The event was again organised by Sani Yusuf and Ryan Hanna and as well as setting it all up they were also both on the talkers-list.

The focus of the meetup was data integration. This is key to all applications, whether just in terms of dealing with data on the device, or in interacting with a backend service. And with our MobileCaddy heads focused so much of the time on using as a backend I was keen to find out more about some of the other offerings.

Firebase with Ionic – Sani Yusuf

Sani kicked the evening’s talks off with an in-depth look into Firebase and how it can be used with mobile applications built with Ionic. Firebase term themselves as “A powerful API to store and sync data in realtime”, but they offer much more than that… as Sani was to cover.


We first heard about what developers (and others) would need to worry about if they were to try and put together their own backend. These included the following, and each of those really need experts in each field to do them right.

  • Servers
  • Domains
  • Authentication
  • Server code
  • Maintenance
  • Load balancing

Creating a backend should not suck

And this is where Firebase could come in. Firebase offer a service that enables real-time data synching to thier backend platform. The platform setup is incredibly simple and uses a NOSQL database.

Sani took us through a basic chat demo and he showed off just how simple it is to hook your Ioinc app up to Firebase. He also covered using it for authentication as well.

Firebase works across many platforms and can be used with all sorts of JavaScript frameworks and vanilla JavaScript too. In relation to AngularJS there’s also a supporting library called AngularFire that makes things even easier. Sani also mentioned another library called firebase-util that is a “collection of power toys (mostly experimental) and utilities for use in Firebase”, and if you’re looking at using Firebase then it’s probably worth looking at too.

Ionic Offline Storage – Ryan Hanna

Continuing on the theme of Data Ryan then took us through a neat live-coding run through of a few of the options available to cater for offline storage. He basically took us through building out a single app, showing us how it could be done using the following technologies;

Ryan’s presentation and code can be found at this git repo, but I’ve noted some keypoints about each here;


  • Super easy to use
  • data stored as strings, so need to handle this.
  • Not 100% persistent
  • There are data limits (different on each browser, but 5mb+)


  • Developed and maintained by Mozilla
  • Gives async niceness with a localStorage type interface (Promised, callbacks)
  • Supports object/blob/etc storgae
  • The actual storage mechanism can be configured (indexedDB, WebSQL)


  • Gives SQL type syntax for interactions
  • Requires more code to perform similar operations to the above
  • The actual store is a lot more structured

SQLite Plugin

  • Different from the other 3 as data is stored outside of the browsers local storage, and instead in “app space” SQLite database. This makes your data safer as it’s not managed by the browser.

This sample comes from the ngCordova docs;

From a MobileCaddy point of view it was interesting to see how other apps could implement their offline storage. With  apps built with MobileCaddy, all the application data is stored in an encrypted store called SmartStore via this plugin. I asked Ryan about encryption options for the above storage approaches, but he didn’t believe there was anything currently available.

Adobe Experience Manager – Andrew Savory

Andrew is a Mobile Evangilist for Adobe, and he gave us a quick overview of their Experience Manager product. He gave a quick demo on how it can be used with apps built with Ionic. It was an interesting quick overview, and seemed to show a fairly obvious overlap with the Ionic IO offering (in fact another member of the audience also pointed this out too).

By 2016 60% of enterprise mobile apps will be hybrid

I shan’t go into too many details on the project as I doubt I’ll do it justice, but the demo videos on the Adobe site are worth checking out.

Wrap up

All 3 talks were great and the speakers were passionate and informed, so thanks go to all 3. I believe the beer and pizza (which I sadly missed) were covered by the sponsorship from Sworkit, so special thanks to them too. The post meetup pub-visit was also good, a pleasant time to sit and chat tech with friends, both old and new.

If you’re into mobile apps (which I assume you are if you’re reading this) then I highly recommend trying to get along to your local Ionic meetup.

London Salesforce Dev Meetup – April 2015

Another London Salesforce Developer meetup rolls around, this time with Paul Battisson speaking on Machine Learning with Apex. It was a topic I knew nothing about, hence the previous link to the wikipedia entry on it.

The meetup again was at capacity, with many folk on the waiting list; these meetups really are going from strength-to-strength. This outing of the group was hosted by BrightGen at their office in the stunning Heron Tower  / Salesforce Tower / 110 Bishopsgate venue, so many thanks go to them for hosting and the drinks and pizza.

Paul currently works for Mavens Consulting (of Mavemsmate fame) and has true Salesforce pedigree. He is also the lead for the North UK Salesforce Developer User Group.

Machine Learning with Apex – Paul Battisson

After enquiring about the audiences previous exposure to machine learning (ML), Paul gave us a good overview into it’s backgrounds and a couple of the different strategies that can be adopted. He covered the basics of Supervised and Unsupervised practices. Some example of real use of such undertakings, those of Google and Netflix (recommendation engines, etc) were also mentioned.

Field of study that gives computers the ability to learn without being explicitly programmed
– Arthur Samuel on Machine Learning

And what was Paul’s motivation behind trying to implement machine learning with Apex? Well he was told it couldn’t be done, of course. And that was it. I forgot to ask him if he’d actually used ML outside of demonstrations, for a client, it would interesting to know if it’d be worth doing. Paul had worked on this with Jen Whyer, another Maven, and was sure to credit her.

Paul talked about how he and Jen choose the K-means Clustering method to vector quantify a set of data, he ran through some example data and what this would give him. One of his examples was football penalties. Analysing where the strikers hit the ball, and whether or not a goal was scored. The BBC had run this analysis on the 2014 World Cup Penalties and came up with graphics like this;


You can see how this sort of analysis can really bring data to life, and be directly beneficial to those using it.

Paul then spoke on their implementation; how they’d used batch Apex to run through the (complex, I thought so) maths in a loop that eneded when the output was the same as the previous iteration. He talked through some techniques used to speed up the batch jobs;

  • Chaining batches
  • Speedier Loops – Paul has vlogged on how to make optimisations
  • JSON (de)serialisation
  • Keeping running totals to reduce duplication of calculations
  • Using JS remoting to load the data sets as needed. They had kept each dataset in an attachment.

He ended by sharing some other, nicely honest, thoughts on how if you wanted to do this sort of thing that it might be better to do it with other tools, such as IBM Watson, Google or Amazon. He hopes that the Salesforce tools are better integrated, meaning that ML could be achieved using Wave, the Salesforce Analytics cloud.

The slide-deck has been posted to the event page and is available at this link.

In all I really enjoyed the meetup and it was especially interesting hearing from someone with a lot of passion, and about something that I knew very little. Of course thanks must go to Anup and the organising team for once again enabling such an event to happen.

Here’s to the next one.

Front Endgineers Mobile Apps with Ember – April 2015

On Tuesday evening I tore myself away from the beautiful weather we’re having here in London to attend the latest Front Endgineers meet-up . This month there were two talks lined up, Arnaud Bernard with an introduction to building mobile applications with Ember.js and Jack Franklin helping us get started with ES6 features NOW.

The Skills Matter venue in London again hosted the event and all the tech (this time out) seemed to work without a hitch… and their Lemon & Ginger tea was lovely.

Building Mobile apps with Ember – Arnaud Bernard

Arnaud is currently working with Steethub and gave us a whistle-stop tour of Ember.JS, what he likes about it, and a quick demo of a “ type app”. He started off by running through a list of things that annoy him when starting out on a new project… things like naming conventions, code styling and which tools to use, or rather having to come up with a group decision on which of those to use.

If we have data, let’s look at data. If all we have are opinions, let’s go with mine.

– Jim Barksdake (Former CEO of Netscape)

And this is just one thing that Ember.JS helps you out with.

Arnaud took us through some of the cool stuff around ember-cli… really too much for my little notebook so I’ll defer you to their site. One other tip the he shared with us is that if you’re even remotely thinking about using animations then these should be planned in from the start… retrofitting animations into ember.js apps can be a pain.


We then saw a quick demo of an app he’s written, a very basic clone, that can be run in the desktop, and then with a sprinkling (OK, a truckload) of Cordova magic, also run on an iOS device. Something that I was surprised to hear was that Arnaud believed complex Ember apps would struggle to run well on mobile devices, I suppose this is just based upon my experience with Ionic and how well they run. And speaking of Ionic I did notice that the Ionic CSS and Ionicons were used in the demo… and they looked good 😉

For me Ember.js (and ember-cli) look like tool(s) that I should dig into to learn more … but perhaps at present less pertinent to our current mobile focus. An interesting thing I need to check on though is if anyone is porting Ionic for Ember… now that would be good.

Getting Started with ES6 Modules today – Jack Franklin

I had attended a workshop with Jack last year, and was keen to see how his workflow had come along since his move to GoCardless and was especially eager to see how much ES6 JS could be used in production systems (we’ve been using JavaScript promises for some time without issue thanks to Jake Archibald’s polyfill).

As I had expected Jack was quick to open up Vim and get coding, this was to be talk that needed the demo-Gods in a good mood. I have to be honest that I soon forgot to take notes… all I had noted down was “JSPM… why are we using bower?” and a link to his talk on Github. The gist was this, Jack took us through a simple example app (about 20 lines in total I think) that would fetch a list of public repositories from a user’s github account and then display them. He covered using NPM and JSPM to setup the project in the first place and then using various ES6 features to easily and readably implement the app. As I said, my notes were vague but these were (some of) the ES6 features and other JS tools that he covered;

My take-aways are that the JavaScript world is continuing to move as quickly as ever, and that, just like at MobileCaddy, others are very passionate about removing the boring tasks from developers’ lives… allowing them to create some fantastic apps and providing brilliant experiences.


Ionic loading spinners in RC0

Following the (very exciting) release of Ionic’s Release Candidate 0 (v1.0.0-rc0) you may have found that the animated icons you had for your loading dialogues are no longer there. This is due to the version of Ionicons included by default being moved to 2.0.1, and this release has dropped the icons such as ion-loading-b, etc.

Ionic animated loading icon using ion-spinner

The reason for this is explained in this forum post and is deliberate. There is a new ion-spinner directive available that makes use of SVGs and can be used as a replacement.

We’ve put together a quick Codepen that can be used as an example. Note the extra SCSS to treat the ion-spinners in a similar manner to the icons, this is pretty but it means minimal work to get it working as a replacement. Also note the SVG targetted SCSS that shows how these can be styled.

See the Pen Ionic rc0 Loading with SVG ion-spinner by Todd Halfpenny (@toddhalfpenny) on CodePen.

I’m sure they’ll be some further enhancements to the built-in Ionic SCSS to better manage this, but for the time being this seems to be a very workable solution with our controller code looking like this;