How Cinema, React and Styled Components are Alike

on YouTube ↗30m

" summary

Company builds a shared component library called Luna UI using React and styled-components with a theme provider that loads simple JSON color files to swap looks per app. Team replaces duplicated components (five copies across apps), ships storybook-like docs, snapshot tests, and a release script that updates 5 then 27 applications, cutting multi-day UI maintenance to a few hours and restoring visual consistency across products.

AI-written summary · about

" chapters (10)

1. 0:00Introduction and personal anecdotes
2. 2:10Childhood movie comparison
3. 3:58Problem with component duplication
4. 8:24Solution with Luna UI library
5. 10:19Choosing Styled Components
6. 12:34Installing and using Luna UI
7. 14:06Live demo of components
8. 17:44Storybook for documentation
9. 19:34Benefits of the library
10. 23:15Q&A session

" related talks

• 20mHow cinema and coding are alike?Rodolfo Dias · code.talks commerce 2019
• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 22mStyled ComponentsMax Stoiber · .concat() 2018
• 33mKickstarting a library of internal React components for multiple teamsXavier Lefevre · ReactFoo 2019
• 54mCase sudy: Lucentum, creating our own React component libraryFlavio Corpa · React Alicante 2017
• 25mFrom Design Systems to Component LibrariesGagik Arustamyan | ReactConfAM19 · React Conf Armenia 2019
• 27mUp and Running with Universal ComponentsKurtis Kemple, Samantha Bretous · ReactEurope 2018
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018