GPMD - Our Journey

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

Transcript

1. Our Journey
2. Where have we come from?
3. Design • Style tiles • More focus on component based design • Move into browser quicker
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
5. CSS Preprocessors • First Less… • … Then Sass • Huge increase in efficiency • Like working with a proper programming language
6. Frontend Frameworks • HTML5 Boilerplate • Bootstrap • Foundation • Time saving… • … But can lead to ‘bloat’
7. CSS Coding Style • BEM (Block, Element and Modifier) • ITCSS (Inverted Triangle CSS) • Clearer, cleaner code • Much more modular • Easier to reuse
8. New CSS Stuff • The picture element • Flexbox
9. Task Management • Grunt • BIMA tasks: autoprefixer, clean, concat, concurrent, copy, imagemin, jshint, modernizr, sass, scsslint, symlink, uglify and watch.
10. Package Management • Composer • NPM • Bower
11. Documentation • Style guides • Pattern libraries • Component libraries • Hackpad
12. Automation • Set up scripts • environment specific frontend builds • Githooks • Deployment with Fabric
13. Testing • TDD • BDD
14. Virtual Machines • Vagrant • Great idea in principle • Worked well for a time • Mostly borked now • Need to simplify and lock down dependencies
15. Performance • Critical Rendering Path • Code quality • Code efficiency • Code reviews
16. What’s next?
17. More Efficiency
18. More Automation • Magento and SilverStripe ‘products’ • Tools like Yeoman for project scaffolding
19. More Documentation • Automated style guides • Automated component libraries • Git merge requests
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
21. More Performance • The new ‘in’ thing • It’s not going to go away • Tools such as sitespeed.io • StyleStats
22. More Testing • Visual Regression Testing • PhantomCSS • BackstopJS
23. Code Style & Quality • More scss-lint • Merge requests and code reviews
24. More Virtual Machines • Done properly • Vagrant, Docker? • Virtual Box, VMWare? • In the cloud: Koding, Cloud9?
25. Better Deployment • Build server? • CI?
26. We’ve come a long way
27. We’re going even further
28. It requires a team effort
29. Thank you for all your hard word
30. Goodbye