Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Case Study: Lucentum, creating our own React component library

Case Study: Lucentum, creating our own React component library

About a year ago, we faced the challenge of creating a whole new React ui-kit with a completely custom look & feel to unify the styles of all the web apps for some public European institution. What challenges did we face? How did we overcome them?
How have we contributed to the React community? This is the study case of Lucentum: the first (but not last) React component library born and raised in Alicante!

5beee2d0130c79b46b63ded406e1eec8?s=128

Flavio Corpa Ríos

September 30, 2017
Tweet

Transcript

  1. September 2017 Case sudy: Lucentum, creating our own React component

    library Flavio Corpa
  2. Thanks to our sponsors!

  3. None
  4. Have you ever developed your own React component library *completely*

    from scratch? !
  5. Why “lucentum”?

  6. None
  7. Initial Stack

  8. None
  9. None
  10. None
  11. The Block Component

  12. None
  13. None
  14. None
  15. The Icons ⬅↗

  16. None
  17. None
  18. None
  19. Whom of you have ever used classnames? *

  20. None
  21. None
  22. None
  23. Introducing react-css-props

  24. None
  25. None
  26. None
  27. None
  28. The Button

  29. None
  30. None
  31. None
  32. None
  33. The DatePicker

  34. None
  35. react-dates

  36. None
  37. The Language Component 345

  38. None
  39. react-intl

  40. None
  41. The Select / Autocomplete / Typeahead / Magic ✨

  42. None
  43. None
  44. None
  45. “Abstractions are good, but not always!”

  46. The (stupid) Map

  47. None
  48. 1.073,7K (gzipped: 321,7K)

  49. react-simple-maps

  50. @zcreativelabs 9 205,7K (gzipped: 63K)

  51. Adding Flow ⚡

  52. None
  53. Theming ;

  54. None
  55. None
  56. None
  57. None
  58. None
  59. — Linus Torvalds “Talk is cheap. SHOW ME THE CODE.”

  60. Open Source?

  61. Open Source

  62. None
  63. @FlavioCorpa kutyel