前端工程化与工具链实践
林子杰@zegia
UC优视 导航 前端
项目
版本
团队

15
55
5->12
项目多 需求多 版本多 人也多

如何提高效率?
现象:

工程问题:

开发和生产环境

环境搭建

业务逻辑复杂
新人多、项目交接

代码维护性

需求多,版本迭代快
代码冗余

代码组织管理

终端、平台兼容性

移动端调试

BUG 处理困难

浏览器兼容

……
1. 环境搭建
• 快速搭建开发服务器
• 模拟后端接口
• 模拟生产环境
2. 代码维护性
• 业务逻辑复杂(SPA)
• 多人协作开发
• 代码风格多样
• 项目交接频繁

Code Style Guide
2. 代码维护性
3. 代码组织管理

• 代码模块化
• 代码质量审查
• 模块依赖处理
• 代码混淆压缩
• 文件合并打包
• 前端资源简化
4. 移动端调试

• 远程调试工具
• 日志打印方式

Socket.io + Console
5. 浏览器兼容
• 移动端兼容性
• 积累解决的经验
• 解决问题的效率
• 群体经验贡献
ELF
环境搭建
代码维护性

框架
规范

代码组织管理
移动端调试
浏览器兼容

工具
开放的、可持续的、高效的、系统的

工具链的设计理念
Q&A
前端工程化与工具链实践
Upcoming SlideShare
Loading in …5
×

前端工程化与工具链实践

1,318 views

Published on

UC导航业务前端工程师林子杰在WebReBuild 2013上的分享 via http://tech.uc.cn/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,318
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

前端工程化与工具链实践

  1. 1. 前端工程化与工具链实践 林子杰@zegia UC优视 导航 前端
  2. 2. 项目 版本 团队 15 55 5->12
  3. 3. 项目多 需求多 版本多 人也多 如何提高效率?
  4. 4. 现象: 工程问题: 开发和生产环境 环境搭建 业务逻辑复杂 新人多、项目交接 代码维护性 需求多,版本迭代快 代码冗余 代码组织管理 终端、平台兼容性 移动端调试 BUG 处理困难 浏览器兼容 ……
  5. 5. 1. 环境搭建 • 快速搭建开发服务器 • 模拟后端接口 • 模拟生产环境
  6. 6. 2. 代码维护性 • 业务逻辑复杂(SPA) • 多人协作开发 • 代码风格多样 • 项目交接频繁 Code Style Guide
  7. 7. 2. 代码维护性
  8. 8. 3. 代码组织管理 • 代码模块化 • 代码质量审查 • 模块依赖处理 • 代码混淆压缩 • 文件合并打包 • 前端资源简化
  9. 9. 4. 移动端调试 • 远程调试工具 • 日志打印方式 Socket.io + Console
  10. 10. 5. 浏览器兼容 • 移动端兼容性 • 积累解决的经验 • 解决问题的效率 • 群体经验贡献
  11. 11. ELF 环境搭建 代码维护性 框架 规范 代码组织管理 移动端调试 浏览器兼容 工具
  12. 12. 开放的、可持续的、高效的、系统的 工具链的设计理念
  13. 13. Q&A

×