Matthew Roach
🍔 🍟

jQuery UK 2013

So I was lucky enough for the company I work for (AW2.0 Ltd) to send me to the second UK jQuery conference held in Oxford, by the great folks from White October. The conference had a great line up, with none other than Brendan Eich giving the keynote.

Here is my overview from the conference:

Brendan Eich – Keynote

Brendan’s talk was jam packed with information, primarily related to JavaScript and not specifically aimed at jQuery, but as we all now jQuery is JavaScript under the covers so only good can come from it. Brendan did a whirlwind tour of what we can expect from ES6 and a look into the future of JavaScript, while some of this information was very technically and intense, it was refreshing to see that JavaScript is getting the love it deserves and the development of the language is still going strong and fast.

Brendan finished up his talk with showing an Unreal Engine 3 demo, of a game that’s running in the browser using JavaScript, showing what is possible in the world of the webtoday, and the demo’s he showed where breath taking. You can see a video of a similar demo here

Richard D. Worth – jQuery 1.9 and 2.0 – Present and Future

Richard’s talk was quiet a refreshing talk, with jQuery 2.0 on the cards everyone was getting worried with them dropping support for IE6/7/8 in the up and coming release, and would you know that jQuery shipping it’s 2.0 release the night before, it was all over twitter the morning of conference.

Richard did an excellent job of going through what jQuery is and what it’s not, the eco system and how to get involved with the project.

The most refreshing part of the talk was the confirmation the jQuery will continue to release the 1.9X in line with it’s 2.X release to maintain support for people who need to support IE. Also, as 1.9 is the first release that has deleted deprecated functions/methods from the code base, Richard gave information about the jQuery migrate plugin that allows you to upgrade to 1.9 without breaking your entire site.

Useful links:

Remy Sharp – So you know jQuery. Now What?

The title to this talk seemed a little odd with the conference being a jQuery conference, having seen Remy talk before I knew this would have a valid point and not be a jQuery bashing talk, and Remy did not disappoint. The talk was full of useful information, well spoken, and lot’s taken away from it.

This talk hit home alot of things I have been mulling over the past few months about whether or not I always need jQuery in my projects. jQuery seems to the default tool for all developers but it does not need to be. I strongly recommend you go read Remy’s blog post regarding his talk, saves me re writing what he has.

Remy’s blog post for his talk

My Summary

Couple of quotes from Remy

If it’s native to the browser, let the browser do its job

If you are using a lot of polyfills, you are going to need to think about the way you are doing thing

Adam j. Songtag – jQuery is a Swiss Army knife (and that’s OK!)

Adam’s talk was a bit controversial coming after Remy’s, as it was a bit of the opposite to Remy’s talk.

jQuery is not the enemy!.

jQuery is a multitool

jQuery is just a global constructor with nice functions for you to use

Everything is open source , not just the jQuery core, everything from HTML/CSS

Doug Neiner – Taking Control with Machina.js

Doug’s talk was one I was looking forward to, after doing a little bit of research of Machina.js to ensure I knew at least what it was before the day, the talk was no disappointment, it was like a mini workshop, giving a whirlwind tour with a demo of how to use Machina.js.

Machina.js is a JavaScript framework for highly customizable finite state machines (FSMs). Many of the ideas for machina have been loosely inspired by the Erlang/OTP FSM behaviors.

Machina.js is defiantly something I will be taking a look at, as I can see it coming into good use on some projects.

View Slides

Garann Means – How to use events to glue full-stack frameworks together

Garann’s talk was very interesting, it had some similarity to Doug’s talk, but rather than using a library, Garann showed how you can use custom events with jQuery to separate out your applications logic to custom events to make your application more manageable.

Garann also spoke with regards to sharing code between the client and server, mentioning JQDeffered a $.Defferred library for Node.js.

IIya Grigorik – Wait, Chrome DevTools can do THAT?

Using Chrome and Chrome Canary on a daily basis as my main browsers for development I was really looking forward to this talk, as I knew there would be something I would get out of it, as I am sure I am not using the developer tools to it’s full capabilities. As the talk was only 40 minutes I was not expecting a lot, but IIya did an excellent job of filling the time with very useful information.

Tips

Network Timeline

Waterfall Color Coding Solid line – made a request, means it was downloaded for the entire part
Transparent – The latency part, turns to a solid color when downloading

When did the first paint happen?

in console :
chrome.loadTimes()

Whats slowing my first paint down?

60 FPS – That’s for games and stuff, right? WRONG – 60 FPS applies to all websites

Facebook did an investigation and reduced FPS to 30, and noticed a huge difference in user interaction to their web application

Checking FPS – Need to record – Timeline view / Frames – gives you bars ( like a bar chart )

High bars cause JANK, cause by poor JavaScript

Sources of the problem?
– Large Paints? – CPU? – Other

From DEMO – Adding CSS drop shadow increased paint of frame from 3ms to 20ms!

Annotate your timeline

console.timeStap(‘Adding result’);

Customise Dev Tools

Dev tools is just a web app

Can extended dev tools:

Mobile

  1. Settings > Developer Tools > Enable USB Debugging
  2. chrome://inspect (on canary)

Debug your site on the device!!!
* Profile your JavaScript, Mobile CPU’s are (still) much slower * With remote debugging you can profile on a mobile connection

John Bender – Faster DOM manipulation with category theory and wield

John’s talk was fascinated and very intense. He applied Category theory to jQuery for faster DOM manipulation. I am going to have to revisit this talk and look over the wrapper he wrote called Wield so I can fully understand all the logic and Math.

Wield a small wrapper for faster DOM manipulation

Joe Pettersson – Complex clientside apps and legacy browsers (a story of frustration…)

Joe talked about the challenges he faces having to support older browsers and the troubles that occur trying to test all these different options.

He boiled it all down to: testing, testing and more testing. The testing he talked about for his talk was browser testing your applications, the one grip I had with this talk is all the testing he was referring to was just the testing of the different version’s of Internet Explorer, while this is useful information I think there is more than could of been said with regards to the other browsers.

Joe explained using virtual machines to test the different versions of IE and that it’s best to have a single virtual machine for each version of IE. Having many virtual machines will eat into your RAM so be careful.

Joe also touched upon the use of testing with selenium, no great detail was dived into here, so I may need to research more into this if I think it’s something I am wanting to try and achieve.

As it was a jQuery conference Joe did speak with regards to jQuery and the frustration of older browsers, and made some good points. Two points I took from this where

Jason Scott – Build an experience… not another framework

Jason is a jQuery mobile team member, and developer at Blackberry, his talk went through parts of the theme he developed for jQuery mobile to emulate the new Blackberry 10 experience.

Jason’s opening comments where regarding developers who are creating similar frameworks and library’s over and over rather than using the GREAT frameworks and library’s that are at their disposal and focusing on creating new experiences for their users.

Jason showed off the Ripple emulator from Blackberry. Having had a quick play with it, it’s a more advanced way of emulating mobile devices in your browsers compared to the built in Chrome overrides for mobile devices.

Build your Experience