---
title: "前端开发高阶"
date: 2018-12-29
lastmod: 2020-01-05
weight: 3
type: docs
icon: #
description: "高阶高线图"
# search related keywords
keywords: ["前端开发","高阶"]
---

## 高阶路线图

{{< embed-pdf-view url="/images/frontend.pdf" >}}


### 搭建

- 搭建标准
  - 模块研发规范
    - Webpack Module Fedoration
  - 模块依赖关系描述规范
    - Kissy Seed
  - 模块数据描述规范
    - JSON Schema 规范
- 搭建过程
  - 模块化搭建
  - 数据投放
  - 页面主题
  - 页面插件
  - 区块搭建
- 终端渲染
  - SSR
  - 数据接口网关
  - 国际化
    - 跨国文件同步
    - 多语言/多地区/多货币
  - 多端渲染
    - 终端识别
  - CDN+源站缓存架构
- 搭建物料
  - 模块
  - 区块
  - 源码页面
  - 页面容器

### Node&Serverless

- Serverless
  - Serverless 框架
    - Midway Serverless
  - 应用
    - 云端一体化研发
    - 服务编排
    - App Serverless
  - 云平台
    - 公有云平台AWS Lambda、阿里云 FC、腾讯 SCF
    - 私有化平台K8S + KNative + ServiceMesh
- DevOps
  - 进程管理
    - PM2
    - forever
  - 日志
  - 负载均衡
  - Shell 命令
  - Docker
  - 性能监控
    - Alinode
    - Easy Monitor
  - web 服务器
    - Nginx
    - Tengine
- 数据库
  - 关系型数据库
    - MySQL
    - PostgreSQL
  - 非关系型数据库
    - MongoDB
    - Redis
    - LiteDB
- API Clients
  - REST
  - GraphQL
- 调度方式
  - RPC
    - gRPC
    - dubbo
    - dnode
  - 任务调度
    - Agenda
  - 实时通信
    - Socket.io
  - 消息
    - RabbitMQ
    - Kafka
    - mqtt
- Web Frameworks
  - Express.js
  - Koa.js
  - Sails.js
  - Egg.js
  - Midway.js
  - Meteor.js
  - Fastify
  - Next.js

### IDE

- 底层能力
  - Command
    - IDE基础功能模块之间一种解耦方式，同时提供部分内置命令供插件调用
  - File Service
    - 文件服务抽象，提供FS Provider接口，可以基于 Node.js fs实现本地文件读写，或基于BrowserFS、MemoryFS等实现纯前端的- 文件系统
  - Storage
    - IDE存储服务，管理IDE如用户设置及插件配置等缓存内容
  - Theme/Syntax highlighting
    - CSS variables、Textmate、vscode-oniguruma
- 支撑服务
  - 插件市场
    - Egg、OSS 、权限管控，Group、Client分组
  - 日志服务
    - spdlog
  - 更新服务
    - electron-updater、差量更新
  - 容器服务
    - K8S、Docker、Pounch
- 核心能力
  - 通信服务
    - 遵循基于JSONRPC 2.0协议，使用vscode-jsonrpc
  - 插件体系
    - 兼容VS Code插件协议，自有KAITIAN插件API扩展
  - 编辑器（LSP）
    - Monaco Editor、Language Server Protocol
  - 调试服务
    - Debug Adapter Protocol
- 功能模块
  - 资源管理
    - 文件树虚拟列表
  - Terminal
    - node-pty、xterm、断连恢复
  - SCM 源代码管理
    - 源代码管理抽象接口，通过Git等插件实现
  - Layout
    - 可扩展、高自由度、配置化插槽
- 场景
  - Local
    - 小程序开发者工具
    - ProCode开发
  - Cloud
    - 模块搭建
    - D2C
    - LowCode开发

### 中后台

- 基础概念和规范
  - 中后台领域名词定义
    - 物料（组件/区块/模板）、低代码引擎、微前端
  - 中后台物料规范
    - 文件目录、API、国际化、无障碍
  - 中后台低代码搭建协议规范
    - 协议结构、低代码物料描述、应用描述
  - 微前端规范
    - 主应用、子应用、微模块、生命周期函数
  - 模型驱动数据模型描述协议规范
    - 协议元信息、业务模型、API实例描述
