美团前端架构简介

5,903
-1

Published on

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

No Downloads
Views
Total Views
5,903
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
172
Comments
0
Likes
44
Embeds 0
No embeds

No notes for slide

美团前端架构简介

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

    Clipping is a handy way to collect important slides you want to go back to later.

×