现代前端UI框架反思

广告位招租
扫码页面底部二维码联系

背景本文版权归作者所有,未经授权不得转载。

未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。

最近了解了一门新框架 著作权归作者所有,禁止商业用途转载。alpine.js【原创不易,请尊重版权】,再惊叹其简洁的同时,开始反思前端框架(【版权所有,侵权必究】【转载请注明来源】特指 vue react 之类的 UI 著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】框架),真如我们所需要的吗?如果我还在用【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。 jquery,你或许会说我老古板,但是【本文首发于唐霜的博客】【版权所有,侵权必究】,网络上曾经流传一个段子,“2019年你【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】如何启动前端开发”,nodejs, we本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】bpack, babel, cli【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】230; 各类工具充斥着我们的视野,以至【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。于让我们开启一个前端应用开发,需要九牛二【作者:唐霜】【版权所有】唐霜 www.tangshuang.net虎之力,花费大量力气去解决、配置各种编译转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。打包工具。虽然工具给我们在工程化方面带来【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。了很多可能性,甚至衍生出 typescr【本文受版权保护】著作权归作者所有,禁止商业用途转载。ipt,以及前两天字节开源的 moder本文作者:唐霜,转载请注明出处。原创内容,盗版必究。n.js 这样的项目,但不可否认,纯粹前【版权所有】唐霜 www.tangshuang.net【作者:唐霜】端魔法的乐趣,在这些工具面前逐渐被消磨了【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net,慢慢的,前端开发,特别是在特定项目中的本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。前端开发,编程了工具配置和框架使用的纯搬【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net砖工作,所以面试只需要面工具和框架,就好原创内容,盗版必究。原创内容,盗版必究。了,有点太偷懒了。我开始疑惑,10 年前【原创不易,请尊重版权】原创内容,盗版必究。刚开始玩前端时候的乐趣和惊叹去哪里了?

原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。

未经授权,禁止复制转载。【作者:唐霜】未经授权,禁止复制转载。

我们从来都是在这条曲线上前行,在“乐趣-著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。工程”和“严谨-魔法”这两个象限的探索也【作者:唐霜】本文版权归作者所有,未经授权不得转载。并非没有过,却基本上属于前端的异类。实际本文作者:唐霜,转载请注明出处。【作者:唐霜】上,前端除了常见的信息流系统外,还有类似转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】游戏、绘图等其他类应用,但它们却不在主流原创内容,盗版必究。未经授权,禁止复制转载。前端的队伍中。市面上 100 家公司招前【转载请注明来源】著作权归作者所有,禁止商业用途转载。端,有 100 家要求熟悉特定的前端框架【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net,这使得类似 figma 或 photopea【本文受版权保护】 这样的应用在国内显有遇见。本文版权归作者所有,未经授权不得转载。

【本文受版权保护】【版权所有,侵权必究】【原创不易,请尊重版权】

我在过去两年没事的时候,就会把玩一些框架原创内容,盗版必究。未经授权,禁止复制转载。,感受它们的奇特之处。比如 cycle.转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。js 或者前面提到的 alpine.js未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net,会有一些体会。随着框架技术的普及,不同【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】的公司,可以轻轻松松出自己的框架,比如阿原创内容,盗版必究。本文作者:唐霜,转载请注明出处。里的 rax,比如 taro 等等。20未经授权,禁止复制转载。未经授权,禁止复制转载。20 年微前端话题火了,我又开始看相关的转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】框架,自己也造了一个 mfy,直到 we转载请注明出处:www.tangshuang.net【版权所有,侵权必究】bpack foundation 出来,【作者:唐霜】【版权所有,侵权必究】我彻底懵了,这和 sea.js 有本质区原创内容,盗版必究。未经授权,禁止复制转载。别吗?这刺激我思考,是不是技术兜兜转转又原创内容,盗版必究。【转载请注明来源】回到了从前,或者用优雅的词描述叫“螺旋式著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】上升”?前段时间在某乎表达了对某 v*t转载请注明出处:www.tangshuang.net【转载请注明来源】* 工具的看法,马上就被它的作者猛怼了两【本文首发于唐霜的博客】【本文受版权保护】段话,我原本以为能写出这么优秀的工具的作【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】者应该是会用技术说服人,没曾想热度大压死【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。人,哎。。。如果说 bundless 是【原创不易,请尊重版权】【本文受版权保护】接下来的趋势,那我在想,为什么还要服务端【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】去 compile 那一下呢?我们全部人【转载请注明来源】转载请注明出处:www.tangshuang.net都写 ESModule 的代码不就好了吗【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】?“以前的 npm 遗留问题”,不就是用著作权归作者所有,禁止商业用途转载。【转载请注明来源】 export 包一下的事情吗?bund转载请注明出处:www.tangshuang.net【版权所有,侵权必究】less 个啥?

