More Related Content
What's hot
What's hot (20)
Similar to Modern Front-End Development
Similar to Modern Front-End Development (20)
Recently uploaded
Recently uploaded (20)
Modern Front-End Development
- 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
- 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!
- 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