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