A day in the office of a js developer

566
-1

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
566
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A day in the office of a js developer

  1. 1. JS The new black Kresimir Antolic JavaScript Team Dictator
  2. 2. A day in the office Of a JavaScript developer
  3. 3. Environment a place to lay my head
  4. 4. Desktop environment
  5. 5. Alternative Environments
  6. 6. Sofa
  7. 7. Bathtub
  8. 8. Editor the right tool for the right job
  9. 9. Sublime Text
  10. 10. Alternative Editors ● WebStorm ● Atom ● Brackets ● Aptana (Eclipse) ● Notepad++ ● VisualStudio
  11. 11. Shell Because H4x0rz
  12. 12. Shells ● ZSH ○ interactive shell! ○ “oh my zsh” plugin pack ● xterm ● win command prompt ○ oh well
  13. 13. Debugging The bread and butter
  14. 14. Chrome Developer Tools Debug the web
  15. 15. Alternatives ● Firefox Dev Tools + FireBug ● Opera DragonFly ● IE dev tools (I kid you not)
  16. 16. Mobile Debugging ● Chrome (4+, adb) ● iOS 6 - Safari dev tools ● external tools (weinre, jsconsole)..
  17. 17. Libraries The Helpers
  18. 18. jQuery/Zepto
  19. 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. 20. Frameworks The Builders
  21. 21. Backbone/Angular
  22. 22. The others ● KnockoutJs ● EmberJs ● CanJS ● BatmanJs
  23. 23. Mobile ● jQuery mobile ● Sencha Touch
  24. 24. Modularization Because we don’t want a pile...
  25. 25. RequireJS
  26. 26. Alternatives ● almond ● Curl ● StealJS
  27. 27. CSS preprocessors Because we don’t like CSS Say NO to CSS
  28. 28. SASS + Compass
  29. 29. Alternatives ● Less ● Stylus
  30. 30. Templating Because we love dresses
  31. 31. Handlebars
  32. 32. Others ● Mustache ○ minimal; passive view ● Jade ○ HAML-like; (to)rich ● Underscore ○ minimal, but comes with underscore
  33. 33. Fluff Because we like it pretty
  34. 34. ● Bootstrap ● Foundation, etc grids ● Topcoat ● Purecss ● Kendo UI ● jQueryUI ● YUI
  35. 35. Package Managment Never having to worry about where you put something
  36. 36. Bower
  37. 37. Alternatives ● Jam ● Ender ● browserify
  38. 38. Scaffold Because we’re lazy
  39. 39. Yo (Yeoman) - Grunt and Yeoman included
  40. 40. Task Runners Because we’re really really lazy* * practical
  41. 41. Grunt
  42. 42. Grunt - JS ● code quality (JSLint / JSHint) ● optimization ○ concatenation ○ minifier ○ uglifier ○ client side templating
  43. 43. Grunt - CSS ● CSS preprocessors ○ Less ○ Sass (libSass) ○ Stylus ● CSS minifier
  44. 44. Everything! ● testing ● deployment ● watchers ● cleaning windows
  45. 45. Honorable Mention Gulp.js
  46. 46. Humans Because humans!
  47. 47. A team
  48. 48. Here is a duck. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×