Tweet
Tweet

Slide 1

Slide 1 text

Front End Workflow

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

My Journey Where I’ve Come From
 Where I Am Now What’s Next

Slide 4

Slide 4 text

Matt Bailey @_mattbailey mattbailey.io

Slide 5

Slide 5 text

Creative Director gpmd.co.uk

Slide 6

Slide 6 text

Design Front End Development

Slide 7

Slide 7 text

My Journey

Slide 8

Slide 8 text

Where I’ve Come From

Slide 9

Slide 9 text

The Transition From Analogue To Digital

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Where I Am Now

Slide 13

Slide 13 text

It’s still very much a journey Learning new things on a daily basis

Slide 14

Slide 14 text

Responsive Web Design

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Responsive Web Design Has Created Significant Challenges A Need For A More ‘Agile’ Approach In Our Design Process

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Design & Development Tools Have Changed Dramatically

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Source code and version control management

Slide 26

Slide 26 text

Consistent Development Environments

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Multi-device testing

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Coding Languages, Coding Style And Methodologies

Slide 33

Slide 33 text

CSS Preprocessors Less Sass (SCSS) Stylus

Slide 34

Slide 34 text

Huge Increase In Efficiency
 More Like A ‘Proper’ Programming Language Variables
 Mixins
 Functions
 Extends
 And so on…

Slide 35

Slide 35 text

BEM Block Element Modifier

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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/

Slide 38

Slide 38 text

ITCSS Inverted Triangle CSS Harry Roberts (CSS Wizardry)

Slide 39

Slide 39 text

Settings Tools Generic Base Objects Vendor Components Trumps

Slide 40

Slide 40 text

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/

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Performance & Optimisation

Slide 44

Slide 44 text

Image Optimisation & Delivery

Slide 45

Slide 45 text

‘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

Slide 46

Slide 46 text

Critical Rendering Path

Slide 47

Slide 47 text

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…

Slide 48

Slide 48 text

A Hugely Diverse Role

Slide 49

Slide 49 text

Coding Standards & Conventions Style Guides and Pattern Libraries Dependency Management & Package Managers Build Systems Regression Testing Performance Optimisation Continuous Integration Documentation

Slide 50

Slide 50 text

Designer & Front End Architect

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Let’s Do This

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Project Structure

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Dependency Management

Slide 57

Slide 57 text

Build System Dependencies

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Front End Components

Slide 60

Slide 60 text

picturefill modernizr normalize.css normalize-opentype.css jquery respond jquery-hoverIntent smooth-scroll owl-carousel2 background-size-polyfill jquery-replacetext CSS3MultiColumn isotope imagesloaded tablesaw

Slide 61

Slide 61 text

Build System

Slide 62

Slide 62 text

Task Manager

Slide 63

Slide 63 text

Gruntfile.js load-grunt-config - separate out task configs
 build environments - ‘prod’ and ‘dev’

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Grunt Task Configs In Separate Files

Slide 66

Slide 66 text

my-project/ | |- grunt/ | |- sass.js | |- uglify.js | |- watch.js | `- # etc. | `- Gruntfile.js

Slide 67

Slide 67 text

aliases.js

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

concurrent.js

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Sass Tasks grunt-sass - Uses fast libsass compiler
 grunt-scss-lint - Lint your SCSS files
 css-min - Efficient CSS minifier

Slide 72

Slide 72 text

CSS Reporting Tasks grunt-csscss - Find duplicated declarations
 grunt-stylestats - Evaluate & report CSS stats

Slide 73

Slide 73 text

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…

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Git Hooks

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

1. Checks for changed files 2. Runs npm install && npm prune 3. Runs bower install && bower prune 4. Runs grunt

Slide 78

Slide 78 text

pre-commit Runs before a `git commit`

Slide 79

Slide 79 text

1. Runs grunt 2. Won’t commit if build fails git commit -m “My Message” -n

Slide 80

Slide 80 text

my-project/ | |- .git | `- hooks | |- post-merge -> ../../githooks/post-merge | `- pre-commit -> ../../githooks/pre-commit | `- githooks |- post-merge `- pre-commit

Slide 81

Slide 81 text

Initial Setup

Slide 82

Slide 82 text

setup.sh > 1. githooks.sh
 # Creates Git hook symlinks 2. build.sh
 # Installs dependencies and runs build

Slide 83

Slide 83 text

What’s Next?

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

CSS Namespacing

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

o- # object c- # Component u- # utility t- # theme s- # Scope is-, has- # State _ # Hack js- # Javascript qa- # QA

Slide 88

Slide 88 text

‘Living’ Style Guides

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Visual Regression Testing

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

BackstopJS Resemble.js PhantomCSS

Slide 94

Slide 94 text

Deployment Server Continuous Integration (Lite)

Slide 95

Slide 95 text

One server for all builds All the build tools and dependencies in one place Push only built code to production server

Slide 96

Slide 96 text

That’s All Folks

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

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