昵称：前端大魔王，又是一年的开始。2021年过去了。今年前端发生了很多事情。有些东西值得回忆，甚至还能发现一些新的东西。助你圈出2021年前端行业重点，温故知新，更从容迎接新一年的挑战！React自去年React17发布后，团队似乎有了一些划水的嫌疑。2021年主要是和其他贡献者进行了一些友好的会面，比如在布宜诺斯艾利斯（阿根廷首都）的一次聚会：字节跳动做直播分享：主要工作是修复React17的bug，其实并没有许多修复。目前只发布了两个补丁版本号。最新的版本是V17.0.2，一年的版本只出了两个补丁，工作量明显不足，年底的表现让他们很担心。抱着怀疑的态度，更好的人总是自己开车，怎么能划水呢？所以我查看了DanAbramov的品牌（gitHub提交记录）。这位哥们是React的核心成员，在React工作了5年，很有代表性。他今年的工作主要是推广Reac18。React18提供了很多Concurrent特性能力，可以管理页面渲染任务的优先级，让页面交互更加友好。例如，如果页面上有一个搜索框，则在某个搜索过程中加载了过多的数据。渲染的时候页面会卡住，点击页面搜索框没有任何反应。这时候可以使用Concurrent提供的一些能力，提高点击事件处理的优先级，然后中断渲染，优先处理点击事件。给用户的反应是：看，感动了！React18终于在上个月（11月）16日发布了beta版本。相信大家在2022年初都会有新的东西要学，真的替大家开心！DanAbramov提倡的另一个东西是ServiceComponent，它允许你在服务端渲染组件，然后在客户端加载显示：这样做的主要好处是可以减少js包文件的大小，比如以下代码：importmarkedfrom'marked'//35.9kimportsanitizeHtmlfrom'sanitize-html';//206kconstMarkdownView=()=>{return
{sanitizeHtml(marked(text))}
}如果在浏览器中渲染，需要加载marked和sanitizeHtml是两个库，但是如果他们在服务端渲染，只需要加载渲染好的html，速度会快很多。我觉得这是前端成为全栈工程师的又一个入口。还有一个好处就是组件调用服务器端的接口会快很多，毕竟是在内网。我们可以预见，未来大概率会有一个公共的ServiceComponent服务，统一提供各种组件资源：有兴趣的同学可以提前规划搭建，待ServiceComponent正式发布后，打开上门接客。Vite优雨熙于2月17日发布Vite2：爱学习西大普本的网友：Vite2可以说是为bundleless又一次注入了血液。目前各大公司都在积极跟进，比如阿里巴巴的icejs和字节跳动的eden两大框架都支持webpack和ice两种模式。另外，像vite这样的bundleless打包方式，主要依赖于浏览器对esm导入导出方式的支持，比如：importlodashfrom'lodash'，在实际运行时会发送加载lodash资源的请求。,那么你就可以搭建一个CDN，把所有的第三方资源都存放在上面，适用于互联网上的所有网页：importlodashfrom'https://xxx/lodash'2021年发展迅速的CDN是Skypack：目前最前沿-endproject发布过程如下：如果使用skypack，以后可能就不需要依赖包安装阶段了，编译会快很多，因为不需要编译依赖包。这样的CDN，对于大公司来说，考虑到安全性、稳定性、方便维护，自建的可能性比较大，是一个合适的基础设施风口。目前，Vite的月下载量为130万。一些原本依赖于webpack的框架，尤其是新的框架，也在拥抱Vite。Vue3也会使用Vite作为模式配置，所以我很看好Vite的未来。但是，Vite有一个缺点，就是它的后台服务是在本地启动的，所以只能在本地享受比较快的编译速度。但是，我们为什么不搭建一个公共的Vite服务呢：这样你就可以在联调测试环境中享受极速编译，快速部署。VueVue3是去年发布的，所以今年主要是修复bug和发布新版本。目前Vue3最新版本为：V3.2.26。一年发布近60个版本，平均每周发布几个版本。从游玉玺的gitHub提交记录可以看出：这个人工作很努力，经常在周六周日提交代码，这一切都是为了大家在2022年学习新的东西！从上面的Github提交记录可以看出，10月份和11月份的产出比较少，可能是因为作者移民新加坡的时间比较晚。为什么要移民新加坡？可能是因为新加坡的个人所得税比较低（最高20%）。Vue3.2提供的主要功能是支持WebComponents。你可以通过Vue编写一个组件。编译后可以在浏览器中运行，不依赖任何框架：因为不依赖框架，相信页面的渲染会快很多。您可以节省一些时间来学习新事物。sveltejssveltejs的作者是RichHarris。此人也是Ractive、Rollup和Buble的作者。Reactive是Rich的第一个开源项目。不幸的是，React发布后不久就发布了。虽然努力维护，却被React枪毙，残骸甚至为Vue做了嫁衣（Vue借鉴了Reactive的一些思想）。sveltejs与Vue、Angular和React非常相似。都是用来开发前端页面的框架，但是sveltejs让页面运行的更快更流畅有两种方式：1.页面运行时不需要自己加载框架：可以做到原因是它会在编译时将组件需要的运行时代码打包到组件内部（会去掉大部分无用的），这样组件就可以独立运行而不需要借助外部模块，比如下面的模板：
{{msg}}编译后会转化成类似的代码：functionrender(root,parent){vara=document.createElement('a');a.innerText=root.msg;parent.appendChild(a);返回{更新：root=>a.innerText=root.msg;};}2.无虚拟DOM成本：sveltejs所有操作直接处理真实DOM，没有虚拟DOM的diff和patch成本。sveltejs目前最大的劣势是，随着项目组件达到一定程度，项目代码会超过其他框架，Rich说他在憋大招。最后说说他的靠山，号称前端网红收割机的GuillermoRauch（Vercel创始人）。除了Rich，他还为Vercel招募了Tobias（前Webpack作者）、Donny（SWC）作者等。我很好奇，这是什么方法？是赚钱的能力吗？低代码2021年被称为低代码平台年。首先，资金大量涌入。例如，OutSystems在2月份获得了新一轮融资，高达1.5亿美元；近亿元的投资相当于一个小目标。他的创始人也很激动，写了一封近万字的感谢信；与此同时，腾讯、阿里、致远、金蝶、用友等厂商纷纷入局。为什么这么多年不温不火的低代码在2021年开始火了？一个很重要的原因是因为疫情，原来线下的工作需要迁移到线上，需求突然井喷，程序员不够用。疫情期间，实施入口管制、患者分流、防止院内交叉感染是医院防控工作的重中之重。内蒙古呼伦贝尔市人民医院信息部主任张布林仅用三天时间就为医院开发了“预筛分诊系统”，实现了患者信息采集和预筛分诊的数字化过程。同样是在疫情期间，ScottSpendolini在短短两天内推出了一款基于低代码平台的基于Web的每日超市库存查询应用程序，以帮助德克萨斯州奥斯汀那些焦虑不安的购物者了解周边商店的库存情况。最后，让我们谈谈Metaverse。2021年被认为是元宇宙元年。当然，我也以敏锐的投资嗅觉投资了元界的相关产业，赚取了一些生活费：惭愧，我勉强跑赢了Inflation，元界还有什么前端的机会？1、基于WebXR开发一些应用WebXR是一个标准，制定了一些Api规范。通过这些Apis，你可以通过web技术实现一些VR、AR应用。简单地说，开发VR和AR应用程序就像开发网页一样。无需下载特殊应用程序。请注意，WebXR中的“XR”表示VR和AR。现在WebXR应用还是一片蓝海，可以在沙滩上捡到很多贝壳。2、参与开源项目如开源项目three.ar.js，是3D引擎three.js的ar版本，是WEB开发AR应用的库：有兴趣的同学可以加入建设，现在投入，未来每一行代码都可能影响几千万用户，但是收益会比较慢。只有更多地了解元宇宙，成为这个领域的专家，才能在它到来的时候发挥一些作用。综上所述，我们为大家回顾了2021年前端的一些重点，但我们回顾的目的并不是为了记住这些重点。毕竟这方面没有期末考试。我们之所以重点回顾，是希望能够从现在看未来。文中提到了我个人的一些想法，比如publicServiceComponent服务和publicVite服务。有兴趣的同学可以加入我们一起共创未来！结束
