未来前端技术的三个发展方向

[3dwelcome]

目前是 VUE 和 React 占统治地位，这没什么好说的。

放眼未来，有三个新技术领域，值得去深入研究。

1. Svelte

不论 VUE 和 React ，运行时都需要带上框架 JS ，而 Svelte 是第一个创新用纯编译技术，把那种双向绑定的概念，直接编译成轻巧的 JS 。

2. 浏览器官方的 Web 组件技术

我们每天都在用 VUE 或 React ，开发各种组件。官方察觉到了这点，加入了 customElements.define 语法支持，在浏览器里，不需要导入额外框架，原生就支持 Web 组件。前端库代表是 LitHTML 。

3. Blazor

通常前后端代码分离，本质上是后端的代码，无法访问前端界面的 UI 状态。而 Blazor 加入，彻底改变了游戏规则，使用 websockets ，能很轻松的把客户端 UI 状态，实时同步到服务器上，再加上 webasm 辅助，后端完全有能力操作前端的 DOM 。
这样前后端开发，不需要写两套代码，只需要同一套代码库可以了。当然 nodejs 也是可以，但是 nodejs 并没办法把前端 UI 状态实时同步到后端，还是有一点软肋的。

[agdhole]

未来前端的方向：RUST WASM

[kop1989]

准确的说，和目前的框架形成相对直接竞争关系的，也就是 Svelte 。
剩下两个其实都是解决不同需求的产物。

Web Components 解决组件的复用与封装。
Blazor 其实就是微软派系的，能够轻松的实现服务器端渲染（ Blazor Server ），或者是单页面应用（ Blazor WebAssembly ，用 C#写前端）

然后就是关于“未来发展方向”的问题。
其实技术的发展，很大程度上不取决于这个技术理念多么的先进，效率绝对高。这只是必要不充分条件。
更多的取决于当前软件行业的生态状态，以及未来硬件影响的前端呈现方式等。

Vue 、React 等之所以流行，我个人理解，很大程度上和他们身属互联网资本有关系。这些框架都是互联网资本圈地的手段。他们的机制与设计理念又契合当前的软件工程方法论（大公司、小团队、人员迭代频繁）,也就是康威定律。

[agdhole]

前端应用方向，可能是个捡钱的风口，blockchain web3 ，dapp

[sujin190]

以上三个都是毛用没有的东西啊，哪看出未来了

第一个数据绑定的问题是 js 变量和 dom 、样式以及事件变化同步的问题，你再怎么编译也改不了这个啊，所以没有运行时扯的吧，顶多叫运行时打散使用可选编译和业务代码编译在一起了
第二个这东西都说了快十多年了吧，有没有用还用说
第三这种顶级坑货就更不用说了，服务器无状态硬生生搞成有状态，难度复杂度提高十倍不止还不能适应各种环境问题吧，谁选这种方案真是作死

过去十年前端能大发展本质还是互联网行业的繁荣催生的，互联网啥情况不用说，所以前端技术方向也不可能再沿着这个方向继续发展了，这就好比十年前 pc 时代，各种 ui 框架也是做的很牛逼，可是之后呢，所以紧跟时代步伐啊

[anguiao]

先定义一下“没有运行时”吧，Svelte 编译生成的代码里面还是会有额外的东西，你觉得算不算运行时呢？
随着项目规模增长，用到的框架功能也越来越多，最后生成的代码体积优势应该也不会很大。

[3dwelcome]

@kop1989

"Vue 、React 等之所以流行，我个人理解，很大程度上和他们身属互联网资本有关系。"

我觉得吧，随着 CPU 算力不断提升，前端能做的事情越来越多，代码必定会越来越复杂，这是趋势。

Vue 和 React 也有一点软件工程管理的味道在里面，但是 JS 并不适合过于复杂的项目，总觉得难以掌控，多人开发一不小心，就会跑偏航道，让代码难以维护。

看了 web.autocad.com 后，更是感叹 web 远不止提交表单那么简单，已经可以运行很复杂的桌面程序了。

[3dwelcome]

@anguiao

Svelte 是一种全新的理念，能让你脱离现有 VUE 框架和 React 库的概念，从上帝视角重新看 MVVM 架构的程序。

我自己前端项目，已经改用动态编译后执行了。再也不用写 margin-left:10px; margin-right:10px;之类的超长代码，可以全部用自定义缩写 mx-10 。更短代码等于可维护性更高。

加入新语法糖 => 自动生成一部分辅助 JS => 程序获得全新的能力。就是 Svelte 带来的技术新理念，进化的力量。

[3dwelcome]

@sujin190

“第三这种顶级坑货就更不用说了，服务器无状态硬生生搞成有状态，难度复杂度提高十倍不止"

不同技术，在不同的场景下，都有其适应性。

