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

Understanding your Component Ecosystem

Understanding your Component Ecosystem

Presented as a lightning talk at React Europe 2016 - https://www.react-europe.org

http://chrispearce.co

Chris Pearce

June 06, 2016
Tweet

More Decks by Chris Pearce

Other Decks in Technology

Transcript

  1. Understanding your
    Component Ecosystem
    @chrisui

    View Slide

  2. The Problem

    View Slide

  3. SEARCH PAGE HEADER
    TEMPLATE FIELD
    BUTTON
    TABS
    TAG
    MODAL
    NAVIGATION
    INVOICE LIST
    PROJECT LIST
    USER SKILL TAG
    TEMPLATE FORM
    USER WELCOME MODAL
    LIST
    INPUT
    SEARCH BAR
    PROFILE PAGE
    CARD
    MENU
    AUTOCOMPLETE
    GRID
    CONTENT
    USER FORM
    NOTIFICATION
    MENU ITEM
    AVATAR
    TAB
    LINK
    SUPPLIER TABS
    RATING CARD TEXT

    View Slide

  4. It’s impossible to fully
    understand your component
    ecosystem with existing tooling.

    View Slide

  5. The solution? Maybe?

    View Slide

  6. Living Styleguide
    ● cosmos
    ● react-styleguidist
    ● atellier
    ● react-storybook

    View Slide

  7. {
    component {
    name
    description
    props {
    name
    type
    Default
    isRequired
    }
    }
    }

    View Slide

  8. So, what else?

    View Slide

  9. {
    component {
    props {
    usages {
    value
    locations {
    component { name }
    }
    }
    }
    dependants {
    name
    }
    usages { }
    }
    }

    View Slide

  10. An Engine

    View Slide

  11. An Engine
    SEARCH PAGE HEADER
    TEMPLATE FIELD
    BUTTON
    TABS
    TAG
    MODAL
    NAVIGATION
    INVOICE LIST
    PROJECT LIST
    USER SKILL TAG
    TEMPLATE FORM
    USER WELCOME MODAL
    LIST
    INPUT
    SEARCH BAR
    PROFILE PAGE
    CARD
    MENU
    AUTOCOMPLETE
    GRID
    CONTENT
    USER FORM
    NOTIFICATION
    MENU ITEM
    AVATAR
    TAB
    LINK
    SUPPLIER TABS
    RATING CARD TEXT

    View Slide

  12. An Engine
    Manifest {
    MENU ITEM {
    Usages []
    Dependencies []
    Props {}
    Fixtures []
    ...
    }
    BUTTON {}
    ...
    }
    SEARCH PAGE HEADER
    TEMPLATE FIELD
    BUTTON
    TABS
    TAG
    MODAL
    NAVIGATION
    INVOICE LIST
    PROJECT LIST
    USER SKILL TAG
    TEMPLATE FORM
    USER WELCOME MODAL
    LIST
    INPUT
    SEARCH BAR
    PROFILE PAGE
    CARD
    MENU
    AUTOCOMPLETE
    GRID
    CONTENT
    USER FORM
    NOTIFICATION
    MENU ITEM
    AVATAR
    TAB
    LINK
    SUPPLIER TABS
    RATING CARD TEXT

    View Slide

  13. An Engine
    Manifest {
    MENU ITEM {
    Usages []
    Dependencies []
    Props {}
    Fixtures []
    ...
    }
    BUTTON {}
    ...
    }
    SEARCH PAGE HEADER
    TEMPLATE FIELD
    BUTTON
    TABS
    TAG
    MODAL
    NAVIGATION
    INVOICE LIST
    PROJECT LIST
    USER SKILL TAG
    TEMPLATE FORM
    USER WELCOME MODAL
    LIST
    INPUT
    SEARCH BAR
    PROFILE PAGE
    CARD
    MENU
    AUTOCOMPLETE
    GRID
    CONTENT
    USER FORM
    NOTIFICATION
    MENU ITEM
    AVATAR
    TAB
    LINK
    SUPPLIER TABS
    RATING CARD TEXT
    Developer
    Tools
    IDE’s/ Living
    Styleguide/ Analytics

    View Slide

  14. An Engine
    Manifest {
    MENU ITEM {
    Usages []
    Dependencies []
    Props {}
    Fixtures []
    ...
    }
    BUTTON {}
    ...
    }
    Plugin
    Pipeline
    SEARCH PAGE HEADER
    TEMPLATE FIELD
    BUTTON
    TABS
    TAG
    MODAL
    NAVIGATION
    INVOICE LIST
    PROJECT LIST
    USER SKILL TAG
    TEMPLATE FORM
    USER WELCOME MODAL
    LIST
    INPUT
    SEARCH BAR
    PROFILE PAGE
    CARD
    MENU
    AUTOCOMPLETE
    GRID
    CONTENT
    USER FORM
    NOTIFICATION
    MENU ITEM
    AVATAR
    TAB
    LINK
    SUPPLIER TABS
    RATING CARD TEXT
    Developer
    Tools
    IDE’s/ Living
    Styleguide/ Analytics

    View Slide

  15. View, Button, Link are your 3 most referenced components. View all here.
    James updated ComponentX which has 5 dependants. View them here.
    ComponentY has prop myPropY which is never used. Is it redundant?

    View Slide

  16. Recon-JS
    Intelligence for React Applications
    github.com/recon-js/recon

    View Slide

  17. Thank you!
    @chrisui

    View Slide