a day in the office of a js developer

JS The new black

Kresimir AntolicJavaScript Team Dictator

A day in the officeOf a JavaScript developer

Environmenta place to lay my head

Desktop environment

Alternative Environments

Sofa

Bathtub

Editorthe right tool for the right job

Sublime Text

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

ShellBecause H4x0rz

Shells● ZSH

○ interactive shell!○ “oh my zsh” plugin pack

● xterm

● win command prompt○ oh well

DebuggingThe 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)..

LibrariesThe Helpers

jQuery/Zepto

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

FrameworksThe Builders

Backbone/Angular

The others● KnockoutJs● EmberJs● CanJS● BatmanJs

Mobile

● jQuery mobile

● Sencha Touch

ModularizationBecause we don’t want a pile...

RequireJS

Alternatives● almond

● Curl

● StealJS

CSS preprocessorsBecause we don’t like CSS

Say NO to CSS

SASS + Compass

Alternatives● Less

● Stylus

TemplatingBecause we love dresses

Handlebars

Others● Mustache

○ minimal; passive view● Jade

○ HAML-like; (to)rich● Underscore

○ minimal, but comes with underscore

FluffBecause we like it pretty

● Bootstrap

● Foundation, etc grids

● Topcoat

● Purecss

● Kendo UI

● jQueryUI

● YUI

Package ManagmentNever having to worry about where you put something

Bower

Alternatives● Jam

● Ender

● browserify

ScaffoldBecause we’re lazy

Yo (Yeoman) - Grunt and Yeoman included

Task RunnersBecause 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

HumansBecause humans!

A team

Here is a duck. Questions?