Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react at alipay
Search
yiminghe
April 03, 2015
Technology
43
4.2k
react at alipay
react at alipay
yiminghe
April 03, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
130
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
690
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
300
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
190
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
210
The Role of Developer Relations in AI Product Success.
giftojabu1
1
150
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Side Projects
sachag
452
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Speed Design
sergeychernyshev
25
620
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Typedesign – Prime Four
hannesfritz
40
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Happy Clients
brianwarren
98
6.7k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Transcript
支付宝前端架构的涅槃 承玉,加缪
大纲 • 历史 • 下一代前端架构 • 实践
• 展望
支付宝前端架构 • 2012 ~ 2014 – seajs & arale2
• 2014 ~ – react & roof
2012 ~ 2014
2012 ~ 2014 • 技术特点 – 基于浏览器动态加载的模块化 •
url combo • build – 基于 jQuery 面向 DOM 的编程方式 • 初步的组件编写规范 – 提供细粒度的基础模块支持
2012 ~ 2014 使用 定义
2012 ~ 2014 • mvc 组件 – Model: attrs
– View: handlebars – Control: events
问题 • 浏览器端加载逻辑过重 – 无法语义化版本 • 组件机制不完善
– 模版与局部刷新 – 组合性 – 和 DOM 节点的结合 • 流行功能缺失 – 数据绑定 – … • 专有源不便与业界接轨
2014 ~ • 重新思考~~
history • Inspired by XHP(php), 2010 开源
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
React • Component – jsx – Virtual DOM
– Life cycle • Flux • Isomorphic javascript
Component
Component • Jsx • 扩充 es6 PrimaryExpression
=> JSXElement JSXAttributeValue => { AssignmentExpression } JSXChild => {AssignmentExpression } || JSXElement JSXChildren => JSXChild JSXChildren
Virtual DOM
Dom diff
Virtual dom • 化动为静,可预测 – 某一时刻的状态对应于确定的虚拟 dom 表示
– 避免人肉追踪随时间而产生得 dom 局部变化 • 框架负责经可能高效得在虚拟 dom 和原生 dom 间同步 • * 抽象层和具体实现脱离,底层可切换为 canvas/svg/native/dom
Life cycle • 在组件的不同生命周期会调用不同的组件 函数 • 初次创建时
– constructor // server and client – componentWillMount // server and client – render // server and client – componentDidMount // client – componentWillUnmount // client
Life cycle • 组件更新 – 父组件重新渲染该组件 – 本身
setState • 函数调用顺序 (client) – componentWillReceiveProps – shouldComponentUpdate – componentWillUpdate – render – componentDidUpdate
flux • Single-direction data flow application pattern
– Action – Dispatcher – Store – View
dispatcher store view acEon
None
推崇的原则 • 单向数据流 • 组件组合 • 可预测,可靠,容易测试
• 声明式语法
Isomorphic • 服务器端渲染 – React.renderString •
逻辑共享 – UI 无关的业务逻辑 – Router 路由 – Validator 验证 – Data model 数据模型 • 前后端一致的开发模式
React at alipay
下一代前端架构
commonjs • 具备凌乱生命力的 commonjs 生态圈: npm
React component • 基于 commonjs 生态圈的 react 生态
react-component • 基础设施 – 加载 npm 模块
– 代码检测 – 测试,覆盖率,示例页面/脚手架自动生成 – travis, saucelabs 支持 • 目录结构 – assets: less 源码 – examples: 组件示例 – lib: commonjs 源码 – tests: 测试代码
lib • 源码示例 – es6: 动态转化为 es5 到浏览器执行,通过
sourcemap 支持源码调试 – require node_modules 模块
lib
lib • 浏览器实际
examples • No html, Just js
examples • 页面自动生成
tests • 基于 mocha • commonjs 格式
tests • 覆盖率自动生成
持续集成支持 • travis, coveralls, saucelabs
组件开发的一点经验 • 职责清晰 • 扁平访问 • 避免信息冗余
• 概念一致 • 标签化 • 避免使用 ref
职责清晰 • 多个组件协同完成一件事情,而不是一个 组件替其他组件完成本该它自己完成的事 情。
扁平访问 • 组件推荐使用状态来控制交互和显示,如 果需要显示访问,也尽量实行扁平访问, 即只可以调用其 children 的方法。
避免信息冗余 • 尽量避免信息冗余,如果某个 state 可以由 其他 state 计算得到,那么就删除这个 state.
概念一致 • 如果 api 可以和已知概念保持一致,那么就 用已知的 api
标签化 • 尽量使用标签嵌套而不是属性配置。
避免使用 ref • 不要关注细节,使用父组件的 state 控制子 组件的状态而不是直接通过 ref 操作子组件
实际项目实践 • 开发 • 部署
技术栈 • server: chair(koa) • 生态圈/源: tnpm(npm) •
组件: react-‐component(react) • 应用架构: flux • 工具: webpack
开发 • nodejs (chair/koa) – koa-webpack-dev-middleware: webpack 实 时内存打包
package.json • devDependencies
开发源码 • commonjs – es6 同 react-component – css/less
也通过 require(‘xx.css’) 加载
页面 • 一个页面一个顶层组件 App 组合其他组件
构建数据模型 • flux store
更新 • 数据模型发生变化时顶层 App 重新渲染 – 数据传递: 顶层组件-子组件-孙子组件
– 父子组件互相耦合 • 最简单的做法 • 最高效?
部署 • 使用 webpack 进行 build – 每个页面打包出一个 css
一个 js,不依赖浏览 器端 loader – 通过 sourcemap 可以在线调试源码
部署 • Webpack 的一些其他特性 – 排除公共库的打包,react,jquery 可以单独引 –
通过定义常量,将开发中的 log 在线上删除 • if(__DEV__) { console.log(‘xxx’) } – 抽取多页面的公用依赖模块为单独 js,加强跨页面 缓存 – 将按需加载的模块打包成单独的 js,按需加载
总结 • 组件化开发 – 越细越好 • 中央数据模型
– 易于理解 • 前后端一致的开发模式 – 基于 npm 包管理 – js 为中心 – 项目代码独立 (业务同组件整体打包) • 不适合? – 复杂动态场景(店铺装修?)
展望 • tnpm • alipay roof •
Isomorphic • react-art • react-native
tnpm • Private package – @alipay/xx • npm
package – 同步自 npm,内网速度快 • 快速拼装收银台应用
Alipay roof
Isomorphic • 同构 javascript – 通过 react-‐router 共享路由
– 通过 fluxible 共享 store – 通过 alipay roof 共享模型与验证 – 通过 react 共享渲染
react-‐art • 用标签化来实现 canvas 与 svg • Svg
– Pro: 结构化易理解,支持事件 – Con: 性能 • Canvas – Pro: 性能高 – 非结构化,无事件 • react-‐art: svg+canvas
react-‐art demo
react-‐art • hep://yiminghe.me/learning-‐react/example/ react-‐art/index-‐build.html
react-‐naEve • 使用 js 来描述界面,布局(flexbox),处 理逻辑。单独的线程运行 javascriptcore。 • naEve
用来渲染组件,和 javascriptcore 通信。
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