FRONTEND DEVELOPMENTSupercharge your frontend development with little languages

and smart tools

Dave Jeffery@DaveJ

dave@davejeffery.com

Freelance frontend guy.

How I like to develop

• Invest time getting the set up right

• Write descriptive code

• Use tools that are 'of' the web

#1: Coffeescript for your Javascript

• Coffeescript is just Javascript

• Minimal syntax

• Javascript: ‘The Good Parts’

Coffeescript: Links

• Coffeescript: http://coffeescript.org/

• The Little Book on CoffeeScript: http://arcturo.github.io/library/coffeescript/

• Literate Coffeescript: http://ashkenas.com/literate-coffeescript/

COFFEESCRIPT DEMO

#2: Sass for your CSS

• Sass is just CSS

• Great mixins available, especially Bourbon & Foundation

Sass Examples 1

• Variables

• Mixins

$primary-color: #cc0000;

@include background-image(linear-gradient(-45deg, #aaa, #ccc);

Sass Examples 2

• Nesting

• Partials@import ‘_typography’;

.menu { background: #fff;

&::before { @include triangle(25px, #333, up); }

> ul { list-style: none; }}

Sass: Links

• Sass: http://sass-lang.com/

• Bourbon: http://bourbon.io/

• Compass: http://compass-style.org/

• Foundation: http://foundation.zurb.com/

• Stylus: http://learnboost.github.io/stylus/

• Less: http://lesscss.org/

Jade for your HTML

•

doctype htmlhtml(lang="en") head title Page Title script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.

AngularJS

•Two-way data binding

Angular: Links

• AngularJS: http://angularjs.org/

• Angular Classy: http://davej.github.io/angular-classy/

• Polymer: http://www.polymer-project.org/

• React: http://facebook.github.io/react/

• Ember: http://emberjs.com/

Grunt

• Automation

• Thousands of plugins

Grunt: Links

• Grunt: http://gruntjs.com/

• Makefile

• Gulp: http://gulpjs.com/

• CodeKit (Mac): https://incident57.com/codekit/

• Prepros (Windows): http://alphapixels.com/prepros/

• Write your own

DEMO