Front End Workflow

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

Transcript

1. Front End Workflow
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
12. Where I Am Now
13. It’s still very much a journey Learning new things on a daily basis
14. Responsive Web Design
16. Responsive Web Design Has Created Significant Challenges A Need For A More ‘Agile’ Approach In Our Design Process
20. Design & Development Tools Have Changed Dramatically
23. Countless Frameworks, Platforms, Content Management Systems, Site Generators etc.
25. Source code and version control management
26. Consistent Development Environments
28. Multi-device testing
30. Dependency And Package Managers, Preprocessors, Build Tools, And Methodologies
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
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?
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
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
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
98. Thank You speakerdeck.com/mattbailey/front-end-workflow @_mattbailey mattbailey.io