未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

这些略带情绪的想法,促使我思考,前端领域【转载请注明来源】本文版权归作者所有,未经授权不得转载。的种种所谓工程化、工具链,是否真正为开发转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。人员或产品本身解决了问题,还是带来的问题【本文首发于唐霜的博客】【原创内容,转载请注明出处】更多一些?今天刚看到一个叫 livewi【版权所有,侵权必究】【版权所有,侵权必究】re 的项目,以及最近接触《数据密集型应【未经授权禁止转载】转载请注明出处:www.tangshuang.net用系统设计》一书,感觉整个前端是否真的为转载请注明出处:www.tangshuang.net【版权所有,侵权必究】技术系统的发展带来了什么价值,没有了前端【本文受版权保护】著作权归作者所有,禁止商业用途转载。,或者说,没有了时下那么复杂的 mode转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。rn 前端,这些应用系统是不是没法设计出未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】来,或者出来也很难用?我想答案是否定的,【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。可以说,即使没有现在这么复杂的前端工程化【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】,只需要利用 livewire 这类工具【本文首发于唐霜的博客】【版权所有,侵权必究】,就可以让后端人员独立完成大部分数据驱动原创内容,盗版必究。【转载请注明来源】的应用(类似 figma 或 photo本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】pea 这样的应用则后端无力)。这么来看【原创内容,转载请注明出处】【原创内容,转载请注明出处】,前端这些年,轰轰烈烈的发展,发展了个响转载请注明出处:www.tangshuang.net【版权所有,侵权必究】

【转载请注明来源】未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】

Web 技术过时了本文版权归作者所有,未经授权不得转载。

【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net

现在 2021 年,似乎很多 web 技【未经授权禁止转载】【本文首发于唐霜的博客】术都过时了。比如基于 css 的阴影、过【关注微信公众号:wwwtangshuangnet】【本文受版权保护】渡动画、圆角、栅格等等,这些具体的东西,原创内容,盗版必究。【本文首发于唐霜的博客】在前端越来越少人提及,大家一开口都是 c本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netss in js,或者 styled-c【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。omponents,甚至现在提出来 dy【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】namic styles 等等。几年前我【本文受版权保护】原创内容,盗版必究。们所依赖的 web 基础技术,现在好像过著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。时了,虽然每年都有国际国内的 css 大转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。会,但是,并不是主流,而在众多前端大会中本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net,大家都在讨论的是低代码、工程化、跨平台【原创内容,转载请注明出处】【未经授权禁止转载】开发、 设计、serverless 等等【本文受版权保护】未经授权,禁止复制转载。。新概念层出不穷,各类架构设计狠狠内卷,著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】看上去一派繁荣景象,实则令人担忧。

转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】未经授权,禁止复制转载。【未经授权禁止转载】原创内容,盗版必究。

