Your SlideShare is downloading. ×
Modern Front-End Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Modern Front-End Development

2,727
views

Published 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.

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,727
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
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