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
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
540
Other Decks in Technology
See All in Technology
MIMEと文字コードの闇
hirachan
2
1.5k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1k
AIエージェント開発のノウハウと課題
pharma_x_tech
9
4.8k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.7k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
0
110
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
540
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.8k
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.6k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
260
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.8k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Navigating Team Friction
lara
183
15k
Visualization
eitanlees
146
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Designing for humans not robots
tammielis
250
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
184
28k
Designing Experiences People Love
moore
140
23k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
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