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 Ecosystem At Ant Financial
Search
yiminghe
December 19, 2015
Technology
4
2.2k
React Ecosystem At Ant Financial
React Ecosystem At Ant Financial
yiminghe
December 19, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
530
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
960
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
270
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
230
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
rubygem開発で鍛える設計力
joker1007
2
190
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
エンジニア向け技術スタック情報
kauche
1
250
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
A designer walks into a library…
pauljervisheath
207
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
307
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Thoughts on Productivity
jonyablonski
69
4.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Visualization
eitanlees
146
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Facilitating Awesome Meetings
lara
54
6.4k
Transcript
React Ecosystem At Ant Financial ಥሳ
[email protected]
• ᙧว • ຝ • ਫ᪢ • ๕
ᙧว
ᡶᡵᰂ๐ӱۓ୵ா
ڹᒒᳯ᷌ • य़ᰁӾݸݣᔮᕹဌํӫӱڹᒒඪ೮ • ݱᐿᔄପ೪ٻ • ᖌಷ҅ฃአ૧ ߥૡ֢/ݎපሲ
ᵱ ᓌܔ҅قᶎ҅ฃԭಘጱڹᒒຝ ᭇአԭقӨӫӱڹᒒ
ຝܻڞ
ܻڞ •ړ੶ •عܔᅩׁᩢ •ྯ੶ݢ๊դ
ܻڞ •ᒊࣁՈᙒᚺ •ੱᰁᶎقෛݎ •ੱᰁቘᥴବ੶ׁᩢ
ܻڞ •ᭇݳᛔ૩ •ᤰ •ෆݳ •ਧګ •ᛔԆݎ
ܻڞ •ࢧಸᐒ܄ •ݍḇׁᩢጱᔄପ •ݎṛᨶᰁᔄପ
ຝ
რ/ૡٍ
ᭌࣳ • spm • npm + browserify/webpack
spm •cdn ᕟկ + ၨᥦᒒ loader •Ӟᛱఘ٭҅پ܈ӻ᱾ള •http://cdn.com/x/1.0.2/x.js •http://cdn.com/y/0.1.1/y.js •…
•combo ӧᚆᥴ٬໑ᳯ᷌
spm ᳯ᷌ • ݎἋᅸ • ᗌ०Ԏ۸ᇇ • ၨᥦᒒےᛘጱᚆഖᘙ • რᖌಷ౮
npm • npm is the package manager for javascript. •
node / react / angular / jquery /… • ӧ᪃ • ᭛ଶౌ • ӧᚆਂනᐺํཛྷࣘ
tnpm • ᐺํӱۓཛྷࣘ • @your-company/xx • ᑞਧ҅᭛ଶள
browserify • ஙٖ໐ ҄ ᐒ܄ • ӧ᪃ғ • ෆݳᵙଶय़҅ᨶᰁӧݢഴ
webpack • ਡٖ໐ ҄ ٖᗝൊկ ҄ᐒ܄ᤑش • ᭗አ୩ • ӧ᪃ғ
• ᯈᗝ॔
ෆݳᤰ • चԭ webpack • ᭇݳᛔ૩҅ᴳ֗ᳪད
ૡٍ
ᕟկ
ᕟկ • react-component + ᐒ܄ᔜᭌ • + design= antd (http://ant.design)
react-component • ṛᨶᰁጱᕟկᵞݳ • es2015 • ׁಓ npm • ࢧಸᐒ܄
http://react-component.github.io
react-component • चᏐᦡෞ • ݎ҅᧣ᦶ • ೮ᖅᵞ౮ • ኞ౮
რᎱᥢ • ᚕಋຝ: generator-rc • assets: less რᎱ • examples:
ᐏֺդᎱ • src: ᕟկრᎱ • tests: mocha ၥᦶአֺ
react-component less რᎱ
react-component src es2015 ཛྷࣘრᎱ
react-component example ᐏֺդᎱ
react-component mocha ၥᦶአֺ
react-component ݎᄍᐏ
react-component ܔزၥᦶ
react-component ᥟፍሲ
react-component եᤈғnpm run browser-test-cover
react-component ೮ᖅᵞ౮
react-component • npm run pub • /npm/git tag
react-component demo ᐏ
react-component ֵአ
ෆݳࢶ୵ପ g2
antd import { Component } from ‘antd’ = ant-design +
react-component
antd • ෆݳᐒ܄ᕟկӨᛔԆᦡᦇ • ᭇݳᛔ૩ • ᓌ۸ api • ᵞ౮
css • ᤰғLayout/Button/Form/Icon/…
antd • ୗᔮᕹ • ᜋ҈ࢶຽ҈ۖኮ҈ੴ / ᕟկ • ᔮᕹ •
nico / markdown
ୗᔮᕹ • core: layout • components
ᔮᕹ • markdown • => • html docs/demo
antd • ֵአ
antd Form
ଫአຝ
ଫአຝ • ᶭᶎ᪠ኧғreact-router • හഝ/᭦ᬋ॒ቘғroof
why roof • flux • ᯿॔դᎱग़ • redux • ༷ஷग़,
store, action, reducer, middleware … • ᓌܔᶱፓ॔۸
roof • ṛපᓌܔࣈᥴ٬ᕟկᳵጱᘶۖວӨහഝىᘶ • ฦ᭗ᕟկ • ᬌف(ᤒܔ)ᕟկ state is evil
ฦ᭗ᕟկ
roof
roof RootContainer Ө Container
ᐏֺ
rootContainer
rootContainer
container
cart container
ProductList container
ᤒܔᕟկ
ᤒܔ॒ቘ • փᕹጱᤒܔ॒ቘ • ᯿॔դᎱ • ḵᦤᔺቜ
ᤒܔ॒ቘ • roof • DRY • ٖᘸ
api ᕮ • component • rootContainer/container/storeState • form • createForm/getFieldProps…
ಘ redux • dispatchContainer / dispatch • createReduxStore
๐ۓԻ
ajax ?
ᕟկᔉଶ ᕟկٖᘸ ᱾ളහ
ݳଚ᧗
๐ۓԻ • ᭌࣳ • relay • falcor
๐ۓԻ • relay • ෆݳଫአຝ • ቘஷضᬰ • ۑᚆ୩य़ •
౮य़ • ԟ҈ቘᥴ҈ᬢᑏ
๐ۓᒒԻ • falcorғ ӫဳԭහഝ᧗ • ཛྷࣳᖨਂ • ݳଚ᧗ • හഝ݄᯿ғjson
graph
falcor
ᐏֺ
ྲ ق᮱ᇿᒈ: 1s
ྲ ړսضᕆݳଚ: 600ms
ਠ౮೪ࢶ
ਫ᪢
ਫ᪢ • ᡶᡵᰂ๐ • ᴨ᯾ᵞࢫ
ᐏֺ౼ࢶ
ᐏֺ౼ࢶ
ᐏֺ౼ࢶ
๕
๕ ᕹӞᵞࢫय़Ӿݸݣᔮᕹ
๕ • ս۸ • ૡٍғๅঅඪ೮ java/nodejs/ᨶᰁכᦤ • ᕟկғๅӿጱᕟկ҅ๅଠጱᭇአ • ଫአຝғroof
ᩂᬪӱۓਫᴬ࣋ว • ๐ۓԻғਫ᪢ falcor(ᔄ֒)
๕ • റᔱ • es -> typescript: ṛ॔ଫአጱᖌಷ • ant-mobile:
react-native Ө react.js ࣁᑏۖᒒጱ ᒒᕹӞ • relay: ڹݸᒒෆݳොໜ
None