react at alipay - Speaker Deck

Slide 1

Slide 1 text

支付宝前端架构的涅槃承玉，加缪

Slide 2

Slide 2 text

大纲 •  历史 •  下一代前端架构 •  实践 •  展望

Slide 3

Slide 3 text

支付宝前端架构 •  2012 ~ 2014 – seajs & arale2 •  2014 ~ – react & roof

Slide 4

Slide 4 text

2012 ~ 2014

Slide 5

Slide 5 text

2012 ~ 2014 •  技术特点 – 基于浏览器动态加载的模块化 •  url combo •  build – 基于 jQuery 面向 DOM 的编程方式 •  初步的组件编写规范 – 提供细粒度的基础模块支持

Slide 6

Slide 6 text

2012 ~ 2014 使用定义

Slide 7

Slide 7 text

2012 ~ 2014 •  mvc 组件 – Model: attrs – View: handlebars – Control: events

Slide 8

Slide 8 text

问题 •  浏览器端加载逻辑过重 –  无法语义化版本 •  组件机制不完善 –  模版与局部刷新 –  组合性 –  和 DOM 节点的结合 •  流行功能缺失 –  数据绑定 –  … •  专有源不便与业界接轨

Slide 9

Slide 9 text

2014 ~ •  重新思考~~

Slide 10

Slide 10 text

history •  Inspired by XHP(php), 2010 开源

Slide 11

Slide 11 text

history •  react 2013.8 开源 •  人物 –  Jordan Walke @jordwalke 第一版，目前 react-‐ naEve. G –  Pete Hunt @ﬂoydophone 早期开源版本贡献者. ig,G –  SebasEan Markbåge @sebmarkbage 目前主力，决策制定. G tc39 –  Paul O’Shannessy @zpao PM. Fb –  Tom Occhino @tomocchino manager

Slide 12

Slide 12 text

React •  Component – jsx – Virtual DOM – Life cycle •  Flux •  Isomorphic javascript

Slide 13

Slide 13 text

Component

Slide 14

Slide 14 text

Component •  Jsx •  扩充 es6 PrimaryExpression => JSXElement JSXAttributeValue => { AssignmentExpression } JSXChild => {AssignmentExpression } || JSXElement JSXChildren => JSXChild JSXChildren

Slide 15

Slide 15 text

Virtual DOM

Slide 16

Slide 16 text

Dom diff

Slide 17

Slide 17 text

Virtual dom •  化动为静，可预测 – 某一时刻的状态对应于确定的虚拟 dom 表示 – 避免人肉追踪随时间而产生得 dom 局部变化 •  框架负责经可能高效得在虚拟 dom 和原生 dom 间同步 •  * 抽象层和具体实现脱离，底层可切换为 canvas/svg/native/dom

Slide 18

Slide 18 text

Life cycle •  在组件的不同生命周期会调用不同的组件函数 •  初次创建时 – constructor // server and client – componentWillMount // server and client – render // server and client – componentDidMount // client – componentWillUnmount // client

Slide 19

Slide 19 text

Life cycle •  组件更新 – 父组件重新渲染该组件 – 本身 setState •  函数调用顺序 (client) – componentWillReceiveProps – shouldComponentUpdate – componentWillUpdate – render – componentDidUpdate

Slide 20

Slide 20 text

flux •  Single-direction data flow application pattern – Action – Dispatcher – Store – View

Slide 21

Slide 21 text

dispatcher store view acEon

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

推崇的原则 •  单向数据流 •  组件组合 •  可预测，可靠，容易测试 •  声明式语法

Slide 24

Slide 24 text

Isomorphic •  服务器端渲染 –  React.renderString •  逻辑共享 –  UI 无关的业务逻辑 –  Router 路由 –  Validator 验证 –  Data model 数据模型 •  前后端一致的开发模式

Slide 25

Slide 25 text

React at alipay

Slide 26

Slide 26 text

下一代前端架构

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

React component •  基于 commonjs 生态圈的 react 生态

