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. Understanding your Component Ecosystem @chrisui

  2. The Problem

  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
  4. It’s impossible to fully understand your component ecosystem with existing

    tooling.
  5. The solution? Maybe?

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

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

    isRequired } } }
  8. So, what else?

  9. { component { props { usages { value locations {

    component { name } } } } dependants { name } usages { } } }
  10. An Engine

  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
  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
  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
  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
  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?
  16. Recon-JS Intelligence for React Applications github.com/recon-js/recon

  17. Thank you! @chrisui