Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Frontend development: tools and good practices to (re)organize the chaos

1,514 views

Published on

After my first attempt to "organize the chaos" (2012) in the structure of a front-end project, Stefano Verna (@steffoz) and I, have tried to bring together a number of tools and conventions to deal with front-end development in a way that could be understandable and maintainable, over the time, by a whole team.
This presentation has been performed, for the first time, during the Ruby-Day-2014 in Venice, Italy.

Here the video of the speech (italian): https://www.youtube.com/watch?v=fUJOJY_yVXg&index=6&list=PL5ImBN21eKvbQ6kH6WCAqj1QqgusGsiO0

Published in: Software
  • Be the first to comment

Web Frontend development: tools and good practices to (re)organize the chaos

  1. 1. FRONTEND (re)organize the chaos
  2. 2. FRONTEND (re)organize the chaos Matteo Papadopoulos @spleenteo Stefano Verna @steffoz www.cantierecreativo.net
  3. 3. Asset Pipeline a.k.a. Sprockets
  4. 4. Asset Pipeline “The new pipeline makes assets a first class citizen in the Rails stack.”
  5. 5. Asset Pipeline gem 'jquery-rails' ! //= require 'jquery'
  6. 6. Asset Pipeline 2011 Rails 3.1
  7. 7. Asset Pipeline 2012
  8. 8. Asset Pipeline Bower Frontend package manager
  9. 9. Asset Pipeline +17.000 packages
  10. 10. Asset Pipeline $ npm install -g bower $ bower init
  11. 11. Asset Pipeline $ cat bower.json { "name": "my-project", "dependencies": { "jquery-ui": "~1.11.1", "jquery": "~2.1.1" } }
  12. 12. Asset Pipeline $ tree bower_components -L 1 ./bower_components "## jquery $## jquery-ui
  13. 13. Asset Pipeline So we need two package managers?
  14. 14. Asset Pipeline Rails Assets Frictionless proxy between Bundler and Bower
  15. 15. Asset Pipeline source 'https://rubygems.org' source 'https://rails-assets.org' ! gem 'rails-assets-jquery-ui'
  16. 16. Asset Pipeline Bundler Rails Assets Bower do you have rails-assets-jquery-ui? do you have jquery-ui? sure thing, take it! here's the gem!
  17. 17. Asset Pipeline win-win that was easy.
  18. 18. Asset Pipeline Compass “A SASS Framework”
  19. 19. Compass Asset Pipeline vendor prefixes typography vertical rhythm grid reset helper functions image-related features
  20. 20. Compass Asset Pipeline monolithic approach
  21. 21. Asset Pipeline Compass soooo slow
  22. 22. Asset Pipeline Compass php syndrome
  23. 23. Compass Asset Pipeline box-shadow: 10px 10px 5px red;
  24. 24. Compass Asset Pipeline box-shadow: 10px 10px 5px red; +box-shadow(red 10px 10px 5px)
  25. 25. Compass Asset Pipeline vendor prefixes typography vertical rhythm grid reset helper functions image-related features
  26. 26. Asset Pipeline Compass vendor prefixes image-related features
  27. 27. Asset Pipeline Compass unix-like approach
  28. 28. Asset Pipeline vendor prefixes
  29. 29. Asset Pipeline 100% Sass mixin library
  30. 30. Asset Pipeline Autoprefixer CSS post-processor gem 'autoprefixer-rails'
  31. 31. Asset Pipeline a { display: flex; } > 1% last 2 versions Firefox ESR Opera 12.1 a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
  32. 32. Asset Pipeline Compass vendor prefixes image-related features
  33. 33. Asset Pipeline image-related features sprites webfont high DPI images support lossless image compression …
  34. 34. Asset Pipeline task management tools
  35. 35. Asset Pipeline GRUNT GULP BROCCOLI
  36. 36. Asset Pipeline +3400 tasks mostly frontend-related
  37. 37. Asset Pipeline $ npm install -g grunt-cli
  38. 38. Asset Pipeline $ cat package.json { "name": "my-project", "dependencies": { "grunt": "~1.11.1", "grunt-bemo": "~2.1.1", ... } } $ npm install
  39. 39. Asset Pipeline # Gruntfile.js ! module.exports = function(grunt) { grunt.loadNpmTasks('grunt-bemo'); ! grunt.initConfig({ bemo: { webfonts: { src: "app/assets/fonts/svg", fontDest: "app/assets/fonts", sassDest: "app/assets/stylesheets/_icon-glyphs.css.scss" }, sprites: { src: "app/assets/images/sprites", imageDest: "app/assets/images/sprites-{{density}}.png", sassDest: "app/assets/stylesheets/_sprites.css.scss" } } }); };
  40. 40. Asset Pipeline $ grunt bemo ! Running "bemo-sprites" task ... ! Running "bemo-webfonts" task ...
  41. 41. Asset Pipeline JS/Coffee code linter JS/Coffee code style checker Live reload SVG/PNG/JPG optimizer Inline assets Unused CSS removal ...
  42. 42. Asset Pipeline Recap Use Bower packages, not gems Rails Assets Replace Compass Bourbon/Autoprefixer Grunt/Gulp/Broccoli
  43. 43. Writing Sass
  44. 44. Writing Sass Rails conventions $ rails generate controller books create app/controllers/books_controller.rb invoke erb create app/views/books invoke helper create app/helpers/books_helper.rb invoke assets invoke coffee create app/assets/javascripts/books.js.coffee invoke scss create app/assets/stylesheets/books.css.scss
  45. 45. Writing Sass OOCSS Object-oriented CSS Organize the chaos v1 2012 - http://goo.gl/6ZRJm4
  46. 46. OOCSS Writing Sass A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.
  47. 47. Writing Sass
  48. 48. Writing Sass media object
  49. 49. Writing Sass .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px <div class="media"> ! <div class="img"> <img src="..." /> </div> ! <div class="body"> ... </div> ! </div>
  50. 50. Writing Sass No margins, no positioning, 100% width .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px
  51. 51. Writing Sass Location indipendence Let the context choose your positioning Be fluid: always expand to take the full width of the container
  52. 52. Writing Sass Just class selectors? .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px
  53. 53. Writing Sass ID selectors Limit reuse within the same page Tag selectors Force a semantic Carpet bombing
  54. 54. Writing Sass .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px Wait, what about descendent selectors?
  55. 55. Writing Sass Descendent selectors Carpet bombing (again) Potential name clashing
  56. 56. Writing Sass Descendent selectors Do not use them.
  57. 57. Writing Sass .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media__img padding-right: 10px
  58. 58. Writing Sass .media display: table width: 100% ! .media__img, .media__body display: table-cell vertical-align: top ! .media__img padding-right: 10px
  59. 59. Writing Sass BEM Block • Element • Modifier
  60. 60. Writing Sass .media display: table width: 100% ! .media__img, .media__body display: table-cell vertical-align: top ! .media__img padding-right: 10px Block (CSS object) Block element
  61. 61. Writing Sass .nav-bar Block (CSS object) .nav-bar__logo Block element
  62. 62. Writing Sass .nav-bar Block (CSS object) .nav-bar__logo Block element .nav-bar--primary Modifier
  63. 63. Writing Sass .media // .... ! .media--rev direction: rtl text-align: left ! .media__img padding-right: 0px padding-left: 10px <div class="media media--rev"> ! <div class="media__img"> <img src="..." /> </div> ! <div class="media__body"> ... </div> ! </div>
  64. 64. Writing Sass .nav-bar--primary__logo--dark
  65. 65. Writing Sass But it's verbose and ugly and...! CSS has limited character set. Deal with it.
  66. 66. Writing Sass Remember the pros! No more name clashing ! No more overrides ! Trivial to understand and maintain your codebase
  67. 67. Writing Sass Structure
  68. 68. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... Root file
  69. 69. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*'
  70. 70. Writing Sass // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*' gem "sass-globbing"
  71. 71. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*'
  72. 72. . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Formats @import 'formats/**/*' ! // Blocks @import 'blocks/**/*' Writing Sass Configuration functions mixins
  73. 73. // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Formats @import 'formats/**/*' ! // Blocks @import 'blocks/**/*' Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... Default styling, Basefile
  74. 74. Writing Sass html, body ! a ! ul, ol, blockquote ! li ! h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dd, p, figure, pre, table, fieldset, hr, form ! input, textarea ! input[type="submit"], button
  75. 75. // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*' Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... 99% of the code is here!
  76. 76. Writing Sass one block per file group blocks into subdirectories
  77. 77. Asset Pipeline Recap Rails per-controller modularity is not scalable OCCSS is a better solution BEM How to structure our Rails stylesheets directory
  78. 78. Writing Sass BEMO
  79. 79. Asset Pipeline Bemo http://github.com/stefanoverna/bemo Project starter/Scaffolder Common BEM blocks library Grunt tasks for retina-ready sprites and web fonts
  80. 80. THANKS! question time Matteo Papadopoulos @spleenteo Stefano Verna @steffoz

×