AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

支付宝前端架构的涅槃

发布者 FEer   简介 前端技术
发布于 1428974110713  浏览 14987 关键词 前端 
分享到

第1页

支付宝前端架构的涅槃  

承玉,加缪  



第2页

•  历史  



大纲  



•  下一代前端架构  



•  实践  



•  展望  



第3页

支付宝前端架构  

•  2012  ~  2014  

–  seajs  &  arale2  

•  2014  ~      

–  react  &  roof  



第4页

2012  ~  2014  



第5页

2012  ~  2014  

•  技术特点  

–  基于浏览器动态加载的模块化  

•  url  combo   •  build  

–  基于  jQuery  面向  DOM  的编程方式  

•  初步的组件编写规范  

–  提供细粒度的基础模块支持  



第6页

2012  ~  2014  

定义  

使用  



第7页

2012  ~  2014  

•  mvc  组件  

–  Model:  attrs   –  View:  handlebars   –  Control:  events  



第8页

问题  

•  浏览器端加载逻辑过重  

–  无法语义化版本  

•  组件机制不完善  

–  模版与局部刷新   –  组合性   –  和  DOM  节点的结合  

•  流行功能缺失  

–  数据绑定   –  …  

•  专有源不便与业界接轨  



第9页

2014  ~    

•  重新思考~~  



第10页

history

•  Inspired
  by
  XHP(php),
  2010
  开源



第11页

history

•  react
  2013.8
  开源
   •  
  人物
  

–  Jordan
  Walke
  @jordwalke
  第一版,目前 react-­‐ naEve.
  G
  

–  Pete
  Hunt
  @floydophone
  早期开源版本贡献者.
  ig,G
   –  SebasEan
  Markbåge
  @sebmarkbage
  目前主力,决策

制定.
  G
  tc39
   –  Paul
  O’Shannessy
  @zpao
  PM.
  Fb
   –  Tom
  Occhino
  @tomocchino
  manager



第12页

React  

•  Component  

–  jsx   –  Virtual  DOM   –  Life  cycle  

•  Flux  

•  Isomorphic  javascript  



第13页

Component  



第14页

•  Jsx  



Component  



•  扩充  es6  

PrimaryExpression  =>  JSXElement   JSXAttributeValue  =>  {  AssignmentExpression  }   JSXChild  =>  {AssignmentExpression    }  ||  JSXElement   JSXChildren  =>  JSXChild  JSXChildren     



第15页

Virtual  DOM  



第16页

Dom  diff  



第17页

Virtual  dom  

•  化动为静,可预测  

–  某一时刻的状态对应于确定的虚拟  dom  表示   –  避免人肉追踪随时间而产生得  dom  局部变化  

•  框架负责经可能高效得在虚拟  dom  和原生   dom  间同步  

•  *  抽象层和具体实现脱离,底层可切换为   canvas/svg/native/dom  



第18页

Life  cycle  

•  在组件的不同生命周期会调用不同的组件 函数  

•  初次创建时  

–  constructor      //  server  and  client   –  componentWillMount  //  server  and  client   –  render    //  server  and  client   –  componentDidMount  //  client   –  componentWillUnmount  //  client  



第19页

Life  cycle  

•  组件更新    

–  父组件重新渲染该组件   –  本身  setState  

•  函数调用顺序  (client)  

–  componentWillReceiveProps   –  shouldComponentUpdate   –  componentWillUpdate   –  render   –  componentDidUpdate  



第20页

flux  

•  Single-direction  data  flow  application   pattern  

–  Action   –  Dispatcher   –  Store   –  View  



第21页

dispatcher



acEon



store



view



第23页

推崇的原则  

•  单向数据流   •  组件组合   •  可预测,可靠,容易测试   •  声明式语法  



第24页

Isomorphic    

•  服务器端渲染  

–  React.renderString  

•  逻辑共享  

–  UI  无关的业务逻辑   –  Router  路由   –  Validator  验证   –  Data  model  数据模型  

•  前后端一致的开发模式  



第25页


  

React
  at
  alipay



第26页

下一代前端架构  



第27页

commonjs  

•  具备凌乱生命力的  commonjs  生态圈:   npm  



第28页

React  component  

•  基于  commonjs  生态圈的  react  生态  



第29页

react-component  

•  基础设施  

–  加载  npm  模块   –  代码检测   –  测试,覆盖率,示例页面/脚手架自动生成   –  travis,  saucelabs  支持  

•  目录结构  

–  assets:    less  源码   –  examples:  组件示例   –  lib:  commonjs  源码   –  tests:  测试代码  



第30页

lib  

•  源码示例  

–  es6:  动态转化为  es5  到浏览器执行,通过   sourcemap  支持源码调试  

–  require  node_modules  模块  



第31页

lib  



第32页

•  浏览器实际  



lib  



第33页

examples  

