React-Storybook: Design, Develop, Document and Debug your React UI components - MARIE LAURE THURET

hi I'm very happy to be here a track that you can there to talk about story book and our basically I'm using it to design develop documents and debug or my react components but first I want to introduce myself a bit I'm Mary I'm French I come from Paris and I'm currently a developer at our gorya for those who don't know I Gloria we are a search as a service provider basically if you ever use react documentation as a sort of the react documentation react native also a young such packages it's us behind the hood and basically I'm leading a project which is called reacting stone search and help developers read such search interface and I'm using a story book all day long and I want to show my Walker with it as you may know UI components often relies on several states those states can like from the internal state or also from their props and basically if you take like this simple component which is a pagination one it's basically something I will deal with every day it's simple right but if you pay close attention to it it has a lot of props you have the props that concern pages so the number of pages the current page is selected the page heading and then you also have like props that will deal with you I expressly like button if you wanted to trace on button like the chauffeur's Brown Auto Show last button stuff like that and basically depending of the combination of those props you will expect a different behavior so if you are at the first page you will probably want to disable the first social first button and the show previous button and something if you are at the last bell you would probably want to disable the show last and the Schleck's better what does mean is depending on this combination you will have a different design and if you are inside the middle of your complex application sometimes it can be hard to get to such right state so this was the first issue but then we I mean you developed a company or IP with them and then six months later do you remember the process what you were supposed to do and was like new developers coming into your project is they need a way to understand I was the component is you put to work what the protest posed to do without digging like super hard into action co and a stuff like that basically they want to have access had some add something that of them ramp up quickly on your project so here's a story book so I will say probably react story book so enough time rebranded through story book now basically what it is it's a tool that provides you an isolated environment and the goal is for you to quickly developed and design your components because you still enjoy your learning the project was launched like beginning of 2016 by people of the Cadi right team so here you have the main contributor at the time it's funny because I redid this slider a lot of time and the first time I did it it was like a chaos and and now it's 14 K so it was like a lot of massive adoption which is fine and let me tell you a bit of story about story book because beginning of this year at some point the katahajime shut down and basically Aruna de which was the main contributor of the project switch to another one which is next that yes so it did not that time to endure the madness of story book and a lot of people were asking ok in the project dead and it was kinda dead at the time in March and so Irina died say ok I will open it to the community let's find some contributors and maintenance that wants to take the project over and like a lot of people get into and it's crazy and now it's not just about maintaining storybook it's about like getting a storybook like in other field and do other stuff this is a screenshot of the pier that were made like during August and September during one month you can see there's a lot of hotels that contributes to the projects and I want to take the opportunity of this talk to thank snow belt which is basically the coordinator of everyone it's like it is doing like an amazing job coordinating everyone it's super difficult to do and so so that's great here is a typical development lifecycle probably you'll develop our journey it's and what I want to show you in this talk is that storybook win impacts not only is the development and the design of your components but it will able to document them and debug them and most importantly discuss about them with other people so get started with storybook it's super easy you just have to install this command line tool get storybook and run it if you want to migrate from storybook v2 to v3 it's incorporated some code modes to episome aggression to be a bit smoother and basically what you get is this interface so it's divided into three parts on the left you have this menu with the list of your stories you have something that is called story scan which is basically more or less your components and then the list of the story which are which are like sub states of your component at the bottom you are at this little space with all the add-ons because what's one thing that is great with storybook is that you have a lot of add-ons - you can use depending of your needs and then the most like important part was the components around out so I took too much so let's show you a small demo so when you want to add a story to storybook the first thing you need to do is to create a story screen so here hits pagination and then you can start adding your stories so here I added my pagination with a state of the first page selected so now if I want to modify let's say some color because I'm not fan of the blue anymore and I want some rays I can do that and okay I need to restart good so let's do it again just to show you that I'm not kidding with this so some right so you have the CL shredding you get the concept it's pretty easy it works the same way with GS code if you want to remove something like let's say a button button I remove it you see disappears right you get it are you can quickly developed with a lot of iteration your UI components so that's one thing but obviously it's not the right it's not the more important thing you can go better and and do some other good stuff history book the first thing actually you can do is explicit the behavior of your components so if you look at this pagination what you see that it takes a probe which is called unclick and y know the function is undefined what I can do here is using the add-on actions and say ok this is an action and selection on click and now if I'm using I mean if you user yourself you are clicking on the components you can see that the action will be loved so here I'm clicking on the page - I can see action has been cold and you can see the payload of of the function so here it's an edge number that's first things that is nice behaviors but once again we can like go further than this the other things we can do is explicit in props the goal is for your user co-workers whatever to have like an interface where they can play with the props and see the effects on the components so to do that I'm using the nodes add-on and I will take the current page as an example so this is basically a number which is the current page and I will say is like I want the default value to be one and now if I'm going to knock spanner I can see the props here and I can just change it and certain it's not in the bounce or in the boundary so three you can see it's it's rerun during the components as you go so actually that's that's super interesting especially with props that can be hard to get just with the documentation here you have just the example it's so powerful another things that story book can help you with is some like generated documentation so for that I will use a real hard sorry and you sorry yeah so you can see that's it will I be on the on the left and this one is using like a new function that comes from the Adhan alpha and what you can do is pass a description to that function and then it will run down some stuff automatically for you so as you can see here you get the description I'm just fruits you have also usage of your components and and the props and the props that are combined you can inline the documentation you can use it as a small like with a button or whatever comes with a lot of options so now we have two story and maybe the story are related to each other and maybe you want to like explicit the connection between them so actually you can link your stories with another add-on which and here for instance on my first story instead of sayings like it is an action I will say when I click on my pagination I want to be redirected to the other story so to do that you just have to use a link to function you say I want to go to the patient nation last page selected story and now if I'm clicking somewhere I'm redirected so this is a pretty naive way to do it because obviously I'm clicking on the page five I don't want to arrive on the lifespan selected so the second parameter can actually take a function and you can redirect things a bit more like interest in an interesting way finally if you are a big user of react after reboot at someone should we love a lot of components probably so they introduced something about a plating Avenue like EFT so here for instance what I can do is instead of having the stories kind patient I can say ok it's not just pagination it's widget Spanish nation and so if I'm writing this like that it will create a year he and you can have like a deeper year key if you want which can also if you want to organize your stories so if we take a step back and look at what we are doing when we wrote our stories when we are like working as a declaration of your UI components what we are doing is that we are thinking a play first and that's actually a great thing because oftentimes we want to provide generics and reusable components and once again if we do that if you try to do that and emitter of an application that is complex sometimes it's not easy to do here with storybook you are in an isolation environments so basically you are forced to think in a way that will help you achieve this generosity and reusability with your components and this if we take a step back more what we just created here it's a live documentation so why alive documentation because basically it's good that since executed so in comparison of documentation that is static and that contains like code samples that are like static and that will break eventually probably faster than sooner than like story book is a great documentation from the outside because anyone that goes into that websites they can discover the style and the behavior of your UI components but it's also a great documentation from the inside because once you spotted a component that you would like to use you just have to read the stories declaration and you can see how you can use it you will see the process that you need to pass it's wrapped super Epiphone and basically what is great is that story books out at LSU but allows you to build a static version of it so you can publish it somewhere on the Internet internally whatever but you will evaluate how you can share with your co-workers or the world or depending of your use case so here I want to show you some example of that the first one is from Airbnb so basically if you are interesting of choosing a date picker you can end up on this website which is that they pick up a blondie and as you can see here the of a section called left playground which redirects to the story book so you arrive on this and here it's a calendar so you can just click somewhere you will see how it look likes but it does is out even using the I don't plug in stuff like that you can see all the variation their components allows and you have quickly a good idea if these components will suit your needs or not so that's really I put instead of I mean some some project can do that on their phone here you have the storybook is great at are good yeah it's button for documentation so basically if I'm taking the documentation of the pagination again we have a like a button that's redirects you to our storybook and this one is a bit special because I won't see the users to look at our components in the context of search because we are okay so or widgets as impact on the search and the search impacts of widgets so that's why I created this warframe so basically if you are using the components you realize what it does on the search and same thing if you are typing something you will realize what it does on the components this demonstrates that you can pretty much adapt the storybooks to your own use case if you need to and I also created this story is a bit specific not stories which is called like wrong they'd basically explore expose all the probes of our components and lets our users play with them so for instance page headings can be really tricky to get so here you can just play with the props and and see like effect on it it's way easier to have an example like I said before sometimes like it will help you understand faster so we develop design and we also documented all of our components that's cool but like I said it's a live documentation and it's based on code and code can rights rights so how do we make sure that this documentation never breaks well it's like protection code you need to work this we we know that we should test our UI components and for those who actually do that you probably end up with a lot of files with a lot of component decoration and you do some assertion on it you probably even use that snapshot testing and now you have like the storybook with other component declaration probably the same declaration so you have duplication and duplication may not be the best thing so actually storybook lets you test your components in several ways that are complementary and not like exclusive so the first things you can actually do is snapshot all your stories with the atoms that's called story shots so the principle is to stir all the markup of your stories and then when you are developing in the middle of development it will say that if the story is breaks all nuts that's super cool because it comes for free basically you already wrote your components you add this add-on boom you have snapshot it did all your stories that's cool but to me was not enough because I think that a snapshot testing is great to create a layer of on the regression but it's a bit order to express actions and stuff that are not static so basically last year when I discover a story book I had this idea of testing master and and I created a specific atoms because when a developer is wearing a test the first thing actually is trying to do is expressing an intense and if you exist very carefully what you end up creating is the world specification of your application it means that if you read your test code you should be able to understand all the business logic and like everything that applies specific to your project just by reading those tests like because if you do that with projection card oftentimes it's like a lot of abstractions and it can be hard to get with tests you have actually a way to be where it explicit so like I said I created an add-on which is called the specs atom and that allows just that to be able to write specification of your stories just next to them to explicit the behavior the last thing you can actually do with storybooks in order to test it is performing some visual regression testing which is a bit like the snapshot one instead of but instead of snapshotting markup you're actually snapshotting your the visual offshore of your components and you're performing songs if it's a very trendy topics at the moment you have like a lot of factors that can spin through the vacuum so here are some some are pay paying solutions some are free for open source some are completely free basically as a tar gorya we are using Argos and when provides us is this new line on a CI and when it fails it gave this little interface with the before after and the comparison in between and you can approve or reject the change depending of of sukhiya so small team or game to start with snapshot testing it's super easy the only thing you need to do is creating a test file and it has file and add those two line of configuration and now I just have to run my regular test come online so here I have two stories so it creates it two snapshots right and if I'm like removing this button again you can see the test failing and you can see why it failed and you can act in consequence consequence now if you want to go further than this and use this back side on when you can do is text when stories so I will take the last page selected and here I can like put a test so the test does not matter Vinnie here I'm using enzyme and and expect and basically it works with everything that runs into a browsers it tests if the if when we click on the show first button actually we are going to the first page and what it gets me it is this little black specks rhythm so clicking on the show first button should select the first page right and know if I'm modifying the value and I say no it's not the first page is a 10 page now it will fail and it will in any will Savoy obviously the plug-in is made to work on the browser but also it explains how you can plug it with this yeah because both smooth and it's to be working and at some point I will do it true I'm saying that like a lot of times that will under just but I would be great if some people can app on that if you're interested finally the last thing I want to show you is a Loki which is a completely free software for visual regression testing but you will have to do the CI integration you're there so when you want to start with is a visual regression what you need to do is say ok right now among the among the goods states so just like updates or snapshots so if we do exactly that creating some picture as reference so you can see and now once again if I am modifying something and now I can like test again saying note you can test and it will fail you will say where and you can see the current version and the difference between between them so yeah it's easy sometimes visual regression testing can be a bit laggy because depending up show you scares some pics I can change for instance has because the widgets are connected to the Search API sometimes the results are not exactly the same so you can have flakiness test but it can help sports like unwanted regression or so so now we have everything but we come the time when we want to maintain our components which is not maybe the fun funniest part and ended with storybook you created like a lot of entry points when you can just go and start to add like new features once again with the API first state of mind and if you have like some bugs you want to debug you can use this isolated environment like other force even though the stories that you have not enough to desmos read the bug you can just use it thread and all those stories like combining components whatever to just like the most ready dance fix it so that's a pretty good thing but in my opinion the best part of storybook is about when you want to communicate with others often issues with projects are not related to code by itself it's like it's good it can break you can fail but at some point it's fixable oftentimes like projects that fails they are failing because of phone communication between the repairs between team of developers between developers and business whatever it's always a matter of communications and we are using story book extensively in that purpose here are some example like for your life example so basically it's me that's submitted a pull request and on the reactants on cells we have these tunings that basically deploy every time someone creates a PR it deploys the documentation website and the story books unless if I and what it allows me to do is like like an pinpoints the story I just like it some modifications to and my co-workers can see it like super quickly and say okay as a change there are okay or not instead of having to check out the branch locally run everything locally here it's like super instance and it's also full for your users for instance here it's one user that spotted a bag open and on github it describes everything and it's important point the stories he guide us were certain like pass and we are able to see the bug like super quickly it's avoided like some back and forth that's oftentimes happen and finally it's artful for your contributors so here is someone that's also spell it over so that no stories were there to demonstrate it so it created the story he fixed the bug and then you push the pull request so for us once again it's a way to quickly understand what the user wanted and what didn't stuff hangs us so super powerful those are walk through that work for us but obviously you can imagine your horn so let's say you won't walk you walk Rosary off with your designer so one thing you can do is share this website the storybook to quickly check if the components are correct on us so here it's a little recap of everything I just say so as you can see the develop part is really engineered because of your finding because of isolate number one months what you just did with react storybook is you created a style guide basically and this style guide is life you can test it you can expose props and it's also a perfect like entry points to start adding new features debug stuff and most importantly it's a great material to share with others in in order to start discussion but why erupting storable because there's other tools that exist right now and I remember on me on the project like maybe three years ago a number project we basically did that manually we add a page with all components inside and we tested it so it's completely durable like by hem so while using storybook so first reason would be that now there are like a lot of work that is done to make it Universal so what I mean by Universal storybook is that you can use to rebook for react you can use to rebook for react native you can also use it for view and soon we probably use it you can probably use it with angular anyway like they build it in a way that if your new framework comes along it can be entry integrated so before telling you the second reason I wanted to show you quickly the react native version it's select life since the beginning I think but lately they added the is they added the fact that you can see the storybook on the device itself so that's really a porphyrin so my initial wish with this demo is what if you are using like expo already you can run it but because everyone's on different Wi-Fi network it would probably not work so it's okay we just go through the simulator yeah once again it's very naive because I just replaced the world- application by the storybook in real life you can choose how you can display the storybook in the native environment so here our storybook pretty much the same kind of interface and on the web and now if I'm like modifying my hub you will see the exact same performance that's for the web so it's variable is mobile because sometimes you are you you can mess with like styles and stuff so being able to develop like UI components in the storybooks avoid like some issue you can on printer otherwise so I told you that where like a second reason of where you should do storybook and this reason he is this the I don't API so pretty much at the same times I launched to reboot the launcher so what I call the Adhan I'm sorry and basically it's it gives you some some tools to create your own add-on so if you can find what she wants in the add-ons that already exist you can built it and you can share it with the community because I can assure you that if you need something probably other people will need it too so here you have a way to do that you have like a lot of people already a lot of people a lot of add-on already existing some of that are directly in the repo of storybooks older that are on github here in some example is can see some I'm focused on documentation some are focused more focused on design basically web like a lot of options so I encourage you to check out this if you're interested and to finish here is a roadmap of the project so there date here but it's what people are working on or thinking about with storybook one feature that actually keep I mean I'm interested in is what they call the playground add-on which would be aware for you to modify the code of the story directly from the storybook to let's choose a play with the code I think that would be great announcements and yeah you have like everything here so thank you and well if you have any questions [Applause] [Music] I thank you for the book our documentation yeah so we know I had this question before it's about virtually like this condition basically you may have to cut by yourself so let's say you are true in want to keep them to somewhere you permission the storybook with like and other words something like that we don't do that because why right now because like that may be pretty trend on the box [Music] hi it's community the name of the tool for testing is possible it's for our science now and musically I think right now the one that says men is the most honest person but I know was a barista pricing in Survivor [Music] [Music] so every component or or you just put some stop components so I am I see so many problems at society that's it brother did you try senior key strategy because it's West University business we can help to create sir other Wireless many like try to like I've not that many combination try to group backs up against the wall like the most important one that was because [Music] [Applause]

Channel: React Alicante

Views: 12,750

Rating: 4.8245616 out of 5

Keywords: React.js, React Alicante

Id: q248uxiicwY

Length: 38min 17sec (2297 seconds)

Published: Wed Nov 08 2017