Performance

Performance infrastructure built into the Foundation — build optimization, runtime efficiency patterns, and caching strategies provided per platform.

Build Performance

Platform	Tool	What It Does
Flutter	Melos	Selective package builds — only rebuild what changed across 26 packages
Angular	Nx 18 + remote cache	Dependency-graph-aware parallel builds with GCP-backed remote cache; CI skips unchanged packages entirely
React / RN	Turborepo	Task-graph-aware builds with caching; `dependsOn: ["^build"]` ensures correct order

Flutter: Melos Selective Execution


melos run test --since=main    # Only test packages changed since main
melos run analyze              # Static analysis across all packages

Angular: Nx Remote Caching

sdks-angular uses @engineering11/remotecache backed by a GCP bucket. When a package hasn’t changed, Nx pulls the cached build artifact instead of rebuilding:


nx run-many --target=build --parallel   # Only builds what changed
nx affected:build                       # Only builds packages affected by the current diff

This applies to builds, tests, and linting — dramatically reducing CI times across 26 libraries.

React: Turborepo Caching

Turborepo caches .next/**, dist/**, and build/** outputs. Tasks declare dependencies (dependsOn: ["^build"]) so Turborepo only rebuilds downstream packages when upstream outputs change.

Runtime Performance

Code Splitting & Lazy Loading

Platform	Pattern
Flutter	Module facades with `lazyPut` — DI registrations are deferred until first use
Angular	Lazy-loaded feature modules via `loadChildren` — code is fetched per route
React (Web)	Next.js App Router with automatic code splitting per route + Turbopack for fast dev builds
React Native	Expo Router with file-based route splitting

Efficient State Updates

Each platform minimizes unnecessary re-renders/rebuilds:

Platform	Pattern	How It Helps
Flutter	`SelectValueListenableBuilder`	Only rebuilds when a selected slice of state changes
Angular	ComponentStore `select()` with `distinctUntilChanged`	Selectors emit only when the selected value actually changes
React / RN	TanStack Query `select` + structural sharing	Queries only trigger re-renders when selected data changes; structural sharing avoids unnecessary object creation

Server-Side Rendering (Web)

Platform	Capability
Angular	`seed-marketing` (sdks-angular) provides an SSR seed app for marketing/SEO pages
React	Next.js 15 SSR with App Router — pages render on the server, reducing time-to-first-paint. Server-side auth via `next-firebase-auth-edge` validates tokens before the page even loads.

Tree-Shaking

Platform	How
Flutter	Dart’s tree-shaking eliminates unused code at compile time
Angular	`e11-` components use secondary entry points — apps only bundle the components they import
React	tsup builds with CJS + ESM output and `peerDependencies` externalized; Tailwind v4 purges unused CSS

Data Layer Performance

Caching

Platform	Caching Layer
Flutter	DI container with `lazyPut(fenix: true)` — factories survive disposal and recreate on next access
Angular	Nx remote build cache (build-time); ComponentStore in-memory state (runtime)
React / RN	TanStack Query — automatic request deduplication, configurable stale times, background refetching, optimistic updates

Realtime Subscriptions

All platforms provide Firestore realtime streams that push changes to the client instead of polling:

Flutter: FirestoreRepository.streamDocument(), streamCollection()
Angular: Firestore service subscriptions via onSnapshot
React / RN: useCollectionQuery with { subscribe: true } — TanStack Query manages the subscription lifecycle

Pagination

Flutter: Cursor-based pagination in Firestore repositories
React / RN: useCollectionInfiniteQuery — infinite scroll with automatic page management and cache

Mobile Performance

Capability	Flutter	React Native
OTA Updates	—	Expo Updates — ship fixes without app store review
App Size	Tree-shaking at compile time; environment-specific builds exclude unused SDKs	EAS Build managed profiles with dev/prod optimizations
Startup	Lazy DI registration — SDKs register services on first use, not at launch	Provider composition — services initialize in order as the tree mounts

What You Get

Build caching and incremental builds across all platforms
Lazy loading and code splitting pre-configured
Efficient state selectors that minimize re-renders
Realtime data subscriptions instead of polling
SSR for web (React) reducing time-to-first-paint
Tree-shakable component libraries
TanStack Query caching with deduplication and background refetching (React/RN)

What You Build on Top

Product-specific query caching strategies (stale times, prefetching)
Optimistic updates for product-specific mutations
Custom lazy-loading boundaries for large features
Performance profiling for product-specific bottlenecks

Next Steps

State Management — How state patterns minimize re-renders
Architecture — Layered architecture and SDK composition
Build & Deployment — Full CI/CD pipeline details