移动端WEB组件化王政.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/11/14,#,微博移动,Web,组件化,王政,Finrila,自我,介绍,王政,Finrila,2010,年,新浪微博,前端开发,微博产品部主站，商业产品部,组件化,产,生,背景,设,计与实现,在,微博的应,用,规,划,目,录,组,件化产,生,背,景,微博移动,Web,组件化,微博移,动端,WEB,开发背景,微博移动端,WEB,开发背景,Native,Mobile Web,迭代中,UI,风格不一致,微博移动端,WEB,开发背景,产品线之间开发冗余,解决方案,公共组件库,UI,不一致,开发冗余,推广客户,端标,准规范,提供跟随客户端,UI,版本迭代,的标准,UI,组件,Card,Card,Card31,Card22,Card25,Card19,Card3,Card4,Card26,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,data,RenderM,AJAX/inline,Brick,设计与实现,页面拼装,Brick,设计与实现,浏览器渲染,Brick,设计与实现,浏览器？,服务器？,Brick,设计与实现,前后端职责更分离,前端,后端,提供组件模板、样式和交互逻辑,提供数据结构,页面展示相关工作,业务逻辑、数据模型,Brick,设计与实现,减小与服务,器传输数,据的体积,浏览器渲染,服务器渲染,加载数据和模板,(,加载1,次,),加载,HTML,传输数据体积小,传输数据体积大,Brick,设计与实现,方便跨产品线,的,组件复用,浏览器渲染,服务器渲染,环境依赖弱,对服务器框架有依赖,静态文件共享,一般需要拷贝来复用,framework,RenderM,LogicM,Notice,Action,Card,标准组件,Group,Link,Picture,User,Weibo,业务组件,Feed,Tab,Forward,Toolbar,Publish,自定义业务,AMD Loader,Brick,设计与实现,Cards,Brick Cards,Brick,在微博中的应用,Brick,规划,Brick,推动业务面向组件开发,Brick,规划,DOM,组件,Brick,规划,组件,库预植入客户端,Native,CDN,Web app,file:/,,Cache,Thanks,!,微博移动,Web,组件化,