Appendix A - Front-End Architectural Rosetta Stone

Vanilla JavaScript, React, and Vue Compared by Architectural Concept

This appendix is a translation guide.

Its purpose is not to teach three separate technologies.

Instead, it takes the architectural ideas used throughout this book and shows how the same responsibility is commonly expressed in:

• browser-platform / Vanilla JavaScript;
• React;
• Vue.

The key word is responsibility.

The implementations are not identical.

For example:

• React primarily expresses UI as repeated render calculations followed by reconciliation and commit;
• Vue tracks reactive dependencies and updates affected rendering/effects;
• browser-platform JavaScript gives you lower-level DOM, events, classes, modules, Custom Elements, and Web APIs from which you build your own update model.

Therefore, this appendix should not be read as:

React API X
=
Vue API Y
=
Vanilla API Z

It should be read as:

If I understand the architectural responsibility, what is the closest normal way to express it in each environment?

That makes the appendix useful when:

• moving between React and Vue;
• reading an unfamiliar codebase;
• deciding whether a framework abstraction is actually necessary;
• translating a design pattern without copying framework-specific syntax;
• teaching frontend architecture independently of one library.

1. Quick Rosetta Stone

The table is intentionally compact.

The rest of this appendix explains the important differences behind it.

2. Component: What Is the Unit of UI?

Architectural responsibility

A component should own a coherent piece of interface responsibility.

It may define:

• structure;
• inputs;
• output events;
• local state;
• behavior;
• lifecycle.

The architectural question is:

What belongs together, and what deserves its own boundary?

The answer should come before framework syntax.

Browser / Vanilla JavaScript

There is no single mandatory component model.

A component can be represented by:

• a function returning DOM;
• a class;
• a factory;
• a Custom Element;
• a module that mounts/unmounts a region.

A simple function-based component:

export function createStatusBadge(
  {
    label,
    status
  }
) {
  const element =
    document.createElement(
      "span"
    );

  element.className =
    `status-badge status-${status}`;

  element.textContent =
    label;

  return element;
}

Use:

const badge =
  createStatusBadge({
    label:
      "Approved",

    status:
      "success"
  });

container.append(
  badge
);

The function creates one coherent UI unit.

React

A component is normally a function returning JSX.

function StatusBadge({
  label,
  status
}) {
  return (
    <span
      className={
        `status-badge status-${status}`
      }
    >
      {label}
    </span>
  );
}

React calls the component during rendering.

The returned JSX describes desired UI.

Vue

A Vue Single-File Component often separates script and template while remaining one component boundary.

<script setup>
defineProps({
  label: String,
  status: String
});
</script>

<template>
  <span
    :class="[
      'status-badge',
      `status-${status}`
    ]"
  >
    {{ label }}
  </span>
</template>

Vue connects the template to reactive component state and props.

Translation principle

Component
≠
framework syntax

A component is an architectural boundary.

React and Vue provide standardized component runtimes.

Vanilla JavaScript makes you define more of that runtime behavior yourself.

3. Inputs: Properties Passed Into a Component

Architectural responsibility

Components need external information.

Examples:

label
product
selected
disabled

A healthy component input API should be:

• understandable;
• narrow;
• stable;
• explicit.

Vanilla JavaScript

Function arguments:

createButton({
  label:
    "Save",

  disabled:
    false
});

Custom Element properties:

button.label =
  "Save";

Custom Element attributes for serializable markup-facing configuration:

<app-button
  label="Save"
  disabled
></app-button>

Remember:

attribute
and
JavaScript property

are related but not identical concepts.

React

Props:

<ActionButton
  label="Save"
  disabled={false}
/>

Inside:

function ActionButton({
  label,
  disabled
}) {
  // props are component inputs
}

React props are read-only inputs for a render.

Vue

Props:

<ActionButton
  label="Save"
  :disabled="false"
/>

Declaration:

<script setup>
const props =
  defineProps({
    label:
      String,

    disabled:
      Boolean
  });
</script>

Vue props follow a one-way-down data flow.

Children should normally request changes rather than mutate parent-owned values.

4. Outputs: How a Child Communicates Upward

A child often needs to say:

clicked
selected
changed
closed
submitted

The architectural principle is:

The child reports intent; the owner decides what state changes.

5. Callback Output

