T32通道答辩手稿

备忘

个人介绍

• 2012年加入鹅厂
• 微云 web 版核心开发
• 微信云 & 腾讯云助手
• 手机 QQ 游戏社交项目
• 最多带9个人

过去一年主要工作内容

• 框架建设

  • AbstractModule
    
    • 抽象页面主要逻辑，提升开发效率
    • 集成 MQQAPI
    • 页面生命周期（beforeRender, render, afterRender等）
  • 静态配置、文案
    
    • AMS 配置生成 JSON 后会发布到 CDN，页面初始化时并行请求静态配置文件 和 CGI
    • 可随时根据产品需求修改文案，无需发布代码
  • 柔性设计
    
    • 次要 CGI 异常时，对应的模块不显示，不影响页面主要内容显示
  • 公共库（创新）
    
    • 背景：每个项目拷贝一份基础库代码，用户流量被浪费
    • 方案：独立公共库，单独加载，通过 localStorage 缓存到本地，通过构建工具自动完成
    • 效果：流量减少明显，加载耗时减少不明显

• 开发调试

  • WebStorm
    
    • 推动全组使用 WebStorm，避免低级错误，提升开发效率
  • BadJS
    
    • 独立部署部门自己的 BadJS，但因无法拿到切实准确的 PV，所以错误率仍然不准确
    • 推动部门所有 web 项目接入

  • UI 自动化监控

    • 我们这边之前发生过外网页面故障但是过了一天才发现的问题，对应的邮件找不到了，但是前两天恰好找到了手 Q 空间礼物页面的一个故障，点击「回赠」时提示需要登录

      

    • 推动测试编写 QTA 测试用例

    • ARS 提交发布前执行 QTA 用例，用例执行不通过不允许发布（BadJS 错误率）
    • 定时执行用例，1小时->20分钟

  • ATT 直出服务监控

    • 

• 方法论建设

  • 分支提测、发布（创新）
    
    • 产品各个模块之间关联很多，也为了做到人力备份，我们团队的任何模块都可以由任何一个组员进行开发、提测。这样一来就经常出现两个组员要修改同一个模块的情况。为了解决这个问题，我开启了脑洞模式，想到可以通过分支提测，发布后合主干，另一人从主干更新的流程。这个流程的执行起到了很好的效果，迭代不再阻塞，同时编写了构建工具用来防止版本覆盖问题

  • 测试环境按人头分目录

    • 部署一套测试环境，给组里每个人一个目录，每人一个 ARS 映射，利用 ARS 的 SVN 工程别名实现分目录部署

      

      

      对于开发人员来说只需要在发布时选择自己的分支，部署测试环境时 ARS 便会自动部署到自己的目录中

      

  • 推动项目团队 WIKI 文档

    • 我们发现项目团队很多公共文档都是通过 RTX 发送文件的方式来交流，对文档沉淀非常不利。比如（案例）。后来我们在 TAPD WIKI 中建立了文档库，提交了大量开发文档，受到广大群众一致好评，随后在整个项目团队推广，现在前端、后端、产品、测试的文档非常丰富，无论对于新人上手还是工作交接都非常有用。

      

      

  • 推动后台使用 Postman 进行 CGI 集成测试（创新）

    • 但因手动操作成本太高，没能推起来

  • AMS 锁表 chrome 插件（创新）

