「自生长」的

前端研发生态环境

Self-growing development enviroment for Web Front-end

About me: 赵望野

2011 年加入豌豆实验室

 

豌豆荚 Windows 版 v1.0

豌豆荚 Windows 版 v2.0

豌豆荚应用搜索 v1.0

...

 

Web Front-end Infrastructure

十年前的前端开发

现在的前端开发

面临的问题

1. 规模膨胀,scalable 要求提高

2. 业务复杂,robust 要求提高

3. 快速迭代,efficient 要求提高

统一的前端研发生态环境,能够自生长

Solution

Tools + Rules

Speed is everything. 

开发快,提代码快,部署快

加载块,解析快

发现问题快,修复快

把大象装进冰箱分几步?

如何分解研发生态环境?

三个环境 + 三条线路

开发环境

运行环境

生产环境

开发环境

1. Project Scaffolding

2. Dependencies Management

3. Development Environment Scaffolding

4. Pre-processors

5. All things live - Live Reload, Live Build, Live Test

6. Test, maybe x-browsers, also headless

7. Build - JSLint, Concat, Uglify, Image Optimize, SASS Build, Sprite Generation, Asserts Revisioning

8. Deploy

Project Scaffolding

Yo Generator

# npm install -g yo
# npm install -g generator-***
# yo generator-***

Dependencies Management

Bower

# bower install backbone --save

Development Environment Scaffolding

NPM

# npm install

Pre-Processors

SASS\LESS     CoffeeScript     JSX     JADE

Recommendation: Compass Framework

File Mutation Watch

Live Reload

CSS

JavaScript

Images

HTML

...

Test

Karmar Runner + Mocha

「我的程序没有 BUG」

「测试是懦夫的行为」

「那是 QA 的工作」

「你用的姿势不对」

Unit Test

UI Test

Contract Test

...

Build

Grunt     Gulp

# grunt build:staging
# grunt build:production

打包

预处理

合并

压缩

Revision

...

Deploy

Amazon S3     Self-host Enviroment

Domino

生产环境

加载

负载均衡

安全

CDN

监控

服务器监控

应用监控

New Relic

New Relic

New Relic

Amazon S3 as CDN Source

运行环境

数据的收集->分析->改进

RUM

Performance

Online Exception

Pingdom

BugSnag

Google Analytics

低耦合

Feature Focus

可替代性

可扩展性

自趋完善

「自生长」

提高前端工程师的生活幸福指数

提高效率

Focus 在产品本身

Thanks!

Q&A

Email: wangye.zhao@wandoujia.com

Twitter: @wangyezhao

Weibo: @赵望野

Made with Slides.com