前端分析 2022

frontend web 2022

前端框架分析

先说结论

个人项目可以尝试 vue 3.0，用 <script setup> + 模板语法，不使用 jsx。由于历史包袱太重，想总结出最佳实践可能有一定的难度。要用 nuxt。

求职、公司项目优先使用 react，占有率高、体验一致、ts/自动化测试支持完整。但不同公司会采用五花八门的分支技术，比如 css in js 等。

svelte 已有 SSR 框架，可以投入项目尝试，但优势区间很狭隘，目前只适合 web component。因此无需尝试。

solid js 未来可期，react with hooks + svelte + mobx + 没有任何黑魔法，纯 jsx 语法。作者被网飞招了专职做 solid js，值得期待。但部分语法不够优雅，且目前没有 SSR 支持，保持观望。

vue 3.0 细节

要不要用组合式 API

要。并且要完全使用组合式 API、抛弃 option API，严禁混合使用。并且应该使用 <script setup> 而非 option setup，这样开发体验更一致，体验更优雅。

要不要使用 JSX

不要。

JSX 会导致无法使用 <script setup>，并且会不得不混用一些 option API。

JSX 的性能不如模板语法，且 vue 是基于模板实现的，JSX 支持并不算好，比如 v-model 等 API 可以混用会导致代码更加混乱。

antd 使用 jsx，但 nuxt、element ui 使用模板，足以证明模板可以适应大部分情况，jsx 的灵活性并不是非要不可。如果有必要，也可以以变量的形式使用 jsx。

要不要用 Nuxt

要。

服务端渲染非常普遍，可以不用，但不能不会。有 Nuxt 也能做一些简单的 endpoints，个人项目会更轻松

react 细节

SSR 框架目前社区最喜欢 next.js，没仔细研究，要看就看这个吧。

CSS 框架分析

tailwind、windi 等原子类框架甚至不如 bootstrap，远离。

scss、less 等，没深入看最新情况，优先保持使用 scss。

react 优先使用 linaria。

vue 优先使用 scope css。虽然性能并不太好，且样式覆盖仍然是个问题，但作为官方的解决方案，维护成本是最低的，因此一些牺牲可以接受。

Node.js 框架分析

没人用，学了也白学。有需求不如直接上各个前端框架配套的 SSR 框架。

非要用的话优先考虑 Koa、fastify，尽量别用原版 express。

Native 前端框架分析

很久没关注了，没法说具体的分析过程，但结论是有的：

All in flutter！

前端工具分析

webpack 可以慢慢考虑淘汰了。

esbuild / vite 应当作为第一优先级的选择。

其他前端技术

Tauri

electron 的优秀代替品。

WebRTC

Web 实现两台 PC 之间的 P2P 通信，基于 UDP 而非 TCP。牺牲一部分可靠性换来更快的响应速度。

开发 WebRTC 可以使用 peerjs 以及 peerjs-server。

但直播不能直接端对端，因为发送端需要给每个接收端都发送一遍一样的内容，上行带宽压力过大。所以理论上需要发送端发给服务器，服务器发给接收端，因此虽然使用了 p2p 但是仍然可以被监控。

WebTransport & WebCodecs

参考：https://web.dev/i18n/en/webtransport/

WebTransport 是 WebRTC 体系下的一套浏览器 API，用于 客户端-服务器 的双向通信。但与 WebRTC 底层协议略有不同，具体是怎么回事儿我没看懂。

因为 WebRTC 体系支持流媒体传输，且 WebTransport 是客户端-服务器的双向通信，所以经常与 WebCodecs（Web 音视频解码 API）结合进行直播、语音等项目的结合。

PWA & WebAssembly

不温不火，且中国有国情限制。有需求再说。