搜索
初创公司前端工程体系建设v1.0.1全民·CTO百度·高级研发工程师北京20102013UC·主任工程师广州20132015全民·技术负责人上海2016前端农民工，无坚不破，唯快不破理想很丰满，现实很骨感组件化开发与系统拆分分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，组件化是目前前端最流行的分治手段。组件化开发组件化开发a.jsa.cssb.jsb.css图片图片图片模板x.swf内嵌内嵌内嵌依赖依赖依赖定位定位定位通过内嵌，依赖和定位管理所有前端资源，通过资源加载框架读取资源表，实现资源加载程序化控制资源管理框架源代码同步加载异步加载预加载前端加载后端渲染性能优化策略资源管理原型构建工具资源表输入优化接口服务端模板•模板提供require声明对js/css模块的依赖•widget用于引入组件•模板引擎根据资源表实现资源加载管理，并自动完成优化（按需、合并、同步、异步、预加载、推送、首屏内嵌等）•性能高，搜索引擎友好大型网站子系统拆分构建源代码构建工具同步加载异步加载预加载资源管理框架资源表前端加载后端渲染性能优化策略资源管理原型输入优化接口持续集成/交付/部署持续集成、交付、部署是团队协作的重要基础，初创团队非常有必要尽全力打造完善的可自动部署的测试、预发布、灰度发布环境，实现持续集成。基于持续集成，进一步做到持续交付，杜绝临上线前的返工。GitLabContinuousIntegration(GitLabCI)Gitlab-CIEnvironments每个git分支自动创建一个独立的测试环境结合Git-flow://develop.www.quanmin.tv://master.www.quanmin.tv前端工程多环境实现原理master.www.quanmin.tvdevelop.www.quanmin.tv*.www.quanmin.tvgitlab-runnerLinuxnginxserver{server_namemaster.www.quanmin.tv;location/{proxy_pass:45020;}}master.confdevelop.conffeature-xxx.conf内网泛域名解析反向代理前端工程多环境实现原理•内网泛域名解析，把*.www.quanmin.tv解析到gitlab-runner机器上•gitlab-ci针对推送的git分支生成nginx配置文件•随机选择一个系统可用端口，分配给git分支对应的应用，启动nodejsserver，监听此端口•nginx做反向代理，把域名代理给对应app端口，实现多环境效果持续集成——pipeline持续集成——eslint持续集成——上线部署前端自动化测试前端自动化测试对于快速迭代的业务来说，一直是一个痛点。Case的维护跟不上业务变更的速度，久而久之就放弃了自动化，撸起袖子手点就好了。如果能有一种不需要维护的自动化case就好了。–这是我说的“UI自动化测试的难点在于业务频繁变更，很难长期维护Case。”基于dom-diff的页面变更监控•新增•删除•内容改变•样式改变•新增•删除•内容改变•样式改变•新增•删除•内容改变•样式改变•新增•删除•内容改变•样式改变Dolphin自动化测试系统Dolphin自动化测试系统•基于page-monitor项目建立页面差异对比•通过设置dom基线建立case，对比版本间的dom差异，缩小人工测试范围•集成了行为录制、log输出diff、瀑布流分析、首屏分析等好用的功能每次上线前，点一下，标记出全站重点页面的diff，人工checkDolphin自动化测试系统看板，可视化你的进度通过创建代表工作项的即时贴，并在一个可视化的工作流白板上跟踪每个工作项的当前状态，就可以很容易地实现可视化。这是一个很棒的方式，可以帮你了解你的工作，反思你的工作是如何运作的，并开始发现在工作流程中的改进机会。——《看板实战》看板的原则•可视化•限制在制品•管理流动•显式化流程规则•建立反馈环路•协作式改进、试验中演进那些年我们用过的电子看板电子看板的问题•信息辐射成本高•容易形成『信息冰箱』•缺乏仪式感•定制性较差设计产品服务端前端测试客户端物理看板•易于创建、易于变更、易于观察•有极强的信息辐射能力，了解彼此工作•有一种特别的仪式感，是一种特别的团队社交形式•白纸黑字，写下时间的承诺•方便追踪进度问题最好实践一段时间再来读这本书过去一年前端工程化实践•前端架构：组件化+子系统拆分•持续集成：基于GitLab-CI的环境+GitFlow开发规范•系统测试：基于DOM-Diff的自动回归检查系统•敏捷开发：物理看板–这也是我说的“创业不是要减少犯错的次数，而是要尽量减少犯错的成本。”前端工程持续集成基础框架日志统计构建工具系统测试上线部署性能优化敏捷开发zhangyunlong@qmtv.com跟我走吗？开启一段新的旅程！Thanks