十年前的前端开发

现在的前端开发

面临的问题

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

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

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

把大象装进冰箱分几步？

如何分解研发生态环境？

三个环境 + 三条线路

开发环境

运行环境

生产环境

开发环境

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

运行环境

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

RUM

Performance

Online Exception

Pingdom

BugSnag

Google Analytics

低耦合

Feature Focus

可替代性

可扩展性

自趋完善

「自生长」

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

提高效率

Focus 在产品本身