初创公司前端工程体系建设(ppt 50页).pptVIP

/fouber/monitor DOM的4种差异 新增 删除 内容改变 样式改变 /fouber/monitor DOM的4种差异 新增 删除 内容改变 样式改变 /fouber/monitor DOM的4种差异 新增 删除 内容改变 样式改变 Dolphin自动化测试系统 初创公司前端工程体系建设 v1.0.1 全民·CTO 百度·高级研发工程师 北京 2010 2013 UC·主任工程师 广州 2013 2015 全民·技术负责人 上海 2016 前端农民工 /fouber/blog 研发团队规模 前端 PHP NodeJS Go Java Android iOS 运维 测试 编解码 测试 大数据 DBA 敏捷教练 CDN iOS端 PC站 瘦脸 高并发弹幕 人脸识别 点播站 iPad端 联运 鉴黄 美颜 Android端 数据分析 CDN调度 反作弊 H5分享 广告 手游录屏 PGC 赛事 财务后台 业务后台 审核后台 反垃圾 前端团队成长 1 10 增 天下武功，无坚不破，唯快不破 理想很丰满，现实很骨感 组件化开发与系统拆分 分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，组件化是目前前端最流行的分治手段。 组件化开发 组件化开发 a.js a.css b.js b.css 图片 图片 图片 模板 x.swf 内嵌 内嵌 内嵌 依赖 依赖 依赖 定位 定位 定位 通过 内嵌，依赖 和 定位 管理所有前端资源，通过资源加载框架读取资源表，实现资源加载程序化控制 资源管理框架 源代码 同步加载 异步加载 预加载 前端加载 后端渲染 性能优化策略 资源管理原型 构建工具 资源表 输入 优化 接口 服务端模板 模板提供require声明对js/css模块的依赖 widget用于引入组件 模板引擎根据资源表实现资源加载管理，并自动完成优化（按需、合并、同步、异步、预加载、推送、首屏内嵌等） 性能高，有哪些信誉好的足球投注网站引擎友好 大型网站子系统拆分 构建 源代码 构建工具 同步加载 异步加载 预加载 资源管理框架 资源表 前端加载 后端渲染 性能优化策略 资源管理原型 输入 优化 接口 持续集成/交付/部署 持续集成、交付、部署是团队协作的重要基础，初创团队非常有必要尽全力打造完善的可自动部署的测试、预发布、灰度发布环境，实现持续集成。基于持续集成，进一步做到持续交付，杜绝临上线前的返工。 GitLab Continuous Integration (GitLab CI) Gitlab-CI Environments 每个git分支自动创建一个独立的测试环境 结合Git-flow http://feature-rss-feed.www.quanmin.tv http://develop.www.quanmin.tv http://hotfix-missing-link.www.quanmin.tv http://master.www.quanmin.tv 前端工程多环境实现原理 master.www.quanmin.tv develop.www.quanmin.tv *.www.quanmin.tv gitlab-runner Linux nginx server { server_name master.www.quanmin.tv ; location / { proxy_pass :45020; } } master.conf develop.conf feature-xxx.conf 内网泛域名解析 反向代理 前端工程多环境实现原理 内网泛域名解析，把 *.www.quanmin.tv 解析到gitlab-runner机器上 gitlab-ci针对推送的git分支生成nginx配置文件 随机选择一个系统可用端口，分配给git分支对应的应用，启动nodejs server，监听此端口 nginx做反向代理，把域名代理给对应app端口，实现多环境效果 持续集成——pipeline 持续集成——eslint 持续集成——上线部署 前端自动化测试 前端自动化测试对于快速迭代的业务来说，一直是一个痛点。Case的维护跟不上业务变更的速度，久而久之就放弃了自动化，撸起袖子手点就好了。如果能有一种不需要维护的自动化case就好了。 –这是我说的 “UI自动化测试的难点在于业务频繁变更，很难长期维护Case。” 基于dom-diff的页面变更监控 /fouber/monitor DOM的4种差异 新增 删除 内容改变 样式改变