写给热爱前端的你--2022 年度总结

2022年真是依托答辩，但哀鸿遍野的现状激起了我的逆反心，我要用这篇文章唤起大家的信心，对技术热爱的初心。能抬头看看更远的路，不只拘泥于眼前。

这篇总结会围绕两个部分进行，个人成长经验，当前前端技术发展的见解。第一第二部分可能比较适合小白，高手可以自行略过，去批判第三部分。

个人成长

我把一个合格前端开发的能力分为硬实力与软实力两个部分。硬实力：tech，以及相关的能力，软实力：!tech，一切非tech的能力都属于软实力。

硬实力

硬实力：网络协议/代码能力/设计能力/英语

代码能力

代码能力，包括写代码、解决问题、设计能力等等，一切有关代码的，都可以归为代码能力。

具体怎么提高，用时间堆，代码能力没有捷径，按一万小时原则，即一个什么都不懂的素人干一件事只要干够了一万小时他就是专家（同时解锁隐藏主线，修炼十万小时成为仙人）。代码能力可以通过做代码题/leetcode题，做公司需求去堆，用时间去硬刚。

做题/做需求的时候要经常想有没有更好的办法，看看别人怎么写的，可以了解不同的代码风格，并且思考哪种更合理。

更好的代码品味要多读更好的代码，比如各种开源库，推荐迭代比较久的库，比如vue/react这种，比较经典，不懂的话资料也好查，这些库的组织肯定都是经历过数次重构调整，而且有无数人抓马脚混contributor。业务代码的话可以推荐的不多，只能说大公司的技术素养确实会高，如果有条件，最好开局就去大厂。

带着思考去看代码、写代码，有的人看源码为了面试，或者看完感叹一句yyx牛逼，facebook牛逼。思考的点可以发散，往细节说，为什么选择多仓，为什么用lerna管理，react为什么需要flowjs，类型校验能不能用在我们的业务库里，会不会让我们的代码质量更好。再进一步，整个库让你来重写，你能不能写得更好。（yyx对vue的第一个commit也只是个刚工作不久的人，所以就能力而言，当时他能做到的大多数人也能做到）

PS：初期的时候很容易不清楚什么是基础，要懂哪些框架哪些工具，这时候可以看看培训班的课程，看个目录就行，就知道什么是基础代码能力了。

英语

另一个是英语，前端的潮流大多都是老外引领的，比较新的技术/框架/理念在国外都会先火起来，国内基本要滞后个三五年，这期间都没有中文文档看，甚至ts官网到现在都没中文的，同样的还有nestjs/nextjs等，出不出翻译全看运气，出了也可能落后，粑粑都吃不到新鲜的。倒不如直接先学一手英语，直接在浪潮之巅冲浪????‍♀️。这个也容易，就是强迫自己google的时候用英文搜，读英文资料，遇到不懂的就翻译一下，专业英语的词汇量就那么点，看得多了就会了。

软实力

软实力提升的基础是强大的硬实力，由于个人追求以技术为主，所以不考虑管理方面的内容。

影响力

影响力建设在技术领域特别重要，这个东西可大可小，纵向横向发展空间都很大。大家爱谈的人脉之类的都属于影响力建设。总的来说，纵向大致可以分为：个人影响力建设，团队影响力建设，公司影响力建设，中国技术牌面影响力建设。 如果希望在某个行业走得远，离不开某一方面的影响力建设，比如比如我想让中国的前端掌握技术话语权，搞些创造性的东西，让老外用谷歌翻译中文学习，吃我吃过的苦，参考谷歌开源的分析【此处加一个引用链接】，属于是做大蛋糕了，掌握了技术话语权往大了说引领人类进步的走向，往小了说狠狠地收米。这方面chromium跟andriod都是典范。在后面今年的潮流分析上也会提到。 举几个例子（这方面由于我是条懒狗也还没实操过，只能纸上谈谈）更多可以：

个人影响力：

• 在身边建立影响力，多交流，苟富贵勿相忘【润了带我一个】。
• 在公司多分享多做建设，让leader看到你，让别的团队看到你的团队，地位大大的有。
• 在互联网上建立个人品牌，多发发博客技术文章，吸吸粉用粉丝爆金币。
• 在大型开源库有一席之地参与决定roadmap等，个人能力形象的说服力更强。

团队影响力：

• 公司内影响力，影响公司技术决策。
• 公司外影响力，技术实力的说服力更强，更容易吸引到高手。

