Skip to content
academia.sh
tr
Log in

Course Intermediate

Component-Based Interface Development

By the end of this course

Start course

01

The Declarative Interface Model

The scaling problems of manual updates, the one-way flow from state to view, the component's input-output contract, binding markup to data, identity preservation in conditional and list rendering, and the reconciliation algorithm.

  1. 01 Why a Framework The scaling problems of updating an interface by hand; how the number of update paths grows, keeping state in two copies, the self-repairing shape of drift, and the work an interface framework takes over.
  2. 02 Declarative Rendering The pure function that produces the view from state; the cycle of one-way flow, the three conditions of purity, the difference between a view description and the tree, and the cost of fully rebuilding the description.
  3. 03 The Component Concept Splitting the view function into pieces; the contract made of a prop, an output callback, and local state, the identity of a component instance, the area re-render spreads through, and which component a piece of state should live in.
  4. 04 Template and Expression Syntax Binding markup to data; compiling a template once and running it many times, separating static and dynamic parts, the scope and limits of expressions, text escaping, and the distinction between attribute and property binding.
  5. 05 Conditional and List Rendering Views with a variable structure; the difference between not producing an element and hiding it, the cost of index matching versus keyed matching in list updates, the criteria for choosing a key, and the preservation of identity.
  6. 06 Reconciliation Comparing the new view description against the previous one; the virtual tree, the three assumptions that make comparison linear, producing the patch list, and a measured comparison against approaches that update without comparing.

02

Component Lifecycle and State

The values that live across a component's renders, batching updates, registering and cleaning up side effects, memoizing derived values, mutable references, providing values through context, error boundaries, suspension, and portals out of the tree.

  1. 01 Local State The value that lives across a component's renders; binding state slots to call order, queuing an update, batching the updates within a single round, the stale value trap, and where in the tree state belongs.
  2. 02 Side Effects How a component synchronizes with the outside world; the purity of rendering, an effect running after the commit phase, comparing the dependency list, the order of the cleanup function, and race conditions in asynchronous effects.
  3. 03 Derived Values Not holding in state a result computable from other values; the single source of truth criterion, the costs of writing a derivation into state, memoization's effect on recomputation count, the difference referential stability produces downstream, and memoization's own cost.
  4. 04 References Values that live across renders but do not start a re-render when they change; the two axes of storage forms, the box filling during the commit phase, the rule against touching the box during a render, and passing access to a document node across a component boundary.
  5. 05 Context Passing Providing a value in the tree and reading it at any node below; the problem with prop drilling, the provider resolving upward, the nearest provider shadowing, the effect of the provided value's identity on consumer count, and where context does not fit.
  6. 06 Error Boundaries Isolating an error thrown during rendering within the component tree; why a half-finished tree is not left in place, the nearest boundary catching it, the effect of boundary placement on the number of components remaining on screen, errors that fall outside the call stack being out of scope, and recovery.
  7. 07 Suspense and Loading States A component whose data is not ready halting its render and signaling the nearest suspense boundary; the invalid combinations manually held flags produce, the request waterfall boundary placement exposes, measuring spinner flash, and preserving old content during transitions.
  8. 08 Portals A subtree keeping its place in the component tree while rendering to a different node in the document tree; clipping and stacking constraints, the two trees separating, the event path and context resolution following the component tree, the conditions on the target node, and accessibility obligations.

03

Composition and Reuse

Comparing wrapping with slot-based composition, separating logic from view, component families that work together, presentational-container separation, headless components, and designing defaults with prop spreading.

  1. 01 Composition Patterns Comparing the wrapper component with slot-based composition; the option explosion, measuring prop drilling, composition over inheritance, and the condition under which each pattern is correct.
  2. 02 Custom Hooks and Composable Functions Units that package state and side effects without producing markup; the call-order rule for position-based hooks, scope cleanup for functions that run once at setup, and a comparison of the two models.
  3. 03 Compound Components A component family sharing a single piece of state; the effect of implicit sharing on the prop surface, the component building the relational attributes itself, and checking the implicit contract at runtime.
  4. 04 Presentational and Container Separation Separating the responsibility that fetches data from the responsibility that produces the view; measuring the separation by the number of test doubles, using a single presentational component with two containers, and where the separation goes too far.
  5. 05 Headless Components Detaching behavior from view; writing the option list as a pure state machine, deriving accessibility attributes from state, testing it with event sequences, and using the same behavior with two views.
  6. 06 Component API Design The merge rules for prop spreading, the cumulative combination of classes and listeners, reserved fields, the ownership decision between controlled and uncontrolled mode, and the backward compatibility of the prop surface.

04

Framework Families

The update models, costs, and selection criteria of framework families that hold a virtual tree, track dependencies at runtime, compile reactivity at compile time, and offer an integrated contract.

  1. 01 Virtual-Tree-Based Frameworks The update model that produces a new tree from state and compares it with the previous one; counting the work a one-cell change produces, the key's role in reconciliation, and memoization's trade-off.
  2. 02 Reactive Dependency Tracking Fine-grained update built from dependencies recorded at read time; the amount of work the same table change produces in this family, the ledger's cost, consistency under diamond dependency, and batched writes.
  3. 03 Compiler-Based Approaches Resolving dependencies at compile time; a small transformer that turns a template into update code, reading the generated code, the soundness limit of analysis, and the cost of the compile step.
  4. 04 Full-Stack Frameworks Frameworks that gather routing, the form model, and dependency resolution into a single contract; how scoped dependency resolution works, the singleton trap, counting the decision surface, and the cost of contract unity.
  5. 05 Framework Selection Where criteria come from, writing weights explicitly, testing the ranking with sensitivity analysis, measuring the decision's reversibility at the line level, and putting the decision in writing.

Start typing to search.

↑↓ ↵ Esc navigate · open · close