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 [email protected] (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
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
Top Related