世界影响力

• 建立行业标准，为整个前端届技术发展方向带来指导，比如emca基金会，chromium团队等。

关于影响力这方面的内容受scott影响比较多，可以参考一下他的文章团队建设：创业公司技术团队的影响力如何打造

技术视野

知己知彼才能百战百胜，了解前沿动态才知道该往哪卷，技术方案会不会过时，是不是有人做过了。

关注的点主要是：技术团队、技术论坛、技术沙龙、个人博客。

在硬实力提升的过程中，要多看多思考，遇到不确定不懂的就去查资料，在这个过程中总会发现一些优秀的个人或者团队。其实我也没特意去寻找如何拓展视野的方法，信息就自己跑到我脑子里去了。

个人习惯的话会用手机看公众号，pc看国外的。公众号的话各个大厂/个人的公众号，直接搜就行。

这部分推荐一些欧美专区的，国产区可以自行探索，欢迎补充。

技术团队：

• vercel
• chrome
• cloudflare

技术论坛：

• dev
• medium

个人博客：

• Dan Abramov

沙龙：

• bestofjs
• thoughtworks
• 各个大厂/团队的技术年会

这些团队/个人都会有对应的推特账号，可以开个小号单独关注技术团队，免得被推荐算法引到不该看的东西上。

业务嗅觉

连公司咋赚钱的都不知道，等于承认自己在xjb搞。这个很重要，能在技术视野与业务嗅觉的结合下，也往往能创造更高的价值。如果连公司基本的商业模式都搞不明白，很容易陷入为卷而卷，在做技术创新的时候来一句国外都是这么做的，就很下头。相反，如果来一句我们做这个迭代升级，能为业务带来更大的价值，感觉就来了。

于个人而言，往大了说立项为公司创造利润发动机目标财富*，往小了说找准痛点去抄点方案保住绩效。无论如何，都是一举两得的事。

具体做法的话，看看各个老板的okr，看看公司的年报，了解行业的动态，竞品的动态。多思考公司怎么赚钱的，多思考自己的角色能帮到什么。

前端发展趋势

趋势分析首先要弄明白为什么会有这样的趋势，演进的在瞄准什么目标前进，即“这些演进的底层逻辑是什么”。

前端开发要为两个对象服务：用户体验、开发体验。但由于大部分的前端开发的宿主都是浏览器，所以总结一下发展的大势为：围绕标准与浏览器建设，前端社区在开发体验与用户体验持续精进。

这是我给出的答案，我认为一切进步都在围绕开发体验与用户体验这两个目标前进，下面会把用户体验、开发体验具体拆分，细分成更小的点，再谈一下针对这些点，聊一下社区的明星项目，给大家创新突破提供一点思路，随后说一下这个方向上的。但很多项目实际上对开发/用户体验都有提升，比如nextjs这种框架，我会把他们放在更偏向的一边。

补充一下，还有另一个公司视角关心的开发效率问题，这个我把它归为开发体验里面，又快又好的开发才是良好的体验，又快又快的是Kennys。

另外，目前而言新技术的出现一定是为了解决相应的问题，如果自己的项目没有遇到这些瓶颈，尽量不要为升级而升级，可能拣了芝麻丢了西瓜，解决了一个小问题带来更大的心智负担。

提到的明星项目大多来源于best of js，state of js等团队给出的开源统计。

开发体验

开发体验大致分为实现功能，代码维护管理，cicd，监控。每一个环节都有相应的工具链。

实现功能（写代码）

实现功能，是指通过写代码实现需求，与我们最日常的工作内容紧密相关，关联性最强的了。常见的如抽离组件（antd、element），封装函数（lodash）等都属于这方面的体验进步。那么今年社区为了让大家偷懒减轻开发负担又出现了什么库呢。

框架

框架我会放在用户体验里面。

与早年的前端框架更侧重于代码管理维护，开发体验不同。近年的新的框架趋势都在卷如何以更小的体积、更快的tti实现更好的用户体验。

工具库

关键词：hooks、esm支持

vue跟react都对hooks进行了全面的支持与倾向，

从react16提出的hooks开始，react开发的代码组织风格从oop转向了fc，vue也随之跟上，废弃了class-component库的维护，vue3的大版本升级也全面拥抱hook写法。大伙立刻跟上，热火朝天的搞起了hooks库，不得不说这个fc风格确实利于开源，一个函数就能成库，严重利于esm以及相关的工具链。