Vanilla JavaScript

function createDeleteButton({
  onDelete
}) {
  const button =
    document.createElement(
      "button"
    );

  button.textContent =
    "Delete";

  button.addEventListener(
    "click",
    () => {
      onDelete();
    }
  );

  return button;
}

React

function DeleteButton({
  onDelete
}) {
  return (
    <button
      onClick={
        onDelete
      }
    >
      Delete
    </button>
  );
}

Callback props are a normal React communication pattern.

Vue

Vue can receive callback props too, but framework-native component communication commonly uses emitted events.

<script setup>
const emit =
  defineEmits([
    "delete"
  ]);
</script>

<template>
  <button
    @click="
      emit('delete')
    "
  >
    Delete
  </button>
</template>

Parent:

<DeleteButton
  @delete="
    handleDelete
  "
/>

6. DOM Events vs Component Events

These should not be confused.

DOM:

button.addEventListener(
  "click",
  ...
);

React:

<button
  onClick={...}
/>

Vue:

<button
  @click="..."
>

These represent browser interaction.

Component-level communication is conceptually higher-level:

product-selected
dialog-closed
save-requested

A good component API often communicates domain intent rather than exposing every internal DOM event.

7. Custom Events in Vanilla Components

A Custom Element can emit a DOM CustomEvent.

this.dispatchEvent(
  new CustomEvent(
    "product-selected",
    {
      detail: {
        productId:
          this.productId
      },

      bubbles:
        true
    }
  )
);

Consumer:

element.addEventListener(
  "product-selected",
  event => {
    console.log(
      event.detail.productId
    );
  }
);

Architecturally, this is close to Vue component emits.

React usually expresses the same parent-child contract through callback props rather than DOM custom events.

8. Composition: Passing Interface Structure

Components should not need a prop for every possible layout variation.

Composition lets the parent provide child content or behavior.

9. Vanilla Composition

A function can accept DOM content:

function createPanel({
  header,
  body
}) {
  const panel =
    document.createElement(
      "section"
    );

  panel.append(
    header,
    body
  );

  return panel;
}

Custom Elements can use native slots:

<info-panel>
  <h2 slot="header">
    Profile
  </h2>

  <p>
    Account information
  </p>
</info-panel>

Shadow DOM template:

<header>
  <slot name="header"></slot>
</header>

<div>
  <slot></slot>
</div>

Native Web Component slots and Vue slots are related composition ideas, though their runtimes differ.

10. React Composition

React uses children.

function Panel({
  children
}) {
  return (
    <section
      className="panel"
    >
      {children}
    </section>
  );
}

Use:

<Panel>
  <h2>
    Profile
  </h2>

  <p>
    Account information
  </p>
</Panel>

Multiple composition regions are commonly modeled as props:

<PageLayout
  header={
    <Header />
  }

  sidebar={
    <Sidebar />
  }
>
  <Content />
</PageLayout>

11. Vue Composition

Default slot:

<template>
  <section
    class="panel"
  >
    <slot />
  </section>
</template>

Use:

<Panel>
  <h2>
    Profile
  </h2>

  <p>
    Account information
  </p>
</Panel>

Named slots:

<PageLayout>
  <template #header>
    <Header />
  </template>

  <template #sidebar>
    <Sidebar />
  </template>

  <Content />
</PageLayout>

12. Children and Slots Solve the Same Architectural Problem

The problem is:

The container should own layout/behavior without knowing every concrete nested UI element.

React normally calls this:

children / composition

Vue normally calls this:

slots

Web Components use:

slots

as a browser primitive.

Do not translate syntax mechanically.

Translate the responsibility.

13. Scoped Composition

Sometimes the container needs to expose data to parent-provided content.

Architectural idea:

container owns behavior/data
consumer owns rendering

React may use a render prop:

<DataSource>
  {data => (
    <ProductList
      products={data}
    />
  )}
</DataSource>

Vue may use a scoped slot:

<DataSource
  v-slot="{ data }"
>
  <ProductList
    :products="data"
  />
</DataSource>

Vanilla code may use a callback:

createDataSource({
  render(data) {
    return createProductList(
      data
    );
  }
});

This is one of the clearest Rosetta Stone mappings.

14. Local State

Architectural responsibility

Local state belongs to one UI boundary.

