我心中的现代前端大厦

前言

我在还未接触前端前，尽管已经从一些科普类文章和视频了解到了”现代前端“，打破了传统认知：前端就是”写“页面的，也从某份 ”学习路线“ 搭建起了对前端的认知，并以此按部就班地学习。

在之后的学习中，我不断接触新的，抽象的 ”术语“、”知识点“，并学习和掌握它们。我会自己写下一些笔记并整理它们，来帮助自己构建一个 “前端知识体系”。在积累了足够多的笔记后，我尝试发布一些文章讲讲我自己的理解，但仍感觉对这一大堆 ”知识点“ 没能很好地联系它们和深入理解它们。

我也会在YouTube上浏览一些英文流视频讲解，看看中英文语境下的描述有什么不同，毕竟说实话一些东西翻译成中文还是有点抽象的。在某次B站冲浪时，我刷到了一位UP主的视频，其中一期视频内容是 “我心中的现代前端大厦”，这正是这篇文章的由来。同时我按照它重新组织了我的笔记，并计划以此 “大厦” 来更新之后的文章。

下面是UP主的账号ID和几期视频链接，以及它的知识网站链接：
B站ID：捣鼓键盘的小麦

《我心中的现代前端大厦》

《前端请求进化史》

知识网站：FrontTalk

正文

不过度讨论一个知识点具体实现和使用，而是了解它们的“出现因果”，“存在价值”和“应用场景”。现代前端十分庞杂，更新换代很快，即使是大厂前端也没有人能同时精通所有东西。大家都各有所长，前端平台，业务研发，基础设施、可视化、低代码…

• 计算机网络：HTTP协议和DNS是现代互联网的两个基石，是串联终端用户到前端应用的桥梁。
  • DNS
  • HTTP协议
  • WebSocket协议
• 编程语言：现代前端的语言不止JS和TS，还有做原生应用的Dart，构建现代前端基建的Rust，以及不直接由人编写的WebAssembly。
  • 语言
  • ECMAScript规范
  • 运行时
  • 标准库
• UI(User Interface用户界面)：前端的主要任务之一是构建用户界面。传统前端用户界面通常指HTML、CSS、JS三件套制作的网页，而现代互联网世界中的用户界面不仅仅存在于PC浏览器网页中，还有跨平台桌面应用，移动设备中的H5，甚至是VR设备中的交互界面，不同的场景构建用户界面的方法也有所差异。使用三件套构建用户界面虽然简单直接但生产效率和可维护性太差，所以引入了UI框架和组件库的概念，以React和Vue为代表的UI框架主要用于构建用户界面，它们提供了诸如虚拟DOM、数据驱动、组件化、代码编译、工具链配套等一些列方案，帮助我们更快地构建UI。但是光靠UI框架开发效率还是太低，组件库是可复用的UI单元，主要目的是写更少的代码。
  • HTML
  • CSS
  • JS
  • UI框架：我们常说的React、Vue都属于UI框架的范畴，主要是帮助我们更快地构建用户界面，从它们的的官网介绍都能看到The library for web and user interfaces。虽然它们能做的事不止于此，但理解它们的定位也很重要，当你陷入一个组件业务逻辑如麻时，有没有考虑UI框架本身就不适合做这些事呢？为什么要提状态管理这件事，以及它为什么要独立于UI框架存在，我相信你已经有答案了。
  • 组件库
  • 界面端
