Add UI frontend article (#2059)

* add article

* Update frontend.md

* expanded BOS section. added warning to all BOS pages (#2069)

* Update frontend.md

* Apply suggestions from code review

---------

Co-authored-by: Michael Peter <hi@mpeter.us>

docs/2.build/3.near-components/anatomy/bos-components.md

@@ -4,6 +4,14 @@ title: Historical data
 sidebar_label: Handling Historical data
 ---
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 Building components that handle historical blockchain data require dedicated solutions that manage the data and reduce the latency of requests, as it's not possible to scan the whole blockchain when a user makes a request.
 
 A simple solution for developers building on NEAR is using [QueryAPI](../environment.md), a fully managed solution to build indexer functions, extract on-chain data, store it in a database, and be able to query it using GraphQL endpoints.

docs/2.build/3.near-components/anatomy/builtin-components.md

@@ -3,6 +3,14 @@ id: builtin-components
 title: List of Native Components
 ---
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
 A list of all the built-in components to be used on Near Components.

docs/2.build/3.near-components/anatomy/near.md

@@ -7,6 +7,14 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 The components can use the `Near` object to interact with smart contracts in the NEAR blockchain. There are three methods:
 
 - [`Near.view`](#nearview)

docs/2.build/3.near-components/anatomy/notifications.md

@@ -6,6 +6,14 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 Applications such as [NEAR Social](https://near.social) and the [NEAR Dev Portal](https://dev.near.org/) allow components to send notifications to their users.
 
 Notifications are great to inform users in real time that something has happened, and can be [easily incorporated into any web app](../../../3.tutorials/near-components/push-notifications.md).

docs/2.build/3.near-components/anatomy/social.md

@@ -5,6 +5,14 @@ title: Social Interactions
 
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 NEAR components can natively communicate with the [SocialDB smart contract](https://github.com/NearSocial/social-db) (currently deployed at [social.near](https://nearblocks.io/address/social.near)).
 
 The `SocialDB` is a contract that stores `key-value` pairs, and is used mostly to store social-related data, such as `posts`, `likes`, or `profiles`.

docs/2.build/3.near-components/anatomy/state.md

@@ -6,6 +6,14 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 Borrowing from React, Near Components use hooks such as [**`useState`**](#state) and [**`useEffect`**](#useeffect-hook) to handle the state's logic, and [**props**](#props) to receive parameters.
 
 Near Components are stored in the blockchain, for which you will use the `NEAR VM` to [retrieve and execute them in the browser](../../4.web3-apps/integrate-components.md).

docs/2.build/3.near-components/anatomy/web-methods.md

@@ -5,6 +5,14 @@ title: Web Browser Methods
 
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 NEAR Components have access to classic web methods that enable them to:
 - [Fetch](#fetch) data from external sources.
 - [Cache](#cache) values to avoid redundant computations.

docs/2.build/3.near-components/bos-gateway.md

@@ -3,6 +3,14 @@ id: bos-gateway
 title: Using components on WebApps
 ---
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 In order to use the components you create in a WebApp you need to use what is known as the `NEAR VM`. This virtual machine helps you to easily fetch components from the blockchain and transform them into executable code.
 
 There are two possible scenarios:

docs/2.build/3.near-components/environment.md

@@ -3,6 +3,14 @@ id: dev-environment
 title: Choose your Dev Environment
 ---
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 The environments in which you can develop `Components` are divided into two categories:
 
 - [Web Tools](#web-tools): Online tools that allow you to quickly start building and sharing components.

docs/2.build/3.near-components/what-is.md

@@ -8,6 +8,14 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {WidgetEditor} from "@site/src/components/widget-editor"
 
+:::warning What is the state of BOS (NEAR Components)?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+See the [Web3 frontends](/build/web3-apps/frontend#bos-socialvm) section for more information.
+
+:::
+
 NEAR Components are a new way to build web applications. They are composable, reusable and decentralized.
 
 ![img](/docs/assets/welcome-pages/bos-landing.png)

docs/2.build/4.web3-apps/frontend.md

@@ -0,0 +1,83 @@
+---
+id: frontend
+title: Frontends for Web3 dApps
+sidebar_label: Frontends
+---
+
+
+There are 3 major options to choose from when you're building a frontend for your Web3 dApp, each with their own set of pros and cons.
+This overview presents and summarizes these options so you can select the right solution for your UI.
+
+- [Standard Web App](#standard-web-app)
+- [Decentralized Hosting](#decentralized-hosting)
+- [BOS (SocialVM)](#bos-socialvm)
+
+## Standard Web App
+
+Even though your UI layer won't be decentralized, your backend layer (business logic, stored data, etc) will be decentralized via smart contracts. This will be the most convenient option for most applications due to having zero technical limitations or performance impact. However, it might be a deal breaker if you require your entire stack to be decentralized.
+
+#### Pros
+
+- Build a standard web app like you normally would without any technical limitations.
+- Works with any framework and combination of libraries.
+- Supports SSR if using something like Next JS or Svelte Kit.
+- Will have best performance overall.
+
+#### Cons
+
+- Your web app will need to be hosted by a Web 2 hosting provider (e.g.: Vercel, AWS, etc).
+- This means your UI layer won't be decentralized.
+
+#### Integration
+
+It's highly recommend to integrate with [Wallet Selector](../../4.tools/wallet-selector.md) as your primary means of interacting with smart contracts. It's the easiest way to get up and running, allowing users to connect a wallet and send signed transactions. The only use case Wallet Selector doesn't cover is sending `view` transactions for users who haven't connected a wallet yet.
+
+:::tip
+
+Check [this article](integrate-contracts.md) to learn how to integrate smart contracts to your frontend, using [Wallet Selector](../../4.tools/wallet-selector.md) and [NEAR API JS](../../4.tools/near-api-js/quick-reference.md).
+
+:::
+
+## Decentralized Hosting
+
+If you require your entire stack to be decentralized, this will be the best choice. However, the potential technical limitations (no SSR or meta frameworks like Next JS) are worth considering.
+
+To learn more, you can check other decentralized hosting options like [Fleek](https://fleek.co/).
+
+<!-- content left out
+
+#### Pros
+
+- Your web app will be hosted on the blockchain allowing your entire stack to be decentralized.
+
+#### Cons
+
+- Your options for frameworks will be limited to whatever is supported by the decentralized hosting solution.
+- SSR and meta frameworks like Next JS most likely won't be supported.
+
+-->
+
+## BOS (SocialVM)
+
+BOS (UI) was an experiment in hosting UI code on chain and creating an ecosystem of composable and remixable components for dApp development.
+An example BOS VM website is [near.social](https://near.social).
+
+We no longer recommend building on it, but [this article](integrate-components.md) details how BOS components could be integrated into your frontend.
+
+:::warning What is the state of BOS?
+
+We no longer recommend building on BOS due to its limited capabilities and discontinued security maintenance. Developers with active projects on BOS are encouraged to migrate to another deployment strategy.
+
+:::
+
+The use of a VM was intended to allow embedding untrusted third-party components into your experience in a way that their access to the full browser context and the ability to manipulate the behavior of your dApp was limited.
+
+Unfortunately numerous exploits have been discovered and patched, and the nature of these exploits along with the quirks of javascript make it likely that this will be a continuing trend.
+
+It is not tenable to proactively discover and mitigate vulnerabilities in a comprehensive manner where the VM can be seen as providing a security guarantee. Coupling that with the significant tradeoffs in capabilities of applications built for the VM, we do not recommend continued usage of BOS as a development platform.
+
+:::info VM vulnerabilities
+
+For examples of previous discovered vulnerabilities, view the [VM changelog](https://github.com/NearSocial/VM/blob/master/CHANGELOG.md) going back to [v2.5.1](https://github.com/NearSocial/VM/blob/master/CHANGELOG.md#251) paying attention to lines tagged as `FIX` on issues `Reported by BrunoModificato from OtterSec`.
+
+:::

website/sidebars.js

@@ -278,6 +278,7 @@ const sidebar = {
     {
       "Building Web3 Applications": [
         "build/web3-apps/quickstart",
+        "build/web3-apps/frontend",
         "build/web3-apps/integrate-contracts",
         "build/web3-apps/integrate-components",
         {