A day in the office of a js developer

  • 361 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
361
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 32. Others ● Mustache ○ minimal; passive view ● Jade ○ HAML-like; (to)rich ● Underscore ○ minimal, but comes with underscore
  • 33. Fluff Because we like it pretty
  • 34. ● Bootstrap ● Foundation, etc grids ● Topcoat ● Purecss ● Kendo UI ● jQueryUI ● YUI
  • 35. Package Managment Never having to worry about where you put something
  • 36. Bower
  • 37. Alternatives ● Jam ● Ender ● browserify
  • 38. Scaffold Because we’re lazy
  • 39. Yo (Yeoman) - Grunt and Yeoman included
  • 40. Task Runners Because we’re really really lazy* * practical
  • 41. Grunt
  • 42. Grunt - JS ● code quality (JSLint / JSHint) ● optimization ○ concatenation ○ minifier ○ uglifier ○ client side templating
  • 43. Grunt - CSS ● CSS preprocessors ○ Less ○ Sass (libSass) ○ Stylus ● CSS minifier
  • 44. Everything! ● testing ● deployment ● watchers ● cleaning windows
  • 45. Honorable Mention Gulp.js
  • 46. Humans Because humans!
  • 47. A team
  • 48. Here is a duck. Questions?