Examples:

dialog open
selected tab
temporary input
hovered row

15. Vanilla Local State

You choose the update mechanism.

function createCounter() {
  let count =
    0;

  const button =
    document.createElement(
      "button"
    );

  function render() {
    button.textContent =
      `Count: ${count}`;
  }

  button.addEventListener(
    "click",
    () => {
      count +=
        1;

      render();
    }
  );

  render();

  return button;
}

Here:

state
→ explicit render function

16. React Local State

import {
  useState
} from "react";

function Counter() {
  const [
    count,
    setCount
  ] =
    useState(0);

  return (
    <button
      onClick={
        () =>
          setCount(
            count + 1
          )
      }
    >
      Count: {count}
    </button>
  );
}

React state update:

requests another render

React recalculates component output.

17. Vue Local State

<script setup>
import {
  ref
} from "vue";

const count =
  ref(0);
</script>

<template>
  <button
    @click="
      count++
    "
  >
    Count:
    {{ count }}
  </button>
</template>

Vue tracks the reactive count value used by the template.

Changing it causes dependent UI work.

18. Local State Translation

Vanilla:
state + explicit update logic

React:
state update → render/reconcile/commit

Vue:
reactive dependency change → affected update

The user-visible responsibility is the same.

The runtime mechanism is not.

19. ref Means Different Things in React and Vue

This is an important terminology trap.

React:

const elementRef =
  useRef(null);

commonly represents a mutable reference that does not itself trigger rendering when .current changes.

Vue:

const count =
  ref(0);

normally creates a reactive value.

These concepts are not equivalent despite sharing the word ref.

Vue also has template refs, which are much closer to React DOM refs.

20. Object State

Vanilla

const state = {
  query:
    "",

  selectedId:
    null
};

You decide whether mutations require rendering.

React

const [
  filters,
  setFilters
] =
  useState({
    query:
      "",

    status:
      "all"
  });

Updates usually create a new value:

setFilters(
  current => ({
    ...current,

    query:
      "monitor"
  })
);

Identity matters to React state/update patterns.

Vue

const filters =
  reactive({
    query:
      "",

    status:
      "all"
  });

Then:

filters.query =
  "monitor";

Vue observes reactive property access/mutation.

Again, the programming models differ.

21. Derived State

Suppose:

subtotal
=
price × quantity

Usually do not store all three.

Store:

price
quantity

derive:

subtotal

This architectural rule is framework-independent.

22. Vanilla Derived Value

function subtotal(
  price,
  quantity
) {
  return (
    price *
    quantity
  );
}

or:

const viewModel = {
  get subtotal() {
    return (
      this.price *
      this.quantity
    );
  }
};

23. React Derived Value

Usually calculate during render.

function LineItem({
  price,
  quantity
}) {
  const subtotal =
    price *
    quantity;

  return (
    <output>
      {subtotal}
    </output>
  );
}

If the calculation is genuinely expensive and repeated unnecessarily, memoization may be appropriate:

const result =
  useMemo(
    () =>
      expensiveTransform(
        data
      ),

    [data]
  );

Do not use an Effect merely to copy derived data into state.

24. Vue Derived Value

For simple expressions, the template can calculate directly.

For reusable/cached reactive derivation:

const subtotal =
  computed(
    () =>
      price.value *
      quantity.value
  );

Vue tracks dependencies automatically.

25. Derived-State Rosetta Stone

The principle is more important than the API.

26. Effects: Synchronizing with Something Outside Normal Rendering

An effect exists when UI state must synchronize with something external.

Examples:

• browser event listener;
• network subscription;
• third-party widget;
• media element;
• timer;
• WebSocket.

Effects should not become a general-purpose “run code when something changes” mechanism for ordinary derivation.

27. Vanilla Effect

function mountOnlineStatus(
  output
) {
  function update() {
    output.textContent =
      navigator.onLine
        ? "Online"
        : "Offline";
  }

  window.addEventListener(
    "online",
    update
  );

  window.addEventListener(
    "offline",
    update
  );

  update();

  return () => {
    window.removeEventListener(
      "online",
      update
    );

    window.removeEventListener(
      "offline",
      update
    );
  };
}

The returned function is cleanup.

28. React Effect

