Modern Front-End Development

  • 2,497 views
Uploaded on

A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,497
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?)
  • 10. 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)
  • 11. 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!
  • 12. 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!
  • 13. <script data-main="scripts/main" src="scripts/require.js"></script>
  • 14. // 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".! ! });
  • 15. 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)
  • 16. // 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']); ! };
  • 17. NEXT PROBLEM: TOO MANY TOOLS!
  • 18. One Tool to Rule The All
  • 19. $ 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/
  • 20. $ 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
  • 21. DEMO
  • 22. THANK YOU! Matthew Wrather • @mwrather matt@wrathercreative.com • (510) WRA-THER