Port80: Practical JavaScripting

This talk will focus on practical advice to improve your JavaScript. We’ll look at JavaScript optimisation, tools that do a lot of the work for you, ways to make your code more robust, manageable and how to test it. We’ll also look at the future of JavaScript, what we can expect in the near future and how these enhancements can help us write even better code.

Transcript

1. Practical
   JavaScripting
   

   View Slide

2. Me!
   University of Bath Computer Science Student
   Software Developer at Kainos
   Blogger at javascriptplayground.com
   Talker on upfrontpodcast.com
   Twitterer @Jack_Franklin
   

   View Slide

3. View Slide

4. Free Stuff
   5 Copies of "Beginning jQuery" to get rid of
   Tweet #port80jquery and I'll pick some randomly.
   

   View Slide

5. What we're not going to talk
   about
   Do NOT let me do my Welsh accent
   we won't discuss England letting Wales beat us at rugby
   

   View Slide

6. The Agenda
   Web Sites vs Web Apps
   Sensible JavaScript Writing
   Workflow & Tooling
   Don't get caught in the storm
   Book giveaway
   (Easy) Questions and (hopefully some) Answers
   

   View Slide

7. Web Sites vs Web Apps
   is there a difference?
   

   View Slide

8. View Slide

9. I don't think there is any
   difference
   and that's a good thing
   

   View Slide

10. we're all building sites people
    visit, do something and leave
    stop trying to differentiate
    

    View Slide

11. differentiating web sites vs
    web apps is no good to anyone
    

    View Slide

12. a lot of people ignore new JS
    tools, methods or approaches
    because those are just for "web apps"
    

    View Slide

13. don't be so quick to discredit
    your code
    

    View Slide

14. Writing sensible JavaScript
    

    View Slide

15. I get to see a lot of JavaScript
    and people write some weird stuff
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. 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?
    

    View Slide

20. Too often people treat
    JavaScript like a black box of
    magic
    and throw everything into one file
    

    View Slide

21. Too often it's an after thought
    let's quickly add some jQuery to animate that button
    

    View Slide

22. "weeks of coding can save
    hours of planning"
    

    View Slide

23. Let's talk about jQuery
    

    View Slide

24. ditching jQuery
    has the time come?
    

    View Slide

25. jQuery 2 drops IE6, 7, 8
    jQuery 1.X supports them
    

    View Slide

26. jQuery isn't going anywhere
    fast
    and the file size isn't that big...
    

    View Slide

27. Organise your code
    multiple JS files, modular approaches
    

    View Slide

28. organising your code is really
    simple
    lots of files and a bunch of script tags
    

    View Slide

29. or you can go further
    AMD approaches like Matt talked about
    look at RequireJS
    

    View Slide

30. learn how JavaScript works
    

    View Slide

31. bits of JavaScript will catch
    you out
    and even jQuery can't save you from that
    

    View Slide

32. the better you know JavaScript,
    the better you know jQuery
    Would you write SCSS without knowing CSS?
    

    View Slide

33. 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
    

    View Slide

34. Tooling
    

    View Slide

35. don't dismiss tools out of hand
    but don't go crazy and use them all, either
    

    View Slide

36. The JS ecosystem has evolved
    a gazillionbillion* times over
    * needs attribution
    

    View Slide

37. you're not a real developer if
    you don't use the command
    line*
    * loljk.
    

    View Slide

38. Grunt!
    does everything. gruntjs.com
    

    View Slide

39. Testing
    Minifying & Building
    Validating
    Templating
    

    View Slide

40. you might not think your site
    needs {insert library here}
    

    View Slide

41. 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
    

    View Slide

42. not getting caught in the storm
    

    View Slide

43. don't worry about using the
    newest of the new tools
    if you do this, you'll never get any work done
    

    View Slide

44. sure, when something new
    pops up, give it a quick look
    people (like me) will blog about them
    

    View Slide

45. find a workflow, set of tools
    and some of your favourite
    libraries that work for you
    stick with them
    

    View Slide

46. revisit every few months
    to see if something new has popped up
    

    View Slide

47. spot small things that take up
    too much time
    and solve them
    

    View Slide

48. 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
    

    View Slide

49. take time to improve and
    perfect your workflow
    mundane but important tasks should be effortless
    

    View Slide

50. the moment a mundane task
    takes considerable effort, you
    wont do it
    

    View Slide

51. build for small wins
    lots of small wins > one big win
    

    View Slide

52. we're all building web
    applications
    just some are a bit more complex than others
    

    View Slide

53. develop accordingly, but don't
    treat your JS like this black box
    of magic
    

    View Slide

54. and go make awesome
    

    View Slide

55. Books!
    I'm going to give 3 out now randomly via Twitter
    Which means I'll have 2 left.
    At the after party, come and find me and tell me your best
    joke.
    If I like it, you can have a copy. If I don't, you get to buy me a
    drink.*
    * not really.
    Twitter Draw
    

    View Slide

56. Stickers!
    Come and find me.
    

    View Slide

57. Questions?
    jackfranklin.co.uk
    @Jack_Franklin
    @upfrontpodcast / upfrontpodcast.com
    javascriptplayground.com
    tilvim.com
    github.com/jackfranklin
    toomanysoddingsideprojects.com*
    * not really
    

    View Slide