useEffect(
  () => {
    function handleStatus() {
      setOnline(
        navigator.onLine
      );
    }

    window.addEventListener(
      "online",
      handleStatus
    );

    window.addEventListener(
      "offline",
      handleStatus
    );

    return () => {
      window.removeEventListener(
        "online",
        handleStatus
      );

      window.removeEventListener(
        "offline",
        handleStatus
      );
    };
  },
  []
);

Architectural meaning:

component is synchronized with an external system

React Effects should generally not be used merely to calculate render data.

29. Vue Watcher / Lifecycle Effect

One possibility:

onMounted(
  () => {
    window.addEventListener(
      "online",
      update
    );

    window.addEventListener(
      "offline",
      update
    );
  }
);

onUnmounted(
  () => {
    window.removeEventListener(
      "online",
      update
    );

    window.removeEventListener(
      "offline",
      update
    );
  }
);

For state-change-triggered side effects:

watch(
  query,
  async value => {
    // side effect
  }
);

or:

watchEffect(
  () => {
    // reactive dependencies
    // used in this effect
  }
);

30. Effect Translation Warning

Do not mechanically translate:

React useEffect
→ Vue watchEffect

They overlap conceptually but belong to different reactivity/rendering models.

Ask instead:

What external system or side effect am I synchronizing?

Then choose the most natural mechanism.

31. Event Handler vs Effect

This distinction is architectural.

User presses:

Buy

The purchase request is caused by that event.

Put it in the event path.

Do not create:

state: shouldBuy = true
↓
Effect watches shouldBuy
↓
POST /buy

unless architecture truly requires indirection.

This principle holds across Vanilla, React, and Vue.

32. Lifecycle Setup and Cleanup

A component may acquire resources:

listener
timer
subscription
socket
observer

It must release them.

Vanilla

Explicit mount/unmount:

const cleanup =
  mountFeature();

cleanup();

Custom Elements:

connectedCallback() {
  // setup
}

disconnectedCallback() {
  // cleanup
}

React

Effect setup + returned cleanup:

useEffect(
  () => {
    const connection =
      connect();

    return () => {
      connection.close();
    };
  },
  []
);

Vue

Lifecycle hooks:

onMounted(
  () => {
    // setup
  }
);

onUnmounted(
  () => {
    // cleanup
  }
);

Watchers/effects also support cleanup mechanisms for invalidated async work.

33. Direct DOM Access

Declarative frameworks reduce direct DOM manipulation.

They do not eliminate it.

Legitimate examples:

• focus;
• measurement;
• third-party library integration;
• media control.

34. Vanilla DOM Reference

You already have direct platform access.

const input =
  document.querySelector(
    "#search"
  );

input.focus();

Prefer keeping references when you already created the element rather than repeatedly querying.

35. React Ref

const inputRef =
  useRef(null);

function focusSearch() {
  inputRef.current
    ?.focus();
}

return (
  <input
    ref={inputRef}
  />
);

A ref is an escape hatch to a rendered DOM node or other mutable value.

36. Vue Template Ref

<script setup>
import {
  useTemplateRef
} from "vue";

const input =
  useTemplateRef(
    "search"
  );

function focusSearch() {
  input.value
    ?.focus();
}
</script>

<template>
  <input
    ref="search"
  >
</template>

The exact helper syntax can vary with Vue version/style, but the architectural idea is:

obtain a direct reference to rendered DOM

37. Do Not Use DOM References for Ordinary Data Flow

Weak architecture:

parent queries child's DOM
to discover selected value

Stronger architecture:

child reports value
through component API

Refs should remain escape hatches.

38. Conditional Rendering

Vanilla

if (
  user
) {
  container.append(
    createProfile(
      user
    )
  );
}

Or show/hide an existing node:

panel.hidden =
  !open;

React

{
  user
    ? (
      <Profile
        user={user}
      />
    )
    : (
      <SignIn />
    )
}

or:

{
  open &&
  <Dialog />
}

Vue

<Profile
  v-if="user"
  :user="user"
/>

<SignIn
  v-else
/>

For visibility without removing the element:

<Panel
  v-show="open"
/>

39. Render vs Hide

Architectural distinction:

not in DOM

vs:

in DOM but hidden

This affects:

• lifecycle;
• state preservation;
• accessibility;
• performance.

Choose based on behavior, not syntax preference.

