FOWD: Practical JavaScripting

A talk given at FOWD discussing JS tooling, best practices, templates and more.

Transcript

1. Your JS Sucks, but we can fix that!
2. Me! University of Bath Computer Science Student Software Developer at Kainos Blogger at javascriptplayground.com Talker on upfrontpodcast.com Author of "Beginning jQuery" Twitterer @Jack_Franklin
3. The Agenda Web Sites vs Web Apps Sensible JavaScript Writing Workflow & Tooling Not being overwhelmed (Easy) Questions and (hopefully some) Answers
4. Web "Sites" vs Web "Apps" is there a difference?
5. I don't think there is any difference and that's a good thing
6. we're all building sites people visit, do something and leave stop trying to differentiate
7. differentiating is no good to anyone
8. a lot of people ignore new JS tools, methods or approaches because those are just for "web apps"
9. don't be so quick to discredit your code
10. Writing sensible JavaScript
11. I get to see a lot of JavaScript and people write some weird stuff
12. $ ( " # f o o " ) . d o S o m e t h i n g ( ) ; $ ( " # f o o " ) . d o S o m e t h i n g E l s e ( ) ; $ ( " # f o o " ) . d o S o m e t h i n g E l s e 2 ( ) ;
13. Using jQuery isn't an excuse to write rubbish code
14. JavaScript Code Smells
15. Loads of script tags bad for performance (HTTP Reqs) hard to minify into one file for production difficult to maintain
16. Global Scope leakage v a r m y D i v = d o c u m e n t . g e t E l e m e n t B y I d ( " f o o " ) ; v a r a l l D i v s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( " d i v " ) ; v a r x = . . .
17. Global Scope leakage cluttering the global scope is bad shows a lack of organisation it's not defensive coding
18. HTML in your JavaScript $ ( " # f o o " ) . a p p e n d ( " < d i v c l a s s = " h e l l o - w o r l d " > < p > s o m e t e x t i n h e r e < / p > < / d i v > " ) ;
19. writing better JS isn't just about performance
20. but about maintainability and helping the future you
21. People put a lot of thought into CSS (OOCSS, SMACSS, etc) (and this is a good thing) But does the same happen with the JavaScript?
22. Too often people treat JavaScript like a black box of magic and throw everything into one file
23. Too often it's an after thought let's quickly add some jQuery to animate that button
24. "weeks of coding can save hours of planning"
25. lets talk about jQuery
26. ditching jQuery has the time come?
27. jQuery 2 drops IE6, 7, 8 jQuery 1.X supports them
28. jQuery isn't going anywhere fast
29. the goal of jQuery is that it doesn't need to exist and that will happen...one day
30. Fixing those code smells
31. Organise your code multiple JS files, modular approaches
32. organising your code is really simple lots of files and a bunch of s c r i p t tags with a build tool to minify them all for production
33. or you can go further look into AMD approaches, like RequireJS
34. RequireJS allows you to define modules and dependencies and comes with a build tool to minify & concatenate
35. r e q u i r e ( [ " j q u e r y " , " u n d e r s c o r e " ] , f u n c t i o n ( $ , _ ) { $ ( f u n c t i o n ( ) { / / d o s o m e t h i n g } ) ; } ) ;
36. use templating to avoid HTML in your JS Handlebars, Underscore keep HTML out of the JS
37. templating with Handlebars < s c r i p t t y p e = " t e x t / x - h a n d l e b a r s " i d = " t e m p l a t e " > < / s c r i p t > < d i v c l a s s = " { { c l a s s } } " > < p > { { t e x t } } < / p > < / d i v >
38. templating with Handlebars v a r t e m p = H a n d l e b a r s . c o m p i l e ( $ ( " # t e m p l a t e " ) . h t m l ( ) ) ; v a r h t m l = t e m p ( { " c l a s s " : " f o o " , t e x t : " H e l l o W o r l d " } ) ; / / < d i v c l a s s = " f o o " > < p > H e l l o W o r l d < / p > < / d i v >
39. split your templates into their own files templates/intro.handlebars
40. tools will help you manage these we'll get onto that
41. contain your code ( f u n c t i o n ( ) { v a r x = 2 ; } ) ( ) ; a l e r t ( x ) ; / / u n d e f i n e d
42. learn how JavaScript works
43. bits of JavaScript will catch you out and even jQuery can't save you from that
44. the better you know JavaScript, the better you know jQuery Would you write SCSS without knowing CSS?
45. Regular JS isn't that bad. Make an effort to improve your JS knowledge you can still use jQuery. Knowing JS means you'll use it better and appreciate it more learn.jquery.com
46. Tooling
47. don't dismiss tools out of hand but don't go crazy and use them all, either
48. The JS ecosystem has evolved a gazillionbillion* times over * needs attribution
49. the command line isn't that bad it's a myth that it's easy to break your machine through it
50. GruntJS does everything. gruntjs.com
51. GruntJS can help test your code will concatenate & minify your code can lint your code can help with templating can make your entire build system one command line command
52. GruntJS is something I use on nearly every, single project
53. GruntJS having every project use the same tools has a lot of benefits
54. GruntJS @sindresorhus There are now 777 available @gruntjs tasks. Woah!
55. there are a lot of times when you think your solution is too basic to require any additional libraries / tools but any chance you get to make your life easier is worth taking
56. Not getting overwhelmed and finding your workflow
57. don't worry about using the newest of the new tools if you do this, you'll never get any work done
58. sure, when something new pops up, give it a quick look people (like me) will blog about them
59. find a workflow, set of tools and some of your favourite libraries that work for you stick with them
60. revisit every few months to see if something new has popped up
61. spot small things that take up too much time and solve them
62. Something takes you 5 minutes to do You spend an hour setting up that tool which makes that 5 minute thing a 1 minute thing everytime you do it you now save 4 minutes do that thing 15 times = your hour back
63. take time to improve and perfect your workflow mundane but important tasks should be effortless
64. the moment a mundane task takes considerable effort, you wont do it
65. time taken setting up Grunt/similar pays off
66. we're all building web applications just some are a bit more complex than others
67. develop accordingly, but don't treat your JS like this black box of magic
68. and go make awesome
69. Stickers! Come and find me.
70. Questions? (if not, I'm around all today and tomorrow, come and say hello) (also speaker's clinic at 3:05pm, on this stage) jackfranklin.co.uk @Jack_Franklin @upfrontpodcast / upfrontpodcast.com javascriptplayground.com tilvim.com github.com/jackfranklin