/fe-roadmap

前端开发 Roadmap

工作需求

  • （所有）新功能/产品开发（用新技术栈 ts, react，antd, mobx , etc ...）
  • 迁移旧代码（用新技术栈重构，目前已完成整体架构 React 改造升级 ， 剩余部分持续进行中...）
  • 维护旧功能代码（修 bug）
  • 前端系统运维（基于个人的掌握程度，参与前端产品和项目的构建发布测试和流水线系统 ）
  • 架构设计和改进（新技术栈完善，组件通讯设计）
  • 工程化改进（lint，TDD等技术架构的进一步优化完善）
  • Roadmap 和开发文档的维护

库

  • 公司npm 库维护

学习路线

通用

  • 开发环境
    • 浏览器 调试
    • VS Code 使用
    • 终端 基本使用
  • Git 基础
  • JavaScript 基础
    • 基础、API、原型链、this 之类的
    • 正则表达式
    • Promise，async、await
    • ES 模块化
  • TypeScript 基础
  • 框架能力（React，MVVM， antd ）
  • Node 基础
  • 英语 基础

**篇

  • 函数式编程（一小部分）
  • 响应式编程（Observable、发布订阅）
  • Stream 编程（RxJS）
  • MVVM（React）
  • 设计模式（OOP：Gof 23 种，FP：待定）
  • 算法基本（leetcode 专题：数组、字符串、递归、二分）
  • 网络（HTTP 等）

Web 界面开发

  • React 生态
    • React Functional Component
    • React Hooks
    • Redux
    • react-redux
    • react-router
    • mobx
    • ant design
  • CSS 基础
    • Tailwind
    • CSS in JS
    • css module
  • joi-browser（接口数据校验）

Web 高级功能开发（库）

  • RxJS
  • Ramda、Immer
  • Jest
  • Cypress

Node 开发

  • Node 基本编程
    • fs、path、util 等
  • Node 调试
  • Webpack 基本使用
    • webpack-chain
  • glob、chalk、cross-env、yargs、rimraf 等

部署（前端可逐步深入了解和掌握，提升运维能力）

  • Docker
  • k8s
  • Sentry

工程化配置

  • husky
  • eslint
  • prettier
  • tsconfig
  • 编辑器、浏览器插件整理