Front End Workflow

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

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