Slide 29

Slide 29 text

react-component •  基础设施 –  加载 npm 模块 –  代码检测 –  测试，覆盖率，示例页面/脚手架自动生成 –  travis, saucelabs 支持 •  目录结构 –  assets: less 源码 –  examples: 组件示例 –  lib: commonjs 源码 –  tests: 测试代码

Slide 30

Slide 30 text

lib •  源码示例 – es6: 动态转化为 es5 到浏览器执行，通过 sourcemap 支持源码调试 – require node_modules 模块

Slide 31

Slide 31 text

lib

Slide 32

Slide 32 text

lib •  浏览器实际

Slide 33

Slide 33 text

examples •  No html, Just js

Slide 34

Slide 34 text

examples •  页面自动生成

Slide 35

Slide 35 text

tests •  基于 mocha •  commonjs 格式

Slide 36

Slide 36 text

tests •  覆盖率自动生成

Slide 37

Slide 37 text

持续集成支持 •  travis, coveralls, saucelabs

Slide 38

Slide 38 text

组件开发的一点经验 •  职责清晰 •  扁平访问 •  避免信息冗余 •  概念一致 •  标签化 •  避免使用 ref

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

实际项目实践 •  开发 •  部署

Slide 46

Slide 46 text

技术栈 •  server: chair(koa) •  生态圈/源: tnpm(npm) •  组件: react-‐component(react) •  应用架构: ﬂux •  工具: webpack

Slide 47

Slide 47 text

开发 •  nodejs (chair/koa) – koa-webpack-dev-middleware: webpack 实时内存打包

Slide 48

Slide 48 text

package.json •  devDependencies

Slide 49

Slide 49 text

开发源码 •  commonjs – es6 同 react-component – css/less 也通过 require(‘xx.css’) 加载

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

构建数据模型 •  flux store

Slide 52

Slide 52 text

更新 •  数据模型发生变化时顶层 App 重新渲染 – 数据传递: 顶层组件－子组件－孙子组件 – 父子组件互相耦合 •  最简单的做法 •  最高效？

Slide 53

Slide 53 text

部署 •  使用 webpack 进行 build – 每个页面打包出一个 css 一个 js，不依赖浏览器端 loader – 通过 sourcemap 可以在线调试源码

Slide 54

Slide 54 text

部署 •  Webpack 的一些其他特性 –  排除公共库的打包，react，jquery 可以单独引 –  通过定义常量，将开发中的 log 在线上删除 •  if(__DEV__) { console.log(‘xxx’) } –  抽取多页面的公用依赖模块为单独 js，加强跨页面缓存 –  将按需加载的模块打包成单独的 js，按需加载

Slide 55

Slide 55 text

总结 •  组件化开发 –  越细越好 •  中央数据模型 –  易于理解 •  前后端一致的开发模式 –  基于 npm 包管理 –  js 为中心 –  项目代码独立 (业务同组件整体打包) •  不适合? –  复杂动态场景（店铺装修？）

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

tnpm •  Private package – @alipay/xx •  npm package – 同步自 npm，内网速度快 •  快速拼装收银台应用

Slide 58

Slide 58 text

Alipay roof

Slide 59

Slide 59 text

Isomorphic •  同构 javascript – 通过 react-‐router 共享路由 – 通过 ﬂuxible 共享 store – 通过 alipay roof 共享模型与验证 – 通过 react 共享渲染

Slide 60

Slide 60 text

react-‐art •  用标签化来实现 canvas 与 svg •  Svg – Pro: 结构化易理解，支持事件 – Con: 性能 •  Canvas – Pro: 性能高 – 非结构化，无事件 •  react-‐art: svg+canvas

Slide 61

Slide 61 text

react-‐art demo

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

react-‐naEve •  使用 js 来描述界面，布局（ﬂexbox），处理逻辑。单独的线程运行 javascriptcore。 •  naEve 用来渲染组件，和 javascriptcore 通信。

Slide 64

Slide 64 text

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