RRU 083: Reactive Programming with Storybook with Dean Radcliffe

Dean Radcliffe has been web developing since the table tag was the new hotness. His interests include his wife and two kids, music, sports, and he likes to say he helps people make whatever they can dream of. Since starting to move towards the frontend, React has been his weapon of choice, which he got started with in 2014.  Dean works at G2.com, a software review site. They are developing a review form, which requires the code to react to events. For example, a person’s position in the company would affect what questions they see, so the form needs to react to which box is checked. Dean talks about the use cases for building a reactive form and what kind of things are going to happen when you fill in an input. For his form, the input will be remembered, and they want to increase the user’s involvement with the form through incentives. To accomplish this, Dean uses component driven development with Storybook. Storybook is a tool available for React and other frameworks, which lets you jump directly to each state you want to view instead of having to go through them all one by one. Basically, it gives you shortcuts directly to the visual states of your components. These states facilitate development and the feedback cycle going back to the designers, allowing them to see more than just the finished application and enabling them to circumvent mistakes.  Storybook relates to reactive programming because component driven development lets you discover the API and what sets of props are necessary to put this component into each possible state that can be displayed. Dean does not use it as a test environment on his team, but it does help them write unit tests. It has an addon that lets you write unit tests in Storybook, but he hasn’t used it. Dean compares where reactivity and Storybook come together by comparing it to a thermometer.A thermometer will get readings over time of discrete values, and that timing is how people experience your components. You can create an observable of those states, and Storybook Animate ties them together. Your components, however, are still your responsibility. Dean talks about how he creates the observables. The observables are hardcoded, but the great thing is you don’t need to know where it came from. Dean describes how the observables are connected to the components. Dean feels that having this dynamic feed cycle makes it kind of fun to write tests. There is also a function called After which creates a set time out, which creates an observable of that value over time.  Dean talks about his other tool, RX Helper. RX Helper provides an ‘after’ abstraction, and an event oriented layer in React. RX helper allows you to listen for custom events raised from the individual components of a form, and you respond to those events with observables, and the observables produce values over time.The goal of RX Helper provides some transparency and makes it easier to try out concurrency designs. The show concludes with Dean talking about some of the changes he’s made to his tools and how he came up with the idea.  Panelists Charles Max Wood With special guest: Dean Radcliffe Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundupSentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links...