Common Solutions

Lots of JavaScript!!!

Big Ball of Mud

• Couple of lines
• Clean up later
• End of project, one big file

AJAX

• More responsive
• Callbacks everywhere

Common Solutions

JavaScript MVC

Every solution leads to more problems

Fictional Case: usic.com

Find reviews and discover new music

Sociological study on musical taste

"music board"

Modern: popovers...

... and modals

Server-side

Server-side

Server-side

Client-side

Client-side

Client-side

Semantic HTML

6 rules

#1: No style attributes

Bad:

<div style="color: red;">This is not a valid email address</div>

Good:

<div class="error">This is not a valid email address</div>

#2: No script attributes

Bad:

<a href="#" onclick="openModal('/contact')">Contact</a>

Good:

<a href="javascript:;" class="contact-link">Contact</a>

#3: No inline style or script tags

Bad:

<style>
    .error {
        color: red;
    }
</style>

<script>
    function openModal(url) {
        // TODO
    }
</script>

Good:

<link href="css/register.css" rel="stylesheet" type="text/css">

<script src="js/menu.js"></script>

#4: Use semantic class names

Bad:

<div class="red">This is not a valid email address</div>

Good:

<div class="error">This is not a valid email address</div>

The thing you style

Not the way you style it

#5: Use semantic tags

Bad:

<div class="lead">This is not a <i>disclaimer</i>.</div>

Good:

<div class="lead">This is not a <em>disclaimer</em>.</div>

#6: Follow the structure of your content

Bad:

<div class="menu">
    <span class="menu-item"><a href="/">Home</a></span>
    <span class="menu-item"><a href="/register">Register</a></span>
</div>

Good:

<ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/register">Register</a></li>
</ul>

The Module Pattern

(function () {
    var local = 0;

    $('.counter').click(function () {
        local += 1;
    });
}());

Douglas Crockford, JavaScript: The Good Parts

"Don't leave home without it!"

The Module Pattern (return)

var myNamespace = (function () {
    var local = 0;

    $('.counter').click(function () {
        local += 1;
    });

    return {
        count: function () {
            return local;
        }
    };
}());

The Module Pattern (exports)

var myNamespace = {};

(function (exports) {
    var local = 0;

    $('.counter').click(function () {
        local += 1;
    });

    exports.count = function () {
        return local;
    };
}(myNamespace));

Asynchronous Module Definition (AMD)

Used by RequireJS

define(['jquery'], function ($) {
    var local = 0;

    $('.counter').click(function () {
        local += 1;
    });

    return {
        count: function () {
            return local;
        }
    };
});

CommonJS Module Definition

Used by Browserify and Node.js

var $ = require('jquery');

var local = 0;

$('.counter').click(function () {
    local += 1;
});

exports.count = function () {
    return local;
};

CSS Preprocessors

.menu li {
    border-radius: 4px;
    background-color: #753A26;
}

#account-register input[type="submit"] {
    border-radius: 4px;
    background-color: #753A26;
}

CSS Preprocessors

.menu li,
#account-register input[type="submit"] {
    border-radius: 4px;
    background-color: #753A26;
}

CSS Preprocessors

@mixin primary-button() {
    border-radius: 4px;
    background-color: #753A26;
}

.menu li {
    @include primary-button();
}

#account-register input[type="submit"] {
    @include primary-button();
}

CSS Preprocessors

Sass is better: conditionals and loops

Blog post on CSS Tricks by Chris Coyier

CSS Preprocessors

Just try it!

There's not excuse not to use a CSS Preprocessor

Asset Pipeline

• Concatenate (CSS/JS)
• Minify/compress (CSS/JS)
• Compile (Sass/Less)
• Optimize (RequireJS/Browserify)
• Versioning/cache buster

Grunt

The Page Module Pattern

views/account/register.template:

<div id="account-register">
    <form>
        <!-- ... -->
    </form>
</div>

The Page Module Pattern

css/account/register.css:

#account-register form {
    /* ... */
}

The Page Module Pattern

js/account/register.js:

$('#account-register').each(function () {
    // ...
});

The Page Module Pattern

It's about isolation

The Page Module Pattern

Use common stylesheets for:

• Page layout
• Header styling
• Paragraph spacing
• Anything in the "common" section of a style guide

Note: good style guides can be hard to come by

Presentation Patterns

Add custom behavior

Widget

Widget

css/shared/menu.css:

.shared-menu a[href] {
    /* ... */
}

js/shared/menu.js:

$('.shared-menu').each(function () {
    // ...
});

Validation Rule

$.validator.addMethod('strong-password', function (value, element) {
    // ...
});

<input type="password" strong-password="true">

Data Patterns

Add extra screen state without roundtrips to the server

Hidden Input

<div class="shared-avatar">
    <input type="hidden" name="avatarId" value="3">
    <!-- ... -->
</div>

Data Attribute

<span class="shared-progress" data-value="1" data-max="10"></span>

Data Literal

<script>
    var genreList = [
        {"id": 1, "name": "Post-Grunge"},
        {"id": 2, "name": "Post-Hardcore"}
    ];
</script>

Trade-off: inline js and global var!

Content Security Policy header :(

Integration Patterns

Update screen state with data from the server

HTML Fragment

$('.shared-menu').each(function () {
    var $menu = $(this);

    $menu.find('.contact-link').click(function () {
        $.get('/shared/contact', function (data) {
            $('#modal .modal-dialog').html(data);
            $('#modal').modal('show');
        });
    });
});

No client-side templates

No Web APIs

AJAX Form

$('.shared-login').each(function () {
    var $login = $(this);

    $login.find('form').submit(function () {
        $.post('/shared/login', $(this).serialize(), function (data) {
            $login.html(data);
        });
    });
});

POST

Some "technical difficulties"

• How to close a modal...
• How to reinitialize the login widget...

Do I Need One?

Page Modules

• Isolated components
• Extra behavior
• No session state

JavaScript MVC

• Interacting components
• Complex behavior
• Client-side session state

Isolated components

Extra behavior

No session state

JavaScript MVC

JavaScript MVC

• Interacting components (add item to board)
• Complex behavior (drag, rotate)
• Client-side session state (save session state to server)

Lasagna Code

Code that is divided in several well-defined and separable layers, but where individual layers in the system are highly unstructured or disorganized.

Joe Celko

Lasagna Code

• Low cohesion within layers
• Hard to find stuff
• Tight coupling between layers
• Every change touches multiple layers

Client-side Model

Different from the server-side model

Don't expose your entities!

REST is not the answer

REST Level 1.5

Hypermedia without PUT and DELETE

{
    "_links": {
        "self": { "href": "/user/music-board" }
    },
    ...
}

Hyperlinks work best with "networky" data, like users, bands, other users