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

  • Do not always use the jQuery methods to get access to information $(this).attr(‘value’) can be replaced for this.value
  • HTML5 Data support is less than jQuery
  • Form Validation. Go and delete the jQuery plug-in’s you are using! You are going to have to validate server side, and with HTML5 you have built in browser support, required/ pattern attribute. If the browser does not support HTML5 validation your server will validate it any way!
  • No more JavaScript animation
  • Really grok AJAX
  • Maybe no jQuery first
  • There is native technology available to you. USE IT!

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

  • Useful versatile
  • Sometimes it will do the entire task
  • Other times it helps you work with the other tools better
  • But you can not build an entire house, if you did you would not want to live in it for long
  • Always cache your jQuery selectors
  • Don’t repeat actions, even if they are cheap
  • Storing jQuery objects, vars, or objects

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

  • Pay attention to text in grey
  • Size / Content – Show GZIP compression if the grey text is much smaller
  • Time / Latency – Time to download, and latency to see time before you get first byte
  • The waterfall can be sorted – click on it

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:

  • Add a custom audit plugin
    • Can write JS to create an audit… eg. Count all links on the page
  • Add custom panels
    • Font Picker
    • jQuery Debug plugin – Will tell you events attached to a DOM Element
    • Rails Panel
  • PageSpeed Insights
    • Will optimise the things for you, you can save them from right there

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

  • Looking at jQuery tests and bug trackers, can really help with the frustration of older browser issues
  • Read the source, as you may find performance issue if you need to support older browsers

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.

  • Send the right content
    • JSON vs HTML – Go for HTML unless you needing to do something dynamic, if it’s a single page, use HTML
  • Be smart with jQuery
    • Write Less Do More – Be smart!
  • Want to be just like native
    • Most part you can
    • Some things in the web that will just not be as fast as native
  • Keep Requests Down
    • Create API to return whole objects
      • Overhead is slight more to send all data, but the more requests is worse
    • Image Sprites
    • Concat and Minify Resources
  • Think of Battery
    • There is no silver bullet – translate – do not * { }
    • OLED Media Query : -blackberry-display-technology: -blackberry-display-oled

Build your Experience