2022前端学或者不学,技术都在那里

·  阅读 3141

2022 年什么会火?什么该学?本文正在参与“聊聊 2022 技术趋势”征文活动

前端框架之争

先来看一下过去一年几大流行框架 npm下载趋势 图片.png

  • 从数据上来看React 可以说是遥遥领先,VueAngular差不多
  • 这是国际上的表现,相信在国内 ReactVue 应该是平分秋色的,可以从github的star数上看到Vue早在2018年就超过了React

star-history-2022217.png

  • React由facebook开发并维护,更新迭代还是比较快的,在2021年已经更新到了17.0,并且官方已经宣布正在开发18.0的版本,并且表示 你无需重写代码即可直接使用 React 18,且可以根据自己的节奏和需要来尝试新特性

图片.png

  • 2021年Vue也正式发布了3.0版本。目前Vue3已经成为了默认版本,如果还在使用Vue2且比较老的项目不建议直接升级,新项目可以考虑上Vue3,开源社区比较活跃各种配套生态也比较完善,都基本升级到了对应的版本。组件库推荐之前被尤雨溪本人点名的 varlet,由国人开发并维护,支持国产。

TypeScript 真香

TypeScript文档 TypeScript 4.6 beta 发布:递归类型检查增强、参数的控制流分析支持、索引访问的类型推导

JavaScript是弱类型的语言,在运行时会产生很多错误,TypeScript提供的一套静态检查机制,可以让JavaScript像一些静态语言一样在开发过程中发现错误并纠正,但也就意味着需要在开发中写更多的代码

  • 比如一个函数,在ts中需要为函数的 参数返回值 定义类型
// js
let fn = (a, b) => {
    return a + b
}
// ts
let fn = (a: number, b: number): number => {
    return a + b
}
  • 开始总是痛苦的,刚开始用ts的时候总觉得花了更多的时间做了一件没必要的事,但是当项目逐渐壮大,就会慢慢体现出ts的优势。比如在调用函数时ts提供的的类型检查会自动提示需要传入的参数,如果不传,漏传或者类型错误都会报错,这在开发中尤其是在团队协作中是非常便捷的且可以提高开发的效率

打包与构建

Webpack

Webpack官网

目前还是Webpack一家独大的,占了市场比较大的份额,随着Webpack5的到来,还是有必要好好学一下的。

Vite

Vite中文网

Vite是由Vue的作者开发的全新前端构建工具,属于ESM混合编译,采用基于Rollup插件API的设计。2021年Vite发布了2.0版本,使用体验就一个字“快”,因为Vite利用浏览器原生的ES模块支持和编译到原生的语言开发的工具来提供一个快速现代的开发体验。

ESBuild

esbuild文档

ESbuild 是一个类似webpack构建工具。它的构建速度是 webpack 的几十倍。可以在Webpack中使用esbuild-loader代替babel-laoder提高编译的效率

工具

pnpm

pnpm

pnpm出现的初衷就是节约磁盘空间并提升安装速度,可以说是npm和yarn的增强版,vue3和一些相关的项目也将仓库迁移到了pnpm,可以说是一款“网红”包管理工具,下载量在2021年暴增

图片.png

拓展学习

Rust

Rust中文官网 图片.png 为何要使用 Rust ?

Rust 是一种编译型语言,类似 C ,可以对硬件进行直接的操作,所以执行起来会非常省资源并且非常快。目前前端生态圈很多工具为了优化都用Rust进行了重写,并且确实在性能上得到了很大的提升,比如新一代的编译工具 SWC 可以对标 Babel

写在最后

总的来说,技术是学不完的,可以说每天都有新的技术诞生,本文也只是列举了一些本人觉得在2022前端需要掌握的技能,感谢能够看到这里的你,希望与君共勉。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改