围绕着实现业务需求、功能场景，基于ui框架的函数库立刻开卷，vueuse，react-use，ahook等都是典型。

hook库大多属于通用型的，覆盖的面比较广，突出一个大而全。但这个方向也是最好出成果的，而且确实能提效。转向fc对于复用粒度的减少对前端开发体验的提升还是很大的。

代码管理

代码管理包括对整个项目代码的结构管理，维护成本，依赖包管理等。这一块重点在于减轻开发的成本，提高可维护性等。

组件管理

当业务组件过多的时候，我们需要一个管理组件的方案，对于查找可用组件以及迭代维护，可用性保证等都需要一个直观的可视化的方案，光看代码效率太低。 这一块今年没有太大的变化，仍然是storybook当道，但值得注意的是，这种可视化组件文档构建的工具，如果要开源的话势必适配大量框架，比如主流的vue2vue3react各个版本等等，多仓/微前端构建方案等等。可能造成体积过于庞大遇到问题不好修复排查等等。对于公司自己的项目，自研的成本可能反而更低。

样式管理

先说一下比较流行的原子化css，以往大家开发上来就是一大串bem命名+display:flex起手，肯定把人都写烦了，所以原子化css应运而生，诞生初期的目的就是为了减轻开发负担（tailwindcss），但解决了主要矛盾-开发负担之后，近期都开始卷性能了。比较有名的库有windicss、tailwindcss等，细节上有所不同，比如按需加载支持度，配置方式等。另外近两年的爆款unocss，作为一款原子化css框架的引擎（也可以直接用），大大减轻了了原子化css的定制负担以及编译性能。

同样为了解决bem命名的臭又长问题以及开发负担较差的动态提示支持等，另一个思路是css in js，直接在开发的时候干掉css文件，把css写进js来维护，主要是比较有名的库比如styled-component，更高性能或者更优的ts支持可以选择vanilla-extract等。

如果既想要css in js，又想要原子化css，可以选择Twind等。

dev库的性能主要体现在打包效率以及产物体积。

状态管理

想了3秒，我决定把状态管理放在维护里面，因为如果不是为了维护方便，直接useContext一把刷完事了。 针对大项目的状态维护，各式各样的探索始终没有停下脚步，这一块对于我这种躺在piano/vuex怀抱里的宝贝vue开发者可能比较陌生，很难想象react战场杀成啥样了。简单总结一下各式各样的库卷的方向：原子化的：recoil/jotai；老炮的：redux；优化redux组件关联/异步问题的：Immer/Redux-Thunk；减少体积的：Rematch/Zustand；状态机的：xState等等。

综合来看，状态管理是围绕代码管理，调试便利性，开发便利性以及构建体积做一些突破。

测试

这一块为了让大家少写点代码也是煞费苦心。其中playwright当属全场最佳，操作简单，上流水线也很容易，录制用例只需要人工点几下，跟正常自检流程一致。

ci/cd

为什么市面上多了这么多构建工具，核心点还是在于解决巨石应用的启动以及热更新速度，让大家少摸鱼别动不动就说启动慢更新慢跑去拉屎抽烟。

因为cicd的模式会受到前端架构的影响，但架构我会放在用户体验里面说，所以这块主要说一下构建工具以及包管理方面。

开发构建

浏览器对esm的支持使得社区开始思考bundless的开发时构建可能性，从snowpack到vite，再到现在的turbopack。方案逐渐成熟，目的都是为了更快的dev启动以及hmr更新速度以提供良好的开发体验。

包管理

monorepo逐渐被大家采用，但多仓同时也带来了版本管理问题，传统的解决方案有lerna、rush。今年多了个turborepo。

生产构建

在浏览器支持esm标准之后，rollup通过treeshaking减少了构建体积。esbuild用go、swc用rust代替js编写的构建工具，都可以数百倍的提升打包效率。

值得注意的是，应用没有庞大到每天pipline阻塞，打包慢的一批的时候，其实这些提升没那么美好，基数太小，倍率再高也没啥意义，况且新兴的构建工具都有支持度不高的通病。很有可能并不那么适合你的项目。

架构

感觉架构的复杂化没那么符合开发体验的提升，都是为了用户体验的提升。所以都放在用户体验里面去说。

用户体验

磨刀不误砍柴工，磨刀是为了更好地砍柴，优化开发体验就是磨刀，砍柴就是用户体验。

