Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GPMD - Our Journey

GPMD - Our Journey

Our technical journey over the past three years - where we've come from and what's next.

Matt Bailey

April 22, 2015
Tweet

More Decks by Matt Bailey

Other Decks in Technology

Transcript

  1. Our Journey

    View Slide

  2. Where have we come
    from?

    View Slide

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

    View Slide

  4. 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

    View Slide

  5. CSS Preprocessors
    • First Less…
    • … Then Sass
    • Huge increase in efficiency
    • Like working with a proper programming
    language

    View Slide

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

    View Slide

  7. CSS Coding Style
    • BEM (Block, Element and Modifier)
    • ITCSS (Inverted Triangle CSS)
    • Clearer, cleaner code
    • Much more modular
    • Easier to reuse

    View Slide

  8. New CSS Stuff
    • The picture element
    • Flexbox

    View Slide

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

    View Slide

  10. Package Management
    • Composer
    • NPM
    • Bower

    View Slide

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

    View Slide

  12. Automation
    • Set up scripts
    • environment specific frontend builds
    • Githooks
    • Deployment with Fabric

    View Slide

  13. Testing
    • TDD
    • BDD

    View Slide

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

    View Slide

  15. Performance
    • Critical Rendering Path
    • Code quality
    • Code efficiency
    • Code reviews

    View Slide

  16. What’s next?

    View Slide

  17. More Efficiency

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. More Testing
    • Visual Regression Testing
    • PhantomCSS
    • BackstopJS

    View Slide

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

    View Slide

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

    View Slide

  25. Better Deployment
    • Build server?
    • CI?

    View Slide

  26. We’ve come a long
    way

    View Slide

  27. We’re going even
    further

    View Slide

  28. It requires a team
    effort

    View Slide

  29. Thank you for all your
    hard word

    View Slide

  30. Goodbye

    View Slide