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.

Transcript

1. Focused Frontends by Miles Rausch http://milesrausch.com
2. ERMAHGERD HERPERRINKS Slides Demo South Dakota Code Camp Feedback https://slid.es/awayken/2013sdcodecamp https://github.com/awayken/2013sdcodecamp http://tinyurl.com/rsdcc13 http://knowyourmeme.com/memes/ermahgerd
3. Who Am I?
4. 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
5. The Old Way < b r > / i n d e x . h t m l < b r > / s e s s i o n s / i n d e x . h t m l / s u b m i t / i n d e x . h t m l < b r > / s t y l e s / n o r m a l i z e . c s s / s t y l e s / s t y l e s . c s s < b r > / s c r i p t s / j q u e r y . m i n . j s / s c r i p t s / j q u e r y . s o m e p l u g i n . m i n . j s / s c r i p t s / s c r i p t s . j s < b r >
6. Problems File size Organization Uniqueness Bloat
7. The New Way CSS Preprocessors, JavaScript Module Loaders < b r > / i n d e x . h t m l / s e s s i o n s / i n d e x . h t m l / s u b m i t / i n d e x . h t m l < b r > / _ a s s e t s / l e s s / v a r i a b l e s . l e s s / _ a s s e t s / l e s s / h o m e p a g e . l e s s / _ a s s e t s / l e s s / s e s s i o n s . l e s s / _ a s s e t s / l e s s / s u b m i t . l e s s < b r > / s c r i p t s / r e q u i r e . j s / s c r i p t s / h o m e p a g e . j s / s c r i p t s / s u b m i t . j s < b r >
8. Benefits The biggest benefit is modularity. Smaller files Better organization Uniqueness Bloat
9. Demo https://github.com/awayken/2013sdcodecamp
10. Resources CSS Preprocessors How to Choose the Right CSS Preprocessor LESS CSS: http://lesscss.org/ Sass: http://sass-lang.com/ Stylus: http://learnboost.github.io/stylus/
11. Resources JavaScript Module Loaders Comparing popular script loaders RequireJS: http://requirejs.org/ YepNopeJS: http://yepnopejs.com/ LABjs: http://labjs.com/ Head.JS: http://headjs.com/
12. The End Slides https://slid.es/awayken/2013sdcodecamp Demo https://github.com/awayken/2013sdcodecamp South Dakota Code Camp Feedback http://tinyurl.com/rsdcc13