Components done right™

Components done right™

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

52132fbb1a8d6a1535ba5f8ed0edac56?s=128

Robin Frischmann

September 13, 2018
Tweet

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