Third-Party Banking Lib: Web Components, React
summary
A white‑label banking UI library renders React 18 inside Web Components mounted to the Shadow DOM and communicates with hosts using native CustomEvents plus an internal event bus so multiple React views remain decoupled. The project uses Storybook, Vite, Cypress and Chromatic for design review and UI testing, serves assets from S3/CloudFront with a single shared React in a ~150 KB cached bundle, and supports mobile via WebView plus native bottom sheets by dispatching the same render events; container‑query and GSS require polyfills but the integration performs well.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:45Integration types
- 3:30Library requirements
- 8:04Web components benefits
- 12:43Why web components
- 13:48React in components
- 16:41Library demo
- 18:29Component customization
- 20:57Mobile adaptation
- 24:47Native mobile integration
- 28:44Unified architecture
- 29:50Atomic Design theming
- 31:36Dev, test, deploy
- 33:23Key takeaways
- 34:06Q&A
related talks
26mFrontend At Scale - Experiences Using React In A Large Organization
20mI’m With Web Components and Web Components Are With Me
32mThe Modern Way of Making Websites in React
36mBuilding framework agnostic UI with Web Components
26mThe complementarity of React and Web Components
21mBuilding Cross-Platform Component Libraries for Web and Native with React
20mAvoiding vendor lock-in through Web Components
16mWeb Components Q&A