Skip to content
academia.sh
tr
Log in

Course Intermediate

Application Architecture: Routing, State and Data

By the end of this course

Start course

01

Routing

Translating the address into a view: setting up the route matcher, the nested route tree and layout chain, parameter and query state, access tied to authorization, and route-based bundle splitting.

  1. 01 Client-Side Routing The layer that translates the address into a view; the route table, resolving path patterns, sorting by specificity, parameter extraction, intercepting link clicks, and the responsibilities of the navigation cycle.
  2. 02 Nested Routes and Layouts Defining routes as a tree; layout components and the outlet, the index route, the active layout chain produced from a match, the shell preserved during navigation, and handling parameter changes separately.
  3. 03 Route Parameters and Query Carrying state in the address; separating the path parameter from query state, reading and validating through a schema, omitting defaults from the address, canonical form, resetting dependent parameters, and the history entry decision.
  4. 04 Route Guards Access tied to authorization; route guards inherited through the route tree, allow–redirect–hold decisions, handling the unknown-identity state separately, validating the return address, and the limits of client-side enforcement.
  5. 05 Code Splitting and Lazy Loading Splitting the bundle along route boundaries; the dependency closure, forming chunks by usage signature, measuring the initial load cost, the extra download per navigation, prefetching, and the waiting and error states splitting introduces.

02

State Management

Placing state according to its kind — the centralized store and reducers, atom-based fine-grained reactivity, the server state cache, optimistic updates, and persistence.

  1. 01 State Types Classifying state by kind — local, shared, URL, and server state, along with derived values; the decision procedure that places each kind, the single source of truth principle, and the cost of misplacement.
  2. 02 Centralized Store Pattern The pattern that collects state in one place — one-way data flow, the pure reducer, the action contract, filtering unnecessary notifications with selectors, where middleware fits, and the pattern's indirection cost.
  3. 03 Atom-Based Approaches Fine-grained reactive state — atom and derived atom, the dependency graph, invalidation propagation and lazy computation, comparing recompute and notification counts against the centralized store, and the graph model's cost.
  4. 04 Server State Management The client-side copy of remote data — the cache key, the freshness window, in-flight deduplication, serving stale while revalidating in the background, invalidation after a write, the cache time, and refetch triggers.
  5. 05 Optimistic Updates Reflecting a change onto the screen without waiting for the response — how snapshot-based rollback breaks under concurrent changes, the pending mutation layer, reconciliation with the server response, and where optimism does not apply.
  6. 06 Persistent State Writing state to storage — which slice gets persisted, per-slice versioning and the migration chain, merging with defaults, diluting the cost of writes, the collision between two tabs, and establishing the initial state.

03

Data Access

The application's layer for talking to the server — the request layer's error contract, cache normalization in query-based access, data that arrives as a stream, a view-level state machine, and a retry scheme against network instability.

  1. 01 REST Client The request layer as the application's single gateway for talking to the server — the four classes of the error contract, mapping status codes to errors, cancellation and timeouts, and the design of resource addresses.
  2. 02 GraphQL Client Field selection moving to the client, naming repeated field sets with fragments, normalizing the nested response into an identity-based store, and partial success joining the error contract.
  3. 03 Real-Time Data Carrying data the server produces on its own to the client — the choice among polling, event streams, and sockets; parsing the stream format; resuming a dropped connection by id; and applying incoming events to state.
  4. 04 Loading and Error States Reducing the states a view can be in while it waits for data to a finite set — the contradictions logical flags produce, the transition table, filtering race conditions with a stamp, and each state's counterpart on screen.
  5. 05 Retry and Backoff Which errors get retried automatically, the math of exponential backoff and jitter, the server's suggested wait, the retry budget, and a circuit breaker that stops sending the request after consecutive failures.

04

Forms and Identity

Flows that take data from the user and recognize the user: holding form state, validation schemas that run on both sides, accessible error presentation, token storage choices, session renewal, and adapting the application to language.

  1. 01 Form State Management Whether a field's value lives in the document or in the application's state, the notification cost of the two approaches, the information form state carries besides values, and the role of the initial value and dirtiness in the submission flow.
  2. 02 Validation Schemas Gathering acceptance rules into a single declaration, transforming raw input into a parsed value, the same schema producing the same result on the client and the server, and keeping the error code separate from the message.
  3. 03 Accessible Error Presentation Programmatically associating the error message with the field, announcing invalidity, building an error summary ordered by document position, moving focus, and the moment at which the message is written.
  4. 04 Authentication in the Browser The distinction between authentication and authorization, comparing session cookies with bearer tokens, the readability of a token's body, a risk–benefit analysis of the three storage options, and what cookie attributes do.
  5. 05 Session Renewal Refreshing a short-lived token without it reaching the user, gathering concurrent authorization errors into a single renewal, the refresh token's rotation and reuse detection, and sign-out taking effect everywhere.
  6. 06 Internationalization Separating text from code, translation catalog and key design, plural rules changing by language, leaving formatting to the platform, direction support, and selecting the locale.

Start typing to search.

↑↓ ↵ Esc navigate · open · close