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

Pattern Libraries: How to make your backend love your frontend

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/

Keir Moffatt

July 01, 2017
Tweet

More Decks by Keir Moffatt

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

  4. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. “Code obvious,
    not clever”

    View full-size slide

  15. 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 full-size slide