Modern Front-End Development

30
MODERN FRONT-END DEVELOPMENT Drupal Camp LA 2013 Matthew Wrather Wrather Creative

description

A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013. This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.

Transcript of Modern Front-End Development

Page 1: Modern Front-End Development

MODERN FRONT-END DEVELOPMENT

Drupal Camp LA 2013 !

Matthew Wrather Wrather Creative

Page 2: Modern Front-End Development

ABOUT ME

• Freelance Drupal Developer and Web Generalist since 1997

• Drupal since 4.6

• Most Definitely Available for [email protected] (510) WRA-THER

Page 3: Modern Front-End Development

AGENDA

1. Overview of the history of front-end development

2. Review of some awesome tools

3. The part you all came to see

Page 4: Modern Front-End Development

Front-end Developer

Page 5: Modern Front-End Development

SASS(and LESS, Stylus, etc.)

!http://sass-lang.com

Page 6: Modern Front-End Development

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;}

Page 7: Modern Front-End Development

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;}

Page 8: Modern Front-End Development

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;}

Page 9: Modern Front-End Development

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?)

Page 10: Modern Front-End Development
Page 11: Modern Front-End Development
Page 12: Modern Front-End Development

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)

Page 13: Modern Front-End Development
Page 14: Modern Front-End Development
Page 15: Modern Front-End Development

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!

Page 16: Modern Front-End Development
Page 17: Modern Front-End Development

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!

Page 18: Modern Front-End Development

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

Page 19: Modern Front-End Development

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".!!});

Page 20: Modern Front-End Development

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)

Page 21: Modern Front-End Development
Page 22: Modern Front-End Development

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']);!};

Page 23: Modern Front-End Development

NEXT PROBLEM: TOO MANY TOOLS!

Page 24: Modern Front-End Development
Page 25: Modern Front-End Development

One Tool to Rule The All

Page 26: Modern Front-End Development
Page 27: Modern Front-End Development

$ 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/

Page 28: Modern Front-End Development

$ 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

Page 29: Modern Front-End Development

DEMO

Page 30: Modern Front-End Development

THANK YOU!Matthew Wrather • @mwrather

[email protected] • (510) WRA-THER