The talk will explain both the process and provide code examples on how to bootstrap your latest project in the least disruptive way. An example of expanding a publicly available project in several phases will be given (along with the source). At the end you will learn what you can get for free, what are some low hanging fruit, and then where to concentrate your efforts as you scale. If you have an interest in creating a UI Component library or Design System this is a great precursor and first step for your project.
Presented at React Helsinki and Futurice Tech Weeklies, December 2018
12. 5 STAGES OF GRIEF WITH ANGULAR
1. Denial I'm just doing this until Vue.js catches on
2. Anger Nested ternaries, button components, CSS in JS
3. Bargaining wix/react-templates
4. Depression Endless videos and tutorials
5. Acceptance I'm now okay, but Functional Programing...
13. WHY A LIVING STYLEGUIDE
1. Foster better communication
2. Play to your team's strengths
3. Avoid conflict between teams
4. Produce a better quality product
5. More design consistency
6. Less meetings
source: Design Systems Crash Course
14. In my experience there are two ways to get started with creating a
Design System that will work for an organization of any size. Even a
web team of one.
‣ Front-end Code
‣ Living Styleguide
source: Design Systems Crash Course
15. Both of these are what I like to call low hanging fruit. This means that
you will be able to build these the fastest, with the least amount of
effort and they will have the biggest rewards.
source: Design Systems Crash Course
16. WHY NOT X STORYBOOK
‣ You write stories in JavaScript files (vs md)
‣ How you describe components
‣ Shows only one variation at a time (vs. multiple)
source: React Styleguidist Cookbook
17. REACT STLYEGUIDIST GIVES YOU
‣ Auto public method docs
‣ All components on a single page (Styleguide)
‣ Extra docs added (Design System or More complete docs)
‣ Can be branded (customizable design)
‣ You get some docs auto generated*
18. STORYBOOK EXAMPLE
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import Button from "../components/Button";
storiesOf("Button", module).add("default", () => (
<Button onClick={action("clicked")}>Push Me</Button>
));