Download as PDF, PPTX
![// main.js!!index.htmlrequire(!["helper/util"],!function(util) {!!!scripts/main.jsrequire.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".!!});](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fmodernfrontenddevelopment-131230122322-phpapp02%2f75%2fModern-Front-End-Development-19-2048.jpg&f=jpg&w=240)
![// 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']);!};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fmodernfrontenddevelopment-131230122322-phpapp02%2f75%2fModern-Front-End-Development-22-2048.jpg&f=jpg&w=240)
Uploaded bymwrather
PDF, PPTX8,073 views
Modern Front-End Development
The presentation by Matthew Wrather at Drupal Camp LA 2013 covers the evolution of front-end development and highlights various tools including Sass for CSS preprocessing. Challenges such as managing numerous libraries and script tags, along with optimizing workflow using tools like Grunt, are discussed. The speaker emphasizes the importance of modern front-end frameworks and their utility in streamlining development processes.
Related topics:
Recommended
More Related Content
What's hot
Similar to Modern Front-End Development
Recently uploaded
Modern Front-End Development
- 1.MODERN FRONT-ENDDEVELOPMENTDrupal CampLA 2013!Matthew WratherWrather Creative
- 2.ABOUT ME• FreelanceDrupalDeveloper and Web Generalist since 1997• Drupal• Mostsince 4.6Definitely Available for Work! matt@wrathercreative.com (510) WRA-THER
- 3.AGENDA1. Overview ofthe history of front-end development2. Review of some awesome tools3. The part you all came to see
- 4.
- 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.MIXINStable.hl { margin: 2em0; 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• Commonlyused mixinsand @imports, including:• Typography(vertical rhythm with auto-calculation of line-height and margin)• CSS3with vendor prefixes• Sprites(though honestly, we’re using icon fonts, right?)
- 12.FRONT-END FRAMEWORKS• Pre-build•Built-inCSS and JS to address 80% of use-cases grid systems (fixed/fluid)• Goodtype defaults, buttons, pretty forms, tables, codestyles…• Commonly-usedelements like nav bars, menus withdropdowns, thumbnail grids, etc.• Javascriptto power interactivity (menus, rotators)
- 15.FIRST PROBLEM:TOO MANYLIBRARIES• Howdo you get jQuery?• Visitthe website, click to download the package, open thezip, navigate, find the file that you want, copy it into thecodebase? Hell no!• Remember• Whatthe URL and wget? Hell no!about vendor libraries that have other vendor librariesas dependencies? Remember them? Hell no!
- 17.NEXT PROBLEM:TOO MANY<SCRIPT> TAGS• Sonow we’ve got all these things installed.• That’sa lot of scripts. Especially since we’re gooddevelopers and put our Backbone models, collections, andviews in separate files.• And• So…• Hellwe have to load them all in to the page.um…a lot of script tags? In a particular order?no!
- 18.
- 19.// main.js!!index.htmlrequire(!["helper/util"],!function(util) {!!!scripts/main.jsrequire.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 MANYTHINGS TO DO• Wecompile SASS and squash it down to one script• Weoptimize images• Wecompile any Coffeescript to JS • Welint the javascript using jsHint to catch problems• Werun any automated tests• Weconcatenate and minify scripts and rewrite the scripttags in the HTML• Werun 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 MANYTOOLS!
- 25.One Toolto RuleThe 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.
- 30.THANK YOU!Matthew Wrather• @mwrathermatt@wrathercreative.com • (510) WRA-THER