Code Trek:

The Final Frontend

Jukka Viinamäki // Futurice

PART I: Things that go in the browser

What is HTML5?

• also known as Open Web Platform
• umbrella term, HTML, JS, CSS, others
• core specification & related specifications

What is HTML5?

Who says what's HTML5?

• HTML5 is developed by W3C and WHATWG
• WHATWG describes HTML5 as "living standard"
• W3C final recommendation planned in 2014

Where do I learn more?

• HTML5 Please html5please.com
• HTML5 Rocks html5rocks.com
• Can I Use caniuse.com
• MDN developer.mozilla.org
• W3C w3.org

JavaScript

• zero to hero in 18 years
• Java Applets => JVM Backends
• web scripting => Node.js, Tessel.io
• Crockford - JavaScript: The Good Parts

JavaScript features

• first-class function values
• dynamic objects and prototypal inheritance
• object and array literals (JSON)

var f = function(x) { return x + 1 }

var p = { title: 'The Prototype' }
var F = function() {}
F.prototype = p
new F().title // => The Prototype

{"some": [1, "simple", "json"]}

JavaScript scopes

• global and function scope - no block scope
• lexical scope, hoisting, closures
• module pattern

var module = (function() {
    var private_var = 0
    {
        var another = 1
    }

    return {
        inc: function() {
            return private_var++
        }
    }
})()

JavaScript: this

• What `this` means depends on invocation pattern
• method: the object the method is bound to
• function: the global object
• constructor: the object created via `new`
• apply: the first argument to apply

Functional programming in JS

• Functional programming utilities e.g. from Lo-Dash

var objs = ... // [{type: string, value: number}]

// imperative
var a = []
for (var i=0; i<objs.length; i++) {
    if (a.indexOf(objs[i].type) < 0) {
        a.push(objs[i].type)
    }
}

// functional
_.unique(_.map(objs, function(v) { return v.type }))

Functional programming in JS

// imperative
var s = 0
for (var i=0; i<objs.length; i++) {
    s += objs[i].value
}

// functional
_.reduce(objs, function(a, v) { return a + v.value }, 0)

Functional programming in JS

// imperative
var s = {}
for (var i=0; i<objs.length; i++) {
    (s[objs[i].type] || (s[objs[i].type] = [])).push(objs[i])
}

// functional
_.groupBy(objs, function(v) { return v.type })

// functional-ish, without groupBy
var groupByType = function(a, v) {
    (a[v.type] || (a[v.type] = [])).push(v)
    return a
}

_.reduce(objs, groupByType, {})

Functional programming in JS

• hoisting: are the names a, i, s already bound in scope?
• indexing: zero based or not? < or <= or what?
• side effects: what else happens?

FP basic building blocks

• map: transform each element
• reduce: reduce a collection to single value
• filter: select elements
• recursion: solve simpler sub-problem
• no tail call optimization in JavaScript
• generalized to functors, applicatives, monads

Jasmine interlude...

• Jasmine http://pivotal.github.io/jasmine/

Exercise: Quicksort

// pseudocode

quicksort(array):
    - quicksort of [] is []
    - quicksort of [head:tail] is
        quicksort of elements <= head in tail, concatenated with
        head, concatenated with
        quicksort of elements > head in tail

function quicksort(xs) {
    var head   = _.head(xs),
        smalls = _.filter(_.tail(xs), function(x) { return x <= head }),
        bigs   = _.filter(_.tail(xs), function(x) { return x > head })
    
    return (head !== undefined)
        ? quicksort(smalls).concat(head).concat(quicksort(bigs))
        : []
}

Getting the JS to the Browser

• Where to put what
• Namespaces
• Dependencies
• Optional dependencies

CSS

• CSS 3 html5please.com/#css
• CSS 3 css3please.com
• CSS, general css-tricks.com

CSS - General rules

• cascade rules - load order matters
• must work against increasing specificity
• adding more CSS will make problems worse
• identify commonalities as reusable components
• trade-off in markup lock-in versus class spam
• methodologies: SMACSS, OOCSS

SMACSS

• "Scalable and Modular Architecture for CSS"
• base, layout, module, state, theme

SMACSS: base

• element, descendent/child or pseudo class
• defines default styling for all occurrences
• e.g. heading sizes, link styles, default font styles
• CSS resets fall in this category

body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;
}

SMACSS: Layout

• layout the major parts like header and footer
• keep neutral to the content of the parts
• generalized in grid systems
• convention: l- or layout- prefix in qualifiers

#article {
    float: left;
}

#sidebar {
    float: right;
}

.l-flipped #article {
    float: right;
}

.l-flipped #sidebar {
    float: left;
}

SMACSS: Modules

• discrete, reusable components of a page
• inside layout components or other modules
• standalone, should be removeable to different contexts
• use class selectors for semantic precision
• module structuring via classes and semantic elements
• avoid generic element selectors: div, span...

<div class="fld">
    <span class="fld-name">Folder Name</span>
    <span class="fld-items">(32 items)</span>
</div>

SMACSS: Sub-modules

• modules can be removed to a different context
• there may be variations on how a module looks
• avoid using context-specific selectors for this
• instead, use the sub-module pattern
• sub-module declarations are generally static

// DON'T
.pod { width: 100%; }
.pod input[type=text] { width: 50%; }
#sidebar .pod input[type=text] { width: 100%; }

// DO
.pod { width: 100%; }
.pod input[type=text] { width: 50%; }
.pod-constrained input[type=text] { width: 100%; }

<div class="pod pod-constrained">...</div>

SMACSS: State rules

• augments and overrides other styles
• applied to layout or module style
• typically indicate dynamic nature (JavaScript)
• this separates state from sub-module style
• convention: `is-` prefix

<header class="is-collapsed">...</header>

<div class="msg is-error">...</div>

SMACSS: State rules

• generic state rules are part of the base styling
• module-specific rules are part of that module
• convention: module name in module-specific rules

.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}

SMACSS: Theme rules

• theme rules can provide drop-in visual theming
• themes can apply to any of the rule types
• theme styles hook into existing definitions

// in module-name.css
.mod {
    border: 1px solid;
}

// in theme.css
.mod {
    border-color: blue;
}

PART II: Behind the Scenes

Single Page App

• web sites are HTML pages with some JavaScript
• web applications are JavaScript with some HTML
• often a static index.html with scripts & stuff
• data only interface to backend, usually REST/JSON
• often built to a web application framework
• dynamic templating on client side

Frontend Toolchain

• Boilerplate - HTML, CSS resets, project templates...
• Authoring Abstractions - Haml, Jade, LESS, Sass...
• Frameworks - application frameworks, AMD...
• Iteration Workflow - testing, livereload, dev tools...
• Performance Tuning - profiling, dev tools...
• Build & Optimization - minifying, uglifying, grunt...
• Integration & Deployment - VCSs, CIs, Puppet, Capistrano...

Backbone

• Router, Model, Collection, View
• model lifecycle binding to REST
• event model for router, model, collection
• built on top of Underscore utilities
• leaves much up to the application author
• can be complemented with Marionette

Angular

• Angular is backed by Google
• models are plain old JavaScript objects
• bi-directional data binding
• templates are HTML with embedded DSL for filters etc
• Guice style module system with dependency injection
• promise integration in data binding
• extending HTML with application specific semantics
• Angular-UI etc directive libraries

PART III: The Great Beyond

Things not covered

• responsive web design
• responsive web applications
• mobile web, mobile first
• functional, user interface testing
• many, many more things

FIN