I recently wrote a post about getting to JQuery UK and the keynote speech with Brendan Eich. Now I wanted to add the rest of my notes from the conference:
JQuery 1.9 and 2.0 – Richard Worth
Richard Worth was up next, and spoke mainly about the coming divergence between the 1.x line which will continue to support IE6-8 and the 2.x line which will not. Apparently, this allowed them to remove 12% of their codebase and has better compatibility with environments that aren’t desktop browsers.
He talked about the intentionally limited scope of core jQuery, covering only Dom manipulation, events, animations and ajax, but also highlighted how plugins can let you add functionality seamlessly.
A topic that came up a few times was that you need more than JQuery to build a well architected large application, but Richard talked about how ubiquitous jQuery is (9/10 javascript using websites) and mentioned that many MV* frameworks build on top of JQuery.
JQuery 2.0 lets you opt out of different pieces, ultimately getting as small as 10k when minified and gzipped for just the dom manipulation and selection.
He also promised that JQuery 1.x would be supported “until IE6, 7 and 8 is no longer relevant” and that 1.10 upwards will have the same API as 2.0 upwards (1.10 -> 2.0, 1.11 -> 2.1, etc.)
I know JQuery. Now What? – Remy Sharp
Remy Sharp was aptly represented by the joker card, and he gave a talk about the importance of carefully considering whether you really need jQuery at all. He’s put the talk up as a blog post here.
He started provocatively by saying that for many people “JQuery is the gateway drug to Javascript programming. This talk is about how to get clean and kick your dirty habit.”
One of the key things is that much of the functionality of jQuery has begun to be folded in to browsers and for basic functionality they’ve converged on standards too. This means that if you’re working in more recent browsers, you may not need JQuery at all.
He suggested some common possible replacements:
- querySelectorAll instead of $
- putting javascript at the end so you don’t have to worry about onready.
- Use the standard dom methods for setting classes and getting attributes.
- Dataset allows you to store values on dom nodes.
- XHR2 has a bunch of nice features that give you more control than jquery for Ajax.
- HTML5 form support now has a lot of features, e.g. pattern, required and type that reduce your need to write jquery code.
- Lots of stuff can be done in CSS now that people previously used JQuery for.
- Injecting a stylesheet and using classnames is likely to be more performant than using JQuery .css.
- RequestAnimationframe is important for smooth animations and vanilla jquery only uses setInterval.
- Use translate to move stuff and the transitionend event to fire javascript.
“If it’s native to the browser let the browser get on with its job.”
As an example of the kind of thing that Remy hates, he provided FitText, a jquery plugin that really didn’t need to be. He rewrote it in vanilla javascript which you can see here.
It’s fun that the jQuery community is confident enough to have these kinds of talks at their conference.
JQuery is a Swiss Army Knife (and that’s OK!) – Adam Sontag
While Adam Sontag was ostensibly the counter point to Remys slightly anti-jQuery talk, apart from professing a deep affection for jquery, he said many of the same things, even to calling JQuery a ‘gateway drug’.
He adopted a swiss army knife metaphor to describe jQuery: In a pinch, you could build an entire house with it. As long as you don’t want to live in it for very long. But you might use it to open a can of paint, etc, etc. It’s a swiss army knife. You need bigger building blocks than just what jquery gives you, such as MV* frameworks.
The elitism of many developers and the way that jQuery is sometimes maligned clearly irritates Adam, he compared people complaining about JQuery users to people saying “We’re not going to teach you English because one day you might say something dumb”.
He also talked about how jQuery is engaging with the community and what that is like – learning the mechanics of open source can be intimidating, like programming itself, but jQuery have open sourced everything, including documentation and site design. There’s an exciting new contribution hub, contribute.jquery.org.
Supporting the community is an investment that keeps it growing. Everyone who contributes regularly is invited to join.
JQuery happens every day online and regularly in person on IRC. Relationships that go beyond code improve code.
On top of all that, jQuery became a foundation and is now a member of ECMA and W3C.
Taking control with Machina.js – Doug Neiner
Doug talked about the open source state machine for JavaScript Machina.js. It’s an interesting project, with some similarities to a state machine library we have created at Caplin. Our library has implementations in both Java and Javascript and the client and server can have their statemachines kept synchronised.
Use events to glue full-stack frameworks together – Garann Means
Cramming everything into MVC sucks. Model = state management, View = rendering, controller = everything else?
Solving some of these problems tends to lead to a mixture of promises, custom events, pub/sub, event emitters and callbacks. You can use events to augment MVC, which let you hook all your pieces together, going from the client side right back to the server side.
Garann also talked about some of the full stack frameworks out there that she likes, hoodie.js and meteor.js.
What, Chrome DevTools can do that? – Ilya Grigorik
Ilya recommended discover-devtools, a new course on codeschool. You can also get his presentation here.
He talked about some sneaky ways to speed pages up. For example google start sending the search results page before they’ve even worked out what the search is, so that browsers can start rendering and requesting resources immediately.
A good place to investigate the speed of pages is the ‘waterfall’ display in Chrome Dev Tools. You can save the data behind the display as a HAR file, and there are tools that can parse the format and let you inspect it offline or integrate the process into your build. This can be good if a client complains that your site is slow – they can send you the HAR file and you can investigate.
Some other good tips:
- chrome.loadTimes() Snippets: chrome.loadTimes().firstPaintTime – chrome.loadTimes().startLoadTime;
- local modifications
- chrome://tracing
- console.time(“name”) / console.timeEnd(“name”)
Dev Tools has a number of options to help you debug where your rendering time is spent, and rendering time is important. User interaction with timeline dropped when facebook went from 60fps to 30fps, which means that you need to be spending less than 16ms per frame.
Faster Dom Manipulation with Category theory and wield – John Bender
John enjoys investigating and talking about the link between theory and practice. In this case, he showed how observing the link between JQuery and category theory led him to start using ‘loop fusion’ optimisations to make his jQuery faster.
It’s difficult to summarise the theory as well as he did (so check out his presentation here), but …
A category consists of objects and morphisms which map from one object to another. You can think of the DOM objects and functions as one category and the world of JQuery objects and the functions that work on those as another.
A functor maps from one category to another. You need to be able to map both the functions and the objects. In JQuery, the $ function is part of a functor that maps from Dom objects to JQuery objects and the jQuery function ‘map’ converts functions that work on dom objects to functions that work on JQuery objects.
There is a composition functor law; the mapped composition of two morphisms in one category has to be the same as the composition of two mapped morphisms. This essentially means that mapping a function that makes two dom changes is the same as mapping two functions that make one dom change, which means that you can just go ahead and combine the behaviours and just loop over your jquery collections once (‘loop’ fusion).
John has created a library based on these ideas. wield.
Complex client-side apps and legacy browsers (A story of Frustration) – Joe Petterson
Joe spent much of his talk describing ways of testing against multiple different browsers. He suggested using Selenium with a group of VMs. You can manage your VMs with a script like the one here although it will take an enormous amount of RAM.
While his talk was interesting, we’ve moved away from testing via user interaction in the browser as much as we can. We found Selenium tests to be brittle and slow, so we turned a nights worth of Selenium tests into 10 minutes worth of view model tests and are really happy with that decision. There are still things that you need Selenium for, but we try to keep that to a minimum.
Build an Experience… Not another Framework – Jason Scott
Jason’s talk focussed on his work using jQuery Mobile on Blackberry 10. He talked about using Ripple to emulate the mobile web, and boasted that the Blackberry browser has a higher HTML5 rank than desktop Chrome.
He talked a lot about things to consider when serving data to mobile, but also made the point that sometimes it’s better to admit defeat in terms of mimicing native behaviour in favour of something more appropriate: “better to have a decent experience than copy a great experience and end up with a bad one”.