jQueryTO in Toronto Canada.
March 04, 2013
Now long conclusion :). The conference was broken into 2 tracks (which is a little disappointing because I wanted to see every talk). I decided to focus on Backbone, best practices and scalability. I’m going to highlight few things I learned, the most interesting stuff, of course everything was very informative and worth knowing.
bower install jquery
jQuery mobile was one of the big topics at the jQuerTo. Mobile web is getting bigger every day and jQuery Mobile is becoming even more popular. I use jquery Mobile a lot and like it. Ralph Whitebeck (one of the core jqm developers) presented state of jQuery Mobile and it is clear the team is working really hard to make the framework better, more stable and more consistent. They just released 1.3.0 and added few new widgets (panels, dual range slider, responsive tables and grids)
Almost every speaker mentioned Require.js and how great it is for organizing script and manage all the dependencies. There were some great tips on handling projects and organizing the process of web development.
The best talk of Day 1 was presentation by Addy Osmani about performance and optimization. After I saw his talk, I will be optimizing my website asap. Things like rounded corners, box shadows and any properties that cause repainting - are very expensive for performance. When combining these properties, scrolling, fixed position, animations - a website is becoming very slow, especially on mobile. So, the best frame rate for animations on the web is 60 frames per second which matches with approximate refresh rate of monitors and mobile screens (55Hz - 60Hz). At that rate all animations (including scrolling) on website are smooth and snappy. When adding more stuff like big images, resizing images with css, a lot of HTTP requests, causing page repainting, using fixed positioning - frame rate drops to 10-15 fps (or even less). It takes 6 times more resources. As a good example Addy showed us how Pinterest repaints unnecessary elements and how scrolling feels delayed because of that, he also showed how to track these problems in Chrome dev tools. Tip of the day: use profiling and timeline in incognito mode only to avoid plugins and extensions impact on performance. I learned a lot from this presentation.
I liked the organization suggestion in Derick Bailey’s presentation (he’s the creator of Marionette.js library). He recommends to organize files and code the way we see an application. Include files in folders, use modules, basically hierarchical system and create code for other developers, not computers. That way your app can load individual modules and not entire code (good example is gmail with its widgets for mail, contacts, chat, etc). You can easily assign development to other team members and avoid git conflicts, everyone is responsible for their own module (and life is good, everyone’s happy).
I’ve heard a lot about grunt.js but never used it, now I will. I use sass, but sometimes I hesitate, because I know I may need to edit css directly on the server and sass would have to be recompiled. With grunt.js - I can. So, from now on all my websites, even WordPress, should be on sass and who knows, maybe I will some other cool stuff, like concatenate, uglify, lint bunch of files and make all websites I build 3 times faster :)
Paul Irish, the man, the superstar of front end development community - presented closing keynote. That was funny, informative, amazing and unicorn-y. He announced for the first requestAutoComplete() api for autocompleting personal and credit card information in Chrome, which is very handy. He also showed few ticks in dev tools, some unicorns, and I was one of the lucky people who got Google t-shirts :-), yay!!!
Big thanks to jQueryTO organizers and volunteers, hope to come back in 2014.