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 看前端构建