Developer

Me me me!

Frontend evolution

Today's reality.

The browser is our application runtime

Browser landscape has changed.

x 1.000.000.0's of devices out there

Traditional server-sided architecture

Client-sided architecture

The modern toolbox.

Today's baseline.

Boilerplating

No way around.

Package management

We know it from the server-side.

Client-side package managers.

Bower

Dependency management

Script loaders

Asynchronous module definition (AMD)

Asynchronous module definition

# Module
(function () {
    var $ = this.jQuery;

    this.myExample = function () {};
}());

# CommonJS
var $ = require('jquery');
exports.myExample = function () {};

# AMD
define(['jquery'] , function ($) {
    return function () {};
});

Dependo - visualize your dependency graph.

Authoring abstractions.

Precompiled CSS

Why precompiled CSS?

CSS is probably one of the most overlooked areas in web-dev.

Myself

Precompiled CSS

.slide {

  &.current {
    @include transform(translate3d(0, 0, 0));
    display: block;
    opacity: 1;

    .auto-fadein {
      opacity: 1;
    }

    .gdbar {
      @include background-size(100% 100%);
    }
  }
}

Autoprefixer

:fullscreen a {
  transition: transform 1s
}

var prefixed = autoprefixer.compile(css);

:-webkit-full-screen a {
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}

:-moz-full-screen a {
  transition: transform 1s;
}

:fullscreen a {
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}