London Web Standards Nuts n’ Bolts Liveblog #lwsnuts

by admin. 0 Comments

JS-Test-Driver: FTW  - allows you to run multiple tests on multiple browsers automatically. It’s really quick and there’s lots of plug-ins for eclipse etc. You can also do this remotely for mobile browsers.

Tips for testing:

  • Draw ideas on paper!
  • Peer reviews make better programmers
  • Big teams should have coding standards and enforce unit tests.
  • Try the singleton pattern, but it can lead to cross-test pollution.

Learning tests – tests that are not meant for production but for your own personal gain. It’s apparently a really good way to learn and recommended by Christian Johansson, a JS developer from somewhere.

QUnit supports async javascript – allows you to stop and start the test suite, otherwise the suite will run so fast that you’ll never get the results of the AJAX call.

Let’s talk about fixtures: to make a test you need jQuery core, QUnit file and the QUnit test file. After that, you need your code. A test is simple to perform, it’s done with assertions, testing function results against your expectations. Testing NotEqual is just as important as testing isEqual as you can write tests units that always pass!

Introducing QUnit - a JavaScript developer’s friend. It’s written by the jQuery core team (or John Reisig really) and is awesome, allows you to run unit tests together, in isolation, and is really good at giving you answers quickly. There are others, Nodeunit, YUI, JS.Class and Jasmine, but they’re not as good to be honest.

TDD lets you consider problems and potential solutions up front. It raises issues early and helps you identify requirements. It allows you to measure functional completeness of the application. It’s brilliant for regression as you can identify them early, and automatically. It also allows you to separate components of your application really easily, with fewer dependencies.

Test Driven Development (TDD) is an iterative development process that starts with the test and that forms part of the requirements of what you are going to build. Bonus point: Crystal has sourced most of her images for this talk from lolcatz.

Crystal is from the BBC. They’ve been using qUnit for 2 years to test their javascript.

Next up: Crystal Hirschorn (@pand0ra83) on JavaScript unit testing. You know how important it is, even though you never do it!

Taking a break for 5 mins. My fingers need to recover!! 

Addy has a free design patterns library on his website - go forth and make cool things!

Mr Money Bonus tip: Make your code DRY. Minimal code will be faster to load and to run. It may require much more commenting to be able to understand it, but it’s really quick

Tip 10: avoid creating unnecessary jQuery objects: Use native javascript when necessary. You can make use of $fn.whatever instead of selector.whatever to make the object a single and make it faster.

Tip 9: Understand loops - Native for is faster than using $.each(). In general, avoid loops if you can, it just repeats code and selectors which are costly.

Tip 8: The DOM isn’t a database - DOM insertion is very costly. Keep DOM updates to an absolute minimum. Do it once if you have to. Ideally, construct strings in memory. Can be 90% slower than in-memory manipulation. Traversing the DOM to retrieve text and html isn’t optimal. If it can be in .data elements then that’s better, but in-memory is best. Use .detach() which detaches a node from the DOM, lets you do anything you want to it and re-attach in the same place later.

Tip 7: Event delegation - Allows you to bubble data to the DOM tree to a parent element. Important as it allows you to do 100 elements onto a single event handler. .bind() isn’t great for bubbling, so they came up with .live() which allows you to do event delegation. Live is good for simple solutions but not great for big data sets. .delegate() is the answer. There are significant performance improvements using .delegate over .live()

Tip 6: Chaining is ace  – chaining is faster than caching and is faster than almost everything. Hooray!

I wish he’d speak 62% slower!!

Tip 5: Caching is your friend - You can cache selectors into variables so they’re available for re-use. Using selectors again and again is really bad for performance. Uncached selectors are 62% slower.

Tip 4: Don’t use jQuery unless you really need to - jQuery has a number of overheads. If you can avoid using it you can make your code faster. It’s 80-90% faster if you know what you’re doing!!

Tip 3: Understand parents and children - I don’t mean the birds and the bees. For some reason, using .children(‘.child’) is really slow. However, ‘#parent > .child’ is really slow as jQuery selects right to left. $parent.find(‘.child’) is the fastest. it used getElementByName, caching and the super-fast .find() method.

He’s rattling through them tonight. We’ll be done in a few minutes!

Tip 2: Know your selectors. Just because there are 5 or 10 ways of doing something doesn’t mean they’re all equal. ID (#), form and inputs are the fastest as they’re backed by native commands. Class selectors are the next fastest as there’s native for modern browsers but not for others. Pseudo selectors and attribute selectors are the next slowest as they can use querySelectorAll().

Tip 1: Keep jQuery up to date. The core is updated so much with so many benefits that updating gives a huge boost. Many companies are still on 1.4.2 – updating to a new major release i.e. 1.6.2 then you get the performance boost. I can testify to this myself as I got massive AJAX performance updates updating to 1.6. However some selector are slower in 1.6 than 1.4 – just so you know. - an easy way to compare the performance of code snippets across different browsers.

Why should you spend time on performance when your browser is so powerful? The answer: user experience. Every slide in this presentation comes with JSPerf tests so you can run the tests at home.

Next up: Addy Osmani on jQuery performance

One of the most important things about object-oriented code is abstraction and message passing between objects. In JavaScript, Backbone does this by implementing these facilities in JS. It helps keeps your code DRY (don’t repeat yourself) and manageable. Sounds good. Check it out.

Backbone helps you separate and organise your code using its MVC principles. It sounds very clever and useful. Very beneficial for testing as you can test models in isolation.

On with the show: Tim works on Backbone.js, an MVC javascript framework designed to make things easier. It’s not a DOM helper library like jQuery or Dojo, nor is it a presentation framework like ExtJS. It’s 1200 lines of code to manage your Models, Collections, Views and Events. It also handles the persistence of data across the page. There’s a clever router which acts like a controller (rails style) that works on the hash tag to control what pages are shown.

Tim’s slides today use Google’s HTML5 presentation library, which is showing off it’s beta tag by crashing immediately.

First up: Tim Ruffles

Tonight, we’ve got Tim Ruffles talking about Picklive, Addy Osamani talking about jQuery performance tips. Finally, we’ve got @pand0ra83 talking about JS unit testing. Should be a good one!

Leave a Reply

Your email address will not be published. Required fields are marked *


HTML tags are not allowed.