用户体验是前端的责任之本，因为我们写出来的东西是最直接与用户接触的。所有我们的产出，最重要的是对用户负责，不要让体验下降，如果说为了用最潮最新的技术，导致所有页面三天两头崩溃、天天报错、加载速度慢十倍，那就本末倒置了。

用户体验是前端之本，我自己也是用户，我可能更希望：

• 更快的速度。
• 更强的体验一致性。
• 更好的视觉交互体验。
• 更nb的功能。
• 更安全的网上冲浪体验。

但总得来说，用户的需求是复杂的，有时候是矛盾的，这个得另说，但我们先说说浅显统一的。

更快的速度

其他的方面很多时候我们做不了太多决定，更多是产品经理/交互设计/视觉设计的，但更快的速度，一定是前端可以优化的。 社区在这方面也做了很多努力，其中不乏架构上的变动。

总的来说，卷完了fcp/lcp，现在开始卷tti。

预渲染/骨架屏可以做到欺骗数据，在fcp/lcp的数据上提升巨大，虽然能提升用户体验（避免白屏），但在用户体验的实际感受中，更快速的可交互也很重要，所以chrome在性能指南中推行的tti又变成了重要指标。

astrojs推行的孤岛架构，react的suspense，即部分优先渲染，在我看来虽然有一定提升作用，但更多还是数据提升，我tm直接把产品性能提升300%，今年必拿超高绩效。根本上解决还是要从必要包体积/链路优化的道路走。

ssr的架构，在网络链路的结构中去除了一些接口的http通信，以及后置加载框架客户端水合的方式，做到了总体更快的渲染，但压力给到服务端同样会带来一些问题。所以很多时候ssr是跟spa同时出现的，比如首屏ssr+其他页面spa。

如上文所说，通常的spa也没被放弃，毕竟更长的手意味着跟大的责任。并摊子铺的太大处理起来也更麻烦，容易与初衷背道而驰，不是每个用户都喜欢三天两头遇到bug。vue的vapor mode就做出了缩小运行时体积做尝试。

更强的体验一致性

这里不得不提一句原神，世界第一游戏的成功证明了多端统一体验确实是用户心之所向。除开游戏本身，原神做到了在主机端/安卓/ios/macos/windows等各个客户端的ui交互都统一，这也是它能成功的一大武器。

在我的视角里，前端的一致性体现在

• 移动端的安卓ios原生与web交互体验一致。
• pc端的macos与windows原生、web端交互体验一致。

由于前端重点关注的还是用户的交互/视觉，所以即使在不同端的后台逻辑不一样，我们也尽可能希望用户使用沟通上没有障碍。

这块我们知道移动端有rn，pc有

更好的视觉交互体验

卡顿是限制前端3d的最大掣肘，而chrome接口推出了webgpu带来了web端更强视觉体验的可能性。 前端3d的实践一直没停下，很多公司都会用web做一些营销小游戏，这些都是可以直接转化为商业价值的技术。而更强的性能更新，有没有可能做出交互更酷炫的大屏bi，更酷炫的数据展示方式？ webgl base的库就是Threejs跟Babylonjs。

更nb的功能

tensorflowjs为前端带来了更多的可能，极大降低了前置模型的开发门槛，前置模型可以通过放在前端来得到极限的时效性，比如基于摄像头的ar增强，都可以避免与服务器通信达到更好的体验。

更快的用户感知

比用户更快发现问题，chrome也开放了longtask的相关接口，这意味着除了首开的体验，使用体验也更方便监控了。

杂谈

云原生的厂商一直在推serverless/ssr之类的大量基于云原生的技术，边缘侧渲染也在被大力推行，虽然这可能是云厂商的阴谋，希望你多买点货，但好处也是显而易见的，更高效的开发迭代效率，更良好的首屏渲染性能，更强的灰度粒度等。然而最大的受益者是初创公司，从stateofjs/bestofjs的数据可以看出来，js全栈的使用率在节节攀升，国外的初创技术公司非常乐意接受serverless或者nodejs后端+js前端的开发模式，主打的就是一个极限节省人力，快速迭代验证价值。

正如bestofjs的结语引用所说，Any application that can be written in JavaScript, will eventually be written in JavaScript，我们正处于一个美好的极速进步的前端时代。补充一句，在和平年代，技术的进步归根结底是商业价值离不开关系，在思考前景或者方向的时候不要丢了本质。

bestofjs2022

stateofjs2022

团队建设：创业公司技术团队的影响力如何打造

从 Bundleless 看前端构建