what

过去在互联网的大量软件产品需求的前提下，前端得以快速发展，各种开源工具层出不穷。经过了一些年的发展，大概是 10 年，目前前端的工具库已经到了从野蛮生长到技术收敛的阶段。

我个人认为，从 20 年开始，前端未来的发展，将不再是选型从头开始，而是基于更高生产力的工具 --- 低代码平台来进行，未来几年也是低代码平台爆发的时间节点。

目前的市面上的各种集成的框架，都在不断提升着前端开发人员的下限：react、antd、material ui 都让新手前端开发的能力比 10 年前用 html+css+js 画页面的新手前端更强。

80% 互联网产品活不过 1 年，在尽可能短的时间内上线一个过得去的产品，这是生存的首要任务。在直面用户的前端，如果做的太粗糙，用户也是不会买账的，但是如果什么都重头开始，那轮子没造好，公司先倒闭了。

所以这里我想说的是工具的重要性，可以提升我们的生产效率。

how

如果是小型项目，就是那种短平快的业务类型项目，可以选择在业界已经做好集成的，开箱即用的工具，例如：create-react-app, react router, formik, material-ui 这样优秀的工具，基本可以满足业务需求，毕竟基本上是一两个前端开发，项目周期一两个月，不需要那么多什么复杂的套路规则。

如果觉得这些比较麻烦，还可以直接使用 umi 这样的集成工具，已经将各种框架都集成了一遍（基本是阿里系），做标准化生产还是挺不错的，很适合外包业务或者小业务系统。

当然，工具的集成度和自由度是成反比的，集成度高的工具，按照它的套路走是可以比较顺畅的，但是一旦需要超出工具提供的能力，要去扩展这个能力就尤其费劲。特别是阿里系的 umi 和 pro components 系列。

阿里系的 react 工具有它的存在的意义，毕竟阿里大小业务系统需求很多，同时雇佣了很多外包人员，在保证最低质量和工时核算的时候，就很需要这些工具提供帮助。

integrated

这里主要还是看项目的需求，如果项目需要很高的掌控度，来确保系统各方各面都可控，那就要自己在市面上挑选合适的零件，集成一套业务框架了。

这里就以我们的低代码平台的前端为基础，记录一下我们使用到技术工具：

• 数据校验

  • yup

• 数据状态管理工具

  • redux
  • redux thunk
  • redux saga
  • formik
  • unistore

• 基础数据操作库

  • lodash

• UI

  • tailwindcss 基础样式
  • font awesome
  • react
  • 全局提示
  • tippyjs
  • popoverjs
  • 拖拽排序工具
  • sortablejs
  • react dnd

• css 预处理器

  • postcss
  • css-module
  • autoprefix
  • sass
  • 替换 node-sass 的 dart 实现，目前社区基本已经弃用 node-sass
  • less

• css in js

  • styled-components

• 文档生成

  • docusaurus

• 工程构建

  • webpack
  • 各种 webpack loader
  • typescript
  • decorator 装饰器
  • eslint

• 工程管理

  • yarn 内部依赖包管理工具
  • lerna 管理包之间的依赖

• 代码编辑器

  • code mirror
  • monaco: vscode 的编辑器引擎

• SSR

  • nextjs
  • gatsbyjs

• 服务

  • nestjs
  • expressjs

• 数据库

  • mongoDB
  • redis

• 加密

  • cryptojs