40. List Rendering

Vanilla

for (
  const product
  of products
) {
  list.append(
    createProductRow(
      product
    )
  );
}

If updating in place, you need your own identity strategy.

React

{
  products.map(
    product => (
      <ProductRow
        key={
          product.id
        }

        product={
          product
        }
      />
    )
  )
}

The key helps React reason about item identity across renders.

Vue

<ProductRow
  v-for="
    product
    in products
  "
  :key="
    product.id
  "
  :product="
    product
  "
/>

Keys similarly express identity across list updates.

41. Key Means Identity, Not “Silence the Warning”

Good:

database ID
stable product ID

Risky:

array index

when ordering/insertion changes.

The architectural question is:

What makes this logical item the same item across updates?

That question applies beyond frameworks.

42. Controlled and Uncontrolled Components

A controlled component receives its important state from an owner.

An uncontrolled component owns more of that state internally.

The terms are common in React but the architectural idea is universal.

43. Controlled Toggle - Vanilla

function updateToggle(
  button,
  checked
) {
  button.setAttribute(
    "aria-pressed",
    String(
      checked
    )
  );
}

The caller owns:

checked

and tells the view what to display.

44. Controlled Toggle - React

function Toggle({
  checked,
  onChange
}) {
  return (
    <button
      aria-pressed={
        checked
      }

      onClick={
        () =>
          onChange(
            !checked
          )
      }
    >
      Toggle
    </button>
  );
}

State lives in the parent.

45. Controlled Toggle - Vue

<script setup>
defineProps({
  modelValue:
    Boolean
});

const emit =
  defineEmits([
    "update:modelValue"
  ]);
</script>

<template>
  <button
    :aria-pressed="
      modelValue
    "

    @click="
      emit(
        'update:modelValue',
        !modelValue
      )
    "
  >
    Toggle
  </button>
</template>

Parent can use:

<Toggle
  v-model="enabled"
/>

46. Uncontrolled Component

The component/browser owns state.

Example:

input's current value

may remain in the DOM until submission.

Vanilla:

const data =
  new FormData(
    form
  );

React uncontrolled input:

<input
  name="email"
  defaultValue=""
/>

Then read through form submission/ref.

Vue often encourages reactive form bindings with v-model, but native form behavior remains available.

The right choice depends on ownership requirements.

47. Form Inputs

Vanilla

input.addEventListener(
  "input",
  event => {
    state.email =
      event.target.value;
  }
);

or use native form submission:

const data =
  new FormData(
    form
  );

React

Controlled:

<input
  value={email}

  onChange={
    event =>
      setEmail(
        event.target.value
      )
  }
/>

Uncontrolled:

<input
  name="email"
  defaultValue=""
/>

Vue

<input
  v-model="email"
>

Conceptually, v-model connects:

current JavaScript state
↔
appropriate input property/event

It is convenient syntax over a controlled synchronization pattern.

48. Form Architecture Does Not Reduce to Binding Syntax

For complex forms, the important questions remain:

• who owns values?
• what is dirty?
• what is touched?
• where is validation?
• what is server authority?
• how is draft state preserved?

React and Vue syntax differ.

The architecture does not.

49. Lifting State Up

When two siblings need coordinated state:

Sibling A
Sibling B

move ownership to their closest sensible common owner.

Vanilla

A parent/controller object may own:

let selectedId =
  null;

and call both child update functions.

React

Parent owns state:

const [
  selectedId,
  setSelectedId
] =
  useState(null);

<List
  selectedId={
    selectedId
  }

  onSelect={
    setSelectedId
  }
/>

<Details
  productId={
    selectedId
  }
/>

Vue

Parent owns reactive state:

const selectedId =
  ref(null);

Template:

<ProductList
  :selected-id="
    selectedId
  "

  @select="
    selectedId = $event
  "
/>

<ProductDetails
  :product-id="
    selectedId
  "
/>

50. Single Source of Truth

The principle is:

one authoritative owner
per piece of state

Not:

all state must be global

A large application can have hundreds of local sources of truth, each for a different concern.

51. Dependency Sharing Through a Tree

Sometimes a deeply nested component needs:

theme
locale
current account
form context
service

Passing the same prop through every intermediate component can be noisy.

52. Vanilla Dependency Sharing