在过去的几年里,web 前端技术确实发展【本文受版权保护】【本文受版权保护】了。例如 PWA、WebAssembly未经授权,禁止复制转载。【转载请注明来源】、WebRTC 等技术的出现,HTML5【本文受版权保护】本文作者:唐霜,转载请注明出处。 和 CSS3 的演进,但很多技术,对于【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。趴在框架上完成业务系统的开发者们而言,它【原创内容,转载请注明出处】【本文首发于唐霜的博客】们的出现或发展对于自己的工作几乎没有任何【未经授权禁止转载】本文作者:唐霜,转载请注明出处。帮助,内心毫无波澜,甚至觉得是在乱搞飞机【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。。与其说 web 技术式微,不如说其下沉【作者:唐霜】未经授权,禁止复制转载。。例如 webrtc 等技术,如果不用封【转载请注明来源】著作权归作者所有,禁止商业用途转载。装库,一般开发者根本不知道怎么用,甚至不本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。知道有这玩意。离开了高级的封装库,一些开著作权归作者所有,禁止商业用途转载。【作者:唐霜】发者根本不知道该怎么使用,比如在 jQu【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。ery 时代,很多人不会原生的 DOM 未经授权,禁止复制转载。原创内容,盗版必究。操作,而到了 react 时代,甚至不知本文作者:唐霜,转载请注明出处。【未经授权禁止转载】 DOM 为何物。

【本文首发于唐霜的博客】【本文受版权保护】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。

除了 web 应用之外,基于 web 技本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。术的跨端实现也层出不穷,react na原创内容,盗版必究。【转载请注明来源】tive 开头,后面衍生了一大堆基于原有本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。 web 写法的原生应用开发方式。但这类【本文受版权保护】著作权归作者所有,禁止商业用途转载。跨端方案只能写 UI,需要调用系统层组件著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net的能力全都做不到。基于 JS 运行时的客著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。户端,性能又不怎么样,美其名曰更少的人力原创内容,盗版必究。【原创不易,请尊重版权】做更多事,实则是用三流的人写三流的应用。

【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。

或许,不是 web 过时了,而是不带这些【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】低劣的人和应用们一起玩了,随着 weba【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ssembly 的发展,逐渐把 web 【未经授权禁止转载】转载请注明出处:www.tangshuang.net应用转交给其他语言的开发者,让这些搞来搞未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net去在搞各种工具链自以为是的前端开发好自为【转载请注明来源】本文版权归作者所有,未经授权不得转载。之。

本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。

没有性能,不成方圆原创内容,盗版必究。

原创内容,盗版必究。【转载请注明来源】转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。【作者:唐霜】

现在一个应用打包之后几个 M 再正常不过本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】了。代码中充斥着 O(n2) 的多层遍历【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。,美其名曰“先抗住再优化”,这种论调我可本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。以理解为“功能我实现了,不到万不得已,你本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。根本不知道我堆了一堆屎”。除非团队有明确【作者:唐霜】【版权所有】唐霜 www.tangshuang.net的指标和负责任的技术领导,否则,一个项目【转载请注明来源】本文作者:唐霜,转载请注明出处。的性能永远会失控。而这些毫不在意的性能,【本文受版权保护】【版权所有,侵权必究】正在慢慢毁掉软件领域的优秀积累,一代比一【转载请注明来源】本文作者:唐霜,转载请注明出处。代差,到最后,上个世纪的软件开发能力和素【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。质,将被望尘莫及,最后封神,但实际上,却未经授权,禁止复制转载。【未经授权禁止转载】是一代一代堕落而至。

著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。

在数据结构和算法上欠下的债,总有一天会在未经授权,禁止复制转载。【版权所有,侵权必究】重构中还回来。

【转载请注明来源】【本文受版权保护】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。

All in JS 的赌徒心态【关注微信公众号:wwwtangshuangnet】

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】原创内容,盗版必究。转载请注明出处:www.tangshuang.net【本文受版权保护】

把所有东西都写在一个 js 文件里,导致【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net代码功能混杂在一起,自以为是增加了灵活性著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。,实际上是不知所措的愚蠢表现。

