Better JavaScripting: Web Dev Conf 2012

Rambles and rants about writing better JavaScript.

Transcript

1. #webdevconf BETTER JAVASCRIPT Jack Franklin WDC 2012 1 Monday, 22 October 12
2. #webdevconf WHO IS THIS GUY? Student at the University of Bath Developer for Kainos.com Blogger at javascriptplayground.com (Soon to be) Author of “Beginning jQuery” Twitterer @Jack_Franklin 2 Monday, 22 October 12
3. #webdevconf BUT FIRST! A competition 3 Monday, 22 October 12
4. #webdevconf to win a digital copy of “Beginning jQuery” tweet your favourite, clean, joke with the hashtag #wdcjack and I’ll pick a favourite at the end of the talk 4 Monday, 22 October 12
5. #webdevconf Better JavaScripting? 5 Monday, 22 October 12
6. #webdevconf Using tools to do as much for you as they can Not relying on 3rd party code / plugins Getting your hands dirty 6 Monday, 22 October 12
7. #webdevconf DEVELOPERS ARE LAZY and that’s a good thing! sometimes we need to be lazy and let tools do stuff for us and other times we need to get down and dirty with the code 7 Monday, 22 October 12
8. #webdevconf A LITTLE HISTORY I used to go on and on (and on) about optimisations this.id instead of $(this).attr(“id”) 8 Monday, 22 October 12
9. #webdevconf 9 Monday, 22 October 12
10. #webdevconf Better JavaScripting isn’t about those micro-optimisations it’s about writing better JavaScript that will probably be more efficient too 10 Monday, 22 October 12
11. #webdevconf .someDiv { background-color: red; } .someDiv { color: blue; } .someDiv { padding: 10px; } you don’t write CSS like this... 11 Monday, 22 October 12
12. #webdevconf $(".someDiv").css("color", "blue"); $(".someDiv").attr("title", "hello"); $(".someDiv").text("Hello WDC12"); ...but you do write your JavaScript like this. 12 Monday, 22 October 12
13. #webdevconf 13 Monday, 22 October 12
14. #webdevconf Okay, so perhaps I am over-exaggerating slightly.... 14 Monday, 22 October 12
15. #webdevconf but I've seen folks pay such attention and create beautifully maintained, structured CSS 15 Monday, 22 October 12
16. #webdevconf and treat their JavaScript file like a black box to paste code snippets that might work 16 Monday, 22 October 12
17. #webdevconf organised JavaScript = better JavaScript 17 Monday, 22 October 12
18. #webdevconf var div = $(".someDiv"); div.chain().stuff().lots(); But I'm bored about talking about this kind of stuff, and I bet you're bored of listening to it. 18 WE KNOW THE BASICS Monday, 22 October 12
19. #webdevconf 19 Monday, 22 October 12
20. #webdevconf so here’s some of the things I think help you write better, more efficient and more maintainable JavaScript (controversial opinions to follow) 20 Monday, 22 October 12
21. #webdevconf either stop using plugins or get comfortable editing plugins 21 Monday, 22 October 12
22. #webdevconf return this.each(function() { var elem = $(this), text = elem.text(), newElem = $("<" + opts.outputElem + "/>", { "class": opts.outputClass, text: text }).insertAfter(opts.insertAfter); }); 22 Monday, 22 October 12
23. #webdevconf jQuery isn’t as complicated as people imagine it’s one of the most self-documenting libraries out there 23 Monday, 22 October 12
24. #webdevconf fadeOut() slideDown() .on(“click”, function() {}) $(“#something”); css() attr() 24 Monday, 22 October 12
25. #webdevconf stop relying on GUIs and use the command line 25 Monday, 22 October 12
26. #webdevconf it’s really tricky to break something from the command line start slowly, read tutorials, google when you’re unsure and never just sudo to see if it works 26 Monday, 22 October 12
27. #webdevconf tools for JS that are CLI only are becoming common Node, npm Grunt, Yeoman, Mocha, Bower these tools save a lot of time and are CLI exclusive 27 Monday, 22 October 12
28. #webdevconf the npm contains some amazing tools serve, nodefetch (mine!), Yeoman, Grunt, nodemon to name just a few 28 Monday, 22 October 12
29. #webdevconf you can still use GUIs but I find them too “black boxey” 29 Monday, 22 October 12
30. #webdevconf get to know the developer tools I prefer Google Chrome 30 Monday, 22 October 12
31. #webdevconf 31 Monday, 22 October 12
32. #webdevconf debug with console.log edit CSS add breakpoints edit HTML run JS in the console 32 Monday, 22 October 12
33. #webdevconf learn to understand JavaScript errors 33 Monday, 22 October 12
34. #webdevconf Uncaught ReferenceError: a is not defined 34 Monday, 22 October 12
35. #webdevconf Uncaught TypeError: Cannot read property '2' of null 35 Monday, 22 October 12
36. #webdevconf once you get more familiar with errors you fix them quicker and invoke them less often 36 Monday, 22 October 12
37. #webdevconf use a code quality checker known as a code linter 37 Monday, 22 October 12
38. #webdevconf I like JSHint check for errors before running your code great for catching typos, missing semi-colons and so on 38 Monday, 22 October 12
39. #webdevconf start organising your JS you split up your CSS into multiple files (even more so with Sass) you split up your JavaScript into multiple files...no? 39 Monday, 22 October 12
40. #webdevconf this sucks once you get a few scripts <script src="file1.js"></script> <script src="file2.js"></script> <script src="file3.js"></script> <script src="file4.js"></script> <script src="file5.js"></script> 40 Monday, 22 October 12
41. #webdevconf multiple scripts = multiple HTTP requests which are blocking page rendering delayed = site slow to visitors 41 Monday, 22 October 12
42. #webdevconf make use of script loaders load in scripts asynchronously, in parallel non-blocking, conditional loading Require JS, Yepnope 42 Monday, 22 October 12
43. #webdevconf next problem is dependency management scripts rely on each other how to manage this to make sure each script has the others it depends on loaded first? 43 Monday, 22 October 12
44. #webdevconf you could personally make sure the order of your script tags is as it should be but I’m a developer, and I’m lazy 44 Monday, 22 October 12
45. #webdevconf a great library for this is Require JS it deals with loading your scripts but also with loading them to make sure all scripts that require others are loaded in the correct order 45 Monday, 22 October 12
46. #webdevconf using Require JS you can also split your code up into modules keep separate functionality separate and modular load these through Require JS allows you to still manage dependencies 46 Monday, 22 October 12
47. #webdevconf sometimes you need something more than all of this a build script 47 Monday, 22 October 12
48. #webdevconf a build tool can compile your Sass/LESS/CoffeeScript/HAML into CSS/JavaScript/HTML and then combine multiple files into one minified version it can also run tests, run code quality checks, and anything else you might need Grunt (gruntjs.com) is particularly awesome in this regard 48 Monday, 22 October 12
49. #webdevconf TO SUMMARISE either don’t use plugins, or be comfortable editing get to know the command line use libraries & tools like Grunt to do work for you Require JS for script and dependency management build tools because we’re lazy developers 49 Monday, 22 October 12
50. #webdevconf COMPETITION! you’ve got till the end of Q&A to get your jokes in to win a copy of “Beginning jQuery” hashtag #wdcjack 50 Monday, 22 October 12
51. #webdevconf QUESTIONS? javascriptplayground.com jackfranklin.co.uk @Jack_Franklin 51 Monday, 22 October 12