Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Port80: Practical JavaScripting

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.

Jack Franklin

May 10, 2013
Tweet

More Decks by Jack Franklin

Other Decks in Technology

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