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
220
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
160
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
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
320
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
Expertise as a Service via MCP
yodakeisuke
1
160
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.7k
KCD Lima: eBee in Peru!
lizrice
0
110
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
650
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
260
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
210
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
280
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
300
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
KATA
mclloyd
30
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Building Applications with DynamoDB
mza
95
6.5k
Optimizing for Happiness
mojombo
379
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Adopting Sorbet at Scale
ufuk
77
9.5k
Balancing Empowerment & Direction
lara
1
510
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