【前端技术分享】前端开发效率管理

掌门教育前端技术分享会第一期已于1.23号落幕，如下为大咖讲师们现场演讲的整理稿，感谢你们的支持：

讲师介绍

吴留坡，前端技术专家，来自千寻位置网业务中台前端团队
团队平常工做内容，主要对公司门户、电商、营销、分销等业务提供前端支持，业务覆盖 PC、H五、App、小程序、NodeJS 等各类技术场景。

如下为吴留坡同窗精彩演讲的部份内容：

1、开发流程规范介绍

首先我分享一下，一个优秀的软件开发、交付流程

1. 需求设计：咱们的需求通常来自运营同窗在实际产品运营中收集的问题，另外也可能会来自公司高层的直接需求；提交需求后，产品经理会进行需求论证，确认需求后再进入产品设计、交互设计、UED设计环节
2. 开发阶段：开发同窗在本地完成开发、集成后，提交测试，测试经过后，代码进入预发或者仿真环境，这个时候的数据可能已是真实数据了，不过机器环境与生产环境彻底隔离，在预发环境测试同窗验收经过后，代码才会正式发布生产
3. 数据订正：互联网应用每每采用小步快跑式开发，生产数据结构会常常面临变更，好比咱们对项目进行了部分重构，或者老的代码进行了拆分，新页面上线替换老页面需求作重定向等等，这些都须要咱们及时作数据订正
4. 数据分析：数据来源类型不少，好比PV、UV这些页面数据，好比用户在页面上的点击事件、热区图这些用户行为数据，好比商品售卖信息这些业务数据等等；这些都要求咱们要在代码层面就作好数据的收集工做

2、千寻CICD的发展历程

之前：之前咱们开发主要的交付方式是，经过shell脚本，进行代码的构建、打包，再压缩上传到资源服务器；以后进行代码发布的时候，测试环境或者生产环境，下载资源代码，再进行解压、启动，这些环节里面，不少都是经过手动方式来作的

如今：通过两年多的CICD发展，咱们如今彻底实现了CICD流程的彻底自动化；代码提交后，咱们就会自动拉取进行编译，若是编译、构建失败，会主动发邮件、发钉钉进行提醒，这里都是经过Jenkins来实现的；经过构建后，根据项目的类别来进行分发，纯静态资源会分发到OSS，进行CDN加速，若是是服务器端程序，咱们会启动容器化部署，这里的实现则是经过k8s来作的，用户的请求用nginx来作转发；目前咱们全部的前端项目都是经过OSS + k8s + nginx来发布、部署的

3、定位问题

生产环境问题定位、处理，咱们团队目前主要从下面四个地方来作排查：

1. 用户端异常错误收集：错误的预先捕获，好比浏览器程序报错后，能够触发咱们的消息机器人来通知咱们，咱们内部管这个工具叫“先知”
2. 业务数据链路异常收集：咱们团队如今采用区域块渲染，经过业务链路错误的捕获，咱们能够很快就知道究竟是前端template有问题，仍是后端数据有问题
3. 用户足迹：目前用户在咱们系统正常使用的生命周期，相关的信息咱们均可以收集下来，好比用户从百度搜索访问过来，点击、使用了咱们哪里的服务；这里咱们用到了不少工具，好比神策埋点能够帮咱们记录一部分信息，咱们本身也开发了一套FPM工具，能够利用几个数据坐标来定位用户的一个行为
4. 报表分析：不一样的服务会有不少不一样的埋点方式，甚至不少后端服务也会有不少数据须要处理，好比以前咱们遇到一个JS文件加载问题，咱们经过报表看到这个js文件平均访问时间300+ms，这里咱们就会进去作问题处理，作优化，再利用前面的CICD作快速的发布、部署

4、先后端分离

咱们如今基本上没有服务器端渲染，都是采用彻底的先后端分离，不过在传统的先后端分离上作了不少方面的优化，咱们内部开发了不少工具来支撑咱们作先后端分离：

1. 结合CDN + OSS，经过咱们的CICD，咱们能够作快速、无缝的发布、部署
2. BFF层，经过咱们开发的技术，咱们能够作到很是好的后端业务剥离、数据裁剪、数据聚合，经过咱们前端的Gateway，咱们也能够作到很好的数据分发、页面渲染等等，另外针对SEO，咱们也作了静态化处理，来作搜索引擎优化
3. 监控方面，目前咱们的“先知”监控，能够帮助咱们快速发现页面异常，神策埋点则能够帮助咱们作页面追踪，Foxer数据采集能够帮助咱们作到通用行为数据分析，FPM则帮助咱们作页面性能分析

更多精彩内容，感谢关注、欢迎转发