Components done right™

Slides from our talk at ReactiveMeetups 2018 during 10. - 13. September in Brno, Hradec Králové, Prague and Bratislava.

Transcript

1. Components done right™ Best practices for components and component-based architectures Javi Velasco Robin Frischmann
2. Javi Velasco @javivelasco @javivelasco Barcelona, Spain ZEIT ▲
3. react-toolbox/react-toolbox
4. Robin Frischmann @rofrischmann @rofrischmann Karlsruhe, Germany dm-drogerie markt
5. rofrischmann/fela
6. Disclaimer !
7. Info i
8. ? What is a component?
9. - React documentation,
 Components and Props “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.“ Source: https://reactjs.org/docs/components-and-props.html
10. The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed Trending Books
11. The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books
12. The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem
13. The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem Rating
14. The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed BookList Trending Books BookListItem Rating
15. ? What makes a good component?
16. 1. have a single 
 responsibility 2. are accessible 3. are predictable 4. are customisable 5. are reusable Good components _ 0 % 23 % 45 % 68 % 90 % single
 responsibility accessible predictable custom isable reusable 84 % 76 % 42 % 19 % 17 %
17. Single Responsibility #1
18. ? Why is the single responsibility principle important?
19. God Components
20. Separation of Concerns
21. CSS Loading BookListItem Rating Classic definition HTML Loading BookListItem Rating JS Rating
22. Loading HTML CSS Rating HTML CSS JS Component-oriented definition BookListItem HTML CSS
23. Component-oriented definition Loading HTML CSS Rating HTML CSS JS BookListItem HTML CSS
24. Component-oriented definition Loading HTML CSS Rating HTML CSS JS BookListItem HTML CSS
25. ๏ concerned with how things look ➞ markup & styling ๏ are stateless ๏ receive data via props ๏ often just render children ๏ have no dependencies Presentational Source: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Logical ๏ concerned with how things work ➞ logic ๏ are stateful ๏ render presentational components ๏ have dependencies
26. BookList Example Code Example
27. Accessibility #2
28. ? Why is Accessibility important?
29. ? How do we increase Accessibility?
30. ++ Readability
31. SEO
32. #3 Predictability
33. ? Why is Predictability important?
34. Confidence in Correctness
35. ? How do we increase Predictability?
36. UI = f(state)
37. Pure Functions ๏ given the same input, always return the same output ๏ not mutate its arguments ๏ not call non-pure functions (e.g. Date.now or Math.random) ๏ not perform side effects (e.g. API calls) A pure function should _
38. function add(a, b) { return a + b } Examples function Header(props) { return <h1>{props.children}</h1> }
39. const View = () => ( <div className={ 'text_success' }> Some Text </div> ) .text_success { color: green } JS(X) CSS
40. const View = state => ( <div className={ state.error ? 'text_failure' : 'text_success' }> Some Text </div> ) .text_success { color: green } .text_failure { color: red } JS(X) CSS
41. const View = state => ( <div className={ state.error ? 'text_failure' : 'text_success' }> Some Text </div> ) .text_success { color: green } .text_failure { color: red; font-size: 20px } JS(X) CSS
42. CSS in JS
43. Style = f(state)
44. import { createComponent } from 'react-fela' const style = state => ({ color: state.error ? 'red' : 'green' }) const View = createComponent(style) // <View /> => <div class="a" /> // <View error /> => <div class="b" /> JS(X)
45. Automated Layout Tests via Snapshot Testing Code
 Example
46. <View /> <View error /> .a { color: green } .b { color: red } <div class="a"></div> <div class="b"></div> Rendering Test Snapshot
47. #4 Customisability
48. ? Why do we want to customise components?
49. BookListItem BookList Rating The Hunger Games Suzanne Collins Twilight #1 Stephanie Meyer Wild Cheryl Strayed Trending Books Stars Loading
50. ? How do we customise components?
51. API === Props
52. Customisation via props Stars - (int) value - (int) size - (string) color - (boolean) showValue size = 10 size = 15 color = yellow color = green showValue = false showValue = true 4.5 of 5 stars
53. Mastering props avoid (multiple) boolean props Click me <Button primary /> Click me <Button secondary /> Click me <Button /> <Button primary secondary /> ??? <Button variant="primary" />
54. Mastering props avoid spread props <Button {…..props} />
55. Mastering props use PropTypes / type your props
56. Mastering props provide useful defaults
57. Mastering props KISS don’t abuse props
58. Reusability #5
59. ? How do we reuse presentational components?
60. 1. Customisation via props
 2. Theming
61. Move your layout flow and spacings up to the parent component
62. ? How do we reuse logical components?
63. Rating • calls API • handles errors • renders loading • renders HTML elements
64. Customisation Rating • calls API • handles errors • renders loading • renders HTML elements Loading
65. React Everywhere React Native, etc … Rating • calls API • handles errors • renders loading • renders native elements
66. Headless Components via render-props ๏ encapsulate logic ๏ don’t render UI ๏ are platform-agnostic ๏ call a render-function with all relevant props
67. Refactoring
 Rating Live Coding Example
68. Summary ✓ Single Responsibility (Separation of Concerns, Presentational & Logical) ✓ Accessibility (Semantic Markup + Tools) ✓ Predictability (Pure Functions, CSS in JS) ✓ Customisability (Master Props) ✓ Reusability (Theming, Headless Components)
69. Thank you! @rofrischmann @javivelasco
70. Questions? @rofrischmann @javivelasco