• 应用框架：👉使用UI框架足以制作一个好看又好用的前端应用了，但随着业务越来越复杂，我们会在UI框架之外做很多看起来和UI无关的事，比如引入状态管理方案，做一套统一的布局，抽象一个更好用的数据请求方法，优化打包效率等等。这些看起来很通用，但UI框架做起来又很费劲，这正是应用框架考虑的事。👉应用框架覆盖面较广，有基于Vue生态的Nuxt，有专注于桌面应用的Electron，也有适用于小程序的uniapp、Taro，应用于移动原声应用的React Native、Flutter 。虽然看起来多但几乎包含这些功能：路由、样式、数据获取、测试、插件、部署 。应用框架通常建立在特定的UI框架上(也有例外)，如在React生态中，NEXT.JS除了能使用React构建UI外，还包含上面提到的功能，总的来说：UI框架可以满足构建一个简单的前端应用，但是随着业务越来越复杂，需要应用框架来包办一个复杂前端应用需要的一切。👉路由规定了页面的组织方式、布局和跳转方式，也可以帮助框架更好地进行分包以提升运行效率；样式是框架提供的一组CSS开发方案，通常包含CSS预处理器、CSS Mouduls、CSS-in-JS和CSS框架；数据获取通常包含内置请求库、缓存、服务端渲染等经过框架优化等方案；测试则是专为框架定制的一套环境和测试工具 ，方便开发者更优雅地编写测试代码；插件框架为了方便开发者扩展其功能预留的口子，通过它自定义构建行为；部署是框架提供的生产应用上线方案，包含不同构建产物的生成配置、静态资源部署、全栈应用部署方式等。
  • 应用架构：应用架构是应用的组织范式，更关注不同范式的优缺点。同一应用框架可以支持不同的应用架构
    • MPA(Multiple Page Application)：多页应用，它是传统的网页组织方式，不同的页面对应不同的HTML文档。
    • SPA(Single Page Application)：单页应用，它在同一个页面上通过路由状态改变来模拟不同页面的切换。相比多页应用解决了用户在多个页面切换需等待的问题，但带来的缺点是首次加载时白屏时间较长。
    • PWA(Progress Web Application)：渐进式Web应用
    • MFE(Micro-Frontends)：微前端
    • Islands：岛群架构
  • React生态
  • Vue生态
  • 小程序
  • 桌面
  • 移动原生
• 服务端：我们传统认知上前端开发是面向用户界面，以提供良好的用户体验为中心，由此形成了前端技术栈。Nodejs出现后，现代前端的能力边界扩宽到了服务端， 严谨点是前端的服务端，它只是整个服务端领域的冰山一角，并不包含数据库、中间件、分布式服务等底层设施。传统前端开发中，所有的代码和功能都运行在客户端，随着业务体量增大，客户端很容易不堪重负。前端可以借助服务端的能力，更有效的提升开发体验和用户体验。比如前端如何同背后数十个业务系统建立数据通信，是通过客户端并发几十个请求吗，还是有更高效的方案呢？另外通过服务端渲染(SSR)相比客户端渲染有什么优势？
  • 运行时：运行时 = JS引擎 + JS标准库 + 一组环境相关的API，而Nodejs就是一种运行时，它赋予JS在服务端执行的能力。
  • 基础架构
  • 应用框架
  • 应用架构：同上面提到的前端应用的应用架构，服务端也有自己的应用架构。常见的有MVC、RESTful、BFF。MVC(Model View Controller)，Model负责定义数据结构，View负责展示数据，Controller负责处理用户输入和业务逻辑；RESTful 就是按照 REST 规范设计的 Web API，用HTTP的方法get、post、put、delete来表示操作资源，用URL来定位资源，这样做的好处是路径语义清晰(即以资源和动作为核心以实现简单和语义化的API设计)；BFF(Backend For Frontend)，是一种面向前端应用的架构模式，它位于前端和真正的后端之间，通常作为体验适配层，负责处理多端应用的请求以及聚合后端提供的原子接口，让前端应用可以更标准灵活地访问后端服务。
