Marie-Laure Thuret - React Storybook: Design, Dev, Doc, Debug Components - React Conf 2017

hi everyone I'm super excited to share with you my day-to-day workflow with react storybook but first I would like to introduce myself so I'm Mary and I'm French developer working at Algeria Siberia is a social service provider and basically if you ever sell from a back edge and via our website it's earth and our field while I do there is an opening breathing or open source from 10 libraries that else developers building such a search interface but if I'm here today is because I'm using react storybooks Bailey and I want to show you how you can use it to design develop documents and debug your UI component as you made aware of UI components of annualised on several space whether it come from the tracks or from the internal state site of these components it looks pretty simple right pagination components but this component it has a lot of price there is a product that would indicate if you want some button like the shoe first of the shoeless button and then all of the props that indicates the current selected page the total number of pages and also the number of pages you want to display under components so based on the combination of those products you will expect a different design right for example if you have the first page you will probably want to disable the first button on the left leg something if you add the last page you will probably want to disable the showlist and show next button so what it means is that you have all those subsets and if you design your components in the middle of your complex application it can become tricky so that was the first issue but the second one is ok we are done reading your components so now what if in six months I forgot about what this process was supposed to do or even works your future co-workers or your current workers there in the way to discover you want them I mean you don't want them to dig into your complex application and discover by themselves or your UI components so I would we make sure that our UI components are well documented so here comes react storybook basically what reactor it gives you it's an isolated environment where you will be able to develop and design your components you will not lose any efficiency because you still have ultra learning this tool was released earlier last year by the Cadi regime and by the way I thank those guys very much because they did a good job with the store another project as more than a thousand thousand zero one thing I love about the reactor system is all the tools that provide to deliver such a great experience and to me react storybooks is one of those tools so what I want to talk about today is showing you how reactive a book will help you with all the stage of your developer zone it's not only the develop and designing part of your walk but also the documenting path the diverging path and the discussion you will probably need to make about components so to get started with react story book it's very easy you just need to download so if you have already react application you just need to run a single command line get storybook and then you're ready to stop developing what you will get is this interface it's basically divided into three parts and the first side such soft part is the mini on the left which as the story scan which is more or less your component and then a list of stories which are all the sub stage you can have of your components you also got this space at the bottom where you can find the actions logger panel but also every add-ons you will want to use and lastly but the most important part the you're at the center ok enough talking let's make some code here so it is our pagination component again so basically if you want to add the storage simple you just need to create a new file like I did here and you add a new kind of story near its base nation I started by adding one story which is the first page selected that shows our patient education component with the source page selected and now if I am modifying some coal latch for example I don't like the blue color anymore and I want some red color inside inside that you can see the modification quickly absolutely of course it's also worked with some Jeffcott so if I remove some button for example this one the shop press one you will see that the bottom is a player so this gives you an idea of what it means to develop with reactor a box that's already great but you can do better actually what we can do is express explicitly or actions so if I'm looking back to my component declaration you can see that there is this action which is called unclick here is some design right now this function but I can use the action function some storybook like okay this is a new action I recall it's unclick and so now if I'm clicking on my patient component unable to see it logged on the action logger panel its slug but you can also add parameters that are passed to the function sort of the fish here I'm clicking on the page two so I have the parameter two so that's one way to express your action but we can do better again what we can do is actually exposing our props in a way that every people every user every developer that will go to a storybook will be able to play with the props in order to discover the behavior of the component so to do that you can use the knobs atom plugin adult and let's say I want to expose the current page props so research this prop is a number right which is the current page and the default value will be 1 so now if I'm looking at the nose panels you can see that the prop up here with a different value of 1 so now if I'm registering this part and says I want the current page to be a subpage you can see that the component change and it expresses on your subset so once again it's a great way to you know expose the behavior of your components and to allow their discoveries one thing you can also do is adding some automated documentation to your storybook so to do that you can use another adder which is a react alpha Adam and to illustrate this I created a new story as you can see instead of using the add function and stories I use the add visual for function and what this function allows me to do is to add some description so here its description but what you get also is this little question mark at the top and if you click on it you will see that we get our description right but we also get the source of the story so basically the Declaration of the component and all the prototypes yes that you have on your component so it's a great way to easily add automatic documentation one last thing I want to show you right now is the fact that you can also link stories together in a way that you can show interaction between them to do that instead of saying ok my unclick is an action I will use this function to say I will link the click to another story so we'll use a link to function so here I say I want to link the factory to them second one which is the pagination last page selected and now if I am clicking somewhere on this component I will be redirected to the second story so basically it's a way to shrink direction so you can easily see that this react story book you can quickly develop but one thing that is really great with rag story books is that you are developing in isolation what it means is that you need to think API self because you are not developing in the context of your application you are fast to make sure that you are forced to make your components reusable and generics so that's a great thing so now we build a lot of stories and basically what we did is that we build documentation and we call it a live documentation because it's based on code usually when you have a documentation you can find some code examples that are static as an candy outdated very quickly here your blood car so it will follow your library and we believe rectory book is actually a great documentation from the outside because if you are browsing the storybook you are able to discover all the styles and all the behavior of the components but it's also great documentation from the inside because when you find the components that they're asking for you if you know if you want to know how you can use it you just need to go to the source code of the stories and read how it is declare one thing that story book gives you is the ability to really statically and before it everywhere you want so externally or internally but you can publish your story book on ice and I want to show you some real-life example about that so the first one is the react that's library from ambient if you go to the archetype repository you can see that here's a link and if you click on it you've got the story book so without even reading the documentation of this basically you are able to see I would looks like and what it does you can also see that Val using the Alfred ins for them and then we've got some extra information so that's a great way to discover quickly a library second example I want to show you is a story book at our Dorian it's basically now a bottle for documentation so here is a fascination component again and as you can see this is the page of the documentation and you get this link which basically redirect you to the story books so what I want to show you here is the flexibility of the reboot because our widgets are meaningful in a context of a search what I wanted for user is a way for them to play with the self to see the effects on the components and also to play with the components to see the effects on the search so that's why you can see that around the components you get this little frame with extra information so here if I'm playing with the search you can see that the pagination component evolved and something enzyme playing here with the patient components you will see with a little bit delayed because of the network these subjects I wanted also to expose the props of our sample and to let all developers play with them so that's why I created a story which is third playground which is kind of special and you can see here that you can play with the props so you can remove some button for example to see what it means but I will give you a meaningful example edge bearing for example maybe a project is not that easy to get so here what you can do is just play with those so let's say I want a maximum of pages of them and I will say with the best reading and you will see what the effect it has on the component so Bryce where again to discover the behavior I said that our documentation is large and is based on card and as you know threads and breakfast so how do we make sure that our documentation will never break right to do that we need to add this right so I think everybody knows that we should test our components right and for those that actually does some test what you end up is some test side with some Declaration of components and then some exception but now you also are the stories that are also declaration of component so in a way you've got the duplication between the two and then don't know are you but me for example I don't like that much duplication so what if we could directly test of courage so which story books you've got two options the software is story shot which is basically based on Jeff's met rating and what it does is that once you download the library it will snapshot automatically all of your stories so this is great because actually it comes for free you watch off three before and now you've got the snapshot and you just regret because snapshotting means that you get an image of the HTML rendering of your components so it's a great layer to ensure that you do not make any regression and unwanted regression but to me it was not enough because when a developer actually wrote a test what's worrying what is worrying is that it puts some intent which when you want to sell you expect to have some behavior happenings or you expect to have some business rule clearly expressed and if you put enough effort doing those you will end up having the specification of your application it means that for a new developer community your fan base if you just read actual test you need to be able to understand all the business rules as well and last year when I was working on a presentation about how to test to react and rejects application I basically discovered relaxed or ebooks and almost immediately I got cheese I decided to test my components so my soft idea was very simple it was okay that just import my stories inside my face file and I will test the stories it works but then people were asking me yes at school but it would be better if we could have those test results directly inside the story book because in the end they are specification so I decided to create a little add-on of Storybrooke which is which is called specs alone of specifications add-on and basically what it does is just that it lets you add some tests for your stories in order for explicit the behavior that you want so demo time again so to add story shot to your storybook it's super easy you just need one set file and you need to link two line of code sorry once you've done that just run your regular test come online and you will see that it created for you the snapshot so here I have two stories and now I have two snapshots so if I'm doing again some modification for my component by removing this path you will see that the snapshot is fading so such a test is failing anyway that it's kind of funny because now with storybook I am doing some kind of storybook driving the red man along which tells driving the river because I want to show you the specs are done also so to do that we need to go back to our service so here we will watch a regular search so don't need to read all the tests but basically what it does is that it looks like for the sell button and it expects to have the reaction unclick code with the parameter one what I used here is enzyme class expect but basically you can use anything that runs into a browser and here we will see the the function mud with inside the storybook where basically it was made to run also with a regular test runner like just our mocha so if we go back to after reboot now that we have a door test you will be able to see them on this panel which is called a specification banner and if I modify the test let's say I'm expecting to have the page stained it will fail so this way you were able to 1/2 cm what room when you are the wrapping she won't meet only works with libraries that runs inside a browser but thanks to this amazing community we are currently working on a v2 that will hopefully let you work normal justice and of all those wizards coming back into the storybook so we have some fan we have developed new components we have documented them but at some point we need to maintain them right that's okay because you wrote all your stories and so basically what you just created is a lot of small and free bonds while you will be able to go and to start diverging because we know that to be efficient when the rigging we need to isolated the wrong behavior and even if the stories that you currently are is not enough to illustrate the behavior that is not good you can still enjoy the puzzle isolating environment the storybook provides to create and to recreate the bugs and to add new feature it's also perfect because you can start by writing the new API within the story and then you can start developing but the part where or actually books read shines is when it's about communication because we know that card is often not the real issue with a walk a lot of issues come from one communication between developer between teams or even between developers and businesses or whatever it's always a matter of communications and actually we actually book can L can help a lot with that for example here it's me that as proposed a new put request for our library and because we have this amazing footing that allows us to deploy automatically our documentation websites and of storybooks basically what I'm able to do is to link the right story into a story book to my teammates and then they can just click on the link and see what I just developed so no more check out in a branch no more running local in your project you can just send a link so this is a huge gain of time but it's also helpful with external users so here's an example of one of our user that were that proposed of new feature but what it did is just bay the feature and then a link to us the story that was confirmed by the feature so for us it was just a matter of clicking on the link see that the the future that you wanted because it guides us through it and we are done with it it was so cool to communicate with our external contributors there is a guy that actually wanted to fix a bug so he proposed this pull request and this project that the story was missing so we just added it and again because we can deploy the story automatically at each per request we were able to see it live direct so those are example from our experiences but you can imagine any workflow that you want for example if you have some designer you might want to share the story book with them to let them review what you've dreamed with the components or create any walkthrough that suits on it here is a little summary of everything that I just said basically like chickens as you can see you can do a lot with the reboot you will be able to iterate quickly because you have this isolation environments when developing you will create a world style guide of such components it would be a live documentation because it's code that is executed you will also be able to expose all the edges of your components by letting the users play with your props and it will be also a great way to start discussing about your components but I'm pretty sure some of you already build some manual kitchen things on your projects or you may use all those libraries that do pretty much the same thing what I want to do i what I want you to remember here is that watching patterns is so that you can get from using a tool like this one but one thing that I really like about storybook is this I mean yeah what are the kingdom react Storybrooke but yeah this is Edwin Epps I basically is what I use for creating the specifications add-on and this was really release couple months after releasing with storybook bicycle racing what it allows you to do is to add a new panel so basically if you think something is missing you just have this API that will allow you to create what you need and more importantly to share this with the community because if you have a special need there is a huge chance that other people can have the same needs a new app so here is a small list of atoms that already exist there's a lot of others but those as almost most popular ones as you can see it's pretty diverse you've got some atoms that we produce more on design some others that we must refused on documentation but again what I want you to remember is that if something is missing you can create it so thank you and I hope you enjoy the start and if you have any question you can reach me after well thanks [Applause]

Channel: Facebook Developers

Views: 23,596

Rating: 4.826087 out of 5

Keywords: react conf 2017, react, react storybook, components

Id: PF0Vi-iIyoo

Length: 24min 17sec (1457 seconds)

Published: Thu Mar 16 2017