前端开发遇到的问题
- 如何让刚入职的前端同学能尽快的熟悉项目, 能尽快上手新需求的开发, 避免两眼一抹黑;
- 当因为组织结构调整或者人员流动, 项目需要跨团队交接时, 如何在最短的时间内高质量的完成交接, 避免口口相传;
- 如何避免因历史项目迭代中未知的风险而引起线上的事故;
- 如何提高人效, 动态调整各个项目的开发人员;
- 如何实现项目描述文档的持续迭代;
这些都是前端开发面临和需要解决的实际问题, 对此, 分享一下我在我们组推广落地的All In Docs方案, 只需一个眼神, 即可愉快的完成项目的交接
All In Docs方案用大白话可以理解成plus版的readme.md, 所谓代码未动，文档与规范先行, 一切与项目背景需求, 开发测试部署等相关的资料都可以在文档里查询到, 有迹可循, 在实践中, All In Docs方案看似花费时间, 但实际上它不仅提高了交接效率, 也提高了我们平时的开发效率, 减少线上事故, 可谓一举多得, 其由如下文档组成
文档全家桶
项目基础信息base.md
- 项目背景
- 仓库地址
- 适配的设备, 端,
APP和OS版本 Nginx配置链接Jenkins链接Agile链接configuration链接,cdn等配置文件- 监控平台链接
- 业务埋点和技术埋点需求文档和管理后台链接
sentry链接
项目迭代信息changelog.md
- 每次迭代的
JIRA,PRD WIKI,UI 蓝湖,API WIKI,Swagger UI - 每次迭代的
MENBER, 包括PM,UI,UE,FE,BE,QA - 每次迭代的任务分解
todo及相应的ddl - 每次迭代的
flow链接, 以便追踪Code Review,Merge Request与Tag
如何运行项目run.md
- 配置
npm start一键启动,webpack-dev-server自动打开浏览器并配置打开的页面的必要的queryString - 如果需要切源, 配置
.npmrc文件, 或者在npm scripts里添加npm install --registry=http://registry.xxx.com.cn - 如果需要种植
cookie, 附cookie的key-value, 安利edit this coookie插件 - 附各个环境的接口
poxy配置 - 如果接口需要鉴权, 附登录链接和各个环境的用户账号密码
- 如果需要配置
/ect/hosts, 附如何配置 - 如果需要用
charles, 附如何配置 - 如果需要自定义的
UserAgent信息, 附如何配置, 安利User-Agent Switcher插件
各个环境的访问链接links.md
- 包括
dev,test,pre,prod环境下拼上必要queryString的完整链接 - 如有后台管理系统, 附各个环境的后台管理链接, 相应账号, 附如何开通权限
- 各个环境的可访问账号密码
- 如果有用到某些
sdk, 附上sdk的文档和相关各个环境的appId
项目的文件目录结构dir.md
用tree和注释对项目的文件目录结构进行描述
带截图的项目各个页面以及业务流程doc.xmind
一图胜百文, 用带截图和文字的的xmind描述项目的整体业务逻辑流程
坑holes.md
- 开发测试过程中以及线上遇到的各种坑, 花费了比较长的时间才解决的, 或者有可能造成线上事故的坑
问题修复记录fixlog.md
- 用户反馈的工单记录, 包括工单链接, 问题原因, 修复方案
待做todo.md
- 项目体验优化, 性能优化, 代码优化, 架构优化的待做列表
- 排好优先级和预期开发上线时间
项目owner
除了这些文档, 制度上, 每个项目有一个owner, owner是最熟悉这个项目的人, 并负责项目每次的Merge Request时审核文档的更新