Options include:

• module import;
• closure;
• service object;
• Custom Element property;
• DOM event;
• explicit dependency injection container.

Example:

export function createApp({
  api,
  locale
}) {
  return createDashboard({
    api,
    locale
  });
}

Explicit dependency passing is often preferable to global singletons.

53. React Context

Create:

const LocaleContext =
  createContext(
    "en"
  );

Provide:

<LocaleContext
  value="ckb"
>
  <Application />
</LocaleContext>

A descendant can read the nearest provided value through the React Context API.

Context is useful for tree-wide dependencies.

It is not automatically a replacement for all state management.

54. Vue Provide / Inject

Provider:

provide(
  "locale",
  locale
);

Descendant:

const locale =
  inject(
    "locale"
  );

For larger applications/libraries, Symbol keys help avoid collisions.

Vue’s model explicitly resembles dependency injection.

55. Context and Provide/Inject Are Closest Analogues

Both solve:

make dependency available to descendants
without prop drilling through every intermediate layer

But do not overuse them.

Explicit props remain valuable when dependencies are part of the immediate component API.

56. Dependency Injection Is Not Global State

Good injected dependency:

form controller
theme
locale
API service

Potentially poor injected dependency:

every mutable value in the application

The pattern should reduce plumbing without hiding ownership.

57. Reusable Stateful Behavior

Sometimes several components need the same behavior without sharing the same rendered UI.

Examples:

• online status;
• debounced value;
• resize observer;
• API query logic.

58. Vanilla Reusable Behavior

A normal function or class often suffices.

export function subscribeOnline(
  callback
) {
  function handle() {
    callback(
      navigator.onLine
    );
  }

  window.addEventListener(
    "online",
    handle
  );

  window.addEventListener(
    "offline",
    handle
  );

  handle();

  return () => {
    window.removeEventListener(
      "online",
      handle
    );

    window.removeEventListener(
      "offline",
      handle
    );
  };
}

59. React Custom Hook

function useOnlineStatus() {
  const [
    online,
    setOnline
  ] =
    useState(
      navigator.onLine
    );

  useEffect(
    () => {
      function update() {
        setOnline(
          navigator.onLine
        );
      }

      window.addEventListener(
        "online",
        update
      );

      window.addEventListener(
        "offline",
        update
      );

      return () => {
        window.removeEventListener(
          "online",
          update
        );

        window.removeEventListener(
          "offline",
          update
        );
      };
    },
    []
  );

  return online;
}

A custom Hook packages reusable React stateful behavior.

60. Vue Composable

export function useOnlineStatus() {
  const online =
    ref(
      navigator.onLine
    );

  function update() {
    online.value =
      navigator.onLine;
  }

  onMounted(
    () => {
      window.addEventListener(
        "online",
        update
      );

      window.addEventListener(
        "offline",
        update
      );
    }
  );

  onUnmounted(
    () => {
      window.removeEventListener(
        "online",
        update
      );

      window.removeEventListener(
        "offline",
        update
      );
    }
  );

  return {
    online
  };
}

A composable packages reusable Vue reactive/lifecycle behavior.

61. Custom Hook vs Composable

Closest conceptual mapping:

React custom Hook
↔
Vue composable

Both can:

• package framework-aware state;
• package lifecycle;
• package derived values;
• package subscriptions.

They are not interchangeable source code.

They share an architectural purpose.

62. Pure Utility vs Hook/Composable

If code needs no framework reactivity/lifecycle:

export function normalizeSearch(
  value
) {
  return value
    .trim()
    .toLowerCase();
}

keep it a normal function.

Do not turn every helper into:

useSomething

or:

composable

Pure domain logic remains easier to test and reuse.

63. Refs vs State

Use state/reactivity for values that should affect rendered UI.

Use mutable references for values that must persist but do not themselves require a render.

React

State:

const [
  count,
  setCount
] =
  useState(0);

Mutable reference:

const requestId =
  useRef(0);

Changing:

requestId.current

does not by itself request a render.

Vue

Reactive state:

const count =
  ref(0);

For non-reactive mutable data, use ordinary JavaScript variables/objects where appropriate.

A template ref is specifically for a DOM/component reference.

The terminology differs, so translate by behavior rather than name.

64. State Machine Thinking

A workflow may have explicit states:

