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
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?
4. WAT. https://boagworld.com/audio/pattern-library/
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
6. Pattern spotting https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
9. Universal naming block__element--modifier http://getbem.com/
11. To-do, doing, done… https://leankit.com/learn/kanban/kanban-board/
12. Anatomy http://atomicdesign.bradfrost.com/
14. Tooling up http://patternlab.io/ http://fractal.build/
15. “Simple rarely breaks - but if it does, simple is easy to fix”
16. Testing, 1-2-3… https://tinnedfruit.com/articles/why-and-how-to-test-your-pattern-library.html
17. Handing over https://www.cxpartners.co.uk/our-thinking/get-docs-row/ https://www.edo.co/our-thinking/content-slices
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
19. “Code obvious, not clever”
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