Slide 1

Slide 1 text

Understanding your Component Ecosystem @chrisui

Slide 2

Slide 2 text

The Problem

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

The solution? Maybe?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

So, what else?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

An Engine

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Thank you! @chrisui