Too often developers are not involved with front end design descussions and end up struggling to get a sketch design to fit into a website. Many of these tools do not offer good ways of communicating animations or different states of the various components and in the end, there still has to be a translation into something that is functional.
This talk aims to change that. We will be looking at Storybook as a tool that facilitates developers and designers working hand-in-hand to codify designs in React components. We will also cover some strategies of React component building that enabled taking advantage of tools like Storybook.
7. HAVING DESIGNS DELIVERED:HAVING DESIGNS DELIVERED:
Design elements tend to be "pages" and not
components
Can't easily show animations or responsive designs
Version control?
Some things may not be possible (or realistic) in a
browser
Still have a lot of work to "translate" to html
... and it may not be pixel perfect!
8. WHY SHOULD WE CARE ABOUT DESIGN?WHY SHOULD WE CARE ABOUT DESIGN?
Gateway for user acquisition
Can reduce bugs
So ware that isn't used is pointless
9. WHY SHOULD WE CARE ABOUT DESIGN?WHY SHOULD WE CARE ABOUT DESIGN?
Bad UX designs makes us susceptible to disruption.
10. HOW DO WE BRIDGEHOW DO WE BRIDGE
THE GAP?THE GAP?
13. WHY STORYBOOK.JS?WHY STORYBOOK.JS?
Integrates with React and Vue.js
Immediate feedback of changes
Easily see history of changes
At the end of the design phase, we have functional
components!
16. KEEP DATA RETRIEVAL SEPARATEKEEP DATA RETRIEVAL SEPARATE
Avoid state in your views as much as possible
Compose your components as much as possible
Use props to pass in data
19. USE PROPS TO DISPLAYUSE PROPS TO DISPLAY
export default class ListComponent extends React.Component {
renderItems = () => {
return (this.props.items || [])
.map(item => <li>{item}</li>)
}
render = () => <ul>{ this.renderItems() }</ul>
}
20. PASS THE STATE DATA TO THE VIEWPASS THE STATE DATA TO THE VIEW
import List from './list-component';
export default class ListContainer extends React.Component {
state = { items: [] }
async componentDidMount() {
this.setState({
items: await fetch('/items')
});
}
render = () => <List items={this.state.items}/>
}
29. MODIFY OUR STORY FOR THE ACTIONMODIFY OUR STORY FOR THE ACTION
import { storiesOf, action } from '@storybook/react';
import List from './list-component';
storiesOf('List', module)
.add('Multiple items', () => {
return (
<List
onItemClicked={action('Item clicked!')}
items={['item 1', 'item 2', 'item 3']}
/>
);
});
32. ADD THE "KNOBS" ADDONADD THE "KNOBS" ADDON
This is what is responsible for showing the panel
// addons.js
import '@storybook/addon-knobs/register';
33. MODIFY THE STORYMODIFY THE STORY
import { storiesOf, action } from '@storybook/react';
import List from './list-component';
import {withKnobs, array} from '@storybook/addon-knobs';
storiesOf('List', module)
.addDecorator(withKnobs)
.add('Multiple items', () => (
<List
onItemClicked={action('Item clicked!')}
items={
array('Items', [
'item 1',
'item 2',
'item 3'
])
}
/>
));
36. CONCLUSIONCONCLUSION
Getting involved in the design process doesn't have
to be scary
Start fresh or add to existing React/VueJS app
Hit the ground running when designs are finished
Version control designs and their stories
45. USING THE NEW HOC IN REACT NATIVEUSING THE NEW HOC IN REACT NATIVE
import List from './native/list-component';
import withListData from 'list-container';
export default class SomeReactView extends React.Component {
componentDidMount() {
this.wrappedList = withListData(<List/>);
}
render() {
if (!this.wrappedList) {
return null;
}
const WrappedList = this.wrappedList;
return <WrappedList/>;
}
}