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.

9 JavaScript Libraries for Working with Local Storage http://t.co/7Psxnabdb2 – wow, that’s a lot of “does almost the same stuff”

— Christian Heilmann (@codepo8) June 25, 2015

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. 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

   

• Offline – Check out Service Workers!

• 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

Lunch, then onwards to baring my soul. pic.twitter.com/Rsn1AZyKtr — Remy Sharp (@rem) June 26, 2015

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
  • VATMOSS
  • 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 webcomponents.org. 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.

Wrap-up

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.

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.

• Local Notifications – Support for local notifications
• Screen Orientation – Support for querying and (un)locking screen orientation

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).

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.

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 Salesforce.com. Why not sign up to our beta?

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 Meetup.com 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.

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 “messenger.com 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 messenger.com 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;

• System JS
• Arrow Functions
• let and const
• Template Strings
• Destructuring
• Modules (this seems a nice explanation)

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.