0
JS
The new black
Kresimir Antolic
JavaScript Team Dictator
A day in the
office
Of a JavaScript developer
Environment
a place to lay my head
Desktop environment
Alternative Environments
Sofa
Bathtub
Editor
the right tool for the right job
Sublime Text
Alternative Editors
● WebStorm
● Atom
● Brackets
● Aptana (Eclipse)
● Notepad++
● VisualStudio
Shell
Because H4x0rz
Shells
● ZSH
○ interactive shell!
○ “oh my zsh” plugin pack
● xterm
● win command prompt
○ oh well
Debugging
The bread and butter
Chrome Developer Tools
Debug the web
Alternatives
● Firefox Dev Tools + FireBug
● Opera DragonFly
● IE dev tools (I kid you not)
Mobile Debugging
● Chrome (4+, adb)
● iOS 6 - Safari dev tools
● external tools (weinre, jsconsole)..
Libraries
The Helpers
jQuery/Zepto
Helpfull
● jQuery Ui - widgets
● underscore - the JS batman utilty belt
● modernizr - feaure detection
● select2 - fancy s...
Frameworks
The Builders
Backbone/Angular
The others
● KnockoutJs
● EmberJs
● CanJS
● BatmanJs
Mobile
● jQuery mobile
● Sencha Touch
Modularization
Because we don’t want a pile...
RequireJS
Alternatives
● almond
● Curl
● StealJS
CSS
preprocessors
Because we don’t like CSS
Say NO to CSS
SASS + Compass
Alternatives
● Less
● Stylus
Templating
Because we love dresses
Handlebars
Others
● Mustache
○ minimal; passive view
● Jade
○ HAML-like; (to)rich
● Underscore
○ minimal, but comes with underscore
Fluff
Because we like it pretty
● Bootstrap
● Foundation, etc grids
● Topcoat
● Purecss
● Kendo UI
● jQueryUI
● YUI
Package
Managment
Never having to worry about where you put something
Bower
Alternatives
● Jam
● Ender
● browserify
Scaffold
Because we’re lazy
Yo (Yeoman) - Grunt and Yeoman included
Task Runners
Because we’re really really lazy*
* practical
Grunt
Grunt - JS
● code quality (JSLint / JSHint)
● optimization
○ concatenation
○ minifier
○ uglifier
○ client side templating
Grunt - CSS
● CSS preprocessors
○ Less
○ Sass (libSass)
○ Stylus
● CSS minifier
Everything!
● testing
● deployment
● watchers
● cleaning windows
Honorable Mention
Gulp.js
Humans
Because humans!
A team
Here is a duck. Questions?
A day in the office   of a js developer
Upcoming SlideShare
Loading in...5
×

A day in the office of a js developer

479

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
479
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

Transcript of "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.

×