# Real-World React: Designing Frontend Architectures That Survive Production

> Workshop by Faris Aziz · Engineering in production. Most React workshops focus on building features. This one focuses on what happens when those features meet production.

Real applications depend on APIs that become slow or unavailable, data that goes stale, releases that fail, optional features that take down critical journeys, and errors that only appear under real traffic. This workshop explores how to design frontend systems that keep the user's task working when those failures happen.

Using React and Next.js as our shared reference point, we work through practical resilience patterns including timeouts and cancellation, retries with backoff and jitter, circuit breakers, failure isolation with error boundaries, graceful degradation, caching and revalidation, and strategies for distinguishing critical from optional dependencies.

We then connect those patterns to production delivery: feature flags, observability, controlled failure testing, safe rollouts, rollback decisions, and DORA metrics. The focus throughout is not just whether the application technically survives, but what the user experiences while parts of the system are failing or recovering.

The workshop combines architecture discussions with hands-on exercises built around realistic production scenarios. Most concepts apply beyond React and Next.js and are useful when designing any frontend that depends on distributed systems.

This is not an exhaustive masterclass. It is a practical framework for reasoning about production architecture, understanding tradeoffs, and building systems that can fail without taking the entire user experience with them.

## Agenda

### 3-8 hours

- **Introduction and workshop setup**
- **Warm up and production failure stories**
- **Performance and pragmatism discussion**
- **Real-world architecture explorations**
- **Software resilience patterns overview**
- **Circuit breakers, Exercise 01**
- **Retries, backoff and jitter**
- **Failure isolation and React error boundaries, Exercise 03**
- **Timeouts and cancellation, Exercise 02**
- **Query criticality and graceful degradation, Exercise 04**
- **Dynamic imports and optional features**
- **Suspense and loading fallbacks**
- **Caching and revalidation**
- **Incremental Static Regeneration**
- **Resilience libraries quick reference**
- **Testing resilience and controlled failures**
- **Safe releases, feature flags and observability**
- **DORA metrics and delivery performance**

_3-8 hours · 18 blocks_

## Prerequisites

- Solid understanding of React fundamentals, including components, hooks and state
- Familiarity with Next.js or another React framework is useful, but not required
- Comfortable with modern JavaScript or TypeScript development
- Laptop with Node.js 20 or newer installed
- pnpm 10.12.4, as pinned by the workshop repository
- Familiarity with Git and basic command-line workflows

## You leave able to

- A practical framework for reasoning about frontend architecture under real production constraints
- Hands-on experience implementing circuit breakers and designing useful fallbacks
- An understanding of retry policies, exponential backoff, jitter and retry amplification
- Techniques for handling slow dependencies with deadlines, timeouts and cancellation
- Patterns for isolating failures with React error boundaries and graceful degradation
- A way to classify critical and optional data dependencies so partial failures do not unnecessarily break entire experiences
- Practical approaches to caching, revalidation, Suspense, dynamic imports and ISR as resilience tools
- Experience testing resilience by deliberately introducing latency, failures and degraded dependencies
- A model for safer releases using feature flags, observability, staged recovery and rollback decisions
- An understanding of how DORA metrics connect delivery velocity with production stability and recovery

## Delivered at

- React Alicante · Alicante · 24th Sep 2026 · https://faziz-dev.com/events/react-alicante-2026-workshop
- JNation · Coimbra · 27th May 2026 · https://faziz-dev.com/events/jnation-workshop-day
- CityJS · London · 16th Apr 2026 · https://faziz-dev.com/events/cityjs-london-workshop-day
- CityJS · Singapore · 5th Feb 2026 · https://faziz-dev.com/events/real-world-react-the-architectural-crash-course-for-scalability-resilience-and-observability
- ZurichJS · Zurich · 12th Nov 2025 · https://faziz-dev.com/events/zurichjs-2025-11-12
- WhatTheStack · Skopje · 18th Sep 2025 · https://faziz-dev.com/events/whatthestack-2025-react-architecture-workshop
- CityJS · London · 24th Apr 2025 · https://faziz-dev.com/events/cityjs-london-2025-04-24

## Book this workshop

- Length: 3-8 hours
- Request a date: https://faziz-dev.com/invite?kind=workshop&workshop=Real-World%20React%3A%20Designing%20Frontend%20Architectures%20That%20Survive%20Production

Attendees: use the resources link from your session for the slides, the repo and the extras.

The talk version: Building Resilient UIs with React · https://faziz-dev.com/talks/building-resilient-uis-with-react

## What attendees said

> Two solid days in the ZurichJS community this month.

First, the React Architecture workshop with Faris Aziz - an intense 3-hour crash course on production-ready patterns. We dived into Atomic Design, React reconciliation, resilience engineering, and observability. The kind of tactical knowledge that immediately changes how you write code.

Then, the ZurichJS 1st Anniversary celebration - the talks were impressive, great energy, real conversations with developers building things here, and the kind of community vibe that makes you want to keep showing up.

What stuck with me most wasn't just the technical content, but connecting with people who are solving similar challenges. That's something you don't get from courses or tutorials.

If you're in Zurich and building with JavaScript, the ZurichJS community is worth your time. Great people, solid events, and genuine knowledge sharing.
>
> Ioannis Krokos, Full Stack Software Engineer (https://www.linkedin.com/posts/ioanniskrokos_two-solid-days-in-the-zurichjs-community-ugcPost-7395580371054088192-5vtc)

> It's been a year and I had never managed to catch one of Faris Aziz's workshops.

And I'm finally getting to see him in action at the WhatTheStack Conference in Skopje

I'm not known for being vocal about praise, but this workshop is really darn cool. I never kbew about chaos engineering, or a whole bunch of terms for patterns that smart people figured out over time to build performant apps. And got to discuss alerting, which is a topic that was brought up at the last meetup. And a bunch more stuff

Aaaand he's also bringing it to ZurichJS on November 12th 👀

I know I'm biased, but, again, those who know me, know I don't sugarcoat things.

This workshop's good, can recommend.

All the info on the ZurichJS website🤘
>
> Bogdan Mihai Ilie, Frontend Web Engineer | Advocate | Community Builder (https://www.linkedin.com/posts/ilie-bogdan_architecture-react-nextjs-activity-7374503298344599553-KSXi?utm_source=share&utm_medium=member_desktop&rcm=ACoAABT5OYoBLYirtVVclcrVsv-u5LeOswZO-7g)

> I love how natural Faris is at this. His warm-up exercise is one of the best things I have seen for a workshop. It challenges everyone's expectations but also sets a proper tone for the session
>
> Daniel Afonso, Senior Developer Advocate  @PagerDuty | @solid_js  DX team (https://x.com/danieljcafonso/status/1914975758956609770?s=20)

All workshops: https://faziz-dev.com/workshops.md

---

Faris Aziz: software engineer, speaker, ZurichJS co-founder. Geneva, Switzerland.
Site: https://faziz-dev.com · Invite to speak: https://faziz-dev.com/invite · Services: https://faziz-dev.com/services · Mentorship: https://faziz-dev.com/mentorship · Index for agents: https://faziz-dev.com/llms.txt
LinkedIn: https://www.linkedin.com/in/farisaziz12/ · GitHub: https://github.com/farisaziz12 · Bluesky: https://bsky.app/profile/farisaziz.com