![UED开发流程
Mock-up Demo
PRD Prototype
[视觉设计 [前端工程
[产品经理] [交互设计师]
师] 师]](https://image.slidesharecdn.com/zhaozexin-frontend-100517050833-phpapp01/85/-12-320.jpg)
赵泽欣 - 淘宝网前端应用与发展
- 1. 淘宝网前端应用与发展 小马
- 2. 关于我 { Name: “赵泽欣”, Nickname: “小马”, Jobtitle: “前端架构师” Company: “淘宝网” City: “杭州” Twitter: “zhaozexin” }
- 3. 内容提要 • 淘宝前端发展史 • 每年的问题与挑战 • 实践经验与心得 • 前端发展展望
- 8. 淘宝网前端 @ 2006 前端员工人数 50 40 30 20 10 0 0 2006 2007 2008 2009 2010
- 10. 淘宝网前端 @ 2007 前端员工人数 50 40 30 20 10 5 0 0 2006 2007 2008 2009 2010
- 11. 问题与挑战 @ 2007 • 团队合作成本高，编码规范缺失 • 网站应用交互更复杂 • 脚本管理混乱，复用性低
- 12. UED开发流程 Mock-up Demo PRD Prototype [视觉设计 [前端工程 [产品经理] [交互设计师] 师] 师]
- 13. 与交互/视觉的合作 • Axture • 制定标注规范 • 淘斯基
- 14. 标注示例
- 15. 与开发/测试的协作 • 共用的基础脚本库 • HTML/CSS 命名约定
- 16. 选择一个脚本类库 • Prototype • jQuery • YUI • Dojo • Ext
- 17. Prototype
- 18. jQuery
- 19. Dojo
- 20. YUI
- 21. Ext
- 22. Why YUI？ • 适合淘宝的多人协作开发环境 • 功能齐全，可高效开发 • 稳定 可靠
- 23. TBra 基于YUI的电子商务网站常用组件库
- 24. 与开发/测试的协作 • 共用的脚本库 • 代码约定（HTML/CSS/JavaScript命名 规范）
- 25. 与开发/测试的协作 合作中最常遇到的问题： 1. HTML 嵌套错误 2. 分不清哪些标签不要改劢，是前端丏用 的？ 3. 分不清哪些脚本应该由开发来写，哪些由 前端来写？
- 26. 与开发/测试的协作 问题: HTML 嵌套错误 解决方法： 增加特定格式的注释 教会开发人员使用Firebug & HTML Validator
- 27. 与开发/测试的协作 • 问题：分不清哪些标签不要改劢，是前端 丏用的？ 解决方法： @TODO 格式化 特殊的Hook 命名约定，开发人员保留拥有特殊id/class命名的标签 <div id=“fp:slide” class=“tb-slide”>……</div> <span class=“ww:token”><a class=“ww-online”>…</a></div> 新版： <div id=“J_Slide”>……</div> 其他CSS命名，统一使用连接符。 脚本： 代码统一写在一个闭包内。
- 28. 小结 (2007) • 制定UED规范 • 制定前端代码规范 • 制定与开发的协作规范
- 30. 淘宝网前端 @ 2008 前端员工人数 50 40 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
- 31. 问题与挑战 @ 2008 • 淘宝的业务拆分，应用越来越多。如何保 持页面的一致性 • 促销活劢频繁，促销页面占用大量的前端 工作量 • 用户抱怨淘宝页面慢 • 人才与成长
- 32. 保持页面的一致性 • 统一页头页尾 • 栅格化 • TMS 系统 (同时解决第二个问题)
- 33. TMS
- 34. 关注前端性能 • CSS Sprite • 首页 JavaScript/CSS 内嵌 • 减少HTTP请求 – 将YUI+Tbra打包成一个请求 tbra-aio.js • 引入CDN Assets域名 – assets.taobaocdn.com • 脚本/CSS压缩 – YUICompressor
- 35. 小结 （2008） 2008: 工具年 • 完善规范，将标准转化为工具 – TMS • 开始关注前端性能，使用 ySlow/YUICompressor 进行优化
- 37. 淘宝网前端 @ 2009 前端员工人数 50 40 30 30 20 14 10 5 0 0 2006 2007 2008 2009 2010
- 38. 困难与挑战 @ 2009 • YUI+Tbra 已不能满足开发需求 • 性能成为工作重点
- 39. 困难与挑战 @ 2009 问题：YUI+Tbra已不能满足开发的需求 – YUI的组件不合国情 – Tbra扩展性不足 – YUI组件较为笨重 解决方法： – 建立开源 Kissy 框架 – 重写常用组件： AutoComplete/ImageLazyLoad/RichEdito r
- 40. 困难与挑战 @ 2009 挑战：性能要求更严格 解决方法： – 根据ySlow原则逐条优化 – Assets.taobaocdn.com – Cookie 优化 – 图片压缩 – 图片延迟 – 常用工具： Firebug + Fiddler + ySlow + PageSpeed + Webpagetest
- 43. 淘宝网前端 @ 2010 前端员工人数 100 90 80 70 70 60 50 40 30 30 20 14 5 10 0 0 2006 2007 2008 2009 2010
- 44. 问题与挑战 @ 2010 • YUI + Tbra 的前端架构不再适合淘宝 • 性能要求苛刻 • 项目前端开发工作量占比不断提高，对前 端技能要求日益提高
- 45. 问题与挑战 @ 2010 挑战：新淘宝前端架构 解决方法： – Kissy Core 重写，不再依赖YUI – Kissy UI 开源组件库 – Tbra 基于 Kissy，淘宝丏用组件库 – 各产品线类库
- 46. 淘宝2010前端架构 App Lib { Mall 3C Shop … } Company Lib { TBra TBack } Common Lib { YUI2 Kissy }
- 47. 问题与挑战 @ 2010 挑战：苛刻的性能要求 解决方法： – 2010 淘宝最新首页优化技术(HTML压缩与 DOM预加载) – 淘宝性能指数 – 性能自劢化测试 – 基于Nginx 的Cdn combo 实现 – More…
- 48. 小结 （2010） • 2010： 品质与协同年 • @TODO 具体
- 49. 前端的发展 Web开发 应用Web化 (HTML/CSS/JavaScript/Flash/浏览器 兼容性) 交互设计代码实现 用户体验经济 (有设计基础，理解用户体验) 业务开发 Web应用桌面化 (Ajax异步开发，服务端编程语言基础， 性能) 云端管道开发 云计算 (API，架构，安全)
- 50. 前端团队人才与成长
- 51. 谢谢