19. Other SPA frameworks and technologies
Answer as submitted
“Beyond Angular, I have delivered SPAs with React and Next.js, and worked with additional frameworks and micro-frontend techniques.”
Expanded answer
Beyond Angular, I work in React 19 (function components and hooks, context plus reducer for shared state, custom hooks, React.lazy/Suspense code splitting, error boundaries, React Router, and Jest/React Testing Library) and Next.js (app router, server and client components, SSG/ISR/SSR chosen per route, route handlers and image optimisation). I have also delivered with Vue 3 using the composition API and Pinia, built React Native screens for a mobile app that shares its domain package with the web client, and used micro-frontend techniques (module federation, web components/Angular Elements) to compose independently deployed front ends. Across all of them the constant is the engineering: accessibility, testing, bundle budgets and Core Web Vitals.
| Decision | Where it is applied | Why it is done this way |
|---|---|---|
| State and derivation | hooks, reactive/computed, signals | One source of truth; everything else is derived instead of duplicated. |
| Rendering strategy | SSG / ISR / SSR / CSR per route | Static where possible, server-rendered where needed, client only when interactive. |
| Failed subtrees | error boundaries + suspense fallbacks | One broken panel degrades itself instead of blanking the screen. |
| Code splitting | route-level lazy loading | The first paint ships only what the first route needs. |
| Mobile reuse | shared domain package with React Native | Validation and behaviour cannot drift between platforms. |
| Micro-frontends | module federation, web components | Teams deploy independently behind a composed shell. |
| Quality bar | Testing Library, axe, budgets, Core Web Vitals | The standard belongs to the team, not to the framework. |
Live SPA framework workflow proof
The running component below changes its framework/result view through real event binding. Select a step to see the decision, the reasoning behind it, and the measurement that proves it.
Choose a framework step
Select a step to inspect the decision, the reasoning and the measured result.
$ const { data, error, isLoading } = useOrders(customerId); // hooks, suspense-ready
React for component-driven interfaces: hooks with explicit dependencies, derived state instead of duplicated state, and error boundaries around the risky subtrees.
re-renders 4 → 2 after memoising the selector route-level chunk 48 KB
What transfers between frameworks
Source files
Select a file to inspect the proof with syntax highlighting and line numbers. The first file is the code running the component above; the other two are the production shapes of the same decisions.
Acceptance criteria
- Names React, Next.js and Vue with the context each was used in.
- Distinguishes state modelling, rendering mode, failure isolation and reuse.
- Shows an interactive proof of choosing a framework step and reading its measurement.
- Keeps one source of truth and derives the rest in whatever framework is used.
- Defers migration plans, micro-frontend governance and design-system ownership to a later topic.