jQuery Europe 2013: Highlights

Last weekend we attended the jQuery Europe 2013 conference. Hosted by Gentics, the conference was held at the Palais Liechtenstein, a beautiful garden palace in Vienna’s 9th district. Needless to say, we have never attended a conference at a more stunning location: There was also a separate room for ad-hoc presentations, an XBOX360 Kinect station […]

Last weekend we attended the jQuery Europe 2013 conference. Hosted by Gentics, the conference was held at the Palais Liechtenstein, a beautiful garden palace in Vienna’s 9th district. Needless to say, we have never attended a conference at a more stunning location:

Spheric Panorama of the jQuery Europe 2013 conference hall

Spheric Panorama of the jQuery Europe 2013 conference hall

There was also a separate room for ad-hoc presentations, an XBOX360 Kinect station and a chill-out area where you could get free banana smoothies (that were delicious).

The speakers were first-grade, from companies like Google, Mozilla, Microsoft, the jQuery Foundation and many others. Since there were too many interesting talks to cover everything in detail, we will only point out some of the highlights:

Cory Frang did the first technical talk of the conference, on the new jQuery UI Widget Factory that makes developing plugins a lot easier for developers. It was introduced in jQuery UI 1.9 and the team immediately started porting all of their current widgets to the new system. The slide to his highly in-depth talk can be found here, and you can learn how to use jQuery UI Widget Factory here.

Separation of Concerns

Next up was Doug Neiner from appendTo with an excellent, sometimes eye-opening talk that was called “CSS3 Animations, Transitions and jQuery”. He started with another topic, though: Separation of concerns. In the past, the use of inline CSS and JavaScript was normal, and it was something that made maintaining code much more difficult than it had to be. Fortunately, most developers now separate their markup from their CSS and their JavaScript. When writing jQuery, hovever, many completely forget about this concept and start styling elements with CSS from inside their script files. For example:

  height: "50%",
  position: "fixed"

This is not okay. Even if you just call jQuery’s .hide() and .show() methods, what actually happens is that the element’s style attribute is set to display: none or display: block.

This does not mean that those methods should never be used. Just do not use them in situations where you could just solve the problem with pure CSS. Hiding and showing, for example, can be done much more elegantly by setting adding and removing classes. You could call the class is-hidden and add it to any element you want to hide. This has a number of benefits:

  1. You are not violating the “Separation of Concerns” principle.
  2. You can easily animate the showing and hiding by using CSS3 transitions. If you want to go beyond just transitioning the opacity, you can also slide elements in an out or do even more crazy things, all without changing your JavaScript.
  3. At some point you might decide to change the way hiding and showing is done in your app. If you were using classes, you do not have to touch your JavaScript, but only change a bit of CSS.
  4. If you are showing/hiding a large number of elements, you can gain a large performance boost by simply setting a class on a parent element and then hiding the children accordingly, with CSS.

Using this kind of state classes is useful not only for showing and hiding things, but for everything that has some kind of state. You can read more about this and also about combining CSS3 animation with jQuery in the slides.

Just before lunch on day 1, Sebastian Kurfürst from the TYPO3 team talked about building modular JavaScript applications with RequireJS. His presentation was full of examples of how to develop large applications (like TYPO3) without going crazy. RequireJS makes managing dependencies a breeze, and it also offers tools for combining and minifying related scripts, which minimizes the number of HTTP requests your app has to make, as well as the total payload that has to be transported. I highly recommend you check it out!

“Everything will just work.” – But sometimes it doesn’t!

The last talk of the day was the highlight of the conference for many: Christian Heilmann from Mozilla gave us developers a good talking-to, and in my opinion it was one we really needed! JavaScript libraries like jQuery have been helping us write cross-browser code for years, but they have also made us forget that there are differences between systems. We are so obsessed with tools nowadays (jQuery, Node, CoffeeScript, SASS, LESS, Grunt etc.) that we have forgotten what problems we were originally trying to fix. When teaching young developers how to develop for the web, we can’t just tell them to use jQuery because “everything will just work”. jQuery fixes many problems from the past, but we have to write applications that will work in the future! We can do this by using standards. Google failed to do so recently, when Chrome could not be downloaded from the official site for a day because of a simple JavaScript error that was raised when clicking the download button. Had they set a fallback URL in the href attribute instead of just javascript:void(0), everything would have been fine.

Also, the main focus is now on the mobile web, which means that we have to support a large variety of display sizes, and that performance is more important than in the previous years. Every time we use jQuery to animate something instead of using CSS animations (which are hardware-accellerated!), we are hurting performance a lot. Every additional library we use makes our app slower and drains the user’s battery faster. Some other ways to improve performance: using requestAnimationFrame instead of setInterval and translate instead of absolute positioning, and touching the DOM only when absolutely necessary (never forget to cache everything you query with jQuery selectors!).

You can find Christian’s slides here. He also wrote a thorough blog post about this topic, covering most things he mentioned during his talk.

Going Mobile & Securing the Client

Day 2 was kicked off by Todd Parker who is project lead of the jQuery Mobile project. His talk about responsive web design is not yet available online, but when it is, you can get it here.

My personal highlight on day 2 was Mike West’s talk about client side security. The slides alone don’t do his entertaining and educational talk justice, but he wrote blog posts about the two most important topics from the talk, and you should read both of them if you care about the security of your users: The first one is about secure cookies and Stict Transport Security, and the second one is about Content Security Policy, which was co-edited by him and is currently a W3C Candidate Recommendation. Again: Click all of the links in this paragraph and read everything, it is worth your time!

The conference was wrapped up with a quick round of “jQupardy”, which is Jeopardy with questions exclusively about jQuery. Everyone in the audience could participate and anyone who got their question right won a giant box of Manner Schnitten.

The conference was apparently sold out and the speakers as well as the audience enjoyed it a lot. If there is a jQuery Europe 2014, we will definitely be there!

Important Links:

About Author

Patrick Mladensich

Patrick is a software developer at Die Socialisten. He is very passionate about JavaScript, HTML5, web standards and music. Some of his colleagues call him a hipster, but it's totally not his fault that he discovers everything before it gets big! Follow Patrick on Twitter, Facebook or Google+!

Facebook Twitter Google+ Foursquare SlideShare