- 基础设施
  - 基础UI组件库
    - Material UI、AntD
  - 物料脚手架
    - 组件开发、模板开发
  - 物料中心 / 资产中心
    - 资产包
  - lowcode 引擎
    - 入料模块、编排模块、渲染模块、出码模块、大纲面板、编辑面板、属性面板、属性设置器
- 开箱即用解决方案
  - 表单组件
    - 动态表单
  - 列表组件
  - 图表组件库
    - ECharts、AntV、BizCharts
  - WebExcel SDK
    - SpreadJS
  - 场景设计器 SDK
    - 页面设计器、表单设计器、流程设计器、图表设计器
  - UIPaaS
  - 微前端
    - single-spa、qiankun、icestark
  - 模型驱动 SDK
  - 工作台 SDK
- 体验管理
  - 体验模型设计
    - 体验指标
    - 体验模型
  - 体验数据采集
    - 行为数据采集
    - 稳定性数据采集
    - 性能数据采集
  - 体验数据分析
    - 链路分析
    - 表单分析
    - 满意度分析
    - UAT
- SaaS产品
  - 在线设计
    - Figma
  - 在线研发（Web IDE）
    - 阿里云开发平台
  - 零代码（No-Code）研发平台
    - Power Apps、宜搭
  - 低代码（Low-Code）研发平台
    - outsystems、salesforce lightning、云凤蝶

### 数据可视化

- 技术标准
  - Canvas
  - SVG
  - WebGL/2
  - WebGPU
  - OpenGL
- 数理统计
  - 统计学
  - 平面几何
  - 线性代数
  - 离散数学
- 图形美学
  - 色彩
  - 图形
  - 动画
  - 格式塔理论
- 可视化基础概念
  - 数据类型
  - 视觉通道与映射
  - 信息密度
  - 可视化隐喻
  - 图形符号学与图形语法
  - 基础图表类型
    - 折线图
    - 柱形图（条形图）
    - 饼状图（环型图）
    - 散点图（气泡图）
    - 雷达图
    - 地图
    - 多维表格
    - 其他
  - 绘图引擎
    - 2D
    - 3D
- 图表类库/可视化框架
  - 基础可视化框架
    - D3
    - G2
    - Vega
  - 常用统计图表
    - Chartjs
    - ECharts
    - Highcharts
  - 图分析与编排
    - Cytoscape
    - G6
    - mxGraph
    - Sigma.js
    - X6
  - 地理空间可视化
    - Leaflet
    - L7
    - Mapbox
    - PolyMaps
- 领域方案
  - 监控可视化
  - 关系可视分析
  - 金融数据可视化
  - 商业智能可视化

### 工程体系

- 初始化
  - 工程模板
  - 物料
  - 最佳实践
- 开发
  - Code Lint
  - Mock
  - Debug/Preview
- 构建
  - 前端资源构建
  - 其他语言如(Typescript)
- 检查
  - 单测/E2E
  - 安全扫描
  - CI & CD
  - Code Review
- 发布
  - 监控
    - 上报标准
    - 监控平台
    - 告警诊断
  - 安全生产
    - 前端安全环境
    - 攻防演练
    - 变更管控
  - 自动化

### 国际化

- 多语言
  - 标准文案
  - 翻译术语库
  - 文案本地化测试
  - 自动文案溯源
  - 多语言banner
  - RTL
- 本地化
  - 本地化通用组件
  - Locale Data
  - CLDR-SDK
  - 全球化数字地图
  - 本地化开发规约
- 体验度量
  - 标准设计规范
  - 体验度量
  - 用研工具
- 极致性能
  - CDN&网络链路
  - 资源域名
  - 海外性能监控
  - 地区化实验环境
  - 端性能
  - 差异化投放

### 跨端技术

- 跨端解决方案
  - 跨平台
    - Web
    - Electron
  - 移动端
    - Hybrid
    - ReactNative/Weex
    - Flutter
- 一码多端
  - 规范
    - W3C/WHATWG
    - 小程序
    - 其他（XML、Dart）
  - 框架
    - 增强型
    - 编译时
    - 运行时
