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
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
300
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
6
4.6k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
320
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
20
7.7k
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
470
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
180
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
120
本当にわかりやすいAIエージェント入門
segavvy
7
4.2k
ClaudeCodeにキレない技術
gtnao
1
900
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
P2P通信の標準化 WebRTCを知ろう
faithandbrave
5
1.7k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
250
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Balancing Empowerment & Direction
lara
1
470
A designer walks into a library…
pauljervisheath
207
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualization
eitanlees
146
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Site-Speed That Sticks
csswizardry
10
710
Building Adaptive Systems
keathley
43
2.7k
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