@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/tutorials/first-app/c08-client-side-routing/8.2-file-based-routing.md

@@ -1,310 +0,0 @@
----
-title: 使用约定式路由​​​​
----
-
-上一小节中，我们学习了如何使用【 自控式路由 】方式实现客户端路由。
-
-这一小节中，我们将在 landing-page 入口里，学习使用【 约定式路由 】。
-
-我们首先将 `landing-page` 入口的**标识** `App.tsx` 删除，换成另一种符合约定的**标识** `pages/`。
-
-我们在终端执行以下代码修改 `landing-page` 文件内容：
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-rm src/landing-page/App.tsx src/landing-page/App.css
-mkdir -p src/landing-page/pages/
-touch src/landing-page/pages/_app.tsx src/landing-page/pages/index.tsx src/landing-page/pages/docs.tsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-rm src/landing-page/App.tsx
-rm src/landing-page/App.css
-mkdir -p src/landing-page/pages/
-ni src/landing-page/pages/_app.tsx
-ni src/landing-page/pages/index.tsx
-ni src/landing-page/pages/docs.tsx
-```
-
-</TabItem>
-</Tabs>
-
-
-`pages/` 跟 `App.tsx` 一样，都起到入口**标识**的作用，让 `src/landing-page` 被识别为入口。
-
-如果存在 `App.tsx` 则优先使用 `App.tsx` 作为编译入口。而 `pages/` 则默认启用【 约定式路由 】的客户端路由实现方式，`pages/` 中的文件路径和文件内容，将被自动自动转换成客户端路由逻辑。
-
-执行命令后，项目结构如下：
-
-```md
-.
-├── .vscode/
-│   ├── extensions.json
-│   └── settings.json
-├── src/
-│   ├── contacts/
-│   │   ├── components/
-│   │   │   ├── Avatar/
-│   │   │   │   ├── index.stories.tsx
-│   │   │   │   └── index.tsx
-│   │   │   └── Item/
-│   │   │       ├── index.test.tsx
-│   │   │       └── index.tsx
-│   │   ├── styles/
-│   │   │   └── utils.css
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── landing-page/
-│   │   └── pages/
-│   │       ├── _app.tsx
-│   │       ├── docs.tsx
-│   │       └── index.tsx
-│   ├── .eslintrc.json
-│   └── modern-app-env.d.ts
-├── .editorconfig
-├── .gitignore
-├── .npmrc
-├── .nvmrc
-├── README.md
-├── package.json
-├── pnpm-lock.yaml
-└── tsconfig.json
-```
-
-注：以上展示的是手动创建入口的方式。
-
-以下介绍自动启用方式，开发者可在自己的项目中尝试：
-
-在 modern.js 项目中，执行`pnpm run new`命令, 按照以下选项选择，实现创建入口时，自动启用【 约定式路由 】：
-
-```bash
-# 请选择你想要的操作：
-❯ 新建「应用入口」
-
-#填写入口名称：
-landing-page
-```
-
-假设这个 `landing-page` 入口是一个简单的有导航栏的落地页，包含两个子页面：一个首页和一个文档页，我们用客户端路由的方式来区别这两个子页面。
-
-我们先分别实现这个入口两个子页面的内容，`src/landing-page/pages/index.tsx` 是首页，内容为：
-
-```js
-import { Helmet } from '@modern-js/runtime/head';
-
-const Index = () => (
-  <>
-    <Helmet>
-      <title>Home</title>
-    </Helmet>
-    <p>
-      Welcome to <a href="/contacts">Contact List</a>!
-    </p>
-  </>
-);
-
-export default Index;
-```
-
-`src/landing-page/pages/docs.tsx` 是文档页，内容为：
-
-```js
-import { Helmet } from '@modern-js/runtime/head';
-
-const Docs = () => (
-  <>
-    <Helmet>
-      <title>Docs</title>
-    </Helmet>
-    <p>I am docs</p>
-  </>
-);
-
-export default Docs;
-```
-
-最后，`src/landing-page/pages/_app.tsx` 是下划线开头的，代表这是【 约定式路由 】中一个特殊的功能文件，为整个入口提供根组件，可以用于实现全局布局、公共 UI 等。
-
-在这里，我们只实现一个简单的导航和结构：
-
-```js
-import { ComponentType } from 'react';
-import { NavLink } from '@modern-js/runtime/router';
-
-const App = ({ Component, ...pageProps }: { Component: ComponentType }) => (
-  <div>
-    <h2>Nav:</h2>
-    <ul>
-      <li>
-        <NavLink
-          to="/"
-          exact={true}
-          activeStyle={{
-            color: '#f60',
-          }}>
-          Home
-        </NavLink>
-      </li>
-      <li>
-        <NavLink
-          to="/docs"
-          activeStyle={{
-            color: '#f60',
-          }}>
-          Docs
-        </NavLink>
-      </li>
-    </ul>
-    <h2>Content:</h2>
-    <Component {...pageProps} />
-  </div>
-);
-
-export default App;
-```
-
-执行 `pnpm run dev`，访问 `http://localhost:8080/landing-page/`，可以看到结果：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result.png)
-
-点击 Nav 里的链接，URL 变为 `http://localhost:8080/landing-page/docs`，内容会变为：
-
-![result1](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result1.png)
-
-我们同样可以开启/关闭 SSR 选项（[配置教程](/docs/configure/app/server/ssr)），并查看 HTML 源码。结果和【 自控式路由 】的 contacts 入口一样。
-
-:::info 注
-Modern.js Lint 规则集要求 React 组件的文件名或目录名都用 Pascal 命名风格，跟组件本身的名字保持一致，首字母大写。
-
-`pages/` 里面的文件虽然也是 React 组件，但它们是基于约定用于指定路由的特殊组件文件，对应的是 URL 中的路径，所以这里是一种例外情况，文件名/目录名跟 [URL 命名风格](https://geemus.gitbooks.io/http-api-design/content/en/requests/downcase-paths-and-attributes.html)保持一致更好，最好用 dash 命名风格（全小写，- 连字符分隔）。
-:::
-
-接下来我们再实现一个简单的评论详情页，因为评论会有很多条，所以评论详情页的 URL 包含动态部分，例如：`http://localhost:8080/landing-page/docs/comments/:commentTitle/`
-
-对于像 `:commentTitle` 这样的动态部分，Modern.js 提供了一种特殊的文件命名方式来实现。
-
-执行以下命令，新建以下文件：
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-mkdir -p src/landing-page/pages/comments/\[commentTitle\]
-touch src/landing-page/pages/comments/\[commentTitle\]/index.tsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-mkdir -p src/landing-page/pages/comments/[commentTitle]
-ni src/landing-page/pages/comments/[commentTitle\/index.tsx
-```
-
-</TabItem>
-</Tabs>
-
-`landing-page` 入口中的文件结构变成：
-
-```md
-.
-└── pages/
-    ├── comments/
-    │   └── [commentTitle]/
-    │       └── index.tsx
-    ├── _app.tsx
-    ├── docs.tsx
-    └── index.tsx
-```
-
-`[commentTitle]` 将会被 Modern.js 转换成动态路由。
-
-我们首先安装文件中需要的依赖：
-
-```bash
-pnpm add lodash
-pnpm add -D @types/lodash
-```
-
-`pages/comments/[commentTitle]/index.tsx` 的内容为：
-
-```js
-import { Helmet } from '@modern-js/runtime/head';
-import { Link } from '@modern-js/runtime/router';
-import _ from 'lodash';
-
-const Index = ({ match: { params } }: any) => {
-  const title = _.startCase(params.commentTitle);
-  return (
-    <>
-      <Helmet>
-        <title>Comment: {title}</title>
-      </Helmet>
-      <p>
-        <Link to="/docs/">{'< Back'}</Link>
-      </p>
-      <h1>Subject: {title}</h1>
-      <p>Post: I am a comment</p>
-    </>
-  );
-};
-
-export default Index;
-```
-
-修改 `docs.tsx`，添加跳转到评论页的链接：
-
-```js
-import { Helmet } from '@modern-js/runtime/head';
-import { Link } from '@modern-js/runtime/router';
-
-const Docs = () => (
-  <>
-    <Helmet>
-      <title>Docs</title>
-    </Helmet>
-    <p>I am docs</p>
-    <p>
-      <Link to="/comments/i-am-a-comment-title">[Random comment]</Link>
-    </p>
-  </>
-);
-
-export default Docs;
-```
-
-:::info 注
-`pages/` 和 `App.tsx` 一样，应该专注于路由的组织，具体的 UI 实现和业务逻辑，一旦复杂到要拆分成多个文件的程度，应该放到 `pages/` 外面，在同一个应用入口目录中，用 **feature 目录**、**role 目录**的方式来组织。
-
-例如使用 `src/landing-page/docs/components/Article/index.tsx` 来组织功能特性。
-
-`landing-page/docs/` 和 `landing-page/pages/docs/` 不同，前者是 **feature 目录**，将修改频率不同或由不同人负责开发的业务逻辑，封装在同一个黑盒里，这种目录下的问题与具体路由解耦。
-
-`pages/` 目录里的组件文件，负责把这些 feature 组件组织到一起，通过特定的路由结构提供给用户。
-
-因此 `pages/` 目录里基本上不应该有组件之外的文件，也不应该有过于复杂和具体的实现。
-:::
-
-执行 `pnpm run dev`，访问 `http://localhost:8080/landing-page/docs/`，可以看到效果如下：
-
-![result2](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result2.png)
-
-点击评论链接，跳转到 `http://localhost:8080/landing-page/comments/i-am-a-comment-title`，效果如下：
-
-![result3](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result3.png)
-
-URL 中的动态部分，在代码中被转换成了标题内容，修改最后部分 URL 后重新访问，标题内容同样发生改变。
-
-本小节中，我们学习了基本的【 约定式路由 】用法，除了 `_app.tsx` 外，我们还可以使用 [`_layout.tsx`](/docs/apis/app/hooks/src/pages#部分-layout) 实现这个访问路径下的公共 UI，可以用 [`404.tsx`](/docs/apis/app/hooks/src/pages#404-路由) 自定义 404 页面等。
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c08/hello-modern-2)。

package/zh/tutorials/first-app/c08-client-side-routing/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "8: 添加客户端路由"
-}

package/zh/tutorials/first-app/c09-bff/9.1-serverless.md

@@ -1,30 +0,0 @@
----
-title: Serverless 开发范式
----
-
-之前的章节中，我们用来渲染联系人列表的数据，都来自代码中的 Mock 数据。
-
-本章节中，我们将介绍如何通过 BFF 获取数据。
-
-在这之前，我们先回顾下上一章节 Demo 中的联系人列表应用，它有多种运行方式，比如：
-
-- `pnpm run dev` - 在本地开发环境中用于调试
-- `pnpm run build && pnpm run start` - 在生产环境中正式运行
-
-无论哪种方式，整个应用在运行时（runtime）都是一个【 Universal App 】，既有客户端部分（在客户端运行的 App 代码和框架代码），也有服务器端部分（框架内置的 Static Web Server 或 SSR Server，在 SSR 环节运行的 App 代码和框架代码）。
-
-但开发者对服务器几乎是无感知的，开发环节并没有专门写 server 代码，运行和部署的时候，也不跟具体 server 打交道，不需要运维 server，开发者可以专注于产品本身。
-
-这种开发范式，我们称作 Serverless Web Development。
-
-其中的 SSR 技术，我们称作 Serverless SSR，实现了 SSR 在开发、运行、部署全流程中的 Serverless。
-
-从本节开始，我们要接触 Serverless Web Development 的另一部分：Serverless BFF，跟 SSR 一样，能实现 [BFF（Backends for Frontends）](https://microservices.io/patterns/apigateway.html)在开发、运行、部署全流程中的 Serverless。
-
-:::info 注
-我们这里说的 BFF，不是指任意的面向客户端程序的服务器端 API，而是是更纯粹、狭义的 BFF，指专门服务特定客户端程序、特定产品 UI 需求的服务器端 API。
-
-这种 API 更适合跟客户端代码在一起实现、调试、运行和部署，由同一个/批开发者负责。
-
-简单情况下这种 API 做的是对更底层 API（比如各种微服务）的聚合、映射、裁剪、代理等，复杂情况下也会访问数据存储（比如应用数据库、缓存等），有服务器端 Model 等业务逻辑分层，但都倾向于只维护很薄的一层服务器端业务逻辑。
-:::

package/zh/tutorials/first-app/c09-bff/9.2-enable-bff.md

@@ -1,93 +0,0 @@
----
-title: 启用 BFF
----
-
-和之前章节一样，我们同样使用生成器来启用 BFF。
-
-在项目根目录下执行 `pnpm run new` 命令：
-
-```bash
-# 启用可选功能
-❯ 启用「BFF」功能
-  ...
-
-# 请选择 BFF 类型
-❯ 函数写法
-  框架写法
-
-# 请选择运行时框
-❯ Express
-  Koa
-  Egg
-  Nest
-```
-
-:::info 注
-函数模式与框架模式都是基于 Modern.js 的 BFF 函数的，两种模式的主体都是函数，也都需要运行时框架的支持，这里的提问是为了提供不同的样板文件。更多相关内容可以查看[一体化 BFF 专题](/docs/guides/advanced-features/bff/function)。
-:::
-
-我们先选择【 函数写法 】，并选择运行时框架为 Express，项目结构将变成：
-
-```md
-.
-├── .vscode/
-├── api/
-│   ├── info/
-│   │   └── [type].ts
-│   ├── .eslintrc.json
-│   ├── _app.ts
-│   └── index.ts
-├── src/
-│   ├── contacts/
-│   │   ├── components/
-│   │   │   ├── Avatar/
-│   │   │   │   ├── index.stories.tsx
-│   │   │   │   └── index.tsx
-│   │   │   └── Item/
-│   │   │       ├── index.test.tsx
-│   │   │       └── index.tsx
-│   │   ├── styles/
-│   │   │   └── utils.css
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── landing-page/
-│   │   └── pages/
-│   │       ├── comments/
-│   │       │   └── [commentTitle]/
-│   │       │       └── index.tsx
-│   │       ├── _app.tsx
-│   │       ├── docs.tsx
-│   │       └── index.tsx
-│   ├── .eslintrc.json
-│   └── modern-app-env.d.ts
-├── .editorconfig
-├── .gitignore
-├── .npmrc
-├── .nvmrc
-├── README.md
-├── package.json
-├── pnpm-lock.yaml
-└── tsconfig.json
-```
-
-新增的 `api/` 目录，跟 `src/` 目录一样是源代码目录，目录中有几个示范用法的样板文件
-
-`package.json` 中则会增加 BFF 插件：
-
-```json
-+ "@modern-js/plugin-bff"
-+ "@modern-js/plugin-express"
-+ "express"
-```
-
-在函数写法中，BFF 的 API 路由也遵循类似【 约定式路由 】的生成逻辑。
-
-Modern.js Serverless BFF 的默认前缀为 `/api`，例如上述目录结构可以得到两个 API 路由：
-
-`http://localhost:8080/api`
-
-`http://localhost:8080/api/info/:type`
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c09/hello-modern-2)。

package/zh/tutorials/first-app/c09-bff/9.3-fetch-bff.md

@@ -1,205 +0,0 @@
----
-title: 从 BFF 获取数据
----
-
-上一小节中，我们创建了【 函数写法 】的 BFF，这一小节中，我们将用该模式为联系人列表实现一个数据接口。
-
-我们首先把不需要的样板文件清理掉，把 `index.ts` 重命名为 `contacts.ts`，执行以下命令：
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-rm -r api/info api/_app.ts
-mv api/index.ts api/contacts.ts
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-rm -r api/info
-rm api/_app.ts
-mv api/index.ts api/contacts.ts
-```
-
-</TabItem>
-</Tabs>
-
-
-此时 API 路由将变为 `/api/contacts`。
-
-我们使用 [faker](https://github.com/Marak/Faker.js) 来 mock 需要的数据，首先安装依赖：
-
-```bash
-pnpm add faker
-```
-
-将 `api/contacts.ts` 内容改为：
-
-```js
-import { name, internet } from 'faker';
-
-export const get = async () => {
-  const mockData = new Array(20).fill(0).map(() => {
-    const firstName = name.firstName();
-    return {
-      name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
-      email: internet.email(),
-    };
-  });
-
-  return { code: 200, data: mockData };
-};
-```
-
-:::info 注
-数据同样可以从远端接口获取，此处仅为了演示。
-:::
-
-执行 `pnpm run dev`，访问 `http://localhost:8080/api/contacts`：
-
-![browser-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/api-result.png)
-
-接下来我们把 `src/contacts/App.tsx` 里硬编码的 `mockData` 改成从 BFF 加载。
-
-我们将业务逻辑迁移到组件中，`App.tsx` 只保留简单的路由部分，执行：
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-mkdir -p src/contacts/components/AllContacts/
-mkdir -p src/contacts/components/ArchivedContacts/
-touch src/contacts/components/AllContacts/index.tsx
-touch src/contacts/components/ArchivedContacts/index.tsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-mkdir -p src/contacts/components/AllContacts/
-mkdir -p src/contacts/components/ArchivedContacts/
-ni src/contacts/components/AllContacts/index.tsx
-ni src/contacts/components/ArchivedContacts/index.tsx
-```
-
-</TabItem>
-</Tabs>
-
-`ArchivedContacts/index.tsx` 的内容：
-
-```js
-import { List } from 'antd';
-import Item from '../Item';
-
-const getAvatar = (users: Array<{ name: string; email: string }>) =>
-  users.map(user => ({
-    ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
-  }));
-
-const mockArchivedData = getAvatar([
-  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-]);
-
-const ArchivedContacts = () => (
-  <List
-    dataSource={mockArchivedData}
-    renderItem={info => <Item key={info.name} info={info} />}
-  />
-);
-
-export default ArchivedContacts;
-```
-
-`AllContacts/index.tsx` 的内容：
-
-```tsx
-import { useState, useEffect } from 'react';
-import { List } from 'antd';
-import { get as contacts } from '@api/contacts';
-import Item from '../Item';
-
-const AllContacts = () => {
-  const [list, setList] = useState(
-    [] as Array<{ name: string; email: string; avatar: string }>,
-  );
-  const loadMockData = async () => {
-    const { data } = await contacts();
-    setList(data);
-  };
-  useEffect(() => {
-    if (!list.length) {
-      loadMockData();
-    }
-  });
-  return (
-    (list.length && (
-      <List
-        dataSource={list}
-        renderItem={info => <Item key={info.name} info={info} />}
-      />
-    )) || (
-      <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
-        Pending...
-      </div>
-    )
-  );
-};
-
-export default AllContacts;
-```
-
-在 Modern.js 中，可以通过调用函数（前后端一体化）的方式，直接调用 BFF 接口，调用时无需关心域名、路径等。
-
-:::info 注
-在使用 `pnpm run new` 创建 BFF 时，Modern.js 已经默认在 `tsconig.json` 中注入了别名。这也是之前提到的，生成器在项目创建之后并不会被抛弃，仍旧可以在开发过程中不断为项目提供新的内容。
-:::
-
-接下来修改 `src/contacts/App.tsx`，把 `List` 组件的调用代码替换成上面的 `AllContacts` 和 `ArchivedContacts`：
-
-```tsx
-<Route path="/" exact={true}>
-  <Helmet>
-    <title>All</title>
-  </Helmet>
-  <AllContacts />
-</Route>
-<Route path="/archives" exact={true}>
-  <Helmet>
-    <title>Archives</title>
-  </Helmet>
-  <ArchivedContacts />
-</Route>
-```
-
-删除 `App.tsx` 里的 mock 数据和 `List` 组件，把 `Item` 组件替换成 `ContactList`：
-
-```tsx
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { Route, Switch, useHistory } from '@modern-js/runtime/router';
-import { Helmet } from '@modern-js/runtime/head';
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
-import './styles/utils.css';
-import AllContacts from './components/AllContacts';
-import ArchivedContacts from './components/ArchivedContacts';
-```
-
-执行 `pnpm run dev`，再打开页面`http://localhost:8000/contacts`，可以看到页面加载后，会先初始化联系人数据（显示 pending），之后每次切换到 All 列表，也会重新请求联系人数据：
-
-![browser-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/browser-result.png)
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c09/hello-modern-3)。
-

