React Component Library Design @WalmartLabs
-
Upload
chaseadamsio -
Category
Technology
-
view
913 -
download
0
Transcript of React Component Library Design @WalmartLabs
![Page 1: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/1.jpg)
COMPONENT LIBRARYDESIGN
@CHASEADAMSIO
![Page 2: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/2.jpg)
use react heavilyconstantly create new component librarieswant good infrastructure for development processdon't want to constantly tweak configuration & tooling
I work for WalmartLabs, where we...
![Page 3: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/3.jpg)
CORE TENETSBuilding React Components SHOULD BE funReact Components help us move away from monolithsTweaking configuration sucks
![Page 4: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/4.jpg)
WHAT THIS TALK IS NOTA debate on which tools are betterA deep dive on the concepts of reactA conversation about other frameworks
![Page 5: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/5.jpg)
Component Package LifecycleDevelopingTestingDemoingPublishing
![Page 6: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/6.jpg)
ToolingWebpack for development (server and hot reloading)Eslint linting javascript for react + es6Mocha, Chai & Sinon for writing tests and stubbing/spyingKarma for running tests in browsersIstanbul for CI coverageBabel for transpiling es6 + jsx
![Page 7: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/7.jpg)
PUBLISHINGsrc is version controlledlib is built and published to npm
![Page 8: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/8.jpg)
Our Project LooksLike...
![Page 9: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/9.jpg)
Library Structure
![Page 10: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/10.jpg)
Scripts in package.json
![Page 11: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/11.jpg)
Dependencies in package.json
![Page 12: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/12.jpg)
This is madness.
![Page 13: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/13.jpg)
I just want to buildreact components.
![Page 14: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/14.jpg)
Enter Bolt...It saves you time & config headache so you can build better.
![Page 15: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/15.jpg)
Abstracts tooling awayProvides lots of tasksOpts for YOUR Tasks
electrode-bolt
![Page 16: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/16.jpg)
What does theproject look like
AFTER Bolt?
![Page 17: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/17.jpg)
Directory Structure Before / After
![Page 18: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/18.jpg)
Scripts Before / After
![Page 19: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/19.jpg)
Dependencies Before / After
![Page 20: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/20.jpg)
Quickest way to get up and running:$ git clone [email protected]:chaseadamsio/electrode-react-component-boilerplate.git$ cd electrode-react-component-boilerplate && npm install$ npm run hot
![Page 21: React Component Library Design @WalmartLabs](https://reader034.fdocuments.in/reader034/viewer/2022042611/5871ab0e1a28abda6a8b5799/html5/thumbnails/21.jpg)
Questions?@chaseadamsio on twitter