Development-Driven Design Systems

Intro

• Basscss, CSS Stats, Rebass, styled system

• Design system site screenshot

• Background

• Tools we use

• What's next

• Future

Images

• tool correction

• Collaborators list

• Rebass HN quote

• intro

• I like tools

• Background

  • Hackathon
  • Siloed teams & separate apps
  • "Common Components"
  • No open source
  • React, styled components, npm
  • Catering to Developer problems
  • GitHub: Open Source from the start
  • Shared ownership
    • Contributors list
  • Make it so good people want to use it
  • "Make it go viral"

• Tools we use

  • React
  • SC
  • Jest
  • styled-system
  • PRs & Issues
  • Travis CI
  • Slack
  • Meetings & zoom
  • Redline specs & QA
  • Storybook

• Cheap UI

  • Iron triangle
  • Lean UI

• What's next

  • Documentation site
    • Markdown
    • React Live
    • Travis CI
  • html sketchapp
  • Prototyping tools

• Future tooling

  • Written language and math are incredible tools
  • We teach children fractions
  • But don't expect them to become PHDs
  • Bicycle of the mind
  • Code is how you ride the bike
  • Code is about layers of abstraction
  • Abstractions on top of HTML, CSS, & JavaScript
  • Current tooling has not kept up with front end development
  • Browser inspector is too low level
  • React, ES6, Graphql

• Shoutouts

  • Nicole Sullivan
  • Jessica Harlee
  • Lara Hogan
  • Jina Anne
  • Diana

• Thanks

• References

Styled System

• SC and other CSS-in-JS
• Components as an abstraction on top of CSS
• Can still drop back into low-level CSS when needed
• Consumers of the components don't need to think about CSS implementation
• Dynamic/functional styles
• Authoring with s2
• Consuming s2 components

Cheap UI

• iron triangle
• Good cheap fast
• Mythical man-month brooks law

Pretty sure that LinkNYC is some sort of self-replicating, ancient alien artificial intelligence

Developer tooling for design systems

• Developer first

• DRY

• React + styled components

  • Isolated styles
  • no clashing
  • Overrides happen in separate apps

• Storybook

• npm

• Siloed teams

• Shared components

• Separate UI

• Dev velocity

• Cheap UI

  • Expensive UI
  • ROI

• Redline specs

• QA cycles

• Feel the pain before you want the bandaid

• Open Source

• Consumed but didn't contribute

• Open source from the start

• GitHub

• PRs and issues

• Great professional experience for developers

• don't enforce it

• Make it so good people want to use it

• Make it so that teams can make it work for them

• "Make it go viral"

• Styled system

• By the time the designers asked for it, we already had it in place

What makes React hard?

• today's web is built on a layer of abstraction where design tools have not kept up

• Browser inspectors and debuggers are too low level

• typical approach: design driven

• Dev was mentally ready before design team

• Catering to Developer needs

• I’ve seen DS efforts struggle because a lack of understanding on the dev side

• DRY principle

• No one wants to write CSS

• Faster dev velocity

• "Cheap UI"

• Devs hate redline specs and extra QA cycles

• Right mix of tools

  • react, sc, npm, storybook, graphql

• shared components

• Refinement of an idea

• Bootstrap, Base css, Rebass, css in js, styled components, styled system

• Siloed teams

• Encourage everyone to contribute

Collaboration tools

• github (issues, PRs, pages)

• storybook

• No one wants redline specs

  • feel the pain before wanting a solution

• Slack

• components

• React components

• Composition

• Functional composition

• HN quotes

• Atomic design slide

• theming

• Interchangeable

• Components

• Interchangeable Components

• Components as configuration

• Standard Components