idle
editing
submitting
success
error

This can be expressed in every environment.

Vanilla:

let status =
  "idle";

React:

const [
  status,
  setStatus
] =
  useState(
    "idle"
  );

Vue:

const status =
  ref(
    "idle"
  );

The architecture is the state transition model.

Framework APIs are storage mechanisms.

65. Reducer Pattern

A reducer expresses:

current state
+
event/action
→
next state

Pure function:

function reducer(
  state,
  action
) {
  switch (
    action.type
  ) {
    case "increment":
      return {
        ...state,
        count:
          state.count + 1
      };

    default:
      return state;
  }
}

This function is framework-neutral.

React has:

useReducer

as a built-in component-state mechanism around reducer logic.

Vue can use the same reducer function inside reactive state management, but does not require one canonical reducer API for local components.

66. Routing

Routing is not fundamentally a framework feature.

It maps:

URL
↔
application state/view

67. Browser Routing Primitives

Platform tools include:

URL
URLSearchParams
location
history.pushState()
history.replaceState()
popstate

Example:

const url =
  new URL(
    location.href
  );

const query =
  url.searchParams
    .get(
      "q"
    );

Navigation:

history.pushState(
  null,
  "",
  "/products?q=monitor"
);

Then application code must render the new route and handle Back/Forward.

68. React Routing

React itself does not define one complete application router.

React applications commonly use:

• a routing library;
• a React framework with integrated routing.

The architectural concepts remain:

path
parameters
query/search params
nested layouts
navigation

Do not confuse a particular router’s API with routing itself.

69. Vue Routing

Vue’s official ecosystem commonly uses Vue Router.

It maps:

routes
route params
query
nested views
navigation

into Vue components/reactivity.

Again, the platform URL remains the underlying browser contract.

70. URL State

Same architectural rule in all three:

Use URL state when it should be:

• reload-safe;
• shareable;
• navigable through Back/Forward;
• bookmarkable.

Examples:

search
filters
sort
page
selected tab when navigational

71. URL State Example

Desired URL:

/products?q=monitor&page=2

Vanilla:

const params =
  new URLSearchParams(
    location.search
  );

const query =
  params.get("q")
  ?? "";

const page =
  Number(
    params.get(
      "page"
    )
    ?? 1
  );

React/Vue routers expose convenience APIs around the same URL state.

The architecture should remain understandable without the convenience layer.

72. Navigation Is Not Just Rendered Component State

Weak:

currentPage = "products"

with no URL change.

Now:

• Back may fail;
• refresh may lose state;
• sharing may fail.

If the state represents navigation, use the browser navigation model.

73. Async Data Fetching

All three ultimately depend on browser/network primitives.

const response =
  await fetch(
    "/api/products"
  );

The architectural questions are:

• who starts the request?
• who owns loading/error state?
• is data cached?
• how is stale data handled?
• how is cancellation handled?
• does the framework/server prefetch it?

74. Vanilla Fetch

async function loadProducts() {
  const response =
    await fetch(
      "/api/products"
    );

  if (
    !response.ok
  ) {
    throw new Error(
      "Request failed"
    );
  }

  return (
    await response.json()
  );
}

Then your own controller/view code manages state.

75. React Fetching

A simple component can fetch through an Effect.

But modern React applications often use:

• router loaders;
• framework server/data APIs;
• server-state libraries;
• server components/framework data mechanisms.

The architectural rule is:

Avoid creating ad hoc request synchronization in every component when the application has a better data boundary.

76. Vue Fetching

A component can fetch in lifecycle code or a watcher.

Larger applications often use:

• route-level loading conventions;
• framework data APIs;
• server-state libraries;
• composables.

Again, architecture should centralize repeated request policy.

77. Do Not Translate Fetching as useEffect ↔ watch

Those are low-level mechanisms.

The stronger translation is:

Where does the application own server state?

Possible answer:

route
server cache
framework loader
feature query module

The same question applies in React and Vue.

78. Loading State

Vanilla:

state.status =
  "loading";

render();

React:

if (
  status ===
  "loading"
) {
  return (
    <Spinner />
  );
}

Vue:

<Spinner
  v-if="
    status ===
    'loading'
  "
/>

Syntax differs.

State modeling remains the important part.

79. Error State

