美团前端架构简介
- 2. 关于我
• 工作经历
- 2006 年毕业开始从事前端开发，沉迷至今
- 2008 年加入现在的创业团队，小宇宙爆发
• 性格爱好
- INTJ型处女座，完美主义者
- javascript/css/html/php/python/shell
- 健身、跑步、游泳
• 更多信息
- http://panweizeng.com/about
- http://weibo.com/panweizeng
- 5. 内容
• 代码框架
- 通用基础库
- 通用组件
- 组件框架
- 移动应用
- loader
- combo
- 6. 内容
• 代码框架 • 开发工具
- 通用基础库 - 运行监测
- 通用组件 ✓ 性能数据
- 组件框架 ✓ 错误日志
✓ 性能优化
- 移动应用 - 测试工具
- loader - 代码检查
- combo - 静态文件预编译
- 7. 内容
• 代码框架 • 开发工具 • 知识管理
- 通用基础库 - 运行监测 - 代码风格和规范
- 通用组件 ✓ 性能数据 - 技术文档
- 组件框架 ✓ 错误日志
✓ 性能优化
- 培训资料
- 移动应用 - 测试工具
- loader - 代码检查
- combo - 静态文件预编译
- 8. 背景
• 前端人力紧缺
-
没有精力独立开发底层基础框架
- 后端需要写前端代码，后期维护成本由前端承担
• 业务飞速发展，市场竞争激烈
-
快
- 可持续开发，可扩展性好
- 稳定可靠，某些开源框架还不适用于严肃的前端开发
- 9. 基础框架
• 主力基础框架 - YUI3
-
绝大部分面向消费者、商家和业务相关的系统
• 辅助类库 - jQuery
-
智能手机版本 i.meituan.com
- 第三方组件如统计系统的图表
- 21. 组件框架的思想
• 优秀的开发范式，统一、规范的api
• 状态与表现分离，之间通过自定义事件、AOP
进行交互
- 22. 组件框架的思想
• 优秀的开发范式，统一、规范的api
• 状态与表现分离，之间通过自定义事件、AOP
进行交互
• 自定义事件的广泛应用，来源包括：ATTRS变
动、生存周期切换、widget本身定义等方面
- 23. 组件框架的思想
• 优秀的开发范式，统一、规范的api
• 状态与表现分离，之间通过自定义事件、AOP
进行交互
• 自定义事件的广泛应用，来源包括：ATTRS变
动、生存周期切换、widget本身定义等方面
• 灵活的功能整合，可以获取基础类的原型方法
和插件
- 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
- 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
- 41. 编码风格
• CodingStyle - 全局编码风格
• HtmlCodingStyle - html编码风格
• CssCodingStyle - css编码风格
• JsCodingStyle - javascript编码风格
• UIGuideLine - UI规范
- 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项目多采用此模式
