122: Matt Biilmann - Architecting the Netlify Dashboard with React and Redux

What It Covers

Matt Biilmann explains Netlify's dashboard architecture using React, Redux, and component separation patterns. He covers state management, API design, data fetching strategies, and development workflows that prioritize performance and developer experience.

Key Questions Answered

• •Container-Component Pattern: Separate presentational components from container components that handle state. Presentational components accept props only, making them testable in isolation via Storybook, while containers dispatch Redux actions and connect to the store without containing markup.
• •Redux Store Structure: Use resource actions to generate standard CRUD operations automatically. Store entities in ID-keyed maps separate from paginated list views. This prevents duplicate data storage and simplifies state management when objects appear across multiple pages or views.
• •Loading State Design: Display placeholder components immediately that visually match final content before data loads. This creates perceived responsiveness by showing application structure from CDN instantly, then populating with API data, rather than waiting for complete server-side rendering.
• •API Request Strategy: Make multiple small parallel API requests instead of large nested queries. This enables progressive rendering as individual responses complete, improves caching, and lets users see partial data faster than waiting for one expensive combined request to finish.