Booster 发布会
@CSS魔法
2016. 07. 01.
“ 打造实用工具 · 改善开发体验 ”（第二波）
Booster
下一代·前端开发环境
- Booster 想解决什么问题？
- Booster 如何解决这些问题？
- 如何使用 Booster 改善开发体验？
（50 分钟）
Booster 想解决什么问题？
在开发阶段
前端构建慢！
“
”
问题来了：为什么慢？
内网
本地
开
发
服
务
器
编辑器
构
建
结
果
浏览器
本地
文件
❶
修改
自动上传
监听任务
(FEB)
❷
请求静态资源
读取
返回
获得静态资源
开发者
- 两条线
- 两条线的时间差
- 链条过长
- 构建任务性能不高
（开发阶段）前端构建的现状：
“时间差”：
现状
Booster
❶
❷
修改并保存
刷新浏览器
❶
❷
❶
❷
保存 (≈0s)
上传 (2~5s)
构建 (2~10s)
监听触发构建 (≈0.5s)
保存 (≈0s)
t
如何做到？
Booster 如何解决这些问题？
内网
本地
开
发
服
务
器
编辑器
浏览器
本地
文件
❶
修改
❷
请求
返回
开发者
Booster
读取
编译
Booster 与现状的对比：
| 现状 |
|---|
| 两条线 |
| 两条线的时间差 |
| 链条过长 |
| 构建任务性能不高 |
| Booster |
|---|
两条线
没有时间差
链条短
按需构建
目前 Booster 能处理的静态资源：
✓
通过 Stylus 编译的 CSS
通过 Script Bundle 打包的 JS
通过 ES6 模块打包的 JS
✓
✓
基本囊括手机站的所有开发场景！
（手机站）
（手机站）
（手机站）
如何使用 Booster
改善开发体验？
- 安装 Node.js
- 本地仓库安装必要的 npm 依赖
- 本地浏览器配置代理规则
准备工作：
$ npm install --production
本地仓库安装依赖：
（先进入本地仓库的 ■■■■■■/■■■■■■/ 目录）
浏览器配置代理规则：
（把对 s.***.baixing.cn 的请求打到 Booster 的服务）
浏览器配置代理规则：
（把对 s.***.■■■■■■■.■■ 的请求打到 Booster 的服务）
安装 Booster：
$ npm install -g booster-cli
初始设置：
$ booster -u peter -r /path/to/project
（指定你在开发服务器的用户名和本地仓库目录）
常规使用：
$ booster
（启动 Booster 服务）
(Demo)
Yeah, it's Booster v1.
但是……
刷新浏览器
其实一点儿也不优雅！
Booster v1 有个问题：
“ Live Reload ”
Booster v2 的解决方案：
- 文件变更直接触发浏览器更新
- 正确识别资源依赖关系
内网
本地
开
发
服
务
器
编辑器
浏览器
本地
文件
❶
修改
推送
开发者
Booster
监听
编译
Booster 与现状的对比：
| 现状 |
|---|
| 两条线 |
| 两条线的时间差 |
| 链条过长 |
| 构建任务性能不高 |
| Booster v1 |
|---|
两条线
没有时间差
链条短
按需构建
Booster 与现状的对比：
| 现状 |
|---|
| 两条线 |
| 两条线的时间差 |
| 链条过长 |
| 构建任务性能不高 |
| Booster v2 |
|---|
一条线
没有时间差
链条短
按需构建
Live Reload 的支持范围：
基本囊括手机站的所有开发场景！
✓
通过 Stylus 编译的 CSS
通过 Script Bundle 打包的 JS
通过 ES6 模块打包的 JS
✓
✓
（手机站）
（手机站）
（手机站）
(Demo)
- 配置文件变动后自动重新读取
- 编译出错时不会挂
- ……
Booster 的其它优势：
Credits
- 主程
- 设计
- NProxy
- NProxy-Plus
- Socket.io
- ……
鸣谢以下开源项目：
FAQ
- 公开测试：7 月中旬
- 正式发布：今年秋天
“ 啥时候能用上？”
- 公用配置文件
- 编译工具版本同步
“ 如何保证构建结果的一致性？”
- 产品级的可用性
- 编译错误推送
- 支持 TypeScript
- 支持 Webpack + Babel 6 (?)
“ 接下来的开发计划？”
手机站全覆盖！
“ 为什么不支持 Web 站？”
说起来比较尴尬……
- 成本太高
- 接受 Pull Request
“ 开源吗？代码在哪里？”
公司内网 GitLab
■■■■■■.■■■■■■■.■■/booster/booster
Q & A
Thank You!
Booster 发布会
By CSS魔法
Booster 发布会
“打造实用工具 · 改善开发体验”（第二波）
