Front End Workflow
•
2 likes•439 views
Matt Bailey discusses his journey in front end development from analog to digital. He describes the current state of his skills including responsive design, CSS preprocessors, frameworks and build tools. Bailey outlines his approach to project structure, dependency management and build systems using Grunt. He discusses future areas for improvement such as CSS namespacing, living style guides, and visual regression testing.
More Related Content
What's hot
What's hot (20)
Similar to Front End Workflow
Similar to Front End Workflow (20)
Recently uploaded
Recently uploaded (20)
Front End Workflow
- 3. My Journey Where I’ve Come From Where I Am Now What’s Next
- 7. My Journey
- 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
- 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
- 30. Dependency And Package Managers, Preprocessors, Build Tools, And Methodologies
- 32. Coding Languages, Coding Style And Methodologies
- 34. Huge Increase In Efficiency More Like A ‘Proper’ Programming Language Variables Mixins Functions Extends And so on…
- 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)
- 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
- 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
- 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…
- 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
- 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
- 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
- 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
- 87. o- # object c- # Component u- # utility t- # theme s- # Scope is-, has- # State _ # Hack js- # Javascript qa- # QA
- 90. SC5 Styleguide Generator Hologram Pattern Lab Fabricator SourceJS http://www.smashingmagazine.com/2015/04/an-in- depth-overview-of-living-style-guide-tools/
- 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