GPMD - Our Journey - Speaker Deck

Slide 1

Slide 1 text

Our Journey

Slide 2

Slide 2 text

Where have we come from?

Slide 3

Slide 3 text

Design • Style tiles • More focus on component based design • Move into browser quicker

Slide 4

Slide 4 text

Responsive Web Design • First RWD site: The Watch Gallery • One site for every screen • Mobile first and content first • Media queries • Adaptive and fluid layouts

Slide 5

Slide 5 text

CSS Preprocessors • First Less… • … Then Sass • Huge increase in efﬁciency • Like working with a proper programming language

Slide 6

Slide 6 text

Frontend Frameworks • HTML5 Boilerplate • Bootstrap • Foundation • Time saving… • … But can lead to ‘bloat’

Slide 7

Slide 7 text

CSS Coding Style • BEM (Block, Element and Modiﬁer) • ITCSS (Inverted Triangle CSS) • Clearer, cleaner code • Much more modular • Easier to reuse

Slide 8

Slide 8 text

New CSS Stuff • The picture element • Flexbox

Slide 9

Slide 9 text

Task Management • Grunt • BIMA tasks: autopreﬁxer, clean, concat, concurrent, copy, imagemin, jshint, modernizr, sass, scsslint, symlink, uglify and watch.

Slide 10

Slide 10 text

Package Management • Composer • NPM • Bower

Slide 11

Slide 11 text

Documentation • Style guides • Pattern libraries • Component libraries • Hackpad

Slide 12

Slide 12 text

Automation • Set up scripts • environment speciﬁc frontend builds • Githooks • Deployment with Fabric

Slide 13

Slide 13 text

Testing • TDD • BDD

Slide 14

Slide 14 text

Virtual Machines • Vagrant • Great idea in principle • Worked well for a time • Mostly borked now • Need to simplify and lock down dependencies

Slide 15

Slide 15 text

Performance • Critical Rendering Path • Code quality • Code efﬁciency • Code reviews

Slide 16

Slide 16 text

What’s next?

Slide 17

Slide 17 text

More Efﬁciency

Slide 18

Slide 18 text

More Automation • Magento and SilverStripe ‘products’ • Tools like Yeoman for project scaffolding

Slide 19

Slide 19 text

More Documentation • Automated style guides • Automated component libraries • Git merge requests

Slide 20

Slide 20 text

Modular, Reusable Code • Our own Github projects, Bower components, Composer modules • Less time spent on repetitive tasks • Less reliance on frameworks • Leaner, better code

Slide 21

Slide 21 text

More Performance • The new ‘in’ thing • It’s not going to go away • Tools such as sitespeed.io • StyleStats

Slide 22

Slide 22 text

More Testing • Visual Regression Testing • PhantomCSS • BackstopJS

Slide 23

Slide 23 text

Code Style & Quality • More scss-lint • Merge requests and code reviews

Slide 24

Slide 24 text

More Virtual Machines • Done properly • Vagrant, Docker? • Virtual Box, VMWare? • In the cloud: Koding, Cloud9?