Understanding your Component Ecosystem

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

http://chrispearce.co

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