• 知识传播

  • 增值前端达摩院 - React & React-Native
    

    

    ---

    

    

    ---

    

    

    ---

    • <视频>

  • web 前端开发调试工具
    [图片丢失]

  • 小组内部分享

    1. 《半小时深刻理解React》
    2. 《Flux探秘》
    3. 《基于SPA与Flux思想的公会新框架》
    4. 《Webpack使用指南》
    5. 《深入剖析javascript原型链》
    6. 《工欲善其事必先利其器 —— WebStorm快速上手》
    7. 《Grunt——前端工业化的第一步》
    8. 《移动端web调试与抓包》
    9. 《ES6 Generator》
    10. 《深入剖析javascript原型链》
    11. 《通过Nodejs实现服务端-客户端公用一套代码》
    12. 《seajs3.0源码分析》
    13. 《利用Postman对CGI进行集成测试》
    14. 《移动web页面滚动最佳实践》
    15. 《公共JS模块统一管理及共享方案》
    16. 《mock.js-无需等待，让前端独立于后端进行开发》
    17. 《Backbone事件模块源码分析》
    18. 《MongoDB入门》
    19. 《Presenting to Win 演讲制胜》
    20. 《Angular快速上手》
    21. 《web安全》
    22. 《koa.js介绍》
    23. 《linkstar 系统使用指南》
    24. 《WebStorm快速上手》
    25. ...

• 人才培养

  • 带最多9人的团队
    

    

  • 实习生 homkerliu

    • 给他安排了在其他地方少有的 NodeJs 开发工作
    • 搞定了部门 BadJS 系统的部署和前后端开发工作
  • 毕业生 sesamewen
    
    • 安排开发需要一定学习力的视频直播模块，随时沟通解答疑惑
  • 喜欢捣鼓技术人的组员
    
    • 充分授权搭建开发框架并帮助在组内推广，鼓励编写公共组件以提升在团队中的影响力
  • 擅长写文章的组员
    
    • 鼓励多写文章，推动了项目团队文档的建设
    • [图]
  • 富有产品 sence 的组员
    
    • 交付产品逻辑复杂或工期紧张的需求

  • 有后台 C++ 开发经历的组员

    • 安排搭建 web server，引入 TSW 实现直出，并在部门分享实践经验，推广到了游戏中心平台线、QQ会员等

    

    

• 系统设计

  • 多地部署
    
    • 已部署深圳和上海两地
      
  • 柔性设计
    
    • 当 CGI 次要逻辑异常时，停用对应的页面模块，页面主体渲染不受影响
      
  • 在线日志
    
    • 用 TSW 的日志能力，可随时染色，log 立即生效。TSW 实现了服务端抓包能力，可以随时下载 fiddler 包来查看请求内容，便于以后接入 https 或 WebSo! 时抓包
      
  • 离线日志
    [待定]

• 网络知识

  • TSW 直出

    • 选型

      • 了解过腾讯云的 NodeJS 方案
        
        • 人力有限，不想从头开搞
      • 了解过 TAF Node
        
        • 被米格云控伤过心，不想过于依赖 TAF

    • 首屏更快

      

    • 提前点击（创新）几行代码2.6%用户

      

      

      

      推广到了游戏中心

    • 代码复用

    • 模调
    • L5

  • 推动WebSo!上手Q

    （待定）

  • 蹦失率统计（97%）

  • 内存监控

  • 流量监控

    
    

  • CGI请求合并

• 运营知识

  • 没有 XSS
    
    • 定期门神扫描安全漏洞
    • 定期 review 代码，重点照顾可能出现 XSS 的代码
  • 敏感 CGI 隔离 & 域名收归
    
    • 整个公司绝大多数业务的 cookie 都是写在 .qq.com 域名下，这样做为公司的业务迅速发展建立了非常好的基础，同时也埋下了一些地雷。前阵子就爆了一颗，记得前阵子 Dowson 往增值产品部 QQ 群里发了一个AIO消息，很多人点进去后也会自动往其他群里传播同样的AIO 消息，这下可炸锅了。部门里所有业务诚惶诚恐，火烧火燎地找漏洞源头，找了大半天后才知道原来是开平（好像）的漏洞。类似的场景已经发生过多次了，所以域名收归和 CGI 隔离就必须得搞了。[后面不知道咋写了]

• 其他

  • 无限滚动优化

    （插入视频）
    

    

    

  • 终端缓存（业务控制缓存大小 || _offline）

  • 反 DNS 劫持