Front End Workflow

F8735b303fe5bb323950c572a1489ec6?s=47 Matt Bailey
October 17, 2015

Front End Workflow

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

F8735b303fe5bb323950c572a1489ec6?s=128

Matt Bailey

October 17, 2015
Tweet

Transcript

  1. 2.
  2. 10.
  3. 11.
  4. 15.
  5. 16.

    Responsive Web Design Has Created Significant Challenges A Need For

    A More ‘Agile’ Approach In Our Design Process
  6. 17.
  7. 18.
  8. 19.
  9. 21.
  10. 22.
  11. 24.
  12. 27.
  13. 29.
  14. 31.
  15. 34.

    Huge Increase In Efficiency
 More Like A ‘Proper’ Programming Language

    Variables
 Mixins
 Functions
 Extends
 And so on…
  16. 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/
  17. 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/
  18. 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
  19. 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
  20. 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…
  21. 49.

    Coding Standards & Conventions Style Guides and Pattern Libraries Dependency

    Management & Package Managers Build Systems Regression Testing Performance Optimisation Continuous Integration Documentation
  22. 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.”
  23. 53.
  24. 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
  25. 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
  26. 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<% } %>' } } }); };
  27. 66.

    my-project/ | |- grunt/ | |- sass.js | |- uglify.js

    | |- watch.js | `- # etc. | `- Gruntfile.js
  28. 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' ] } }; };
  29. 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' ] };
  30. 71.

    Sass Tasks grunt-sass - Uses fast libsass compiler
 grunt-scss-lint -

    Lint your SCSS files
 css-min - Efficient CSS minifier
  31. 75.
  32. 77.

    1. Checks for changed files 2. Runs npm install &&

    npm prune 3. Runs bower install && bower prune 4. Runs grunt
  33. 79.
  34. 80.

    my-project/ | |- .git | `- hooks | |- post-merge

    -> ../../githooks/post-merge | `- pre-commit -> ../../githooks/pre-commit | `- githooks |- post-merge `- pre-commit
  35. 82.

    setup.sh > 1. githooks.sh
 # Creates Git hook symlinks 2.

    build.sh
 # Installs dependencies and runs build
  36. 84.
  37. 87.

    o- # object c- # Component u- # utility t-

    # theme s- # Scope is-, has- # State _ # Hack js- # Javascript qa- # QA
  38. 89.
  39. 92.
  40. 95.

    One server for all builds All the build tools and

    dependencies in one place Push only built code to production server
  41. 97.