2021年推荐学习的前端框架和工具库

前言

最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?[1], 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在“学完”Vue之后, 我也有了这个疑问,但当时的我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗——

结果我一路到现在都是处于这么一种状态:看到一个新的框架—看看文档和场景—嗯哼,不错—学! 虽然这样也造成我目前没有特别深入的方向,比如21届的大佬们在工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在当弟弟追着各种新框架学,但不得不说,在学习新事物的过程中,你会逐渐对这些框架进行分类(比如我下面进行的归类)提取他们的共同点,这样在开始学习一个新东西时,你通常已经拥有了可复用的经验(比如在之前我感兴趣的研究了一些装饰器相关,使得后面入门Nest/Angular等都特别快),所以你的学习能力通常会是越来越强的

这个问题的题主很明显遇到了大部分同学入门前端时会遇到的困惑:怎么这个还没学完又看到说那个才是主流的怎么这个版本还没吃透又来了一个break change的新版本怎么前端出框架的速度这么快??

很简单,如果学有余力,学就是了。如果学不动了,就完全没必要盯着前沿方向学(虽然前端网红圈不是吹的),不要被“2021前端必备!再不学你就out了!” “学会这些,立刻月薪30k!”此类的标题迷花了眼,觉得不学就被人卷死了。就盯着一个方向甚至是一个框架吃透,在简历上,“了解过A、B、C,使用过D、E、F” 绝对不如 “深入了解A原理,精通B架构实现,C的collaborator/maintainer之一”。

但有一点请注意,学有余力不是因为当前方向浅尝辄止而学有余力,是在当前方向足够深入同时还学有余力~

对于不知道学啥的同学,就有了这篇文章,我会在接下来罗列我深入/尝试/了解过的,认为值得学习的各个方向框架与工具类库,并且对它们做一个简要介绍。

对于我认为较为主流的则不会包含(如Vue与React框架本身这种~)。

Web

React

状态管理

  • Jotai[2],原子化的状态管理思路(就像React官方的Recoil),亮点是API比Recoil简洁很多,对Suspense模式支持好,可以考虑用来代替useContext + useReducer。
  • IceStore[3],淘系Ice团队出品的状态管理库,我在日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects,支持React Hooks写法,TypeScript支持好。
  • XState[4],不止适用于React,可以和Vue/Svelte/Ember这样的框架一起,也可以和RxJS这样的响应式库一起用。它对自己的定义也不包含状态管理的字样,而是有穷状态机( finite state machines[5] )。暂时没有使用过,不做展开介绍。
  • SWR[6]、React-Query[7]、useRequest[8],网络请求的状态管理、缓存、竞态处理等。

生态

  • GatsbyJS[9],基于React的静态页面生成器,非常快。优点是有非常多的插件(plugin)和模板(starter),并且支持很多CMS(如Contentful、Neltify等),适合喜欢在线写文档的。我正在考虑把博客迁移到GatsbyJS + CMS的方案,这样随便找一台电脑就能写博客了。
  • React-Testing-Library[10],React测试库,个人感觉和Enzyme代表了两个不同方向,而RTL更符合直觉。RTL还提供了Hooks的测试库,给力奥。
  • AHooks[11],阿里的React Hooks库,我日常开发经常用到其中的Hooks。
  • Huse[12],百度工程效能团队的Hooks库,同样很强大,里面的很多实现都比较hack(大量使用了useRef等),适合进阶阅读。
  • Dumi[13],蚂蚁出品的React文档生成器。
  • Immer[14],思路巧妙的数据不可变方案。

