AI Feedback Systems - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    pre: "pre",
    code: "code",
    h2: "h2",
    a: "a"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "While working on the Clarity Hub NLP API, we had a common use-case where we would create embeddings from text, and use those embedding to determine cosine similarity with other embeddings. Doing this required loading all of the embeddings in-memory and then computing cosine similarity with the entire dataset. As the dataset grew, this operation would get incredibly slow."
    }), "\n", _jsx(_components.p, {
      children: "We worked on a fast way to do these lookups using ranges that can be performed in any database. This approach was never implemented, but we worked on multiple proof-of-concepts to test out our ideas. The goal was to take an input text, compute an embedding, load the entire embedding datasets loaded into an AWS lambda, find the most similar set of vectors, and return the top N similar vectors in one use-case. To tackle that, we came up with the following idea."
    }), "\n", _jsx(_components.p, {
      children: "Given a vector A, compute is similar to a unit vector U of the same dimension as A. So:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-cpp",
        children: "dim(U) = dim(A)\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "And"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-cpp",
        children: "S_u = cos(θ) = A · U / ||A|| x ||U||\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Where S_u is the similarity with the unit vector. The unit vector just needs to be the same across all samples."
    }), "\n", _jsx(_components.p, {
      children: "For each embedding, store the calculated S_u."
    }), "\n", _jsx(_components.p, {
      children: "If we want to find similar vectors for a new vector B, then we compute is similarity to the unit vector."
    }), "\n", _jsxs(_components.p, {
      children: ["Then, we can query the database for vectors within an interval of ", _jsx(_components.code, {
        children: "[S_u - ε, S_u + ε]"
      }), " . This will give us a subset of the dataset that have similar similarities with the unit vector."]
    }), "\n", _jsx(_components.p, {
      children: "We can re-query increasing or decreasing ε until the top N results are found."
    }), "\n", _jsx(_components.p, {
      children: "To further improve accuracy, we can also re-compute the similarity score using cosine similarity with the subset of vectors, which is still much faster then computing the similarity against the entire dataset."
    }), "\n", _jsxs(_components.p, {
      children: ["This approach begins to break down as the cosine similarity to the unit vector chosen gets very large (", _jsx(_components.code, {
        children: "> 0.4"
      }), ").  We end up with the possibility of matching against vectors that are of opposite directions – the least similar vectors to the original input vector."]
    }), "\n", _jsx(_components.p, {
      children: "One solution to workaround this could be to pre-compute the similarity of a vector against unit vectors for each dimension of the input vector. But this could be 512 or more cosine similarity calculations for modern embeddings just to precompute the data. Once all unit vector similarities are calculated and stored, the range query against the database would be made against the column for which the input vector’s similarity is closest to 0."
    }), "\n", _jsx(_components.p, {
      children: "There are a lot of real solutions to this problem, but this was a fun exercise to think about and work on."
    }), "\n", _jsx(_components.h2, {
      children: "Further reading"
    }), "\n", _jsxs(_components.p, {
      children: ["Vector similarity search is becoming increasingly popular and integrated into databases. Here are some resources to learn more: ", _jsx(_components.a, {
        href: "https://zilliz.com/blog/vector-similarity-search",
        children: "Vector Similarity Search"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>While working on the Clarity Hub NLP API, we had a common use-case where we would create embeddings from text, and use those embedding to determine cosine similarity with other embeddings. Doing this required loading all of the embeddings in-memory and then computing cosine similarity with the entire dataset. As the dataset grew, this operation would get incredibly slow.</p>
<p>We worked on a fast way to do these lookups using ranges that can be performed in any database. This approach was never implemented, but we worked on multiple proof-of-concepts to test out our ideas. The goal was to take an input text, compute an embedding, load the entire embedding datasets loaded into an AWS lambda, find the most similar set of vectors, and return the top N similar vectors in one use-case. To tackle that, we came up with the following idea.</p>
<p>Given a vector A, compute is similar to a unit vector U of the same dimension as A. So:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-cpp">dim(U) = dim(A)
</code></pre></div>
<p>And</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-cpp">S_u = cos(θ) = A · U / ||A|| x ||U||
</code></pre></div>
<p>Where S_u is the similarity with the unit vector. The unit vector just needs to be the same across all samples.</p>
<p>For each embedding, store the calculated S_u.</p>
<p>If we want to find similar vectors for a new vector B, then we compute is similarity to the unit vector.</p>
<p>Then, we can query the database for vectors within an interval of <code>[S_u - ε, S_u + ε]</code> . This will give us a subset of the dataset that have similar similarities with the unit vector.</p>
<p>We can re-query increasing or decreasing ε until the top N results are found.</p>
<p>To further improve accuracy, we can also re-compute the similarity score using cosine similarity with the subset of vectors, which is still much faster then computing the similarity against the entire dataset.</p>
<p>This approach begins to break down as the cosine similarity to the unit vector chosen gets very large (<code>&gt; 0.4</code>).  We end up with the possibility of matching against vectors that are of opposite directions – the least similar vectors to the original input vector.</p>
<p>One solution to workaround this could be to pre-compute the similarity of a vector against unit vectors for each dimension of the input vector. But this could be 512 or more cosine similarity calculations for modern embeddings just to precompute the data. Once all unit vector similarities are calculated and stored, the range query against the database would be made against the column for which the input vector’s similarity is closest to 0.</p>
<p>There are a lot of real solutions to this problem, but this was a fun exercise to think about and work on.</p>
<h2>Further reading</h2>
<p>Vector similarity search is becoming increasingly popular and integrated into databases. Here are some resources to learn more: <a href="https://zilliz.com/blog/vector-similarity-search">Vector Similarity Search</a>.</p>


While working on the Clarity Hub NLP API, we had a common use-case where we would create embeddings from text, and use those embedding to determine cosine similarity with other embeddings. Doing this required loading all of the embeddings in-memory and then computing cosine similarity with the entire dataset. As the dataset grew, this operation would get incredibly slow.

We worked on a fast way to do these lookups using ranges that can be performed in any database. This approach was never implemented, but we worked on multiple proof-of-concepts to test out our ideas. The goal was to take an input text, compute an embedding, load the entire embedding datasets loaded into an AWS lambda, find the most similar set of vectors, and return the top N similar vectors in one use-case. To tackle that, we came up with the following idea.

Given a vector A, compute is similar to a unit vector U of the same dimension as A. So:

```cpp
dim(U) = dim(A)
```

And

```cpp
S_u = cos(θ) = A · U / ||A|| x ||U||
```

Where S_u is the similarity with the unit vector. The unit vector just needs to be the same across all samples.

For each embedding, store the calculated S_u.

If we want to find similar vectors for a new vector B, then we compute is similarity to the unit vector.

Then, we can query the database for vectors within an interval of `[S_u - ε, S_u + ε]` . This will give us a subset of the dataset that have similar similarities with the unit vector.

We can re-query increasing or decreasing ε until the top N results are found.

To further improve accuracy, we can also re-compute the similarity score using cosine similarity with the subset of vectors, which is still much faster then computing the similarity against the entire dataset.

This approach begins to break down as the cosine similarity to the unit vector chosen gets very large (`> 0.4`).  We end up with the possibility of matching against vectors that are of opposite directions – the least similar vectors to the original input vector.

One solution to workaround this could be to pre-compute the similarity of a vector against unit vectors for each dimension of the input vector. But this could be 512 or more cosine similarity calculations for modern embeddings just to precompute the data. Once all unit vector similarities are calculated and stored, the range query against the database would be made against the column for which the input vector’s similarity is closest to 0.

There are a lot of real solutions to this problem, but this was a fun exercise to think about and work on.

## Further reading

Vector similarity search is becoming increasingly popular and integrated into databases. Here are some resources to learn more: [Vector Similarity Search](https://zilliz.com/blog/vector-similarity-search).


Fast Similar Embedding Lookup

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "We are starting to see a rise of novel use-cases for AI in products and games using LLMs. Rather than the simple chatbot like experiences we have seen in the past using AI, we are starting to see feedback systems being added to these experiences, providing additional context to the LLM than just the past conversation."
    }), "\n", _jsx(_components.p, {
      children: "A typical game loop for this type of system would look like:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  Rules --> LLM\n  InputStates[\"Input States\"] --> LLM\n  LLM --> OutputState\n  OutputState[\"Output State\"] --> GameEngine\n  GameEngine[\"Game Engine\"] --> InputStates"
    }), "\n", _jsx(_components.p, {
      children: "Rules can be describes as written-word description, with an additional set of rules telling the LLM to reply using JSON output of a given schema. In this area, I have had success giving LLMs descriptions of output schemas in Typescript and asking for a JSON response that adheres to the type. Other methods of getting a consistent schema are more than likely possible here, as well as additional output methods."
    }), "\n", _jsx(_components.p, {
      children: "When the asynchronous task of creating and output state is complete, the Game Engine in this case can read, parse, and apply that new state to the world. Any additional interaction would then lead to the next set of input states that can be given to the LLM as a JSON blob."
    }), "\n", _jsx(_components.p, {
      children: "For a more concrete example, we can imagine a game where we want our player to interact with a set of agents. The input states would be the state of each agent, the user’s interaction, and maybe some global environment data. The rules may be how each agent should behave, the rules of the game, and additional context. The LLM would take these inputs, and the output is instructed to be the next state of each agent. When the LLM returns this data, the Game Engine read it and applies it to the game’s representation of each agent, showing the player the impact of their actions."
    }), "\n", _jsx(_components.p, {
      children: "I’m looking forward to more novel use-cases for LLMs!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p>We are starting to see a rise of novel use-cases for AI in products and games using LLMs. Rather than the simple chatbot like experiences we have seen in the past using AI, we are starting to see feedback systems being added to these experiences, providing additional context to the LLM than just the past conversation.</p>
<p>A typical game loop for this type of system would look like:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  Rules --&gt; LLM
  InputStates[&quot;Input States&quot;] --&gt; LLM
  LLM --&gt; OutputState
  OutputState[&quot;Output State&quot;] --&gt; GameEngine
  GameEngine[&quot;Game Engine&quot;] --&gt; InputStates">graph LR
  Rules --&gt; LLM
  InputStates[&quot;Input States&quot;] --&gt; LLM
  LLM --&gt; OutputState
  OutputState[&quot;Output State&quot;] --&gt; GameEngine
  GameEngine[&quot;Game Engine&quot;] --&gt; InputStates</div></div>
<p>Rules can be describes as written-word description, with an additional set of rules telling the LLM to reply using JSON output of a given schema. In this area, I have had success giving LLMs descriptions of output schemas in Typescript and asking for a JSON response that adheres to the type. Other methods of getting a consistent schema are more than likely possible here, as well as additional output methods.</p>
<p>When the asynchronous task of creating and output state is complete, the Game Engine in this case can read, parse, and apply that new state to the world. Any additional interaction would then lead to the next set of input states that can be given to the LLM as a JSON blob.</p>
<p>For a more concrete example, we can imagine a game where we want our player to interact with a set of agents. The input states would be the state of each agent, the user’s interaction, and maybe some global environment data. The rules may be how each agent should behave, the rules of the game, and additional context. The LLM would take these inputs, and the output is instructed to be the next state of each agent. When the LLM returns this data, the Game Engine read it and applies it to the game’s representation of each agent, showing the player the impact of their actions.</p>
<p>I’m looking forward to more novel use-cases for LLMs!</p>


We are starting to see a rise of novel use-cases for AI in products and games using LLMs. Rather than the simple chatbot like experiences we have seen in the past using AI, we are starting to see feedback systems being added to these experiences, providing additional context to the LLM than just the past conversation.

A typical game loop for this type of system would look like:

```mermaid
graph LR
  Rules --> LLM
  InputStates["Input States"] --> LLM
  LLM --> OutputState
  OutputState["Output State"] --> GameEngine
  GameEngine["Game Engine"] --> InputStates
```

Rules can be describes as written-word description, with an additional set of rules telling the LLM to reply using JSON output of a given schema. In this area, I have had success giving LLMs descriptions of output schemas in Typescript and asking for a JSON response that adheres to the type. Other methods of getting a consistent schema are more than likely possible here, as well as additional output methods.

When the asynchronous task of creating and output state is complete, the Game Engine in this case can read, parse, and apply that new state to the world. Any additional interaction would then lead to the next set of input states that can be given to the LLM as a JSON blob.

For a more concrete example, we can imagine a game where we want our player to interact with a set of agents. The input states would be the state of each agent, the user’s interaction, and maybe some global environment data. The rules may be how each agent should behave, the rules of the game, and additional context. The LLM would take these inputs, and the output is instructed to be the next state of each agent. When the LLM returns this data, the Game Engine read it and applies it to the game’s representation of each agent, showing the player the impact of their actions.

I’m looking forward to more novel use-cases for LLMs!


AI Feedback Systems

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    ul: "ul",
    li: "li",
    h2: "h2"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "The Backend for the Frontend (BEFFE) is typically stateless and acts as a proxy for other services, including authentication, authorization, and core services. The recent divorce of browser code being rendered by backend services was created by SPAs - Single Page Applications. In simpler architectures, a SPA and service could be as simple as:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  SPA --> Backend"
    }), "\n", _jsx(_components.p, {
      children: "SPAs also became popular because the codebase could be built into static assets that could be services."
    }), "\n", _jsx(_components.p, {
      children: "However, as complexity arises with the above architecture and the SPA starts to rely on more services, a thin proxy is typically introduced, like NGINX:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  SPA --> NGINX\n  NGINX --> Service1\n  NGINX --> Service2\n  NGINX --> Service3"
    }), "\n", _jsx(_components.p, {
      children: "While proxies like NGINX can continue to be useful, using it as a proxy ends up putting a lot of routing and additional API handling logic on the client. The client now ends up also having to support, understand, and embed how to interact with the data rom all the downstream services. To simplify and create consistent contracts with the UI, we can create a proxy service: a Backend for the Frontend:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  SPA --> BEFFE\n  BEFFE --> Service1\n  BEFFE --> Service2\n  BEFFE --> Service3"
    }), "\n", _jsx(_components.p, {
      children: "The Backend for the Frontend ends up serving two purposes:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "It acts as a proxy for all UI requests"
      }), "\n", _jsx(_components.li, {
        children: "It manages and massages the APIs of downstream services to be a consistent API for the UI."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "When building a UI, only a single service that acts like an API Gateway is required to understand and encode within the application."
    }), "\n", _jsx(_components.p, {
      children: "The Backend for the Frontend model also allows engineers working on services to separate logic for the UI with the logic from an internal service. An internal service can rely on the Backend for the Frontend to handle things like Authentication, Authorization, Caching, and Rate-limits. These mechanisms may also be implemented as independent services, but the Backend for the Frontend can make multiple API calls per any API request from the UI."
    }), "\n", _jsx(_components.h2, {
      children: "Moving away from SPAs"
    }), "\n", _jsx(_components.p, {
      children: "A newer development in the UI space is server side render the application. If we are already introducing additional complexity by having a Backend for the Frontend, then why not combine the UI code with the backend service and generate hydrated and cacheable pages via the server instead of using a SPA?"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  UIServer[\"UI Server\"] --> Service1\n  UIServer --> Service2\n UIServer --> Service3"
    }), "\n", _jsx(_components.p, {
      children: "With this design, we increase the complexity - the backend not has to be able to render the UI code. It must now render, hydrate, make requests to downstream APIs, and send those server-side rendered pages to the browser."
    }), "\n", _jsx(_components.p, {
      children: "But this additional complexity enabled us to:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "create truly authenticated and authorized routes – the code for those routes isn’t even streamed to the browser, unlike a SPA."
      }), "\n", _jsx(_components.li, {
        children: "near instant page loads – reducing the bundle size by just sending the JavaScript needed to run the page makes this possible. And since API calls are happening within the same network, this saves the user from additional loading spinners after the initial bundle has been loaded."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "The general trend of having a Backend for the Frontend comes with additional complexity. It stems from the want to enhance the experience of the user, and probably from a subconscious desire to return to a simpler time:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph TD\n  Server"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p>The Backend for the Frontend (BEFFE) is typically stateless and acts as a proxy for other services, including authentication, authorization, and core services. The recent divorce of browser code being rendered by backend services was created by SPAs - Single Page Applications. In simpler architectures, a SPA and service could be as simple as:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  SPA --&gt; Backend">graph LR
  SPA --&gt; Backend</div></div>
<p>SPAs also became popular because the codebase could be built into static assets that could be services.</p>
<p>However, as complexity arises with the above architecture and the SPA starts to rely on more services, a thin proxy is typically introduced, like NGINX:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  SPA --&gt; NGINX
  NGINX --&gt; Service1
  NGINX --&gt; Service2
  NGINX --&gt; Service3">graph LR
  SPA --&gt; NGINX
  NGINX --&gt; Service1
  NGINX --&gt; Service2
  NGINX --&gt; Service3</div></div>
<p>While proxies like NGINX can continue to be useful, using it as a proxy ends up putting a lot of routing and additional API handling logic on the client. The client now ends up also having to support, understand, and embed how to interact with the data rom all the downstream services. To simplify and create consistent contracts with the UI, we can create a proxy service: a Backend for the Frontend:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  SPA --&gt; BEFFE
  BEFFE --&gt; Service1
  BEFFE --&gt; Service2
  BEFFE --&gt; Service3">graph LR
  SPA --&gt; BEFFE
  BEFFE --&gt; Service1
  BEFFE --&gt; Service2
  BEFFE --&gt; Service3</div></div>
<p>The Backend for the Frontend ends up serving two purposes:</p>
<ul>
<li>It acts as a proxy for all UI requests</li>
<li>It manages and massages the APIs of downstream services to be a consistent API for the UI.</li>
</ul>
<p>When building a UI, only a single service that acts like an API Gateway is required to understand and encode within the application.</p>
<p>The Backend for the Frontend model also allows engineers working on services to separate logic for the UI with the logic from an internal service. An internal service can rely on the Backend for the Frontend to handle things like Authentication, Authorization, Caching, and Rate-limits. These mechanisms may also be implemented as independent services, but the Backend for the Frontend can make multiple API calls per any API request from the UI.</p>
<h2>Moving away from SPAs</h2>
<p>A newer development in the UI space is server side render the application. If we are already introducing additional complexity by having a Backend for the Frontend, then why not combine the UI code with the backend service and generate hydrated and cacheable pages via the server instead of using a SPA?</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  UIServer[&quot;UI Server&quot;] --&gt; Service1
  UIServer --&gt; Service2
 UIServer --&gt; Service3">graph LR
  UIServer[&quot;UI Server&quot;] --&gt; Service1
  UIServer --&gt; Service2
 UIServer --&gt; Service3</div></div>
<p>With this design, we increase the complexity - the backend not has to be able to render the UI code. It must now render, hydrate, make requests to downstream APIs, and send those server-side rendered pages to the browser.</p>
<p>But this additional complexity enabled us to:</p>
<ul>
<li>create truly authenticated and authorized routes – the code for those routes isn’t even streamed to the browser, unlike a SPA.</li>
<li>near instant page loads – reducing the bundle size by just sending the JavaScript needed to run the page makes this possible. And since API calls are happening within the same network, this saves the user from additional loading spinners after the initial bundle has been loaded.</li>
</ul>
<p>The general trend of having a Backend for the Frontend comes with additional complexity. It stems from the want to enhance the experience of the user, and probably from a subconscious desire to return to a simpler time:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph TD
  Server">graph TD
  Server</div></div>


The Backend for the Frontend (BEFFE) is typically stateless and acts as a proxy for other services, including authentication, authorization, and core services. The recent divorce of browser code being rendered by backend services was created by SPAs - Single Page Applications. In simpler architectures, a SPA and service could be as simple as:

```mermaid
graph LR
  SPA --> Backend
```

SPAs also became popular because the codebase could be built into static assets that could be services.

However, as complexity arises with the above architecture and the SPA starts to rely on more services, a thin proxy is typically introduced, like NGINX:

```mermaid
graph LR
  SPA --> NGINX
  NGINX --> Service1
  NGINX --> Service2
  NGINX --> Service3
```

While proxies like NGINX can continue to be useful, using it as a proxy ends up putting a lot of routing and additional API handling logic on the client. The client now ends up also having to support, understand, and embed how to interact with the data rom all the downstream services. To simplify and create consistent contracts with the UI, we can create a proxy service: a Backend for the Frontend:

```mermaid
graph LR
  SPA --> BEFFE
  BEFFE --> Service1
  BEFFE --> Service2
  BEFFE --> Service3
```

The Backend for the Frontend ends up serving two purposes:

- It acts as a proxy for all UI requests
- It manages and massages the APIs of downstream services to be a consistent API for the UI.

When building a UI, only a single service that acts like an API Gateway is required to understand and encode within the application.

The Backend for the Frontend model also allows engineers working on services to separate logic for the UI with the logic from an internal service. An internal service can rely on the Backend for the Frontend to handle things like Authentication, Authorization, Caching, and Rate-limits. These mechanisms may also be implemented as independent services, but the Backend for the Frontend can make multiple API calls per any API request from the UI.

## Moving away from SPAs

A newer development in the UI space is server side render the application. If we are already introducing additional complexity by having a Backend for the Frontend, then why not combine the UI code with the backend service and generate hydrated and cacheable pages via the server instead of using a SPA?

```mermaid
graph LR
  UIServer["UI Server"] --> Service1
  UIServer --> Service2
 UIServer --> Service3
```

With this design, we increase the complexity - the backend not has to be able to render the UI code. It must now render, hydrate, make requests to downstream APIs, and send those server-side rendered pages to the browser.

But this additional complexity enabled us to:

- create truly authenticated and authorized routes – the code for those routes isn’t even streamed to the browser, unlike a SPA.
- near instant page loads – reducing the bundle size by just sending the JavaScript needed to run the page makes this possible. And since API calls are happening within the same network, this saves the user from additional loading spinners after the initial bundle has been loaded.

The general trend of having a Backend for the Frontend comes with additional complexity. It stems from the want to enhance the experience of the user, and probably from a subconscious desire to return to a simpler time:

```mermaid
graph TD
  Server
```
