Front End Workflow
-
Upload
matt-bailey -
Category
Internet
-
view
322 -
download
1
Transcript of Front End Workflow
Front End Workflow
My Journey
Where I’ve Come FromWhere I Am Now
What’s Next
Matt Bailey@_mattbailey mattbailey.io
Creative Director gpmd.co.uk
Design
Front End Development
My Journey
Where I’ve Come From
The Transition From Analogue To Digital
Where I Am Now
It’s still very much a journey
Learning new things on a daily basis
Responsive Web Design
Responsive Web Design Has Created Significant Challenges
A Need For A More ‘Agile’ Approach In Our Design Process
Design & Development Tools Have Changed
Dramatically
Countless Frameworks, Platforms, Content Management Systems, Site Generators etc.
Source code and version control management
Consistent Development Environments
Multi-device testing
Dependency And Package Managers, Preprocessors, Build Tools, And Methodologies
Coding Languages, Coding Style And Methodologies
CSS PreprocessorsLess
Sass (SCSS) Stylus
Huge Increase In EfficiencyMore Like A ‘Proper’ Programming Language
VariablesMixins
Functions Extends
And so on…
BEMBlock Element Modifier
.block {}
.block__element {}
.block__element--modifier {}
BEM helps us write CSS that…
Easy to scaleIs clear and obvious in its purpose
Is self-documenting
http://www.gpmd.co.uk/blog/our-approach-to-bem/
ITCSSInverted Triangle CSS
Harry Roberts (CSS Wizardry)
Settings Tools
Generic Base
Objects Vendor
Components Trumps
A Highly Modular Way Of Structuring CSS
Starts With Low Specificity (HTML tags) RulesEnds With High Specificity/Complexity Rules
http://www.gpmd.co.uk/blog/scalable-css/
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
Sassbase
https://github.com/gpmd/sassbase
Performance & Optimisation
Image Optimisation & Delivery
‘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
Critical Rendering Path
Methods And Best Practices For Improving The Render Time Of Our Pages
Minify/uglifying Remove render blocking CSS/JavaScript
Load JavaScript asynchronouslyInline critical CSS in the head
etc…
A Hugely Diverse Role
Coding Standards & Conventions
Style Guides and Pattern Libraries
Dependency Management & Package Managers
Build Systems
Regression Testing
Performance Optimisation
Continuous Integration
Documentation
Designer & Front End Architect
–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.”
Let’s Do This
Project Structure
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
Dependency Management
Build System Dependencies
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
Front End Components
picturefill modernizr normalize.css normalize-opentype.css jquery respond jquery-hoverIntent smooth-scroll owl-carousel2 background-size-polyfill jquery-replacetext CSS3MultiColumn isotope imagesloaded tablesaw
Build System
Task Manager
Gruntfile.js
load-grunt-config - separate out task configsbuild environments - ‘prod’ and ‘dev’
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<% } %>' } } }); };
Grunt Task Configs In Separate Files
my-project/ | |- grunt/ | |- sass.js | |- uglify.js | |- watch.js | `- # etc. | `- Gruntfile.js
aliases.js
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' ] } }; };
concurrent.js
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' ] };
Sass Tasks
grunt-sass - Uses fast libsass compiler grunt-scss-lint - Lint your SCSS files
css-min - Efficient CSS minifier
CSS Reporting Tasks
grunt-csscss - Find duplicated declarations grunt-stylestats - Evaluate & report CSS stats
And the rest…
grunt-autoprefixergrunt-modernizr
grunt-contrib-concat grunt-contrib-imagemin
grunt-spritesmithgrunt-contrib-jshintgrunt-contrib-uglifygrunt-contrib-watch
etc…
Gruntbase
https://github.com/gpmd/gruntbase
Git Hooks
post-merge
Runs after a `git merge` or `git pull`
1. Checks for changed files 2. Runs npm install && npm prune 3. Runs bower install && bower prune 4. Runs grunt
pre-commit
Runs before a `git commit`
1. Runs grunt 2. Won’t commit if build fails
git commit -m “My Message” -n
my-project/ | |- .git | `- hooks | |- post-merge -> ../../githooks/post-merge | `- pre-commit -> ../../githooks/pre-commit | `- githooks |- post-merge `- pre-commit
Initial Setup
setup.sh >
1. githooks.sh # Creates Git hook symlinks
2. build.sh # Installs dependencies and runs build
What’s Next?
CSS Namespacing
More transparent code
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
o- # object c- # Component u- # utility t- # theme s- # Scope is-, has- # State _ # Hack js- # Javascript qa- # QA
‘Living’ Style Guides
SC5 Styleguide Generator Hologram
Pattern LabFabricatorSourceJS
http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/
Visual Regression Testing
BackstopJS
Resemble.js
PhantomCSS
Deployment ServerContinuous Integration (Lite)
One server for all builds
All the build tools and dependencies in one place
Push only built code to production server
That’s All Folks
Thank Youspeakerdeck.com/mattbailey/front-end-workflow
@_mattbailey mattbailey.io