FOWD: Practical JavaScripting

FOWD: Practical JavaScripting

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

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

May 14, 2013
Tweet

Transcript

  1. 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
  2. 3.

    The Agenda Web Sites vs Web Apps Sensible JavaScript Writing

    Workflow & Tooling Not being overwhelmed (Easy) Questions and (hopefully some) Answers
  3. 8.

    a lot of people ignore new JS tools, methods or

    approaches because those are just for "web apps"
  4. 11.
  5. 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 ( ) ;
  6. 15.

    Loads of script tags bad for performance (HTTP Reqs) hard

    to minify into one file for production difficult to maintain
  7. 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 = . . .
  8. 17.

    Global Scope leakage cluttering the global scope is bad shows

    a lack of organisation it's not defensive coding
  9. 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 > " ) ;
  10. 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?
  11. 22.

    Too often people treat JavaScript like a black box of

    magic and throw everything into one file
  12. 23.
  13. 29.

    the goal of jQuery is that it doesn't need to

    exist and that will happen...one day
  14. 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
  15. 34.

    RequireJS allows you to define modules and dependencies and comes

    with a build tool to minify & concatenate
  16. 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 } ) ; } ) ;
  17. 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 >
  18. 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 >
  19. 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
  20. 44.

    the better you know JavaScript, the better you know jQuery

    Would you write SCSS without knowing CSS?
  21. 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
  22. 46.
  23. 49.

    the command line isn't that bad it's a myth that

    it's easy to break your machine through it
  24. 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
  25. 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
  26. 57.

    don't worry about using the newest of the new tools

    if you do this, you'll never get any work done
  27. 58.

    sure, when something new pops up, give it a quick

    look people (like me) will blog about them
  28. 59.

    find a workflow, set of tools and some of your

    favourite libraries that work for you stick with them
  29. 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
  30. 63.

    take time to improve and perfect your workflow mundane but

    important tasks should be effortless
  31. 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