【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【转载请注明来源】【关注微信公众号:wwwtangshuangnet】

例如,市面上所有的 UI 组件库都声称自【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net己是在统一设计语言下的产物,比如 ant【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netd 是 ant design,比如 se本文作者:唐霜,转载请注明出处。【转载请注明来源】mi design,但是从它们的官网,我本文作者:唐霜,转载请注明出处。【作者:唐霜】完全读不出它们的 design 究竟为何转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。物。说白了,他们是先有所谓的组件库代码,【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。然后再来谈设计。所以,在他们的资料中,设【原创内容,转载请注明出处】【转载请注明来源】计语言是附属品,代码,而且是特定条件下的著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】代码才是主体。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。【作者:唐霜】未经授权,禁止复制转载。

真正的 UI 组件库,一定是让使用者先了本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】解设计,再有通用的 css,最后才是各种【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。框架的封装库,而框架的封装应该是可远的,【版权所有,侵权必究】原创内容,盗版必究。而不是主体。本末倒置是这个时代,不单单是原创内容,盗版必究。未经授权,禁止复制转载。前端领域,的核心竞争力。就像前几天某大厂著作权归作者所有,禁止商业用途转载。【转载请注明来源】买星项目一样,为了完成 kpi 而毫无敬【原创内容,转载请注明出处】【未经授权禁止转载】畏之心,这样的公司,你能肃然起敬?

著作权归作者所有,禁止商业用途转载。【作者:唐霜】【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net

抛弃 css 成为前端乐此不疲的事,说明【原创不易,请尊重版权】【转载请注明来源】前端(或者整个行业)越来越不在乎(或者说【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。没有话语权)应用的设计与性能的平衡。说白【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。了,就是懒。

本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

类似 styled-components【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。 这类方案的流行,本质上就是牺牲性能和合转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。理组织的偷懒行为,因为你可以把样式用 j未经授权,禁止复制转载。【未经授权禁止转载】s 来写,从而不用去思考写东西该怎么去实【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。现,其他交给工具,不管是编译时,还是运行未经授权,禁止复制转载。【原创不易,请尊重版权】时。

【原创内容,转载请注明出处】【本文受版权保护】【原创不易,请尊重版权】

结语【本文首发于唐霜的博客】

原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net

近几年这种前端发展的风气,反过来说明前端【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的问题在于天花板低(门槛也低),就和一些【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。低门槛没有利润的行业一样,看上去琳琅满目【本文受版权保护】本文版权归作者所有,未经授权不得转载。,实际上一地鸡毛。而且,由于惯性,这种局本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】面基本上是不可能打破了,让人感到无比凄凉【本文首发于唐霜的博客】【版权所有,侵权必究】。不过,好在越来越多的后端技术栈开始去兼未经授权,禁止复制转载。【原创内容,转载请注明出处】容前端,这也就意味着未来的应用形态也会慢转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】慢重回统一,在一个架构中去实现,而非前后未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net端分离。而且,我相信这种前后端一致性,才原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。是未来的趋势。

【本文受版权保护】转载请注明出处:www.tangshuang.net【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。
已有3条评论
  1. 隔壁老王 2022-11-11 19:21

    楼主用心思考了,说得很好,切中行业弊端。alpine.js是一个非常优秀的框架,感兴趣的话可以了解下一个比它设计更加简单易用的前端框架:https://daggerjs.org,编码方式十分贴近原生js,同时又提供了数据绑定和监听功能。非常赞。

  2. rxliuli 2021-11-04 14:32

    前端确实很多时候都是在折腾,圈地自萌,但这也是前端社区的一部分,让前端生态变得相当繁荣。但从另一个角度看,很多东西不做也不知道有没有用。

    • rxliuli 2021-11-04 14:59

      另外 vite 挺好用的,比它的前辈 snowpack 兼容性好得多