改变时代的 Visual Studio Code (2015)

• 2016 年，我做实验的对象还是更 “受欢迎” 的 Github Atom
  • 2016 年 Javascript 的标准库连 “保存文件” 都实现不了

改变时代的 Visual Studio Code (2025)

十年之后，连朋友多做不成了

• 忽然有一天，硬分叉上没法用 C/C++ 了
  • 我还以为是我的代码卡出了 LSP 的 bug 呢

好像我们都忘了它们都是 Javascript 程序？

互联网的开始：Web 1.0

从 PC 时代到互联网时代 (1990s)

• Amazon (1994), Yahoo (1994), eBay (1995), Google (1998)
• HTTP (RFC 2018 HTTPS: 2000.5), HTML，但没有 CSS
  • 中国互联网初代 “三巨头”：新浪、搜狐、网易诞生

互联网的开始：Web 1.0 (cont'd)

<font>, <table>, vbscript 和切图工程师一统天下

<script language="vbscript">
Function validateForm()  ' 仅限 Internet Explorer
  If document.myForm.username.value = "" Then
    MsgBox "请输入姓名！"
    validateForm = False
  Else
    validateForm = True
  End If
End Function
</script>

• 设计师用 Photoshop 画出像素级精确的网页，然后切成表格
  • Responsive design? 不存在的

从 Web 1.0 到 Web 2.0

Asynchronous JavaScript and XML (Ajax; ~1999)

• 允许网页实现 “后台刷新”
  • 悄悄请求后端，然后更新 DOMTree
  • “应用” 可以做的，网页也都可以做了！
• (你没看错，竟然不是 JSON)
  • 原因：后端 (Java) 应用广泛使用 XML

jQuery $ (2006): A DOM Query Language (编程抽象)

• 让我们优雅地打开 jw.nju.edu.cn
  • 2000s 的 “土味动画” 来啦！

$(".news_list li a").text("这是假新闻哦，骗你的~");  // By GPT-4.1

从此，做 “任何事” 都只要浏览器就行

甚至诞生了 ChromeOS

• HTML + CSS 构建应用的方便程度超过传统 GUI 编程
• GTK, Qt, MFC 谁用谁知道
  • ChromeOS 没能成功
  • 微信小程序继承了 ChromeOS 的遗志

Web 2.0 时代的并发编程

Challenges

• 线程 (在 1990s) 开销很大
• 连程序都写不利索的人，让他并发编程？
  • Data race, atomicity violation, ... 分分钟教你做人

于是有了 event-based concurrency (动态计算图)

• 禁止任何计算节点并行 (和高性能计算完全不同的选择)
  • 允许网络请求、sleep 在后台执行
    • 执行完后产生一个新的事件 (计算节点)
  • 假设网络访问占大部分时间；浏览器内计算只是小部分
  • 事件可以在浏览器里看到！

混沌时代的计算图

“Callback hell (回调地狱)”

• 2025 年，教务系统里还能看到明文

$.ajax({
    url: '/api/user',
    success: function(user) {
        $.ajax({
            url: `/api/user/${user.id}/friends`,
            success: function(friends) {
                $.ajax({
                    url: `/api/friend/${friends[0].id}`,
                    ...
                });
            },
            error: function(err) { ... }
        });
    }, ...
});

回归 “描述计算图”

Promise: 描述动态计算图

useEffect(() => {
    fetch(`/api/localhost/?action=demo&path=${path}`)
        .then(response => response.json())
        .then(fetchedData => setData(fetchedData))
}, []);

Promise.all([
    fetch(...).then(...),
    fetch(...).then(...),
    fetch(...).then(...),
]).then(
    // succeeded
).catch(
    // error handling (catches exceptions in the fetch)
)

更多的语法糖

async function fetchData() {
  const response = await fetch(
    '/api/submissions/?token=12345678'
  )
  return response.json()
}
await fetchData()

function makeItAsync(fn) {
  return function(...args) {
    return new Promise((resolve, reject) => {
      try { resolve(fn.apply(this, args)); }
      catch (e) { reject(e); }
  });
  }
}

从 “前端” 到 “全栈”

ECMAScript 2015 (ES6)

• 一统第三方库 “军阀混战” 的局面
• 开源生态开始起飞

现代前端的代表作品

• Angular, React, Vue
• Express.js, Next.js
• Bootstrap, Tailwindcss
• Electron (vscode)
• asm.js (和之后的 WebAssembly)

我们看到历史车轮碾过

PC → Web → Web 2.0 (UGC) → AI (AGI)

• “框架” 是驱动技术发展的原动力
• 我们需要好的抽象来表达人类世界中的需求
  • 简单可靠，聚集大量行业开发者
    • AI 也许是这里的 “开发者”
  • 灵活通用，构造各种应用程序

单机 → 互联网 → 移动计算 → ???

• 机遇和不确定
• 风险和回报