A lecture I'm giving at FER about tools for developing JS apps.

1. JS
The new black
Kresimir Antolic
JavaScript Team Dictator

2. A day in the
office
Of a JavaScript developer

3. Environment
a place to lay my head

4. Desktop environment

5. Alternative Environments

6. Sofa

7. Bathtub

8. Editor
the right tool for the right job

9. Sublime Text

10. Alternative Editors
● WebStorm
● Atom
● Brackets
● Aptana (Eclipse)
● Notepad++
● VisualStudio

11. Shell
Because H4x0rz

12. Shells
● ZSH
○ interactive shell!
○ “oh my zsh” plugin pack
● xterm
● win command prompt
○ oh well

13. Debugging
The bread and butter

14. Chrome Developer Tools
Debug the web

15. Alternatives
● Firefox Dev Tools + FireBug
● Opera DragonFly
● IE dev tools (I kid you not)

16. Mobile Debugging
● Chrome (4+, adb)
● iOS 6 - Safari dev tools
● external tools (weinre, jsconsole)..

17. Libraries
The Helpers

18. jQuery/Zepto

19. Helpfull
● jQuery Ui - widgets
● underscore - the JS batman utilty belt
● modernizr - feaure detection
● select2 - fancy select fields
● Moment - date library
● all the jQuery plugins

20. Frameworks
The Builders

21. Backbone/Angular

22. The others
● KnockoutJs
● EmberJs
● CanJS
● BatmanJs

23. Mobile
● jQuery mobile
● Sencha Touch

24. Modularization
Because we don’t want a pile...

25. RequireJS

26. Alternatives
● almond
● Curl
● StealJS

27. CSS
preprocessors
Because we don’t like CSS
Say NO to CSS

28. SASS + Compass

29. Alternatives
● Less
● Stylus

30. Templating
Because we love dresses

31. Handlebars

33. Others
● Mustache
○ minimal; passive view
● Jade
○ HAML-like; (to)rich
● Underscore
○ minimal, but comes with underscore

34. Fluff
Because we like it pretty

35. ● Bootstrap
● Foundation, etc grids
● Topcoat
● Purecss
● Kendo UI
● jQueryUI
● YUI

36. Package
Managment
Never having to worry about where you put something

37. Bower

38. Alternatives
● Jam
● Ender
● browserify

39. Scaffold
Because we’re lazy

40. Yo (Yeoman) - Grunt and Yeoman included

41. Task Runners
Because we’re really really lazy*
* practical

42. Grunt

43. Grunt - JS
● code quality (JSLint / JSHint)
● optimization
○ concatenation
○ minifier
○ uglifier
○ client side templating

44. Grunt - CSS
● CSS preprocessors
○ Less
○ Sass (libSass)
○ Stylus
● CSS minifier

45. Everything!
● testing
● deployment
● watchers
● cleaning windows

46. Honorable Mention
Gulp.js

47. Humans
Because humans!

48. A team

49. Here is a duck. Questions?