package/zh/tutorials/first-app/c09-bff/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "9: 添加 BFF"
-}

package/zh/tutorials/first-app/c10-model/10.1-application-architecture.md

@@ -1,23 +0,0 @@
----
-title: 应用架构
----
-
-上一章节中，我们把硬编码的 `mockData` 改成从 BFF 加载，从 `App.tsx` 里拆分出了 `components/AllContacts.tsx` 和 `components/ArchivedContacts.tsx`，在 `AllContacts` 组件里用 BFF 函数，获取到联系人数据之后，保存在 `AllContacts` 的组件内部状态里，而 `ArchivedContacts` 组件暂时继续使用 mock 数据。
-
-本章节中，为了进一步实现项目功能，我们需要让 `AllContacts` 和  `ArchivedContacts` 都从 BFF 获取数据，还要实现【 Archive 】按钮，点击按钮能把联系人归档。
-
-业务逻辑变复杂之后，相关代码不可避免会变多，如果都写在 AllContacts 组件或其他组件里，都会让这个组件的可读性和可维护性变差，让做不同事情的代码混在一起。
-
-原本可以跟 UI 完全解耦的业务逻辑（比如网络请求、纯数据的操作、状态的管理等）跟 UI 逻辑（比如联系人列表如何展现）混在一起，当需要修改 UI 的时候，不得不跟 UI 无关的业务逻辑代码打交道，反过来也一样，不符合【 [单一职责原则（SRP）](https://zh.wikipedia.org/wiki/%E5%8D%95%E4%B8%80%E5%8A%9F%E8%83%BD%E5%8E%9F%E5%88%99)】，也做不到【 [关注点分离（SoC）](https://zh.wikipedia.org/wiki/%E5%85%B3%E6%B3%A8%E7%82%B9%E5%88%86%E7%A6%BB)】。
-
-从这里开始，我们发现如果这是个真实的项目，继续这样写下去会产生越来越多面条式代码，仅凭 React 组件这一种抽象方式，不足以让代码足够结构化，随着项目不断积累业务逻辑、复杂性和变更，技术债也会积累，最终可能变成没人愿意碰的祖传代码。
-
-像这样的项目，需要更健全的**客户端应用架构**。
-
-Modern.js 提供开箱即用的**应用架构**，支持几种扮演不同**角色（role）**、属于不同**分层（layer）**的代码模块类型，可以把业务逻辑解耦到不同类型的代码模块里，做到高[内聚](https://zh.wikipedia.org/wiki/%E5%85%A7%E8%81%9A%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8))低[耦合](https://zh.wikipedia.org/wiki/%E8%80%A6%E5%90%88%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8))。
-
-之前介绍的 `App.tsx` 和 `pages/` 都是其中一种代码模块，通过在最顶层对客户端路由的管理，把其他代码模块最终组织到一起，形成应用。
-
-当前项目里 `components/` 目录中的 React 组件，是一种可以称作【 视图组件 】的代码模块，负责 UI、交互上的界面展现。
-
-本章节我们来把 `AllContacts` 组件中可以跟 UI 解耦的业务逻辑，移到一种叫【 Model（业务模型）】的代码模块里。