Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Workflow

Matt Bailey
October 17, 2015

Front End Workflow

A look at current front end workflow - tools, techniques, methodologies.

Matt Bailey

October 17, 2015
Tweet

More Decks by Matt Bailey

Other Decks in Technology

Transcript

  1. Front End Workflow

    View Slide

  2. View Slide

  3. My Journey
    Where I’ve Come From

    Where I Am Now
    What’s Next

    View Slide

  4. Matt Bailey
    @_mattbailey
    mattbailey.io

    View Slide

  5. Creative Director
    gpmd.co.uk

    View Slide

  6. Design
    Front End Development

    View Slide

  7. My Journey

    View Slide

  8. Where I’ve Come
    From

    View Slide

  9. The Transition From Analogue To Digital

    View Slide

  10. View Slide

  11. View Slide

  12. Where I Am Now

    View Slide

  13. It’s still very much a journey
    Learning new things on a daily basis

    View Slide

  14. Responsive Web
    Design

    View Slide

  15. View Slide

  16. Responsive Web Design Has Created Significant
    Challenges
    A Need For A More ‘Agile’ Approach In Our
    Design Process

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Design & Development
    Tools Have Changed
    Dramatically

    View Slide

  21. View Slide

  22. View Slide

  23. Countless Frameworks, Platforms, Content
    Management Systems, Site Generators etc.

    View Slide

  24. View Slide

  25. Source code and version control management

    View Slide

  26. Consistent Development Environments

    View Slide

  27. View Slide

  28. Multi-device testing

    View Slide

  29. View Slide

  30. Dependency And Package Managers,
    Preprocessors, Build Tools, And Methodologies

    View Slide

  31. View Slide

  32. Coding Languages, Coding Style And
    Methodologies

    View Slide

  33. CSS Preprocessors
    Less
    Sass (SCSS)
    Stylus

    View Slide

  34. Huge Increase In Efficiency

    More Like A ‘Proper’ Programming Language
    Variables

    Mixins

    Functions

    Extends

    And so on…

    View Slide

  35. BEM
    Block Element Modifier

    View Slide

  36. .block {}
    .block__element {}
    .block__element--modifier {}

    View Slide

  37. BEM helps us write CSS that…
    Easy to scale

    Is clear and obvious in its purpose

    Is self-documenting
    http://www.gpmd.co.uk/blog/our-approach-to-bem/

    View Slide

  38. ITCSS
    Inverted Triangle CSS
    Harry Roberts (CSS Wizardry)

    View Slide

  39. Settings
    Tools
    Generic
    Base
    Objects
    Vendor
    Components
    Trumps

    View Slide

  40. A Highly Modular Way Of Structuring CSS
    Starts With Low Specificity (HTML tags) Rules

    Ends With High Specificity/Complexity Rules
    http://www.gpmd.co.uk/blog/scalable-css/

    View Slide

  41. my-project/
    `- src/
    `- styles/
    |- settings/ # Variables
    |- tools/ # Functions, mixins etc.
    |- generic/ # Low-specificity (normalize)
    |- base/ # Unclassed HTML elements
    |- objects/ # Design-free objects & patterns
    |- vendor/ # Third party components
    |- components/ # Modules, widgets etc. (theme)
    `- trumps/ # Helper classes and overrides

    View Slide

  42. Sassbase
    https://github.com/gpmd/sassbase

    View Slide

  43. Performance & Optimisation

    View Slide

  44. Image Optimisation
    & Delivery

    View Slide

  45. ‘picture’ element, & ’srcset’ and ‘sizes’
    Content Delivery Networks
    Image Management Pipeline - Dynamically
    deliver different image sizes and file formats
    (WebP, JPEGXR etc.) to end users

    View Slide

  46. Critical Rendering
    Path

    View Slide

  47. Methods And Best Practices For Improving The
    Render Time Of Our Pages
    Minify/uglifying

    Remove render blocking CSS/JavaScript

    Load JavaScript asynchronously

    Inline critical CSS in the head

    etc…

    View Slide

  48. A Hugely Diverse
    Role

    View Slide

  49. Coding Standards & Conventions
    Style Guides and Pattern Libraries
    Dependency Management & Package Managers
    Build Systems
    Regression Testing
    Performance Optimisation
    Continuous Integration
    Documentation

    View Slide

  50. Designer & Front End
    Architect

    View Slide

  51. –Elyse Holladay
    “I want to build systems, architectures. I want
    my users to be my fellow developer and
    designers as much as the end user. I want to
    make a site where the code on the inside
    looks as great as the outside, and make it easy
    to do things like theme, A/B test, and build
    new modules.”

    View Slide

  52. Let’s Do This

    View Slide

  53. View Slide

  54. Project Structure

    View Slide

  55. my-project/ # Project (Git) root
    |
    |- public_html/ # Web root
    | `- themes/
    | `- my-theme/ # (dist) Build destination
    |
    |- src/ # Source files
    |
    |- bower_components/ # Front end components
    |- bower.json
    |
    |- node_modules/ # Build dependencies
    |- package.json
    |
    `- Gruntfile.js # Build config

    View Slide

  56. Dependency
    Management

    View Slide

  57. Build System
    Dependencies

    View Slide

  58. grunt
    grunt-autoprefixer
    grunt-concurrent
    grunt-contrib-clean
    grunt-contrib-concat
    grunt-contrib-copy
    grunt-contrib-cssmin
    grunt-contrib-imagemin
    grunt-contrib-jshint
    grunt-contrib-uglify
    grunt-contrib-watch
    grunt-csscss
    grunt-modernizr
    grunt-sass
    grunt-scss-lint
    grunt-spritesmith
    grunt-stylestats
    load-grunt-config
    jshint-stylish
    time-grunt

    View Slide

  59. Front End
    Components

    View Slide

  60. picturefill
    modernizr
    normalize.css
    normalize-opentype.css
    jquery
    respond
    jquery-hoverIntent
    smooth-scroll
    owl-carousel2
    background-size-polyfill
    jquery-replacetext
    CSS3MultiColumn
    isotope
    imagesloaded
    tablesaw

    View Slide

  61. Build System

    View Slide

  62. Task Manager

    View Slide

  63. Gruntfile.js
    load-grunt-config - separate out task configs

    build environments - ‘prod’ and ‘dev’

    View Slide

  64. module.exports = function(grunt) {
    # Use load-grunt-config
    require('load-grunt-config')(grunt, {
    jitGrunt: true, # Use fast plugin loader
    init: true,
    data: {
    # $ grunt --env=prod (or) --env=dev
    env: grunt.option('env') || 'prod',
    # src and dynamic dist locations
    project: {
    src: 'src',
    dist: '<% if (env === "prod") { %>tmp<% } else
    { %>dist<% } %>'
    }
    }
    });
    };

    View Slide

  65. Grunt Task Configs In Separate Files

    View Slide

  66. my-project/
    |
    |- grunt/
    | |- sass.js
    | |- uglify.js
    | |- watch.js
    | `- # etc.
    |
    `- Gruntfile.js

    View Slide

  67. aliases.js

    View Slide

  68. module.exports = function(grunt, data) {
    var env = data.env || 'prod';
    return {
    default: { # Default build
    tasks: [env]
    },
    dev: { # Dev build tasks
    tasks: [
    ‘concurrent:devFirst',
    'concurrent:devSecond'
    ]
    },
    prod: { # Production build tasks
    tasks: [
    'concurrent:prodFirst',
    'concurrent:prodSecond'
    ]
    }
    };
    };

    View Slide

  69. concurrent.js

    View Slide

  70. module.exports = {
    options: {
    limit: 3
    },
    devFirst: [ # 1st dev target
    'clean:dev'
    ],
    devSecond: [ # 2nd dev target
    'sass:dev',
    'uglify:dev'
    ],
    prodFirst: [ # 1st production target
    'clean:prod'
    ],
    prodSecond: [ # 2nd production target
    'sass:prod',
    'uglify:prod'
    ]
    };

    View Slide

  71. Sass Tasks
    grunt-sass - Uses fast libsass compiler

    grunt-scss-lint - Lint your SCSS files

    css-min - Efficient CSS minifier

    View Slide

  72. CSS Reporting Tasks
    grunt-csscss - Find duplicated declarations

    grunt-stylestats - Evaluate & report CSS stats

    View Slide

  73. And the rest…
    grunt-autoprefixer

    grunt-modernizr

    grunt-contrib-concat

    grunt-contrib-imagemin

    grunt-spritesmith

    grunt-contrib-jshint

    grunt-contrib-uglify

    grunt-contrib-watch
    etc…

    View Slide

  74. Gruntbase
    https://github.com/gpmd/gruntbase

    View Slide

  75. Git Hooks

    View Slide

  76. post-merge
    Runs after a `git merge` or `git pull`

    View Slide

  77. 1. Checks for changed files
    2. Runs npm install && npm prune
    3. Runs bower install && bower prune
    4. Runs grunt

    View Slide

  78. pre-commit
    Runs before a `git commit`

    View Slide

  79. 1. Runs grunt
    2. Won’t commit if build fails
    git commit -m “My Message” -n

    View Slide

  80. my-project/
    |
    |- .git
    | `- hooks
    | |- post-merge -> ../../githooks/post-merge
    | `- pre-commit -> ../../githooks/pre-commit
    |
    `- githooks
    |- post-merge
    `- pre-commit

    View Slide

  81. Initial Setup

    View Slide

  82. setup.sh >
    1. githooks.sh

    # Creates Git hook symlinks
    2. build.sh

    # Installs dependencies and runs build

    View Slide

  83. What’s Next?

    View Slide

  84. View Slide

  85. CSS Namespacing

    View Slide

  86. More transparent code
    http://csswizardry.com/2015/03/more-
    transparent-ui-code-with-namespaces/

    View Slide

  87. o- # object
    c- # Component
    u- # utility
    t- # theme
    s- # Scope
    is-, has- # State
    _ # Hack
    js- # Javascript
    qa- # QA

    View Slide

  88. ‘Living’ Style Guides

    View Slide

  89. View Slide

  90. SC5 Styleguide Generator

    Hologram

    Pattern Lab

    Fabricator

    SourceJS
    http://www.smashingmagazine.com/2015/04/an-in-
    depth-overview-of-living-style-guide-tools/

    View Slide

  91. Visual Regression
    Testing

    View Slide

  92. View Slide

  93. BackstopJS
    Resemble.js
    PhantomCSS

    View Slide

  94. Deployment Server
    Continuous Integration (Lite)

    View Slide

  95. One server for all builds
    All the build tools and dependencies in one
    place
    Push only built code to production server

    View Slide

  96. That’s All Folks

    View Slide

  97. View Slide

  98. Thank You
    speakerdeck.com/mattbailey/front-end-workflow
    @_mattbailey
    mattbailey.io

    View Slide