简述前端发展脉络

"前端是个娱乐圈, 成天发明各种概念。"
"现在搞的服务端渲染, 那不就是炒 php 的冷饭?"
"前端千辛万苦爬到山顶, 却发现 phper 早已等候多时。"

本篇代码均为伪代码, 且不严谨不完善, 仅为示例

0. 纯静态 html

   XXX 博客欢迎你
   

1. 通用网关接口 CGI

   • 服务器上实现动态网页的通用协议。
   • 一次请求对应一个 CGI 脚本的执行，生成一个 HTML。
   • 不限语言, Perl、Shell 脚本、C 都行。

   print("""
     XXX 商城欢迎你
   
     <form onsubmit="/buy">
        <input name="count" />
        <button onclick="buy">买买买</button>
     </form>
   """)
   

2. js & php

   • js: 客户端执行一些脚本, 一方面节约服务端资源, 另一方面提高用户体验 (不用刷新整个页面);
   • php: 更便捷地混排 server data + html + js;

   欢迎 <?php echo $_POST["fname"]; ?>! <br>
   
   <script>
   function plus(a, b) {
     alert(`和为 ${a + b}`)
   }
   <script>
   
   <input name="a" />
   <input name="b" />
   <button onclick="plus">相加</button>
   

在此之前, 前端大多不能独立部署, 代码组织也受限于后端, "戴着镣铐跳舞"。

3. ajax

   js 能从服务端动态获取数据; 标志着前端有能力从代码层面脱离后端独立部署, 独立完成需求;

   <script>
     function buy(count) {
       fetch(`/buy?count=${count}`)
     }
   </script>
   
   <input name="count" />
   <button onclick="buy">买买买</button>
   

4. MVVM: react / vue / angular 等

   • 原则: 数据驱动视图;

   const unitPrice = 10
   const count = 0
   
   // 之前
   function onClick(newCount) {
     count = newCount
     const total = unitPrice * count
     countElement.innerText = `个数: ${count}`
     totalPriceElement.innerText = `总价: ${total}`
   }
   
   // 之后
   const total = unitPrice * count
   
   function onClick(newCount) {
     count = newCount
   }
   
   return (
     <div>
       <div>个数: {count}</div>
       <div>总价: {total}</div>
     </div>
   )
   

5. (4.1) 前端路由 (单页面)

   前端越来越简单, 能做的事情越来越多, 干脆一把梭, "路由也交给前端处理吧"; 前端统一组织代码, 切换页面本质上是组件替换, 能保留子组件状态, 能实现页面转场动画, 跳转还很快, 简直"一本万利"。

   if (pathname === '/a') {
     return <PageA />
   }
   if (pathname === '/b') {
     return <PageB />
   }
   

6. 服务端渲染 ssr

   • 单页面的问题: 首次渲染很重 (懒加载可以解决)、SEO 不友好;
   • (Node) 服务端渲染优点:
     • 有些东西在服务端就可以决定, 不需要发送给客户端, 降低传送的体积;
     • 服务端直出 html, SEO 友好;
     • 客户端、服务端语言一致, 类型可以共用;

   // server
   const config = await fetch('/config')
   
   if (config.aaa) {
     return <div>aaa</div>
   }
   if (config.bbb) {
     return <div>bbb</div>
   }
   

7. rsc (react server component)

   即使如 ssr, 也需要生成一整个 html, 然后发给客户端, 如果我们能流式传输, 服务端一边处理, 一边响应客户端呢? 那速度不得起飞?

   // 真实代码远不是这样, 这写法甚至是错误的, 只为简述, 理解概念
   const aaa = await fetch('/api/aaa')
   const bbb = await fetch('/api/bbb')
   const ccc = await fetch('/api/ccc')
   
   return (
     <div>
       <div>{aaa}</div>
       <div>{bbb}</div>
       <div>{ccc}</div>
     </div>
   )