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.
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
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?)
10.
11.
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)
13.
14.
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!
16.
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!
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)