Front End Workflow

Transcript

1. Front End Workflow

2. None

3. My Journey Where I’ve Come From
 Where I Am Now

   What’s Next

4. Matt Bailey @_mattbailey mattbailey.io

5. Creative Director gpmd.co.uk

6. Design Front End Development

7. My Journey

8. Where I’ve Come From

9. The Transition From Analogue To Digital

10. None
11. None

12. Where I Am Now

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

    a daily basis

14. Responsive Web Design

15. None

16. Responsive Web Design Has Created Significant Challenges A Need For

    A More ‘Agile’ Approach In Our Design Process
17. None
18. None
19. None

20. Design & Development Tools Have Changed Dramatically

21. None
22. None

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

24. None

25. Source code and version control management

26. Consistent Development Environments

27. None

28. Multi-device testing

29. None

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

31. None

32. Coding Languages, Coding Style And Methodologies

33. CSS Preprocessors Less Sass (SCSS) Stylus

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

    Variables
 Mixins
 Functions
 Extends
 And so on…

35. BEM Block Element Modifier

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

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/

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

39. Settings Tools Generic Base Objects Vendor Components Trumps

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/

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

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

43. Performance & Optimisation

44. Image Optimisation & Delivery

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

46. Critical Rendering Path

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…

48. A Hugely Diverse Role

49. Coding Standards & Conventions Style Guides and Pattern Libraries Dependency

    Management & Package Managers Build Systems Regression Testing Performance Optimisation Continuous Integration Documentation

50. Designer & Front End Architect

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.”

52. Let’s Do This

53. None

54. Project Structure

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

56. Dependency Management

57. Build System Dependencies

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

59. Front End Components

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

61. Build System

62. Task Manager

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

    ‘prod’ and ‘dev’

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<% } %>' } } }); };

65. Grunt Task Configs In Separate Files

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

    | |- watch.js | `- # etc. | `- Gruntfile.js

67. aliases.js

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' ] } }; };

69. concurrent.js

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' ] };

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

    Lint your SCSS files
 css-min - Efficient CSS minifier

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

    Evaluate & report CSS stats

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…

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

75. Git Hooks

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

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

    npm prune 3. Runs bower install && bower prune 4. Runs grunt

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

79. 1. Runs grunt 2. Won’t commit if build fails git

    commit -m “My Message” -n

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

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

81. Initial Setup

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

    build.sh
 # Installs dependencies and runs build

83. What’s Next?

84. None

85. CSS Namespacing

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

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

    # theme s- # Scope is-, has- # State _ # Hack js- # Javascript qa- # QA

88. ‘Living’ Style Guides

89. None

90. SC5 Styleguide Generator
 Hologram
 Pattern Lab
 Fabricator
 SourceJS http://www.smashingmagazine.com/2015/04/an-in- depth-overview-of-living-style-guide-tools/

91. Visual Regression Testing

92. None

93. BackstopJS Resemble.js PhantomCSS

94. Deployment Server Continuous Integration (Lite)

95. One server for all builds All the build tools and

    dependencies in one place Push only built code to production server

96. That’s All Folks

97. None

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