《移动端WEB组件化-王政.pdf》由会员分享，可在线阅读，更多相关《移动端WEB组件化-王政.pdf（36页珍藏版）》请在三一文库上搜索。
1、微博移动Web组件化 王政Finrila 自我介绍 王政Finrila 2010年 新浪微博 前端开发 微博产品部主站，商业产品部 组件化产生背景 设计与实现 在微博的应用 规划 目录 组件化产生背景 微博移动Web组件化 微博移动端WEB开发背景 微博移动端WEB开发背景 Native Mobile Web 迭代中UI风格不一致 微博移动端WEB开发背景 产品线之间开发冗余 解决方案 公共组件库 UI不一致 开发冗余 推广客户端标准规范 提供跟随客户端UI版本迭代的标准UI组件 Card Card Card31 Card22 Card25 Card19 Card3 Card4 Card26
2、Card Brick Brick Brick 一套基于 微博客户端Card标准 开发的移动端 Web组件库，为微博移动端网页开发提供组件化解 决方案。 Brick Brick设计与实现 Brick TPL CSS LOGIC 组件 DATA Brick设计与实现 Card19组件 组件提供方式 PHP Server CDN Server TPL CSS LOGIC DATA Brick设计与实现 组件渲染 Module Loader PHP Server CDN Server CSS Logic Browser tpl tpl tpl tpl tpl data data data data d
3、ata RenderM AJAX/inline Brick设计与实现 页面拼装 Brick设计与实现 浏览器渲染 Brick设计与实现 浏览器？ 服务器？ Brick设计与实现 前后端职责更分离 前端前端 后端后端 提供组件模板、样式和交 互逻辑 提供数据结构 页面展示相关工作 业务逻辑、数据模型 Brick设计与实现 减小与服务器传输数据的体积 浏览器渲染浏览器渲染 服务器渲染服务器渲染 加载数据和模板(加载1次) 加载HTML 传输数据体积小 传输数据体积大 Brick设计与实现 方便跨产品线的组件复用 浏览器渲染浏览器渲染 服务器渲染服务器渲染 环境依赖弱 对服务器框架有依赖 静态文件共
4、享 一般需要拷贝来复用 framework RenderM LogicM Notice Action Card标准组件 Group Link Picture User Weibo 业务组件 Feed Tab Forward Toolbar Publish 自定义业务 AMD Loader Brick设计与实现 http:/ http:/ http:/ http:/ http:/ Brick提供的资源地址 Brick设计与实现 大版本号 小版本号 基础样式 标准组件样式 基础框架与模板 标准组件逻辑 代理事件逻辑 Brick使用 Brick设计与实现 Brick在微博的应用 Brick设计与实现 组件文档 Brick在微博的应用 Brick Brick在微博中的应用 微博主站 手机微博 商业产品 Native Brick在微博中的应用 快速响应业务需求 Data Native Cards Brick Cards Brick在微博中的应用 Brick规划 Brick 推动业务面向组件开发 Brick规划 DOM 组件 Brick规划 组件库预植入客户端 Native CDN Web app file:/ http:/ Cache Q&A Thanks! 微博移动Web组件化