原文：The End of Front-End Development

AI 带来的失业焦虑

当前网络上充斥着“前端已死“的论调，而作者 Josh 是极度不同意这个观点的，而且十分厌恶在网络上散播这种焦虑的现象。

其实自从 HTML、CSS 出现以来，就不断有制作网站的工具出现：像 2000 年的 WordPress，2010 年代的 Webflow 以及当前 2020 年代的低代码/无代码平台。当然随着这样的发展，有一部分网站开发者的确被时代抛弃，比如一个个体经营户要创建一个店铺网站，只需要每个月花点钱去建站平台上搭一个页面即可，而不需要专门雇一个网站开发者来维护。

GPT-4 是否能替代开发者？

当下的情况是，GPT-4 能够将一个网站设计草稿变为一个具有功能的网站，通过轻点按钮。作者认为这是令人震惊的，在原型设计上有很强的潜力。但是需要注意的是，网站开发者已经数十年没有写过如此简单的页面了（现在的网站页面早已和这些页面完全不同）。

反过来看下 GPT-4 所使用的模型 LLM（Large Language Model）。事实上， LLMs 只是一个文本预测模型——你给出提示词，模型会返回一些最相关的关键词/句子，实际上这个准确率大概只有 80%。LLMs 是无法对给出的答案进行验证或证明的，这只是一个概率游戏。只要是有概率存在，那么这个模型就会有不同程度的不准确性。映射到 LLMs 模型生成代码的层面，睡hui为代码的健壮性、安全性来”打标“呢？

对于一个 50 行的 HTML 代码来说，实际上的生产环境 web 应用有着巨大的不同。一个简单的博客 app 可能就会有 65k 行的代码，包含 900 多个文件。如果模型能够生成如此巨量的代码，那么测试和 debug 就会前所未有的困难！

文档地址：https://kaisery.github.io/trpl-zh-cn/

Rust 是一种 预编译静态类型（ahead-of-time compiled）语言，这意味着你可以编译程序，将编译好的程序直接运行而不需要任何环境配置。

Hello World!

main 函数是一个特殊的函数，它总是最先运行的代码。这里有一些重要细节：

• 缩进风格使用 4 个空格；字符串以双引号包裹，语句以分号结尾；注释使用双斜杠。
• Rust 宏和 Rust 函数不一样，调用宏时需要在调用方法后面加叹号 !
• Rust 语言编译和运行隔离。首先执行 rustc mian.rs 进行编译，然后运行编译后的 main 文件

实现了一种发布订阅者模式的插件机制。通过 Tapable 我们可以注册时间，从而在不同时机去触发注册的事件进行执行。Tapable 怎么使用呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 初始化 hook，此处的字符串数组比较重要
const hook = new SyncHook(['arg1', 'arg2', 'arg3']);

// 为 hook 注册事件，同步 hook 只有 tap 方法，
// 接受两个参数，一个是字符串的标识，第二个是注册的函数，在调用时执行
hook.tap('flag1', (arg1, arg2, arg3) => {
    console.log('flag1:', arg1, arg2, arg3)
})
hook.tap('flag2', (arg1, arg2, arg3) => {
    console.log('flag2:',arg1, arg2, arg3)
})

// 调用事件并传递执行参数
hook.call('19Qingfeng', 'wang', 'haoyu')

// 打印结果
// flag1: 19Qingfeng wang haoyu
// flag2: 19Qingfeng wang haoyu

前端框架最主要解决的就是当数据状态改变时去更新 DOM，Angular 使用的是 change detection。change detection 一般可分为两部分，更新应用数据模型 model，Angular 根据更新后的 model 重新渲染 DOM。
大概的一个过程：

1. 开发者代码更新组件的数据模型 model（例如请求接口返回数据更新）
2. angular 检测变化
3. 脏检机制对整个应用从根到叶检测对应的数据模型是否变化
4. 如果有数据更新，则更新 DOM

脏检如何实现？