Represent expected operational failure explicitly.

idle
loading
success
error

Avoid:

products = []

meaning both:

not loaded

and:

loaded but empty

State semantics should remain precise in every framework.

80. Cancellation

Platform primitive:

const controller =
  new AbortController();

fetch(
  url,
  {
    signal:
      controller.signal
  }
);

controller.abort();

React/Vue architecture determines where the controller belongs and when cleanup occurs.

The cancellation mechanism itself is browser-standard.

81. Debounced Search

The pattern:

user input
↓
wait briefly
↓
cancel outdated work
↓
request latest query

is independent of framework.

React may package it into a Hook.

Vue may package it into a composable.

Vanilla may package it into a controller/module.

The user problem is the same.

82. Dynamic Imports

Browser platform:

const module =
  await import(
    "./reports.js"
  );

This is standardized JavaScript.

Frameworks build route/component lazy-loading APIs on top of it.

83. React Lazy Boundary

A React environment may use framework-specific lazy route/component capabilities.

Underlying idea:

do not require code until the boundary is needed

Do not memorize one lazy API as the architectural concept.

84. Vue Async Component

Vue provides framework-level async component capabilities, and routers/frameworks can lazy-load route components.

Again:

dynamic import
+
rendering integration

is the underlying pattern.

85. Direct DOM Events

Vanilla

button.addEventListener(
  "click",
  handleClick
);

React

<button
  onClick={
    handleClick
  }
/>

Vue

<button
  @click="
    handleClick
  "
>

All eventually represent browser interaction.

Frameworks normalize integration into their component models.

86. Event Delegation

Vanilla:

list.addEventListener(
  "click",
  event => {
    const button =
      event.target.closest(
        "[data-product-id]"
      );

    if (
      !button
    ) {
      return;
    }

    // ...
  }
);

React and Vue framework runtimes manage event integration, but event delegation as an application technique may still be useful in direct DOM/custom integration.

Do not assume framework event syntax means browser event propagation disappeared.

87. Preventing Default Behavior

Vanilla:

event.preventDefault();

React:

function handleSubmit(
  event
) {
  event.preventDefault();
}

Vue can call it directly or use a template event modifier:

<form
  @submit.prevent="
    handleSubmit
  "
>

The browser concept is still:

cancel default action

88. Composition Over Inheritance

All three environments generally benefit from composing smaller responsibilities rather than building deep UI inheritance hierarchies.

Vanilla:

functions
modules
Custom Elements

React:

component composition
Hooks

Vue:

component composition
slots
composables

Inheritance can exist in JavaScript.

It is rarely the primary UI composition strategy.

89. Wrapper Component

Architectural responsibility:

add layout/behavior around nested content

Vanilla:

function createCard(
  child
) {
  const card =
    document.createElement(
      "section"
    );

  card.className =
    "card";

  card.append(
    child
  );

  return card;
}

React:

function Card({
  children
}) {
  return (
    <section
      className="card"
    >
      {children}
    </section>
  );
}

Vue:

<template>
  <section
    class="card"
  >
    <slot />
  </section>
</template>

90. Headless Behavior

A headless abstraction owns:

state
interaction
accessibility behavior

while consumer owns:

visual rendering

Possible forms:

Vanilla:

controller + DOM/event contract

React:

Hook + render composition

Vue:

composable + slot/component API

The pattern is architectural.

Not tied to one framework.

91. Compound Components

Compound components expose several coordinated subcomponents.

Conceptual API:

Tabs
Tabs.List
Tabs.Tab
Tabs.Panel

React can implement coordination through Context.

Vue can implement it through provide/inject.

Web Components can coordinate through DOM relationships, events, and properties.

The risk in every environment is hidden coupling.

Compound components should represent a genuinely cohesive widget.

92. Service / Dependency Object

Some dependencies are not UI.

Example:

const api = {
  async getProduct(
    id
  ) {
    // ...
  }
};

This can remain plain JavaScript and be used from React or Vue.

Do not wrap every service inside framework state unless its lifecycle/reactivity requires it.

93. Domain Logic Should Stay Framework-Light

Example:

export function canApprove(
  user,
  invoice
) {
  return (
    user.permissions
      .includes(
        "invoice.approve"
      )
    &&
    invoice.status ===
      "pending"
  );
}