Taming GenAI: Adapting Frontend Architecture for the New Era

About the Session

Large-language-model copilots already write boilerplate, refactor components and suggest entire modules—but only when our codebase speaks a language the model understands. Spaghetti-shaped frontends with hidden dependencies, weak typing and ad-hoc styling quickly turn GenAI from a productivity booster into a bug factory. This session shows how to re-shape frontend architecture so AI becomes a reliable teammate, not a loose cannon. Using a real-world mini-repository (React + Remix + RTK Query + TypeScript), we walk through: - Modularity & SRP – why feature-sliced, layer-oriented code lets models operate on safe, bite-sized contexts. - Contracts, Types, Guardrails – leveraging strict TypeScript, OpenAPI and design-tokens to prevent hallucinations. - Architecture as guardrails – marrying linters, DI, multi-layer patterns (MVC/MVVM/clean) and design systems to keep generated code predictable. - GenAI in the toolchain – auto-building RTK endpoints, generating per-feature README files (human + AI metadata), and syncing new Figma designs directly into composable UI components. Attendees will leave with a checklist and a template-repo they can fork to start “AI-hardening” their own projects tomorrow. Key Takeaways 1. Architectural debt amplifies GenAI mistakes; clean boundaries and contracts mitigate them. 2. Feature-sliced design + strict typing form the minimal scaffolding for safe code generation. 3. Automatic docs and design-to-code pipelines are low-hanging fruit once guardrails are in place. 4. The frontend architect’s new role is not to write every line, but to orchestrate humans, processes and models for higher quality and speed.

Speaker

Anton An

Lead Frontend Developer at Hiveon