前端架构师入门
架构总览
什么是程序
- 程序=模块+消息交流
架构师是做什么
-
有效的规范团队工作形式
- 纸面
- 实操
划分出低耦合的模块，并高效的设计模块间的沟通
宏观架构图示
- 业务架构
- 框架
- 编程语言
- 应用（如浏览器）
- 操作系统
如何分析业务架构
从需求出发划分
-
需求做的事情不能多也不能少
先从核心模块出发，再到扩展模块，支持模块
通过电脑CPU的需求例子
通过搅拌机的需求例子
-
功能的开发
- 依赖模块
- 实现模块
- 接口模块
架构模板
-
具体的业务模块
- 基础页面模板
- 具体页面1
- 具体页面2
- ...
-
支持模块
-
底层库
- 组件库
-
工具模块
-
工具库
- 操作cookie
- 发送/接收请求
-
页面公用CSS
-
团队前端标准
保证项目的高效，高质量的完成
代码风格标准
- eslint
性能标准
-
现状评估
-
现状数据的获取
- window.performance的使用，IE9+支持
获取数据进行评估分析是否需要做性能优化
-
-
优化方案
- 减少请求
- 缓存
- 减少体积
- ......
-
目标确立
- 平均加载时间，秒开率
- 执行耗时
- 内存测试
工作流程标准
-
工具链流程
- 1.初始化项目工具（类似vue-cli这样的工具）
- 2.构建和调试工具
- 3.测试（单元测试，集成测试）
- 4.提交
-
文档
- 1.项目配置规范
- 2.提交审核规范
- 3.需求管理规范
晋升要点
程序员角色升级
-
搬砖工
- 无脑搬砖
-
工程师
- 更好的代码，良好的编程思维
-
架构师
- 知识的全面性，基于软件工程
代码质量
通过源码阅读
- 健壮性
- 扩展性
- 易读性
土壤和生态
-
语言
- Typescript,lass,less
-
框架
- vue,react,koa,express,angular
-
技术方案
- ssr后端渲染,消息队列，websocket
-
工具
- webpack,npm,gulp,pm2,nginx
