MODERN FRONT-END DEVELOPMENT

Drupal Camp LA 2013 !

Matthew Wrather Wrather Creative

ABOUT ME

• Freelance Drupal Developer and Web Generalist since 1997

• Drupal since 4.6

• Most Definitely Available for Work!matt@wrathercreative.com (510) WRA-THER

AGENDA

1. Overview of the history of front-end development

2. Review of some awesome tools

3. The part you all came to see

Front-end Developer

SASS(and LESS, Stylus, etc.)

!http://sass-lang.com

VARIABLES

$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

MIXINS

table.hl { margin: 2em 0; td.ln { text-align: right; }}

li { font: { family: serif; weight: bold; size: 1.2em; }}

/* CSS */table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}li { font-family: serif; font-weight: bold; font-size: 1.2em;}

NESTING/EXTENDING@mixin left($dist) { float: left; margin-left: $dist;}

#data { @include left(10px);}

#data { float: left; margin-left: 10px;}

error { border: 1px #f00; background: #fdd;}.badError { @extend .error; border-width: 3px;}

.error, .badError { border: 1px #f00; background: #fdd;}.badError { border-width: 3px;}

COMPASS

• Commonly used mixins and @imports, including:

• Typography (vertical rhythm with auto-calculationof line-height and margin)

• CSS3 with vendor prefixes

• Sprites (though honestly, we’re using icon fonts, right?)

FRONT-END FRAMEWORKS

• Pre-build CSS and JS to address 80% of use-cases

• Built-in grid systems (fixed/fluid)

• Good type defaults, buttons, pretty forms, tables, code styles…

• Commonly-used elements like nav bars, menus with dropdowns, thumbnail grids, etc.

• Javascript to power interactivity (menus, rotators)

FIRST PROBLEM: TOO MANY LIBRARIES

• How do you get jQuery?

• Visit the website, click to download the package, open the zip, navigate, find the file that you want, copy it into the codebase? Hell no!

• Remember the URL and wget? Hell no!

• What about vendor libraries that have other vendor libraries as dependencies? Remember them? Hell no!

NEXT PROBLEM: TOO MANY <SCRIPT> TAGS

• So now we’ve got all these things installed.

• That’s a lot of scripts. Especially since we’re good developers and put our Backbone models, collections, and views in separate files.

• And we have to load them all in to the page.

• So… um…a lot of script tags? In a particular order?

• Hell no!

<script data-main="scripts/main" src="scripts/require.js"></script>

index.html !

scripts/ main.js require.js !

helper/ util.js

// main.js!!require(!["helper/util"],!function(util) {!!// This function is called when!// scripts/helper/util.js!// is loaded.!!// If util.js calls define(),!// then this function is not fired!// until util's dependencies load. !!// The util argument will hold!// the module value for!// "helper/util".!!});

NEXT PROBLEM: TOO MANY THINGS TO DO

• We compile SASS and squash it down to one script • We optimize images • We compile any Coffeescript to JS • We lint the javascript using jsHint to catch problems • We run any automated tests • We concatenate and minify scripts and rewrite the script

tags in the HTML • We run LiveReload (which requires a JS snippet on dev)

package.json (used by npm) !

Gruntfile

// gruntfile!!module.exports = function(grunt) {! // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });! // Load the plugin that provides // the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify');! // Default task(s). grunt.registerTask('default', ['uglify']);!};

NEXT PROBLEM: TOO MANY TOOLS!

One Tool to Rule The All

$ YO WEBAPP

$%% Gruntfile.js $%% bower.json $%% node_modules/ $%% package.json $%% test & $%% index.html & $%% lib/ & '%% spec/ $%% styles/ &   '%% main.scss '%% app !

$%% index.html $%% 404.html $%% favicon.ico $%% robots.txt$%% bower_components/ &   $%% jquery/ &   $%% modernizr/ &   '%% sass-bootstrap/ $%% images/ '%% scripts/    $%% app.js    $%% hello.coffee    $%% main.js    '%% vendor/

$ GRUNT BUILD

$%% index.html $%% 404.html $%% robots.txt $%% favicon.ico $%% images &   $%% 5d462625.glyphicons-halflings-white.png &   '%% 9cc6609b.glyphicons-halflings.png $%% scripts &   $%% 349a65db.main.js &   '%% vendor &   '%% f7f27360.modernizr.js '%% styles '%% c04706fe.main.css

DEMO

THANK YOU!Matthew Wrather • @mwrather

matt@wrathercreative.com • (510) WRA-THER