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.

1. MODERN FRONT-END
DEVELOPMENT
Drupal Camp LA 2013
!
Matthew Wrather
Wrather Creative

2. ABOUT ME
• Freelance
Drupal Developer
and Web Generalist since 1997
• Drupal
• Most
since 4.6
Definitely Available for Work!
matt@wrathercreative.com
(510) WRA-THER

3. AGENDA
1. Overview of the history of front-end development
2. Review of some awesome tools
3. The part you all came to see

4. Front-end
Developer

5. SASS
(and LESS, Stylus, etc.)
!
http://sass-lang.com

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

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

8. NESTING/EXTENDING
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
float: left;
margin-left: 10px;
}
#data {
@include 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;
}

9. COMPASS
• Commonly
used mixins and @imports, including:
• Typography
(vertical rhythm with auto-calculation
of line-height and margin)
• CSS3
with vendor prefixes
• Sprites
(though honestly, we’re using icon fonts, right?)

12. FRONT-END FRAMEWORKS
• Pre-build
• Built-in
CSS and JS to address 80% of use-cases
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)

15. 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
• What
the URL and wget? Hell no!
about vendor libraries that have other vendor libraries
as dependencies? Remember them? Hell no!

17. 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
• So…
• Hell
we have to load them all in to the page.
um…a lot of script tags? In a particular order?
no!

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

19. // main.js!
!
index.html
require(!
["helper/util"],!
function(util) {!
!
!
scripts/
main.js
require.js
!
helper/
util.js
// 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".!
!
});

20. 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)

22. // 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'
}
}
});
package.json
(used by npm)
!
Gruntfile
!
// Load the plugin that provides
// the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
!
// Default task(s).
grunt.registerTask('default', ['uglify']);
!
};

23. NEXT PROBLEM:
TOO MANY TOOLS!

25. One Tool
to Rule The All

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

28. $ 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

29. DEMO

30. THANK YOU!
Matthew Wrather • @mwrather
matt@wrathercreative.com • (510) WRA-THER