从前端架构到实现
前端应用分类
目前主流的包含 GUI 的分布式应用，基本可以分成：
- B/S 应用中 移动 H5 应用、桌面 Web 应用
- C/S 应用中 移动端 App、PC 客户端
近年来客户端也开始拥抱 Web，衍生出基于 Webview 的 Hybrid 混合应用
Hybrid 是一种混合应用开发框架，它结合了原生应用和网页应用的优点。使用 Hybrid 开发者可以使用网页技术（如 HTML、CSS 和 JavaScript）来构建应用程序，并使用原生应用程序的功能（如访问设备硬件和操作系统 API）
Hybrid 应用程序可以在多个平台上运行，包括 iOS、Android 和 Windows Phone。这使得开发者可以使用单一代码库来构建跨平台应用程序，从而节省时间和精力
另外 Hybrid 还提供了许多工具和框架，以帮助开发者更轻松地构建应用程序。例如，Ionic 是一个基于 Hybrid 的框架，它提供了许多 UI 组件和工具，使得开发者可以更快速地构建漂亮的应用程序
前端逻辑架构
前端的逻辑架构，设计的重点自然是前端应用。以用户体验较好的 SPA 单页应用为例，下图是一张用于参考的逻辑架构图，注意这张架构图并不是通用的：
在上图中，作为前端的 SPA 会包含若干业务功能模块，和服务器通信、前端路由、表单处理、错误处理等多种通用功能模块。通过服务器通信模块，前端会请求服务器端接口，获取或修改业务数据。服务器端即后端，一般包含入口的 API 网关（Gateway）、若干个后端服务，底层是数据库存储
在架构图的两侧，展示了部分支持性质的模块：
- 在设计阶段定义的设计系统（Design System）、响应式布局、可访问性等用户体验领域知识会支持整个前端应用的开发
- 在部署上线阶段，打包编译、CI/CD、自动化测试、运维工具等基础设施，会保证开发者辛辛苦苦开发的应用最终可以为用户所见、被用户使用
- 在运行时，用户认证（Authentication）、授权（Authorization）、前端监控、配置管理等通用模块可以支撑应用的正常运行
你如果仔细观察会发现，这些模块在图上呈现的高度并不一致，与前端应用层也没有完全对齐
- 最右边的用户体验领域设计，是纯前端的支持模块，所以高度与前端一致，并在纵向上与前端对齐
- 左右两侧的部署上线基础设施和运行时模块，基本同时涵盖了前端后端，所以它们的底边都延长到与后端平齐
在业界实践中相对复杂的前端应用可能会同时包含多个 SPA，最终以 MPA 多页应用（Multi-Page Application）的形式提供给用户。当然，这并不是必须的
前端应用架构
下图是典型的 MVC（Model-View-Controller）应用架构的变体：
一个“纯粹”的 MVC 架构，视图会触发控制器，控制器修改模型，模型再触发视图更新。常见的 MVC 变体，包括 MVVM（Model-View-ViewModel）、MVP（Model-View-Presenter）、MVI（Model-View-Intent）。其中 MVI 架构最接近 React 社区里提倡的单向数据流
开发语言
浏览器原生支持的语言包括：HTML、CSS 和 JavaScript。2019 年底 WebAssembly 正式进入 W3C 标准，成为浏览器的第四种原生支持语言，不过这门课程不会涉及 WebAssembly
除了这些原生支持的语言，开发者还可以使用其他语言开发，然后编译成原生语言在浏览器中执行。如 JS 的超集 TypeScript，通过编译器编译成浏览器可执行的 JS，尤其适合开发大型 Web 应用。再如 LESS、SaSS，扩展了 CSS 的语法，更方便模块化，通过编译器可以编译成浏览器可解析的 CSS
在浏览器 JS 演进过程中，厂商和技术社区合作推出了标准化的 ECMAScript（简称 ES），从 ES6 即 ES2015 开始，每年 ES 会推出一个包含少量新语法或新接口的新版本。
其中 ES2015 包含的新特性是最多的，随后 ES2017 的 Async/Await 、ES2018 的对象展开语法（...）、ES2020 的可选链操作符（?.） 都是改变 JS 开发者编程习惯的重要特性。然而并不是所有浏览器的所有版本都支持最新的 ECMAScript
为了兼容用户的老浏览器，但又能充分利用新语法带来的好处，可以用 Babel 这样的编译器将高版本的 ES 代码转译成更多浏览器支持的低版本，如为了支持已经退出历史舞台的 IE11，将 ES2020 的代码转译成 ES5