On the way to making React components more reusable

Transcript

1. 0OUIFXBZUPNBLJOH
   3FBDUDPNQPOFOUT
   NPSFSFVTBCMF
   Olena Sovyn
   (@frontendgirl)
   

   View Slide

2. Olena Sovyn
   (@frontendgirl)
   !
   &
   "
   

   View Slide

3. ❤
   3FBDU

   3FEVY
   -PEBTI
   3FBDU4UPSZCPPL
   GVODUJPOBMQSPHSBNNJOH
   

   View Slide

4. View Slide

5. 0OUIFXBZUPNBLJOH
   3FBDUDPNQPOFOUT
   NPSFSFVTBCMF
   Olena Sovyn
   (@frontendgirl)
   

   View Slide

6. ZFBSBHP
   

   View Slide

7. 8IZ
   

   View Slide

8. View Slide

9. 8IZ )PX
   

   View Slide

10. Why aren’t we
    creating reusable
    components in
    the first place
    

    View Slide

11. Hero Header Button
    Search Input Search Results Search Result Item
    

    View Slide

12. View Slide

13. View Slide

14. repeatability in UI or behaviour
    can help to define what should
    be a component
    

    View Slide

15. How can we think
    about our project
    in the components-
    first approach
    

    View Slide

16. 4UPSZCPPL
    

    View Slide

17. View Slide

18. "OZPUIFSTJNJMBSUPPM
    - Carte Blanche (https://github.com/carteb/carte-blanche)
    - Electrode Explorer (http://www.electrode.io/#electrode-
    tools)
    - Chromatic (https://github.com/meteor/chromatic/)
    

    View Slide

19. https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-
    fb849b06187a
    

    View Slide

20. 8IZTUPSZCPPLBQQSPBDI
    - make us think about the components like totally
    independent parts of the app
    - make something the first source of truth, a dictionary for
    our modular UI
    - give your component place where they can leave
    - possibility to test UI separately from the complex behaviour
    - deeper understanding from the box what state should be
    handled on the component level and what should go to
    Flux/Redux
    

    View Slide

21. (PPEUIJOHTUPSFNFNCFS
    - don’t build functionality of the components that is not
    currently used in the app
    - don’t rely on the default styles that are in the
    components library (storybook etc.)
    

    View Slide

22. Why when we
    have two similar
    components aren’t
    we making it one
    

    View Slide

23. Coding Testing
    Design
    Verify
    Coding
    Testing
    Design Verify
    iteration n n + 1
    n - 1
    

    View Slide

24. View Slide

25. View Slide

26. https://www.youtube.com/watch?v=hEGg-3pIHlE
    

    View Slide

27. We
    reusable
    simple
    to reuse
    

    View Slide

28. How can we
    make components
    easy to reuse
    

    View Slide

29. View Slide

30. &YQPTVSFXIBUQSPQT
    TIPVMECFQBTTFE
    - add PropTypes for our components
    - flowtype
    - auto-complete in the IDE
    - check how component is used in the stories in the
    storybook
    - documentation - make the tools generate documentation
    for you:
    - “addon-info” in the storybook
    - react styleguidist - build-in + JSDoc comment blocks
    

    View Slide

31. 2, 3, 4, 5 projects?
    

    View Slide

32. Why aren’t we
    making component
    reusable
    between them
    

    View Slide

33. 8IBUJG
    second project is done in Angular?
    OH3FBDU
    

    View Slide

34. 8IBUJG
    first project has styles in *.scss,
    and second has in *.less?
    - CSS-in-JS
    - CSS-Modules + export styles in *.css from component
    library and include them directly in the apps
    

    View Slide

35. 8IBUJG
    we want to make the components library
    as totally separate project?
    - publish library as a package in the npm (private or
    public)
    - include library in the package.json using GitHub link
    - make the library sub-module of one of the applications
    

    View Slide

36. How to make
    complex
    component to be
    reusable
    

    View Slide

37. %BUB
    #FIBWJPVS
    6*
    Reusable ???
    

    View Slide

38. )0$
    (high order components)
    

    View Slide

39. )0$
    changed: context or/and
    state or/and props
    

    View Slide

40. )0$FYBNQMFT
    - connect in the react-redux
    - reduxForm in the redux-form
    - all API functions in the recompose
    - Loadable in the react-loadable
    - and many-many others
    

    View Slide

41. not only a libraries, but
    a source of the inspiration
    

    View Slide

42. #SJOHUIFQPXFS
    PGPUIFSQBUUFSOT
    

    View Slide

43. DIJMESFOBTB
    GVODUJPO
    

    View Slide

44. react-motion example
    https://codepen.io/pshrmn/pen/pRroLV?editors=1010
    

    View Slide

45. DPNQPVOE
    DPNQPOFOUT
    

    View Slide

46. example
    https://codepen.io/Kiwka/pen/ZXvVqv?editors=1010
    

    View Slide

47. +49UBHBTB
    SFGFSFODFUP
    DPNQPOFOU
    

    View Slide

48. 6TFSMJTUFYBNQMF
    6TFSMJTUJUFNFYBNQMF
    

    View Slide

49. DPNQPOFOUTKTY
    

    View Slide

50. VTFSMJTUKTY
    QBHFKTY
    

    View Slide

51. VTFBSFOEFS
    QSPQ
    

    View Slide

52. example
    https://codepen.io/Kiwka/pen/YrYdyR?editors=1010
    

    View Slide

53. Nothing except the rocket science
    is rocket science
    

    View Slide

54. https://www.youtube.com/watch?v=C_yj4k4QZVI
    

    View Slide

55. SFBEBCJMJUZ
    TDBMFBCJMJUZ
    SFVTBCJMJUZ
    testability
    predictability
    “something”bility
    performance
    maintainability
    

    View Slide

56. Mixins Are Dead. Long Live Composition. Dan Abramov
    https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-
    components-94a0d2f9e750
    Enter Higher-Order Components
    I first learned about this pattern from a gist
    by Sebastian Markbåge. The gist is a little
    bit cryptic if you’re not yet fully
    comfortable with ES6 syntax
    ”
    

    View Slide

57. View Slide

58. 8IBUBCPVUPUIFSQBUUFSOT
    

    View Slide

59. Why do we want
    our components
    to be reusable
    

    View Slide

60. 0MFOB4PWZO
    @frontendgirl
    olenasovyn@gmail.com
    (SB[JF
    

    View Slide