• 工具链：工具链通常指的是一组用于软件开发的工具和技术，帮助开发者管理好从源代码到最终软件的整个开发过程。对于前端来讲，这些工具通常包括集成开发环境(IDE)，包管理工具，构建工具，调试工具，持续集成和部署(CI/CD)工具等。
  • 包管理：
    自从前端开始采用模块化开发后，以npm为代表的包管理器也应运而生，它的核心是代码的组织与复用。前端有个数量相当庞大的软件生态，大到一个 工具，小到一个函数都可以做成以一个包，许多包又直接或间接依赖另一些包，再加上版本不同，因此包管理是一件相当复杂的事。
  • 构建工具：
    前端构建工具的出现时间较晚，现代前端构建工具通常包含 “代码转译器”、“优化器”、“打包器”、“开发服务器”、“插件系统”。转译器(Transpiler)有的也叫代码转换器(Transfer)，或者直接叫编译器(Compiler)，它们都是将源代码转换为目标平台能够直接运行的代码，同时让那个一些比较新的语言特性能兼容旧的环境(比如JSX到JS，Less到CSS，箭头函数到普通函数，Babel将ES6到ES5)；优化器是将转译完成的代码进一步优化(比如压缩、混淆、分割)以提升传输效率和安全性；打包器是将转译好的代码合并到一块，它通常会内置转译器和优化器(从源代码到最终产物一站式完成)；开发服务器提供一个本地的HTTP服务器，通过HMR、传输原生ES模块、接口代理等功能来提升开发体验；插件系统是功能扩展的主要方式，可以灵活地改变整个构建工具的行为，来实现定制化需求。前端工具的大趋势是极致整合(减轻学习负担)以及使用Rust重写核心模块(提升构建和打包效率，避免修改一秒钟集成十分钟)。
  • 调试工具：现代前端针对不同的场景会使用不同的调试工具，比如浏览器开发者工具、小程序开发者工具、接口调试工具如postman、框架调试工具如React Developer Tools。
  • CI/CD工具：相比以前，现在我们可以借助Github Action、Jenkins等免费的工具和平台来完成一些事情。
• 质量与安全：一个前端应用做好了如何评估它的质量和安全性，所谓质量不仅仅指它有没有bug，还原度高不高，有没有漏洞，还应该更多维度综合分析。
  • 编码质量
    • 边界处理
    • 异常处理
    • 降级策略
  • 质量工具
    • 静态代码检查
    • 代码风格控制
    • 测试工具
  • 稳定性
    • 供应链安全
    • 应急预案
    • SOP
  • 攻击防御
    • CSRF
    • XSS
    • Clickjacking
• 用户体验：用户体验能做的事相当多。
  • 无障碍
    • 兼容性
    • 屏幕适配
    • 多语言
    • 新手引导
    • 优雅降级
  • 性能调优
    • 性能分析
    • 缓存技术
    • 网络优化
    • 容器方案
  • 交互设计
    • 小屏交互
    • 触控和反馈
    • 响应式设计
  • 个性化
    • 主题换肤
    • 自定义
    • A/B方案
• 持续集成和部署：保持代码质量和快速迭代的重要手段，比如在CI流程中如何提升依赖的安装速度，如何确保本地和测试环境的依赖一致性。在CD流程中如何用灰度发布发现变更问题，如何回滚止血。主要介绍CI、CD流程和CI、CD工具。
  • 持续集成(CI)
    • 版本控制
    • 流水线
    • CI门禁
  • 持续部署(CD)
    • 部署环境
    • 产物发布
    • 灰度发布
    • 回滚
  • CI/CD工具
• 可观测性：指系统运行过程中，通过收集和分析数据来了解系统健康状况或用户行为。比如如何采用应用异常，如何检测应用性能，如何快速定位用户反馈的问题。
  • 日志
    • 行为日志
    • 接口请求
    • 功能调用
  • 追踪
    • 异常采集
    • 性能采集
    • 路径回溯
  • 度量
    • 性能指标
    • 业务指标
    • 应用健康度
• 云基础设施：利用云基础设置解决大量棘手问题，比如如何加快应用访问速度，如何降低前端应用的部署成本，如何更有效的存取和优化图片、视频资源。下面只列举会用得上的云服务和基础设置
  • 网络
    • CDN
    • 边缘网络
  • 容器化部署
    • Docker
    • Serverless
  • 存储
    • KV
    • OSS
  • 安全
    • WAF
    • CSP
  • PaaS平台
  • SaaS服务