> Markdown version of [/videos/2101-the-pragmatic-architect-balancing-necessity-vs-sufficiency-in-react-systems](https://www.wearedevelopers.com/videos/2101-the-pragmatic-architect-balancing-necessity-vs-sufficiency-in-react-systems). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Stop bottlenecking React projects with resume-driven development. Discover how dropping rigid abstractions for pragmatic, team-focused boundaries accelerates shipping without overcomplicating your codebase.

- **Speakers:** [Ana Gil Amor](https://www.wearedevelopers.com/@ana-gil-amor)
- **Event:** World Congress 2026 Europe - Virtual Stage
- **Published:** July 3, 2026
- **Duration:** 20:49
- **URL:** https://www.wearedevelopers.com/videos/2101-the-pragmatic-architect-balancing-necessity-vs-sufficiency-in-react-systems

## Summary

Frontend architecture often struggles to balance what is aspirational (necessary) against what it actually takes to ship a product successfully (sufficient). Over-engineering frequently occurs early in a project’s lifecycle, where developers might prematurely adopt complex frameworks or strict paradigms before understanding the product's actual needs. Fundamental choices around HTML and CSS, such as utilizing generic design systems versus custom CSS implementations, carry long-term implications for brand identity and strict compliance requirements like the European Accessibility Act. By focusing on a strong, maintainable boundary between the UI and data layers, teams can mitigate these early risks and establish a scalable foundation without overcomplicating the codebase.

A pragmatic approach prioritizes team maturity over architectural purity. In an early use case migrating to a React and Gatsby frontend with a Drupal backend, applying Data Transfer Objects (DTOs) insulated the UI from volatile GraphQL queries, while bypassing heavy state management libraries accommodated the team's contemporary skill level. However, as the system evolved into a 50-repository micro-frontend architecture with shared component libraries and centralized authentication, a rigid attempt at strict hexagonal architecture became a developmental bottleneck. Onboarding junior and mid-level developers highlighted that complex, domain-driven boundaries were hindering productivity rather than helping it.

Adapting to real-world team dynamics requires flattening the learning curve and embracing fluid architectural choices. Rather than dogmatically applying use cases and DTOs across the board, systems should selectively employ these patterns only when data requires translation or business logic dictates it. Returning the UI layer to a traditional React folder structure ensures instant familiarity for new hires. Ultimately, decisions about project size, evolution, and tooling must center on the developmental maturity and mental health of the team, proving that the best architecture is one built for the people maintaining it, not for resume-driven development.

**Keywords:** react frontend architecture, hexagonal architecture bottlenecks, software over-engineering, micro-frontend scaling, UI and data separation, data transfer objects, graphql API integration, european accessibility act compliance, developer onboarding friction, team maturity adaptation, software project scalability, tailored CSS vs design systems, gatsby static generation, headless CMS development, pragmatic architectural choices

## Chapters

1. **Defining necessary versus sufficient in software architecture** (00:01) — Why architects must balance aspirational technical perfection against practical project delivery needs.
1. **Trade-offs of delegating HTML to design systems** (02:08) — How reliance on pre-built UI frameworks can complicate strict compliance and accessibility mandates.
1. **Choosing between custom CSS and utility frameworks** (03:42) — Navigating styling choices from rigid design systems to flexible alternatives with steeper learning curves.
1. **Evaluating team maturity and project scope contexts** (04:49) — Why assessing intrinsic team skills and project timelines is crucial before selecting a tech stack.
1. **Structuring components in a React and Gatsby project** (06:02) — Organizing folder structures to separate volatile technologies and enforce common UI patterns across pages.
1. **Isolating data queries from presentation logic elements** (08:35) — Using data transfer objects to decouple volatile GraphQL data schemas from view components.
1. **Scaling to multiple repositories with hexagonal architecture** (10:47) — Experimenting with domain-driven technical splits to handle growing complexity across large applications.
1. **Implementing localized standard templates for micro-frontends** (12:48) — Creating shared component libraries and centralized templates to unify distributed development pipelines.
1. **Adapting strict architectures to team skill levels** (14:46) — Flattening complex hexagonal patterns to reduce the learning curve and prevent developer bottlenecks.
1. **Aligning technical choices with overall team well-being** (17:40) — Why pragmatic architectural decisions must directly prioritize the capabilities and mental health of developers.

## Related Moments

- [Transitioning from graphic design to large scale frontend architecture](https://www.wearedevelopers.com/videos/100153-microfrontends-lessons-learned-from-growing-a-design-system-and-shared-libraries-across-20-teams) (from "Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams")
- [Scaling development teams with micro frontend architecture](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Evolving frontend application architectures from simple to enterprise scale](https://www.wearedevelopers.com/videos/1682-client-side-state-management-reimagined-think-outside-the-box) (from "Client-Side State Management Reimagined – Think Outside the Box")
- [Discussing pragmatic architectural scope reduction and system design patterns](https://www.wearedevelopers.com/videos/206-move-fast-with-software-architecture) (from "Move fast with Software Architecture")
- [Discussing daily roles in frontend and full stack development](https://www.wearedevelopers.com/videos/1909-wearedevelopers-live-back-to-code100) (from "WeAreDevelopers LIVE - Back to CODE100")

## Related Articles

- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**