Download as PDF, PPTX
Uploaded bypan weizeng
美团前端架构简介
文档介绍了美团的前端架构，涵盖了基础框架、开发工具、知识管理和协作开发模式等内容。重点强调了使用yui3框架以应对快速业务发展和前端人力紧缺的问题，同时展示了丰富的工具链和代码规范。文档还描述了美团的开发流程和协作开发模式，强调了效率和稳定性。
美团前端架构简介
- 1.
- 2. 关于我 • 工作经历 - 2006 年毕业开始从事前端开发，沉迷至今 - 2008 年加入现在的创业团队，小宇宙爆发 • 性格爱好 - INTJ型处女座，完美主义者 - javascript/css/html/php/python/shell - 健身、跑步、游泳 • 更多信息 - http://panweizeng.com/about - http://weibo.com/panweizeng
- 3.
- 4.
- 5. 内容 • 代码框架 -通用基础库 - 通用组件 - 组件框架 - 移动应用 - loader - combo
- 6. 内容 • 代码框架 •开发工具 - 通用基础库 - 运行监测 - 通用组件 ✓ 性能数据 - 组件框架 ✓ 错误日志 ✓ 性能优化 - 移动应用 - 测试工具 - loader - 代码检查 - combo - 静态文件预编译
- 7. 内容 • 代码框架 •开发工具 • 知识管理 - 通用基础库 - 运行监测 - 代码风格和规范 - 通用组件 ✓ 性能数据 - 技术文档 - 组件框架 ✓ 错误日志 ✓ 性能优化 - 培训资料 - 移动应用 - 测试工具 - loader - 代码检查 - combo - 静态文件预编译
- 8. 背景 • 前端人力紧缺 - 没有精力独立开发底层基础框架 - 后端需要写前端代码，后期维护成本由前端承担 • 业务飞速发展，市场竞争激烈 - 快 - 可持续开发，可扩展性好 - 稳定可靠，某些开源框架还不适用于严肃的前端开发
- 9. 基础框架 • 主力基础框架 -YUI3 - 绝大部分面向消费者、商家和业务相关的系统 • 辅助类库 - jQuery - 智能手机版本 i.meituan.com - 第三方组件如统计系统的图表
- 10. 现有代码规模 javascript css 85, 000 10, 000 html template 160, 000
- 11.
- 12. YUI3的特点 • 真正的框架，强劲的持续开发能力，可以 应对快速的业务发展 •帮助工程师成长，培养良好的工程思维
- 13. YUI3的特点 • 真正的框架，强劲的持续开发能力，可以 应对快速的业务发展 •帮助工程师成长，培养良好的工程思维 • 代码规范整齐，容易维护，适合有洁癖的 工程师
- 14.
- 15.
- 18.
- 19. CSS模块化 • 组件支持换肤，每个站点可以自定义自 己的样式 •组件粒度更小，便于扩展维护
- 20. 组件框架的思想 • 优秀的开发范式，统一、规范的api
- 21. 组件框架的思想 • 优秀的开发范式，统一、规范的api • 状态与表现分离，之间通过自定义事件、AOP 进行交互
- 22. 组件框架的思想 • 优秀的开发范式，统一、规范的api • 状态与表现分离，之间通过自定义事件、AOP 进行交互 • 自定义事件的广泛应用，来源包括：ATTRS变 动、生存周期切换、widget本身定义等方面
- 23. 组件框架的思想 • 优秀的开发范式，统一、规范的api • 状态与表现分离，之间通过自定义事件、AOP 进行交互 • 自定义事件的广泛应用，来源包括：ATTRS变 动、生存周期切换、widget本身定义等方面 • 灵活的功能整合，可以获取基础类的原型方法 和插件
- 25. 应用框架 • 用于单页应用的MVC框架 • Controller,Model, Model List, View • 将在未来的业务系统中使用
- 26. 通用组件 CommonDialog mutiSelect tree Collapse FlashCopy tab table AjaxForm date core base PopUp validate ProvinceCitySelect paginator autocomplete uploader PopulateForm buttonToPost HeaderTip linkDialog liveSearch cascade HelpTip
- 27. loader • 模块依赖关系管理 • 自动加载模块 •编写应用时只需要use，其他事情交给 loader
- 28. loader应用 • yui3 loader •FileHelper • footer.php
- 29. combo • 只做好一件事情：文件合并 • 具有自主知识产权：） •增加文件缓存、别名、线下测试支持
- 30.
- 31.
- 32. 运行监测 • 错误日志 -收集用户浏览器的错误信息进行分析 • 性能数据 -DomReady time - PageLoad time - 首屏时间 todo
- 35. 性能优化 • cdn - {s0,s1,p0,p1,c}.meituan.net - trade-off • combo - 根据URL的md5缓存合并后的文件 • lazyloading - 根据需要才显示图片或载入更多的项目 - 多加载一屏，滚动更平滑，用户基本感觉不到 • gahost - use local ga.js to speed up google analytics
- 36. 测试工具 • 兼容性 • 调试 - vmware server - firebug - vmware fusion - fiddler - vmware player - ie developer toolbar - vmware workstation - chrome developer tools
- 37. 代码检查 • -jslint command line tool - vim plugin - git pre-commit & post-update hook • -csslint todo
- 38. 静态文件预编译 • Shrinksafe • YUICompressor • Todo - 切分CSS图片的域名 - 自动图片优化 - Google Closure Compiler
- 39. 部署 • 检出代码 • 压缩js/css •替换版本号 • 分发 • 重启服务
- 40.
- 41. 编码风格 • CodingStyle -全局编码风格 • HtmlCodingStyle - html编码风格 • CssCodingStyle - css编码风格 • JsCodingStyle - javascript编码风格 • UIGuideLine - UI规范
- 42. 技术文档 • FrontEndQuickStart 前端快速入门 •JqueryOnTouch 触屏手机版二次开发 • YUI3环境搭建 • YUI3简介 • ...
- 43. 培训 • 前端相关 • 普适性 - 浅谈设计的CRAP原则 - Shell basics - 业务系统前端实践总结 - oAuth in meituan - Javascript核心概念 - 后端基础知识 - Javascript基础 - Git基础 - CSS技术分享 - VIM入门与进阶 - HTML5设计原理 - 工程师的非技术能力 - YUI3在美团 - 用MBTI理解性格差异 - ... - ...
- 44. 开发流程 1. 产品出需求文档 -去年年末才开始有，敏捷需求跳过此步 2. 设计师出设计稿 - 大部分时候不需要设计稿 3. 前后端协作开发 4. 线下环境测试 - 工程师负责逻辑，产品负责交互 5. 预上线环境 - 非大feature跳过此步 6. 上线（一般需要20秒） - 重复测试，观察日志，如有故障则快速修复，只有loser才rollback！
- 45. 协作开发模式 • 中央服务器集中式开发 -前后端工程师通过SSH连接到统一的开发服务器编程 - 开发环境较复杂，需要自行配置，一般是入职第一天的第一个任务 - 没有接口文档，靠吼来沟通，部分任务会在jira中有接口说明 - 协作速度快，开发即联调，不需要合并工作 - 美团的PHP项目多采用此模式
- 46. 协作开发模式 • 单机分布式开发 -前后端工程师在个人工作机分别各使用一套开发环境 - 通过远程分支合并工作成果，有线下公用的测试环境 - 开发互不影响，更有节奏，以预定好的版本号发布，比较稳定 - 美团的JAVA项目多采用此模式
- 47.