Angular!

  • Angular[15] 是我最近正在学的框架,在开始前我其实是拒绝的,但写了两个例子之后我觉得真香!你可能听过它不好的一面:笨重、学习成本高、断崖式更新..., 可能也听过它好的一面:不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手...。在最开始我就是处在这么个情况,直到我跟着官方教程走完第一个demo,我觉得我一段时间内不会再学Vue3了(对不起尤大)。整体的感受非常舒服:

    • 模块划分,我本人非常喜欢模块化的思想(个人认为React的是组件化而不是模块化),各个模块完全自己干自己的,不管是多级路由还是复杂数据流都显得结构清晰。

    • 模板语法,在用Vue的时候我没有感觉到模板语法有多好,可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular中模板被单独放一个html文件,组件用Class的语法写,我就莫名觉得爽快。

    • 大而全,这一点见仁见智,能接受的会觉得很舒服,并且团队做定制也特别容易(schematics、generators、builders),各种规范是真的能确保不会一人一个写法。

    • 学习成本,低情商:学Angular还要学TS和RxJS;高情商:学了Angular我就会TS和RxJS了!

      深入TS类型编程推荐我之前写的这篇 TypeScript的另一面:类型编程[16]

  • 具体的不做展开介绍了,真的让我滔滔不绝安利Ng这篇文章就收不住了,所以有兴趣的同学欢迎去体验下。

跨端

  • Taro[17],京东凹凸实验室出品,应该是我目前见到支持最多端的跨端框架(但问题也不少,这个没办法),一直没有用Taro写过一个完整应用,有机会会试试的。
  • Rax[18],淘系Ice团队出品,轻量、易用、高性能。同样是淘系到集团广泛使用的跨端方案。
  • Remax[19],小程序跨端框架,基于React,亮点是运行时方案(大部分跨端方案都是编译时,还有Rax这种两套方案都支持的)。
  • Ionic[20],出现比较早的一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题(所以Angular YES)。据说是曾经培训班的标配?
  • Electron[21],不做介绍。
  • NwJS,微信小程序开发者工具就是用这个写的,和Electron是同一个维护者(zcbenz[22])。
  • Flutter[23],不做介绍。

NodeJS

  • NestJS[24],一个大而全的Node框架,就像NodeJS里的Angular,实际上作者也是受到了Angular的影响,很多装饰器都和Ng中的同名。你可能同样在犹豫要不要学这玩意,我的意见是:

    因为确实NodeJS中目前没有特别全面的框架(虽然NestJS在Spring面前也是弟弟)。NestJS基于Express(也有Fastify的适配),同样预置好了各种能力,并且能很好的兼容Express中间件生态。我正在捣鼓的新项目就是基于Angular + Nest,越写越爽。

    如果你打算Angular和Nest都学,我的建议是先学Nest,这样入门Angular的学习路线会更平滑一点。

    如果你此前没有接触过依赖注入,可以瞅瞅我之前写的这篇:走近MidwayJS:初识TS装饰器与IoC机制[25]

  • MidwayJS[26],淘系Node架构出品,整个阿里都在用的Node框架,同样基于装饰器体系,你可以理解为复杂度与完善性方面低于NestJS,但是高于Egg和Koa。

    • Midway-Serverless[27],支持阿里云/腾讯云的Serverless框架,个人觉得是目前最好用的一个Serverless框架了,虽然Serverless[28](框架,不是真·Serverless)支持微信扫码登录也很顶。
    • Midway-Hooks[29],见下面的介绍
  • ts-node-dev[30] + tsconfig-paths[31],你是否受够了ts-node的配置?是否难以忍受为了自动重启还需要为nodemon配置ts-node作为执行?请使用ts-node-dev -r tsconfig-paths/register xxx/index.ts这一行命令即可~

  • TypeORM[32],最爱的ORM没有之一(装饰器 YES),也是目前NodeJS社区使用最多的两个ORM之一(另一个是Sequelize,但是TS支持只能说emmm,社区的TS实现也只能说一般)。Query Builder、级联、支持依赖注入,非常推荐试一试。

  • PM2[33],NodeJS进程管理工具,零宕机重启、支持fork和cluster模式、blabla...,更

上一篇:Web应用全栈之旅-Spring篇(四)集成GraphQL


下一篇:javascript – 将图像上传到GraphQL服务器