Alex Chueng's blogs
©2021 Alex Chueng's blogs
BACK
前端技术选型
5 min read
# 记录
View

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