a day in the office of a js developer

49
JS The new black Kresimir Antolic JavaScript Team Dictator

Upload: kresimir-antolic

Post on 06-May-2015

437 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: A day in the office   of a js developer

JS The new black

Kresimir AntolicJavaScript Team Dictator

Page 2: A day in the office   of a js developer

A day in the officeOf a JavaScript developer

Page 3: A day in the office   of a js developer

Environmenta place to lay my head

Page 4: A day in the office   of a js developer

Desktop environment

Page 5: A day in the office   of a js developer

Alternative Environments

Page 6: A day in the office   of a js developer

Sofa

Page 7: A day in the office   of a js developer

Bathtub

Page 8: A day in the office   of a js developer

Editorthe right tool for the right job

Page 9: A day in the office   of a js developer

Sublime Text

Page 10: A day in the office   of a js developer

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

Page 11: A day in the office   of a js developer

ShellBecause H4x0rz

Page 12: A day in the office   of a js developer

Shells● ZSH

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

● xterm

● win command prompt○ oh well

Page 13: A day in the office   of a js developer

DebuggingThe bread and butter

Page 14: A day in the office   of a js developer

Chrome Developer Tools

Debug the web

Page 15: A day in the office   of a js developer

Alternatives● Firefox Dev Tools + FireBug

● Opera DragonFly

● IE dev tools (I kid you not)

Page 16: A day in the office   of a js developer

Mobile Debugging

● Chrome (4+, adb)

● iOS 6 - Safari dev tools

● external tools (weinre, jsconsole)..

Page 17: A day in the office   of a js developer

LibrariesThe Helpers

Page 18: A day in the office   of a js developer

jQuery/Zepto

Page 19: A day in the office   of a js developer

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

Page 20: A day in the office   of a js developer

FrameworksThe Builders

Page 21: A day in the office   of a js developer

Backbone/Angular

Page 22: A day in the office   of a js developer

The others● KnockoutJs● EmberJs● CanJS● BatmanJs

Page 23: A day in the office   of a js developer

Mobile

● jQuery mobile

● Sencha Touch

Page 24: A day in the office   of a js developer

ModularizationBecause we don’t want a pile...

Page 25: A day in the office   of a js developer

RequireJS

Page 26: A day in the office   of a js developer

Alternatives● almond

● Curl

● StealJS

Page 27: A day in the office   of a js developer

CSS preprocessorsBecause we don’t like CSS

Say NO to CSS

Page 28: A day in the office   of a js developer

SASS + Compass

Page 29: A day in the office   of a js developer

Alternatives● Less

● Stylus

Page 30: A day in the office   of a js developer

TemplatingBecause we love dresses

Page 31: A day in the office   of a js developer

Handlebars

Page 32: A day in the office   of a js developer
Page 33: A day in the office   of a js developer

Others● Mustache

○ minimal; passive view● Jade

○ HAML-like; (to)rich● Underscore

○ minimal, but comes with underscore

Page 34: A day in the office   of a js developer

FluffBecause we like it pretty

Page 35: A day in the office   of a js developer

● Bootstrap

● Foundation, etc grids

● Topcoat

● Purecss

● Kendo UI

● jQueryUI

● YUI

Page 36: A day in the office   of a js developer

Package ManagmentNever having to worry about where you put something

Page 37: A day in the office   of a js developer

Bower

Page 38: A day in the office   of a js developer

Alternatives● Jam

● Ender

● browserify

Page 39: A day in the office   of a js developer

ScaffoldBecause we’re lazy

Page 40: A day in the office   of a js developer

Yo (Yeoman) - Grunt and Yeoman included

Page 41: A day in the office   of a js developer

Task RunnersBecause we’re really really lazy*

* practical

Page 42: A day in the office   of a js developer

Grunt

Page 43: A day in the office   of a js developer

Grunt - JS● code quality (JSLint / JSHint)● optimization

○ concatenation○ minifier○ uglifier ○ client side templating

Page 44: A day in the office   of a js developer

Grunt - CSS● CSS preprocessors

○ Less

○ Sass (libSass)

○ Stylus

● CSS minifier

Page 45: A day in the office   of a js developer

Everything!● testing

● deployment

● watchers

● cleaning windows

Page 46: A day in the office   of a js developer

Honorable Mention

Gulp.js

Page 47: A day in the office   of a js developer

HumansBecause humans!

Page 48: A day in the office   of a js developer

A team

Page 49: A day in the office   of a js developer

Here is a duck. Questions?