Tech List

我目前是一个前端工程师，本文包含我的技术栈, 我喜欢使用的工具, 保持更新

语言基础

• JavaScript
  • https://zh.javascript.info/
• CSS
  • 文档索引：https://css-tricks.com/ , https://cssreference.io/
  • 张鑫旭博客, 大概是全国最懂 css 的人了, 内容很不错
• HTML：https://htmlreference.io/
• 综合文档： https://developer.mozilla.org
• TypeScript, 工程化必备
  • 官网 https://www.typescriptlang.org/
  • 类型挑战 https://github.com/type-challenges/type-challenges
  • 类型工具 https://github.com/sindresorhus/type-fest
  • ttypescript
• AssemblyScript, ts 子集, 可以编译成 wasm

工具库

• lodash, 数据操作
• dayjs, date-fns, 日期操作
• promise-funs, 提供了独立的 promise 工具
• rxjs, 异步数据流操作, 响应式编程的通用方案, 🚀 强烈推荐学习,
• async, 异步流程控制, 比较老, 不推荐, rxjs 更好用
• localforage, idb, daixie indexedDB 存储
• jsonata, 数据处理
• axios, ky, alova 请求库
• tapable-ts 插件化

React

• React 官网 https://react.dev/

• Dan 的博客 https://overreacted.io/

• 常用工具 hook, react-use, ahook

• 状态管理

  • react-router，路由状态管理
  • redux-toolkit, redux 的最佳实践
  • mobx, 可变对象响应式
  • 基于 context
    • unstated-next
    • use-context-selector
    • react-tracked
  • zustand, valtio, jotai, 同一个作者, 小巧精致
  • swr, react-query, 异步状态管理
  • observable-hook, 接入 rxjs 的最佳姿势
  • 可选方案很多, 各有优劣, 实际项目中通常需要组合各种技术, 设计一个状态管理工具

• CSS方案

  • BEM, 朴素的 css 命名方案
  • css modules, 将自动 hash 的类名与 js 对象绑定，再也不用担心类名冲突了
  • tailwindcss, unocss, 原子类，用起来很方便，但是 dom 结构很冗长
  • emotion, css in js, 运行时动态生成样式类，缓存复用
  • mui system, css in js, 同 emotion, 样式简写、定制主题
  • cva, 根据状态组合类名，可以结合 tailwindcss 组合出样式

• 组件库

  • MUI, 世界级的UI组件库
  • antd, 阿里旗下
  • semi, 抖音旗下
  • shadcn, CV大法好, 可以自己定制是亮点

• 框架

  • nextjs
  • remix

• 可视化库：

  • echarts, chartjs, recharts, antv, visx, gojs, d3
  • mermaid, 使用文本画图

• 交互, 动画

  • anime.js, 动画工具函数
  • framer-motion , 声明式的动画组件库
  • react-spring 弹簧动画 hook
  • use-gesture 手势库, 可组合多种事件做交互, 通常结合 react-spring 使用
  • react-dnd, react-beautiful-dnd, react-grid-layout 拖拽交互, 布局
  • React-Splitters, golden-layout 分割面板
  • lottie 动画
  • canvas-confetti, 礼炮效果

• 实用组件（没啥好的分类, 就单独列举了）

  • react-activation, 实现了类似 vue 的 <keep-alive> 组件，但是与 react 18 并发模式不兼容，期待 react offscreen 的实现
  • react-select, 很精致, 丰富, 可定制的 select 组件
  • 表单方案, react-hook-form, formik, formily
  • 更多 https://github.com/brillout/awesome-react-components

• 优化

  • TODO
  • react 18, batch update
  • react 19 compiler

• 模式、技巧

  • https://www.patterns.dev/react

• 文档

  • Gatsby
  • Docusaurus
  • Storybook

• code playground

  • codesandbox
  • stackblitz
  • replit
  • observablehq, 可视化

模式

• 设计模式
  • https://www.patterns.dev/
  • https://refactoringguru.cn/design-patterns
  • https://www.tutorialspoint.com/design_pattern/index.htm
  • MVC
• 架构模式
  • Clean Architecture
• Design system
  • 什么是设计系统

微前端

• module federation, 模块联邦首选方案
• micro-app
• qiankun
• wujie

构建工具

• webpack
• rspack, rsbuild
• parcel
• vite
• esbuild, tsup
• swc
• rollup, tsdx
• rolldown

测试

• jest
• react-testing-library
• vitest
• playwright
• cypress

监控

• TODO

性能优化

• web.dev, 这个网站上有系列的文章讲性能优化
• Script
• CSS
• WASM
• WebGPU

Git

• https://git-scm.com/book/en/v2

算法

• https://github.com/trekhleb/javascript-algorithms
• https://github.com/algorithm-visualizer/algorithm-visualizer

常用链接

• Awesomes
  • https://github.com/sorrycc/awesome-javascript
  • https://github.com/enaqx/awesome-react
  • https://github.com/sindresorhus/awesome-nodejs
  • https://github.com/tayllan/awesome-algorithms
  • https://github.com/sindresorhus/awesome
• https://bestofjs.org/ , 下载量高的库，分门别类