Pattern Libraries: How to make your backend love your frontend

I was once taught to 'code obvious, not clever’ - as a freelancer, it is critical that the code I handover is easy to understand, extend and integrate.

Let me take you through my process of developing pattern libraries and show the myriad of benefits this approach offers all aspects of the development cycle.

Please leave me some feedback! :)
https://joind.in/event/drupalcamp-bristol-2017/pattern-libraries-how-to-make-your-backend-love-your-frontend

https://2017.drupalcampbristol.co.uk/

Transcript

1. Pattern libraries
   How to make your back-end love your front-end
   

   View Slide

2. @iamkeir
   • 15+ years freelance web developer in Bristol
   • Wonderful people, agencies & brands
   • Front-end, specialising in pattern libraries for scale
   • Shopify, Perch, APIs…
   • Snowboard instructor, breakdancer… lemur ranger?
   

   View Slide

3. View Slide

4. WAT.
   https://boagworld.com/audio/pattern-library/
   

   View Slide

5. In the wild…
   ux.mailchimp.com
   rizzo.lonelyplanet.com
   codepen.io/guide
   bbc.co.uk/gel
   style.bristol.gov.uk
   gov.uk/service-manual
   lightningdesignsystem.com
   styleguides.io
   

   View Slide

6. Pattern spotting
   https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
   

   View Slide

7. View Slide

8. View Slide

9. Universal naming
   block__element--modifier
   http://getbem.com/
   

   View Slide

10. View Slide

11. To-do, doing, done…
    https://leankit.com/learn/kanban/kanban-board/
    

    View Slide

12. Anatomy
    http://atomicdesign.bradfrost.com/
    

    View Slide

13. View Slide

14. Tooling up
    http://patternlab.io/
    http://fractal.build/
    

    View Slide

15. “Simple rarely breaks -
    but if it does,
    simple is easy to fix”
    

    View Slide

16. Testing, 1-2-3…
    https://tinnedfruit.com/articles/why-and-how-to-test-your-pattern-library.html
    

    View Slide

17. Handing over
    https://www.cxpartners.co.uk/our-thinking/get-docs-row/
    https://www.edo.co/our-thinking/content-slices
    

    View Slide

18. Danger!
    • Not always appropriate
    • Slow to start, then ramps up
    • Not the norm, get ‘buy in’
    • ‘Style collide’
    • Part of workflow, not a graveyard (APIs)
    • Pattern library vs design system vs style guide
    

    View Slide

19. “Code obvious,
    not clever”
    

    View Slide

20. Hat-tips & thanks
    • Brad Frost, Anna Debenham & Harry Roberts
    • Stu Charlton & cxpartners
    • Frank West & The Real Adventure
    • Gary Lake & Shift Active Media
    • Luke Whitmore & Sift/Edo
    • South West Front-end Slack team
    

    View Slide