- 跨端 API
  - 桥接与通信
    - JSBridge
  - 跨端 API 规范
  - 平台配套
    - BridgeSDK
    - 自动化测试
    - CanIUse
- 跨端搭建
  - 标准与规范
    - 物料规范
    - 搭建协议
  - 一码多搭
    - Web
    - 小程序
    - 原生 Native
  - 跨端调试
    - DevTools
    - 模拟器调试
    - 真机调试
  - 统一发布
- 跨端组件
  - 标准与规范
    - 脚手架
    - 文件结构
    - 属性与 API
    - 发布与引用
  - 视觉交互
    - 自适应
    - 平台特性
  - 跨端组件
    - 跨容器（H5/小程序）
    - 跨平台（PC/无线）
- 跨端性能
  - 性能优化最佳实践
    - CSR
    - NSR
    - SSR
    - 渲染容器优化
  - 性能指标
    - FCP
    - LCP
    - TTI
    - TBT
  - 性能采集
    - 性能埋点
    - SDK
    - 采样与分析
  - 性能大盘
    - OLAP
    - 数据可视化

### 互动技术

- 技术标准
  - CSS
  - Canvas
  - SVG
  - WebGL
  - WebGPU
  - OpenGL
  - Metal
  - Vulkan
- 基础概念
  - 通用概念
    - 场景
    - 节点
    - 组件
  - 3D 概念
    - 相机
    - 灯光
    - 材质
    - 着色器
    - 网格
    - 后处理
    - 环境渲染
- 互动引擎
  - 渲染引擎
    - 2D
    - 3D
  - 物理引擎
  - 动画引擎
  - 声音引擎
  - GUI 引擎
  - VR/AR 引擎
- 基础知识
  - 图形学
  - 数学
  - 物理学
- 工程体系
  - 工具
    - 调试工具
    - 脚手架
    - IDE 插件
  - 可视化编辑器
  - 资产库
    - 美术资产
    - 玩法资产
  - 搭建体系
  - 研发平台
- 基础组件
  - 降级方案
    - 机型设备降级
    - 特性降级
    - 客户端版本降级
  - 设备特性
    - 设备输入
    - 传感器
    - VR/AR
  - 容器适配
    - Web
    - 小程序/轻应用
    - 小游戏
- 核心能力输出
  - 动画
  - 微交互
  - 游戏
  - VR/AR、全景
  - 工业化渲染
  - 多媒体
    - 直播、音频、长短/视频等

### 智能化

- 总结展望
  - 理论
  - 技术
  - 工程体系
- 前端算法框架
  - datacook
    - 特征工程
    - 数据可视化
    - 传统机器学习算法
  - Pipcook
    - 神经网络算法概述
    - 如何定义神经网络
    - 前端机器学习生态（Boa）
    - 模型部署
    - 模型优化
- 商业化能力
  - 数据
  - 模型
- 研发能力
  - D2C视觉稿转编码
    - imgcook代码生成原理
  - P2C PRD转编码
  - S2C服务转编码
    - 业务逻辑点识别与生成能力
  - C2C编码转编码
  - 鲸幂UI个性化能力
    - 智能UI前后端工程能力
    - 图像处理能力
    - UI个性化算法能力
- 业务能力
  - C端研发解决方案
    - 自定义DSL
    - 自定义组件
    - 自定义Model
    - 自定义编辑器插件
    - 接口服务调用
  - B端研发解决方案
    - 多场景组件识别样本制造
    - 目标检测与图片分类模型训练
    - 代码转换器
  - 端智能解决方案
    - 模型运算框架
    - 常见业务模型能力
    - 端智能工程能力

### 多媒体

  - 音视频基础
    - 基础概念
    - 容器格式
    - 编码格式
  - 直播技术
    - 推流
    - 流媒体协议
    - 流媒体服务
  - 播放器技术
    - 拉流
    - Demux
    - 解码
    - Remux
    - 渲染
  - Web媒体技术
    - 流操作基础
    - WebRTC
    - MSE
    - WebAssembly
    - WebXR
    - WebGL
  - 开源产品和框架
    - flv.js
    - hls.js
    - video.js
    - FFmpeg
    - OBS
    - MLT

