美团前端架构简介
Upcoming SlideShare
Loading in...5
×
 

美团前端架构简介

on

  • 4,303 views

 

Statistics

Views

Total Views
4,303
Views on SlideShare
1,908
Embed Views
2,395

Actions

Likes
25
Downloads
83
Comments
0

12 Embeds 2,395

http://panweizeng.com 2215
http://www.panweizeng.com 118
http://itindex.net 28
http://webshuo.com 13
http://reader.youdao.com 6
http://xianguo.com 5
http://localhost 3
http://pwz.im 3
http://theoldreader.com 1
http://cache.baidu.com 1
http://www.netvibes.com 1
http://www.pwz.im 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

美团前端架构简介 美团前端架构简介 Presentation Transcript

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