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.
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!
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.
Taking a break for 5 mins. My fingers need to recover!!
Addy has a free design patterns library on his website www.addyosmani.com – 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 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.
jsPerf.com – 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
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.
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!