GPMD - Our Journey

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

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