Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Component Library Design @WalmartLabs

1,379 views

Published on

At WalmartLabs, we've got lots of react component libraries and the number of libraries we have is always growing. This is the framework we're using on the Electrode React team to get component libraries up and running quickly.

Published in: Technology
  • Login to see the comments

React Component Library Design @WalmartLabs

  1. 1. COMPONENT LIBRARY DESIGN @CHASEADAMSIO
  2. 2. use react heavily constantly create new component libraries want good infrastructure for development process don't want to constantly tweak configuration & tooling I work for WalmartLabs, where we...
  3. 3. CORE TENETS Building React Components SHOULD BE fun React Components help us move away from monoliths Tweaking configuration sucks
  4. 4. WHAT THIS TALK IS NOT A debate on which tools are better A deep dive on the concepts of react A conversation about other frameworks
  5. 5. Component Package Lifecycle Developing Testing Demoing Publishing
  6. 6. Tooling Webpack for development (server and hot reloading) Eslint linting javascript for react + es6 Mocha, Chai & Sinon for writing tests and stubbing/spying Karma for running tests in browsers Istanbul for CI coverage Babel for transpiling es6 + jsx
  7. 7. PUBLISHING srcis version controlled libis built and published to npm
  8. 8. Our Project Looks Like...
  9. 9. Library Structure
  10. 10. Scripts in package.json
  11. 11. Dependencies in package.json
  12. 12. This is madness.
  13. 13. I just want to build react components.
  14. 14. Enter Bolt... It saves you time & config headache so you can build better.
  15. 15. Abstracts tooling away Provides lots of tasks Opts for YOUR Tasks electrode-bolt
  16. 16. What does the project look like AFTER Bolt?
  17. 17. Directory Structure Before / After
  18. 18. Scripts Before / After
  19. 19. Dependencies Before / After
  20. 20. Quickest way to get up and running: $ git clone git@github.com:chaseadamsio/electrode-react-component-boilerplate.git $ cd electrode-react-component-boilerplate && npm install $ npm run hot
  21. 21. Questions? @chaseadamsio on twitter

×