Angular 的变化检测机制是建立在 Javascript 的可覆写机制。Angular 在启动阶段会对浏览器的一些底层 API 进行补丁，比如在 addEventListener 方法中添加一些功能：

1
2
3
4
5
6
7
8
9
10
11
12

function addEventListener(eventName, callback) {
     // call the real addEventListener
     callRealAddEventListener(eventName, function() {
        // first call the original callback
        callback(...);     
        // and then run Angular-specific functionality
        var changed = angular.runChangeDetection();
         if (changed) {
             angular.reRenderUIPart();
         }
     });
}

这个为底层浏览器 API 打补丁的过程是由 zone.js 工具库提供的。补丁和脏检机制一班发生在以下几种异步情况：

• 所有浏览器事件（鼠标事件、键盘事件…）
• setTimeout() 和 setInterval()
• Ajax HTTP 请求

为了了解 zone 的概念，我们需要先了解浏览器任务和时间循环的机制。

概览

依赖注入是一种设计模式，它的主要作用是让类与其依赖相互独立。它能够解决的现实问题是，当一个类 classA 需要依赖另一些类 classB、classC 时，不再需要 classA 中去实例化 classB、classC，即一个类不需要知道它所依赖的其他服务的具体实现，而是直接去使用其依赖。另外还能够便于编写单测、减少冗余代码、使应用便于扩展。

注入的依赖可以是任何类或值。
Angular 框架中有三种依赖注入的类型：

• Constructor Injection：injector 将依赖（服务）在类构建时注入其中
• Setter Injection：injector 将依赖注入到 setter 属性方法中
• Interface Injection： 依赖本身自带 injector，可以将依赖注入任何传入其中的使用者。接受该依赖的使用者必须通过 interface 暴露一个 setter 方法。

在网页开发的过程中，影响用户体验的因素有很多，大部分归咎于资源加载速度慢、初始页面渲染时加载非必须的文件（甚至会出现没有样式的文档）等等。为了避免这些问题的产生，我们需要理解浏览器渲染一个特定的网页的整个周期和流程。

首先，我们需要搞清楚什么是 DOM。当一个浏览器向服务端请求一个 HTML 文档，服务器会将这个 HTML 文档以二进制形式的数据（一个带着 Content-Type = 'text/html; charset=UTF-8' 的text 文件）进行响应。这其中， text/html 是一种 MIME 类型（MIME 能够告诉浏览器这是一个 HTML 文档，并且字符编码是 UTF-8）。有了这个信息，浏览器就能将二进制文件转换成一个可理解的文本文件，如下图所示

标签页的休眠目前越来越多地被应用在了各大浏览器中，这个特性设计主要通过 Unload 标签页使其进入休眠模式，来达到节约电脑资源、内存的目的。与关闭标签页的效果不同，休眠的标签页是将标签页保持在浏览器中，但是状态为未加载的状态，点击标签页即可重新加载页面内容。这个过程可能会有白屏的情况出现，这是浏览器在重绘页面内容。

主流的浏览器中，Google Chrome 浏览器支持 Tab Freezing，Microsoft Edge 浏览器支持 Tab Sleeping，Opera 浏览器支持 Tab Snoozing，Firefox 浏览自支持 Automatic Tab Unloading。另外，大部分基于 Chrome 内核的浏览器支持了实验特性 Tab Groups，也支持了标签页以组维度休眠的特性功能。

RxJS 是异步和事件驱动编程的一个库，主要使用 Observable sequence（可观察序列）。RxJS 提供一个核心类 Observable，和一些卫星类（Observer, Schedulers, Subjects）、操作符（Operators）。

RxJS 是适用于“事件”的 Lodash 工具库。

使用 Angular 路由首先要在 index.html 的 标签下先添加一个 元素，来告诉路由器该如何合成导航用的 URL。Angular 路由并不在核心库，而是在其自己的 @angular/router 库中，使用时需要进行引入： import { RouterModule, Routes } from '@angular/router'; 。