未来前端技术的三个发展方向 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3dwelcome
V2EX    前端开发

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

  •  
  •   3dwelcome 2021-12-22 11:51:04 +08:00 4992 次点击
    这是一个创建于 1467 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前是 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 状态实时同步到后端,还是有一点软肋的。
    34 条回复    2021-12-23 09:27:26 +08:00
    agdhole
        1
    agdhole  
       2021-12-22 12:26:32 +08:00   1
    未来前端的方向:RUST WASM
    kop1989
        2
    kop1989  
       2021-12-22 12:28:51 +08:00
    准确的说,和目前的框架形成相对直接竞争关系的,也就是 Svelte 。
    剩下两个其实都是解决不同需求的产物。

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

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

    Vue 、React 等之所以流行,我个人理解,很大程度上和他们身属互联网资本有关系。这些框架都是互联网资本圈地的手段。他们的机制与设计理念又契合当前的软件工程方法论(大公司、小团队、人员迭代频繁),也就是康威定律。
    agdhole
        3
    agdhole  
       2021-12-22 12:37:03 +08:00
    前端应用方向,可能是个捡钱的风口,blockchain web3 ,dapp
    sujin190
        4
    sujin190  
       2021-12-22 12:38:58 +08:00
    以上三个都是毛用没有的东西啊,哪看出未来了

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

    过去十年前端能大发展本质还是互联网行业的繁荣催生的,互联网啥情况不用说,所以前端技术方向也不可能再沿着这个方向继续发展了,这就好比十年前 pc 时代,各种 ui 框架也是做的很牛逼,可是之后呢,所以紧跟时代步伐啊
    anguiao
        5
    anguiao  
       2021-12-22 12:39:08 +08:00
    先定义一下“没有运行时”吧,Svelte 编译生成的代码里面还是会有额外的东西,你觉得算不算运行时呢?
    随着项目规模增长,用到的框架功能也越来越多,最后生成的代码体积优势应该也不会很大。
    3dwelcome
        6
    3dwelcome  
    OP
       2021-12-22 13:07:49 +08:00
    @kop1989

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

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

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

    看了 web.autoad.com 后,更是感叹 web 远不止提交表单那么简单,已经可以运行很复杂的桌面程序了。
    3dwelcome
        7
    3dwelcome  
    OP
       2021-12-22 13:16:37 +08:00
    @anguiao

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

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

    加入新语法糖 => 自动生成一部分辅助 JS => 程序获得全新的能力。就是 Svelte 带来的技术新理念,进化的力量。
    3dwelcome
        8
    3dwelcome  
    OP
       2021-12-22 13:22:21 +08:00
    @sujin190

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

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

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

    我们最好学一个技术吃十年,问题是你不去卷别人,别人就会来卷你。前端工程复杂化,是无法避免的,只能去适应。
    XCFOX
        9
    XCFOX  
       2021-12-22 13:37:33 +08:00
    个人觉得前端发展的方向:

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

    2. 低代码
    移动端开发有 Android Studio 的布局编辑器,桌面端开发有 Blend 。各种设计工具(蓝湖、figma)也自带输出各端代码的能力。希望以后 view 层的代码能做到由 UI 设计师输出,由开发者优化。
    3dwelcome
        10
    3dwelcome  
    OP
       2021-12-22 13:42:46 +08:00
    @XCFOX

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

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

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

    相比而言,反而是基于原生浏览器控件的 MAUI ,更胜一筹。
    Bijiabo
        11
    Bijiabo  
       2021-12-22 13:58:52 +08:00   2
    @3dwelcome Flutter 要成功也不是没有可能的,只要 Flutter 将谷歌、苹果都收了就可以了,毕竟如果要保障 Flutter 的体验至少要重置并超越现有的 Android 、iOS 官方 UI 库,还要每年跟得上更新节奏。

    收购完成之后,最好让罗永浩来掌舵,新款 iPhone 的交互界面强制全部使用 Flutter 来绘制... ...
    streamrx
        12
    streamrx  
       2021-12-22 14:57:51 +08:00 via iPhone
    web3 才是未来
    murmur
        13
    murmur  
       2021-12-22 15:03:07 +08:00
    又 nm 吹区块链 烦不烦 下面是不是元宇宙啊 原神都做不过还元个屁的宇宙
    这也就是欺负国内政策严,不允许开发赌博,要是王者荣耀和和平精英可以开赌,还有 dapp 什么事

    别说这俩游戏了,斗地主可以赌都轮不到 dapp
    7gugu
        14
    7gugu  
       2021-12-22 15:08:12 +08:00
    wasm 感觉真的是能做很多东西,但我不感觉会让后端来操作前端,如果是方向的话,不就又倒退回模板引擎的时代了吗?
    yaphets666
        15
    yaphets666  
       2021-12-22 15:12:13 +08:00
    wasm 的作用你让你做本地运行 SDK 用的,比如 web 端在线音视频剪辑.不是让你拿来写表单,写页面用的.

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

    利益相关:本人专业前端.
    murmur
        16
    murmur  
       2021-12-22 15:13:25 +08:00
    @yaphets666 这东西为啥不做 app ,app 的性能只会比 wasm 更好,内存占用也不受浏览器的拘束

    xx 剪辑满地都是,专业的、玩具的、傻瓜的都有
    Leviathann
        17
    Leviathann  
       2021-12-22 15:16:31 +08:00
    blazor 和 elixir phoenix 的方案有啥区别 除了用到了 wasm
    好像都用服务器存状态
    DICK23
        18
    DICK23  
       2021-12-22 15:19:46 +08:00
    第二点甚至已经不是未来了,谷歌大量的页面都是自定义元素
    3dwelcome
        19
    3dwelcome  
    OP
       2021-12-22 15:22:52 +08:00   1
    @7gugu "但我不感觉会让后端来操作前端,如果是方向的话,不就又倒退回模板引擎的时代了吗?"

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

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

    有那么一点点 RPC 远程调用函数的意思。代码是在服务器端写的,能用 WASM 在客户端运行。UI 状态是在浏览器侧的,也能克隆上服务器上。让原本前后端分离这个“边界”,给模糊掉了。
    kop1989
      &nbp; 20
    kop1989  
       2021-12-22 15:25:38 +08:00
    @3dwelcome #6
    其实我一直认为,非常复杂、沉重的业务实现用 web ,实在不是合理的选择。

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

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

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

    他们的需求和商业目的会将 IT 技术发展与进步无限的异化。
    IT 技术会发展的越来越傻瓜化,开箱即用化,模块化。
    越来越不极致。(当然,从另外一个视角看,这也是一种进步)
    3dwelcome
        21
    3dwelcome  
    OP
       2021-12-22 15:40:26 +08:00
    @kop1989 谁不馋这个互联网巨大入口呢。

    现在移动端 APP 和传统 PC 客户端日子都不太好过,缺乏足够给力的宣传渠道。

    而类似 notion/figma 那种互联网新产品,只要有一点点与众不同,单一领域做深做强,就能迅速崛起。
    agdhole
        22
    agdhole  
       2021-12-22 16:47:48 +08:00
    @murmur #13
    你这是魔怔了?去做区块链做开发赚钱而已,又不是要你进去跟着赌和信仰资本概念。
    这个贴的回复也没人在吹什么区块链元宇宙吧。

    现在一个 solidity 开发能开到 $50-150k ,bbsnetwork 拿了 binance $1.5M ,赚钱机会而已,怎么你这么激动。
    Desiree
        23
    Desiree  
       2021-12-22 16:50:04 +08:00
    @murmur 思想太狭隘了,可能是根本没接触到,所以就本能抵触吧
    murmur
        24
    murmur  
       2021-12-22 16:54:54 +08:00
    @Desiree 那的确思维太狭隘了,全球每年 drug 销量每年 1000 个亿呢,比起这个区块链还是弟弟,恰饭就恰饭吹什么技术


    我还是那句话,吹区块链技术的话,找一个能满足下面条件的案例(不能虚构)

    1 、必须是真的比现有两地三中心更能解决问题

    2 、必须符合国内的法律(毕竟这是中文社区,主要用户还没翻出去)

    3 、必须真的解决了核心问题,比如区块链跟踪,谁来保证区块链跟实物是一一对应的,监控探头还是公证处?

    4 、不能带来更严重的问题,比如我说某个人是 sx ,这个东西上链了不能修改,怎么办,如果说美国,那我写满 nigga 行么
    agdhole
        25
    agdhole  
       2021-12-22 17:07:06 +08:00
    @murmur #24

    数字 cny 不就是上的联盟链的么,还有 nft ,除了支付宝自己搞了个蚂蚁链在上面发 nft ,就今天央行也发了个 nft
    agdhole
        26
    agdhole  
       2021-12-22 17:09:08 +08:00
    @agdhole #25 是新华社不是央行,打错了
    murmur
        27
    murmur  
       2021-12-22 17:13:59 +08:00
    @agdhole

    所以呢,3 ,他真的解决了核心问题么,各种网游搞稀有装备、皮肤、坐骑、外观,没区块链一样搞得,但是架不住别人各种复刻、重置

    有区块链呢,我一样可以复刻、重置,别忘了区块链只管一个序列号,他没任何实体属性的,你的东西虽然在链上,承载这个东西的客户端没了你就剩个序列号,新游戏或者客户端会帮你老链做一套实现?傻的

    数字人民币直到现在没有公开最终实现技术,尤其是很多人在猜的双离线支付怎么实现
    kop1989
        28
    kop1989  
       2021-12-22 17:19:47 +08:00
    @agdhole #24 我觉得如果要讨论区块链相关。最起码要先定义清楚“区块链”这个被唱多方故意混淆的概念吧。

    1 、狭义上的“区块链”,指的是一种分布式算法。用于实现相对去中心化时的信任问题。
    2 、市场投资角度上的“区块链”,指的是当前黑市(没错,就是黑市)交易火爆的加密货币。
    3 、区块链一般指的都是“公链”,比如你说的数字人民币,其实是借鉴了区块链算法的分布式架构而已。出处: https://new.qq.com/omn/20210526/20210526A0EF1Y00.html

    如果不明确概念和讨论的角度,利用这三个概念反复横跳,确实你永远是对的。
    agdhole
        29
    agdhole  
       2021-12-22 17:24:54 +08:00
    @murmur #27
    游戏这个问题我之前在 space 上面也聊过很长时间,不过个人观点游戏的可玩性还是远大于存储价值的,现在搞出来的 gamefi 就纯资金盘,变相 defi 开头矿,这个月像 raca 这种 4399 游戏代币都脚斩了奔着归零去了。
    存储认证的价值还是要看 nft 的应用,国内外你也看得到 nft 的合法应用。

    不过这个贴从头到尾都没看见有人说什么元宇宙,链游什么的,一直争论这个没意义,至少这个贴没看见有人感兴趣。
    agdhole
        30
    agdhole  
       2021-12-22 17:28:32 +08:00
    @kop1989 #28

    数字人民币进展《白皮书》发布,首次确认部分使用区块链技术
    https://www.jiemian.com/article/6368247.html
    这篇文章可以看一下。

    区块链还能像你这么分吗?代币就是代币,怎么还来个市场投资角度。
    非得有人吹区块链然后让你梭哈,一律认为诈骗就是了。
    agdhole
        31
    agdhole  
       2021-12-22 17:34:55 +08:00
    @kop1989 #28
    coinbase 这种交易所在美国属于合法机构,当然你把所有不符合中国法律都东西都认为是非法产业黑色产业也没问题,炒美股或者炒外汇国内有散户合法受监管的投资渠道吗?没有的话那你也可以说是黑市。

    投资是投资,技术是技术,我靠 sandbox 的代币小赚了一笔,但是我也从来不会吹这玩意是什么元宇宙未来。
    Desiree
        32
    Desiree  
       2021-12-22 20:14:41 +08:00
    @murmur 我觉得你应该先去使用这方面的技术,或者体验过区块链再去到处喷人比较好。你发表的言论,真的很搞笑,观点也相当狭隘,居然还用 drug 做类比,真的是让人不知道怎么形容。我也不是区块链的信徒,只是一个普通用户。我没有吹区块链的意思,只是觉得你个人的言论根本就没提到哪怕些许的技术问题,只是单纯的宣泄个人情绪,谈论一些你个人觉得很狭隘的问题,如:(第二点,必须符合国内的法律(毕竟这是中文社区,主要用户还没翻出去)),(第三点,必须真的解决了核心问题,比如区块链跟踪,谁来保证区块链跟实物是一一对应的,监控探头还是公证处?)。话题就到这,我是无法说服你的,你可以持自己“独特”的观点去看待技术,技术的进步不是一两个人能够阻挡的。到此。
    maplelin
        33
    maplelin  
       2021-12-22 22:34:49 +08:00
    我觉得 1 意义不大,前端虽然性能很关键,但是相对于 react 和 vue 带来的性能提升,svelte 继续提升性能的收益已经不大了。svelte 给前端的意义也远远没有 react 和 vue 带来的低开发门槛的意义大。还有就是 js 体积在网络带宽大大溢出的前提下成为性能问题的可能性太低了。

    现在的前端复杂应用的性能问题主要来自于复杂的动效和大量的渲染或者 web app 的大量计算量,如果有足够轻量的渲染引擎或者动效库,实际带来意义应该远远大于 svelte 。
    elboble
        34
    elboble  
       2021-12-23 09:27:26 +08:00
    第 3 点,有点分久必合,合久必分的意思了,要不是螺旋式上升?

    不过 websocket 消耗资源会比较多吧,服务器和终端复杂度都提升了,是不是再来个框架,简化下开发。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2458 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 05:22 PVG 13:22 LAX 21:22 JFK 00:22
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86