Focused Frontends

by Miles Rausch

ERMAHGERD HERPERRINKS


Who Am I?

Miles Rausch

  • Web Developer at Security Labs, LLC
  • Server side - CFML
  • Client side - HTML 5, CSS 3, LESS, RequireJS, &c.
  • Some mobile web (which sucks oysters)
  • @awayken
  • Of Miles Rausch

The Old Way


 /index.html
 /sessions/index.html /submit/index.html
 /styles/normalize.css /styles/styles.css
 /scripts/jquery.min.js /scripts/jquery.someplugin.min.js /scripts/scripts.js

Problems

  • File size
  • Organization
  • Uniqueness
  • Bloat

The New Way

CSS Preprocessors, JavaScript Module Loaders

 /index.html /sessions/index.html /submit/index.html
 /_assets/less/variables.less /_assets/less/homepage.less /_assets/less/sessions.less /_assets/less/submit.less
 /scripts/require.js /scripts/homepage.js /scripts/submit.js

Benefits

The biggest benefit is modularity.
  • Smaller files
  • Better organization
  • Uniqueness
  • Bloat

Demo

Resources

CSS Preprocessors


Resources

JavaScript Module Loaders


The End

Slides

Demo

South Dakota Code Camp Feedback

Focused Frontends

By Miles Rausch

Made with Slides.com

Focused Frontends

As websites and web applications grow in complexity and size, the old days of monolithic, site-wide stylesheets and scripts are over. I'll share with you some techniques for making your website more focused by modularizing your frontend code. The technologies I'll be using are LESS and RequireJS, but the principles should apply to any CSS preprocessor or JavaScript module library.

  • 4,619

More from Miles Rausch