前端开发遇到的问题

• 如何让刚入职的前端同学能尽快的熟悉项目, 能尽快上手新需求的开发, 避免两眼一抹黑;
• 当因为组织结构调整或者人员流动, 项目需要跨团队交接时, 如何在最短的时间内高质量的完成交接, 避免口口相传;
• 如何避免因历史项目迭代中未知的风险而引起线上的事故;
• 如何提高人效, 动态调整各个项目的开发人员;
• 如何实现项目描述文档的持续迭代;

这些都是前端开发面临和需要解决的实际问题, 对此, 分享一下我在我们组推广落地的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时审核文档的更新