•  No  html,  Just  js  



第34页

examples  

•  页面自动生成  



第35页

tests  

•  基于  mocha   •  commonjs  格式  



第36页

tests  

•  覆盖率自动生成  



第37页

持续集成支持  

•  travis,  coveralls,  saucelabs  



第38页

组件开发的一点经验  

•  职责清晰   •  扁平访问   •  避免信息冗余   •  概念一致   •  标签化   •  避免使用  ref  



第39页

职责清晰

•  多个组件协同完成一件事情,而不是一个 组件替其他组件完成本该它自己完成的事 情。
  



第40页

扁平访问

•  组件推荐使用状态来控制交互和显示,如 果需要显示访问,也尽量实行扁平访问, 即只可以调用其 children
  的方法。



第41页

避免信息冗余

•  尽量避免信息冗余,如果某个 state
  可以由 其他 state
  计算得到,那么就删除这个 state.



第42页

概念一致

•  如果 api
  可以和已知概念保持一致,那么就 用已知的 api



第43页

标签化

•  尽量使用标签嵌套而不是属性配置。



第44页

避免使用
  ref

•  不要关注细节,使用父组件的
  state
  控制子 组件的状态而不是直接通过
  ref
  操作子组件



第45页

   •  开发  



实际项目实践  



•  部署  



第46页

技术栈

•  server:
  chair(koa)
   •  生态圈/源:
  tnpm(npm)
   •  组件:
  react-­‐component(react)
   •  应用架构:
  flux
   •  工具:
  webpack
  



第47页

开发  

•  nodejs  (chair/koa)  

–  koa-webpack-dev-middleware:  webpack  实 时内存打包  



第48页

package.json

•  devDependencies



第49页

开发源码  

•  commonjs  

–  es6  同  react-component   –  css/less  也通过  require(‘xx.css’)  加载  



第50页

页面  

•  一个页面一个顶层组件  App  组合其他组件  



第51页

构建数据模型  

•  flux  store  



第52页

更新  

•  数据模型发生变化时顶层  App  重新渲染  

–  数据传递:  顶层组件-子组件-孙子组件   –  父子组件互相耦合    

•  最简单的做法   •  最高效?  



第53页

部署  

•  使用  webpack  进行  build  

–  每个页面打包出一个  css  一个  js,不依赖浏览 器端  loader  

–  通过  sourcemap  可以在线调试源码     



第54页

部署

•  Webpack
  的一些其他特性
  

–  排除公共库的打包,react,jquery
  可以单独引
  

–  通过定义常量,将开发中的
  log
  在线上删除
  

•  if(__DEV__)
  {
  console.log(‘xxx’)
  }
  

–  抽取多页面的公用依赖模块为单独 js,加强跨页面 缓存
  

–  将按需加载的模块打包成单独的 js,按需加载



第55页

总结

•  组件化开发
  

–  越细越好
  

•  中央数据模型
  

–  易于理解
  

•  前后端一致的开发模式
  

–  基于
  npm
  包管理
   –  js
  为中心
   –  项目代码独立
  (业务同组件整体打包)
  

•  不适合?
  

–  复杂动态场景(店铺装修?)
  



第56页

•  tnpm   •  alipay  roof   •  Isomorphic     •  react-art   •  react-native  



展望  



第57页

tnpm  

•  Private  package  

–  @alipay/xx  

•  npm  package  

–  同步自  npm,内网速度快  

•  快速拼装收银台应用  



第58页

Alipay  roof  



第59页

Isomorphic  

•  同构
  javascript
  

–  通过 react-­‐router
  共享路由
   –  通过 fluxible
  共享
  store
   –  通过
  alipay
  roof
  共享模型与验证
   –  通过
  react
  共享渲染



第60页

react-­‐art

•  用标签化来实现 canvas
  与 svg
   •  Svg
  

–  Pro:
  结构化易理解,支持事件
   –  Con:
  性能
  

•  Canvas
  

–  Pro:
  性能高
   –  非结构化,无事件
  

•  react-­‐art:
  svg+canvas
  



第61页

react-­‐art
  demo



第62页

react-­‐art

•  hep://yiminghe.me/learning-­‐react/example/ react-­‐art/index-­‐build.html
  



第63页

react-­‐naEve

•  使用 js
  来描述界面,布局(flexbox),处 理逻辑。单独的线程运行
  javascriptcore。
  

•  naEve
  用来渲染组件,和
  javascriptcore
  通信。



第64页

Ref

•  React:
  hep://facebook.github.io/react
   •  React-­‐component:
  

heps://github.com/react-­‐component
   •  Learning-­‐react:
  

heps://github.com/yiminghe/learning-­‐react
   •  react-­‐webpack-­‐chair:
   •  hep://gitlab.alibaba-­‐inc.com/chengyu/chair-­‐

react-­‐webpack
  



支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。