有些时候，React 真的可以把页面做的过于复杂。那么这时候，改成 Blazor ，是可以化简一些代码和逻辑的。

我们最好学一个技术吃十年，问题是你不去卷别人，别人就会来卷你。前端工程复杂化，是无法避免的，只能去适应。

[XCFOX]

个人觉得前端发展的方向：

1. 跨平台
一次编写，到处运行。
目前比较成熟的是 React Native 和 Flutter ，微软的 MAUI 还处于玩具阶段。

2. 低代码
移动端开发有 Android Studio 的布局编辑器，桌面端开发有 Blend 。各种设计工具(蓝湖、figma)也自带输出各端代码的能力。希望以后 view 层的代码能做到由 UI 设计师输出，由开发者优化。

[3dwelcome]

@XCFOX

“目前比较成熟的是 React Native 和 Flutter ，微软的 MAUI 还处于玩具阶段。“

看什么发布平台了，手机平台 Flutter 可以，但 PC 平台 Flutter Web 端性能一言难尽。

Flutter 什么都要自绘制，连浏览器优化的 Input 控件都用不上，像是那种蹩脚的 Flash 全屏版本。

相比而言，反而是基于原生浏览器控件的 MAUI ，更胜一筹。

[Bijiabo]

@3dwelcome Flutter 要成功也不是没有可能的，只要 Flutter 将谷歌、苹果都收了就可以了，毕竟如果要保障 Flutter 的体验至少要重置并超越现有的 Android 、iOS 官方 UI 库，还要每年跟得上更新节奏。

收购完成之后，最好让罗永浩来掌舵，新款 iPhone 的交互界面强制全部使用 Flutter 来绘制... ...

[streamrx]

web3 才是未来

[murmur]

又 nm 吹区块链 烦不烦 下面是不是元宇宙啊 原神都做不过还元个屁的宇宙
这也就是欺负国内政策严，不允许开发赌博，要是王者荣耀和和平精英可以开赌，还有 dapp 什么事

别说这俩游戏了，斗地主可以赌都轮不到 dapp

[7gugu]

wasm 感觉真的是能做很多东西，但我不感觉会让后端来操作前端，如果是方向的话，不就又倒退回模板引擎的时代了吗？

[yaphets666]

wasm 的作用你让你做本地运行 SDK 用的,比如 web 端在线音视频剪辑.不是让你拿来写表单,写页面用的.

普通的前端的未来就是更好用的 vue 和 react.或者类似的东西.web 端未来一定会走向轻量化.不会再搬重的东西上来.
而且 web 端也会逐渐没落.

利益相关:本人专业前端.

[murmur]

@yaphets666 这东西为啥不做 app ，app 的性能只会比 wasm 更好，内存占用也不受浏览器的拘束

xx 剪辑满地都是，专业的、玩具的、傻瓜的都有

[Leviathann]

blazor 和 elixir phoenix 的方案有啥区别 除了用到了 wasm
好像都用服务器存状态

[DICK23]

第二点甚至已经不是未来了，谷歌大量的页面都是自定义元素

[3dwelcome]

@7gugu "但我不感觉会让后端来操作前端，如果是方向的话，不就又倒退回模板引擎的时代了吗？"

不一样，以前后端代码只能用模板生成 HTML ，没办法直接嵌入逻辑代码的。

一个最简单的 onclick 事件都处理不了，现在不一样了，有了 websocket 加入，能把浏览器 UI 控件的当前状态，实时同步到后端，等 onclick 逻辑处理完后，再把状态结果，用命令形式发送到前端。

有那么一点点 RPC 远程调用函数的意思。代码是在服务器端写的，能用 WASM 在客户端运行。UI 状态是在浏览器侧的，也能克隆上服务器上。让原本前后端分离这个“边界”，给模糊掉了。

[kop1989]

@3dwelcome #6
其实我一直认为，非常复杂、沉重的业务实现用 web ，实在不是合理的选择。

各司如此决策，只不过馋于浏览器这个存在了几十年的最大互联网入口，再加上当今过度冗余的带宽和客户端性能，让 web 也有了挥霍性能，承载高复杂度业务的需求。

不过这个现象目前已经开始了收敛。
出于一些其他的目的（包括但不限于考虑隐私的获取难度、以及逐渐膨胀的客户端内容），应用在借着 webview 、跨平台框架回归于 app 。

所以我也一直想，只要这帮玩概念，玩圈地的互联网大鳄们不倒，程序员就没有好日子过。程序员永远会在追逐他们的需求下疲于奔命的学习新的框架、技术、内卷。

他们的需求和商业目的会将 IT 技术发展与进步无限的异化。
IT 技术会发展的越来越傻瓜化，开箱即用化，模块化。
越来越不极致。（当然，从另外一个视角看，这也是一种进步）