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

2c4d5ca71a92e0860a78e4f9e50e4406?s=128

Chris Pearce

June 06, 2016
Tweet

Transcript

  1. 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
  2. 9.

    { component { props { usages { value locations {

    component { name } } } } dependants { name } usages { } } }
  3. 10.
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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?