Last night I attended my first JS Monthly meetup in London. The meetup group used to be focused solely on Backbone JS but it’s since diversified. The meetup was organised by Guy Nesher, a London based JS dev, and to say he over-ordered on pizza and beer would be an accurate (and unfamiliar) statement. Thanks should then go to lastminute.com for sponsoring the event, I was left wanting for nothing.
There were two talks on the line-up for the event… so let’s get to the detail.
Charts: from monoliths to components with D3
First up was Colin Eberhardt and Chris Price from Scott Logic, a company I was familiar with from my trips up to DIBI conf. They gave a talk on how charts and charting libraries are huge monoliths, but also how they’ve come up with an approach using D3 that makes use of components to aid maintainability and re-use.
Chris initially talked us through D3’s Data Join feature. This is the way to essentially have data-binding in D3. It was something that very few of the audience, myself included, knew really existed within D3 itself. Chris showed us some example code of how this can be used (using the characters from Under Siege, which was nice), but from the point of learning I recommend reading Mike Bostock’s write-up on this. We have used used D3 in some of the mobile applications we’ve built MobileCaddy, but we’ve not as yet had the need to use joins, though I do look forward getting my hands dirty with it.
Colin then introduced us to making re-usable components using D3, and with this D3FC, a collection of components that Scott Logic have produced that can be extended to help build interactive charts. It sounds very interesting and something definitely worth looking into if you have a need to implement data visualisations within your applications.
My personal experience with D3 is that it can be fairly overwhelming upon first sight… and this talk gave me a better explanation of some real D3 use over much of the online documentation I’ve read. So for that alone I thank Chris and Colin.
ES6 Promises – Guy Nesher
I’ve seen a lot of talks on ES6 features, and I’ve got to say that Promises seem to have taken a back seat in most of them, so to have a talk dedicated on them was a nice change.
Guy’s talk outlined how promises and their syntax can be used to mitigate the chance of creating Christmas Tree code through callback-hell. He also covered the importance of having a catch() clause; promises that reject and aren’t caught can lead to errors falling into the abyss.
If a promise rejects and no one is around to catch it, does it fail?
Using Callbacks;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$.ajax('url', { success: function(){ $.ajax('url', { success: function(){ console.log('success'); }, error: function(){ console.log('failure'); } }) }, error: function(){ console.log('failure'); } }) |
Using Promises (and fetch);
|
1 2 3 4 5 6 7 8 9 |
fetch('url').then(function(){ return fetch('/otherurl'); }).then(function(){ console.log('success'); }).catch(function(){ console.log('error'); }) |
Guy’s slides are available here.
There was some discussion around debugging in promises and how it can be tricky in error scenarios. This prompted me to make a note of this edition of Google’s Totally Tooling Tops YouTube series.
If you’re using JavaScript Promises then the short vid is well worth viewing.
Wrap Up
It was great meeting Guy and the other attendees; post meetup beers and chats were as good as ever. I seem to say this a lot, but I’m genuinely looking forward to seeing what will be presented at the next meetup.