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.1k
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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
110
AWS reInvent 2024 関西組 事前勉強会
shinyayamada
0
100
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
440
使えそうで使われないCloudHSM
maikamibayashi
0
170
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.8k
AWS で実現! 負荷テストと自動オブザーバビリティ (AWS 秋の Observability 祭り 2024)
mabuchs
1
120
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
680
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
480
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
160
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
220
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
4
370
Practical Orchestrator
shlominoach
186
10k
Building an army of robots
kneath
302
42k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
The Cult of Friendly URLs
andyhume
78
6k
Making Projects Easy
brettharned
115
5.9k
Visualization
eitanlees
145
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
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