Frontend devops-v1.0

小创公司如何提升
前端开发效率
Cloudinsight 前端 DevOps 分享
2016年5月35日

关于我
• 王龑
• OneAPM
• 前端工程师
• @wyvernnot

分享内容
• 如何形成 DevOps 文化
• 开发中的一些技巧
• 持续集成和持续部署
• 监控和数据驱动

什么是 DevOps
• 促进软件的开发, 按时交付
• 关注过程、自动化的工具
• 强调开发、运维和测试的紧密合作
也就是
• 不加班
• 不重复
• 多职能

DevOps is Agile done right
图片来源：http://www.tricentis.com/solutions/devops/
个人和互动高于流程和工具
工作软件高于理解文档
客户协作高于合同协商
变化响应高于计划遵循

引入和形成自己的开发模式
我们团队的一些敏捷实践：
• 严格控制例会时间
• 演示自己的成果
• 公开的代码审查
• 发布完后的反思会
• 自己一定要用自己的产品

“吃自己的狗食”
及早发现问题，探索新的用例

拥抱变更而不是频繁的改需求
• 对创业公司来说, 快速变更就是生命
• 封闭的冲刺迭代
• 重视和客户的交流，缩短反馈环

开发中的一些技巧
最佳实践更好的选择

使用 ES6 书写易于维护的代码
• 写明天的代码
• 抛弃古董浏览器
• 使用垫片技术兼容现代浏览器（Math.log10 ）
• 使用 JavaScript 语言转换器
• 使用 ESLint 做代码规范检查
• 先解决有还是没有的问题
• 在解决合理还是不合理的问题

使用 ES6 书写易于维护的代码（cont）
• 升级你的 Node.js 版本
• 选择 Node.js LTS 版本,
• Node.js V6.0 对 ES2015 的支持度已经达到了 95 %
• 前端项目和后端项目的界限正在模糊。
• 三大特征
• 封装、继承、多态
• 五大原则
• 单一职责
• 开放封闭
• 里氏替换
• 依赖倒置
• 接口隔离

前端组件化难题
展示
切换不同
的模式
编辑器
Heatmap
Pie
Value
Table
Timeries
TopN
Treemap
Button
ButtonGroup
Header
Modal
Panel
DropDown
业务组件
公共组件
架构

action dispatcher store view
action
热力图展示模块
热力图编辑器图表编辑器
Flux 架构
Redux Store
修改条件
修改指标

使用 Webpack 打包
https://github.com/ruanyf/webpack-demos

基于 Webpack 实现按需加载
// 以目录作为上下文
const chartTypeContext = require.context('../chartTypes');
// 工厂方法
const chartFactory = type => {
chartTypeContext(`./${type}`);
};
// 获取对象
return React.createElement(factory(type), {
queries,
qm // 注入属性
});
图表编辑器
type: String
图
编辑器
数据查询工具类热力图编辑器
时序图编辑器
热力图
时序图

持续集成和持续部署
“懒”出效率

使用 GIT 管理源代码
• 打不死的小强, 删不掉的代码
• 用好分支管理
• 开源的心态
• @cloudinsight

保持开发环境和线上环境等价
• 使用 package.json 显示地声明依赖
• Windows / Mac / Ubuntu
• 在 package.json 里使用不同的版本策略
• 稳定版 jQuery
• 最新版 React
• 固定板 react-xxxx-module

测试技术的演进
• 第一阶段
• 测试人员需要自己安装各种模块，独立把项目跑起来
• 缺点
• 对测试人员的技术要求
• 测试的并不是线上的版本

第二阶段 – 创建 Docker 镜像
4.反向代理
3.服务查询
2.服务注册
1.触发构建

缺点
• 对于纯前端项目来说太复杂
• 速度非常慢
• Docker Hub
• NPM
由于国内网络的限制
不建议纯前端项目使用 Docker

第三阶段 – 交付到 CDN
• 方便而且便宜
• 持续的交付
• 随时部署

使用 Hash 规避 CDN 的缓存问题
• 源文件
• app.js
• MD5
• app-1w4j5ut9.js
• Commit
• app-fe34ftr0.js
• Webpack
• app-i2fedisu.js
• Tag
• app-v5.2.1-hoxfix-1.js`

基于 Jenkins 使流程自动化
• 安装/更新环境依赖
• 代码静态检查（规范、重复）
• 安全漏洞检查
• 单元测试
• 编译打包
• 收集构建结果
• 生成报表
• 线上部署
• PhantomJS 截图
• 浏览器的自动化测试
• 邮件通知

保障 DevOps 的安全
• 服务器启用 HTTPS
• 开发环境尽量使用 SSH 证书, 并开启密码保护
• 做好监控和安全防护

监控和数据驱动
Monitor Everything

DevOps 的过程中会产生大量的数据
• 单元测试结果
• 代码规范结果
• 需要更新的模块
• 每次打包耗费的时间
• 打包所用的 Webpack 版本
• 生成的文件的大小
... …

DevOps 的过程中会产生大量的数据（cont）
• 线上机器负载
• 每日活跃用户
• 活跃探针数
• 商城订单
• 每种功能的使用趋势
… …

• 可用性
• 加载时间
• 错误率
• 运营商数据
• DNS时间
… …

去逛逛 DevOps 的 SaaS 商店
基础设施
监控
项目管理
统计

运维帮: 一张图解读中国公有云现状
http://chuansong.me/n/358318951536

Frontend devops-v1.0

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Frontend devops-v1.0 (20)

Frontend devops-v1.0