## 相关学习资源

### 搭建

- [深入浅出Node.js](https://book.douban.com/subject/25768396/)
- [Node.js实战](https://book.douban.com/subject/30288107/)

### IDE

- 基础依赖 
- 编辑器
  - [Monaco Editor](https://github.com/microsoft/monaco-editor)
- 语法高亮
  - [vscode-oniguruma](https://github.com/microsoft/vscode-oniguruma)
- 终端
  - [Xterm.js](https://github.com/xtermjs/xterm.js)
  - [node-pty](https://github.com/microsoft/node-pty)
- 通信协议
  - [vscode-jsonrpc](https://github.com/microsoft/vscode-languageserver-node/tree/master/jsonrpc)
- LSP
  - [Language Server Protocol 官网](https://microsoft.github.io/language-server-protocol/)
  - [vscode-language-server-protocol ts 类型定义](https://github.com/microsoft/vscode-languageserver-node/tree/master/protocol)
- DAP
  - [Debug Adapter Protocol 官网](https://microsoft.github.io/debug-adapter-protocol/)
- 相关文章
  - [IDE 深入浅出系列](https://www.atatech.org/articles/148176?spm=ata.13269325.0.0.180749fa7FrW1w)

### 中后台

- 基础组件库
  - [Material UI](https://material-ui.com/zh/)
  - [AntD](https://ant.design/)
- 图表组件库
  - [ECharts](http://echarts.apache.org/zh/index.html)
  - [AntV](https://antv.vision/zh)
  - [BizCharts](https://www.bizcharts.net/)
- 微前端框架
  - [single-spa](https://single-spa.js.org/)
  - [qiankun](https://github.com/umijs/qiankun)
  - [icestark](https://github.com/ice-lab/icestark)
- 低代码引擎/框架
  - [amis](https://baidu.gitee.io/amis/zh-CN/docs/index)
- 低/零代码研发平台
  - [outsystems](https://www.outsystems.com/developers/)
  - [salesforce lightning](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_lightning.htm)
  - [Power Apps](https://powerapps.microsoft.com/zh-cn/)
  - [宜搭](https://www.aliwork.com/)
  - [云凤蝶](https://www.yunfengdie.com/)

### 数据可视化

- [MDN Canvas教程](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
- [MDN SVG 教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial)
- [The Grammar of Graphics](https://book.douban.com/subject/10123863/)
- [WebGL 高级编程开发Web 3D图形](https://book.douban.com/subject/25750362/)
- [Vega 一种用于描述可视化的声明性语言](https://vega.github.io/vega/about/)

### 跨端技术

- [《跨终端 Web》](https://book.douban.com/subject/25909777/)
- [Spellbook of modern Web Dev](https://github.com/dexteryy/spellbook-of-modern-webdev)
- [ReactNative 官方文档](https://reactnative.dev/docs/getting-started)
- [支付宝小程序开发文档](https://opendocs.alipay.com/mini/developer)
- [前端代码是怎样智能生成的-表单表格专项识别篇](https://zhuanlan.zhihu.com/p/99703635)
- [AI 助力中后台场景下的设计稿转代码](https://zhuanlan.zhihu.com/p/100806362)
- [Tensorflow.js 海量图标，毫秒级识别！](https://zhuanlan.zhihu.com/p/128669062)

### 互动技术

- 基础
  - [OpenGL 经典红宝书](https://item.jd.com/69113700022.html)
  - [WebGL 理论基础入门](https://webglfundamentals.org/webgl/lessons/zh_cn/)
  - [游戏化思维](https://book.douban.com/subject/25862775/)
- 应用
- [游戏开发资源](https://github.com/Kavex/GameDev-Resources)
- [游戏开发知识技能](https://github.com/miloyip/game-programmer)
- [WebGL 游戏开发](https://github.com/gamedev-js/gamedev-js)

### 智能化

- [tensorflowjs](https://www.tensorflow.org/js)
- [D2C 原理](https://www.imgcook.com/blog)

### 多媒体

- [多媒体前端手册](https://www.yuque.com/webmedia/handbook)