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
antd at qcon2016
Search
yiminghe
April 22, 2016
Technology
1
180
antd at qcon2016
yiminghe
April 22, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
85
支付宝小程序的开放架构
yiminghe
0
150
gitc2016 react based architecture
yiminghe
1
130
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
220
react best practice
yiminghe
3
170
react at alipay
yiminghe
43
4.1k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
Classmethod Odyssey 登壇資料
yamahiro
0
390
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
620
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
A better future with KSS
kneath
231
17k
Building an army of robots
kneath
301
42k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Clear Off the Table
cherdarchuk
89
320k
How to Ace a Technical Interview
jacobian
274
23k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Transcript
ᡶᡵᰂ๐ڹᒒૡᑕ 不只是组件库 React Ant Design ࣁᡶᡵᰂ๐ጱਫ᪢ ؇ݦ | afc163
不只是组件库 React Ant Design ࣁᡶᡵᰂ๐ጱਫ᪢ ᡶᡵᰂ๐ڹᒒૡᑕ 2011 ଙےفඪ՞ਪ ֛ḵದ᮱ᕣᒒದᕟ
؇ݦ | afc163
React 和 Ant Design 在蚂蚁金服的实践 ᡶᡵᰂ๐ڹᒒૡᑕ 2011 ଙےفඪ՞ਪ ֛ḵದ᮱ᕣᒒದᕟ ᳩ๗ᨮᨱڹᒒचᏐᔄପ
& ૡٍᎸݎ ؇ݦ | afc163
antd რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ React ದ Ꮈݎཛྷୗ
Ꮈݎཛྷୗ փᕹ ڹᒒ ᦡᦇ Ծߝᕪቘ ၥᦶ ݸᒒ + + +
+ ဋ᭗౮ṛ ӧᭇݳӾݣᎸݎᜓॵ ᩒრኒ᷀
ڹᒒ ᦡᦇ Ծߝᕪቘ ၥᦶ ݸᒒ + + + ဋ᭗౮ṛ ӧᭇݳӾݣᎸݎᜓॵ
ᩒრኒ᷀ ӱۓࢫᴚ
+ + + ဋ᭗౮ ṛ + + + ဋ᭗౮ ṛ
+ + + ဋ᭗౮ ṛ + + + ဋ᭗౮ ṛ + + + ဋ᭗౮ ṛ + + + ဋ᭗౮ ṛ
+ + + ဋ + + + ဋ + +
+ ဋ + + + ဋ + + + ဋ + + + ဋ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
None
None
ᑏۖၵᄤᤪ PC ڹᒒݎ݄֜֜Ҙ
ᬩ០ଘݣ හഝଘݣ ਮಁӾݣ CRM ૡᑕଘݣ ૡᑕଘݣ մӱᓕቘ ๐ۓလቘ ᬩᖌᔮᕹ ਮ๐Ӿஞ
ݍḇଘݣ
մӱӾݣኼ ٩ઊԆᥝࣁᶎӥ
ই֜ࣁᩒრᔲᗌጱఘ٭ӥඪ೮य़ᰁӾݸݣԾߝ ّᶶᎸݎපሲአಁ֛ḵҘ Ӿ।᮷٬ਧԧ֦҅ժ؉ᶭᶎ “ ”
Ӿ।᮷٬ਧԧ֦҅ժ؉ᶭᶎ “ ” Ծߝᕪቘ قݎ +
Ծߝᕪቘ قݎ + Ӿ।᮷٬ਧԧ֦҅ժ؉ᶭᶎ “ ”
قᎸݎཛྷୗ Ծߝᕪቘ قݎ + ڹᒒ & ᦡᦇचᏐᦡෞ
ᩒრࣳࢫᴚ ๐ۓࣳࢫᴚ
चᏐڹᒒૡᑕ + ӱۓڹᒒૡᑕ ᦡᦇ + ದԾߝڹᒒૡᑕ + +
antd რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ React ದ Ꮈݎཛྷୗ
Ant Design ӞӻӾݣᦡᦇ
ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ ᦡᦇ ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ
ङᦒ
ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ ङᦒ ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ
ᦡᦇ
ਫአԆԎ ੜᘒᗦ ᕹӞ Ի 50+ चᏐᕟկ ۖኮ
None
None
ᦡᦇದᕮݳ አݶጱᦾ +
ӥᭌೠ Select ӥោܔ Dropdown
Ԇᜋ @brand-color-1 ᴢ @shadow-1
᭦ᬋ۸ጱᦡᦇᥢڞ لୗ۸ ᜋ Յੂ ᪗ᐶ
Normal Hover Active
tint(@primary-color, 80%) shade(@primary-color, 80%)
None
None
AntD icons Alipay icons PNG 25 Alipay icons Alipay icons
Ant Desgin AntD for Mobile Ant Desgin 主按钮 次按钮 幽灵按钮 失效按钮 中号按钮 按钮一 按钮二 按钮三 请选择 请选择 请选择 请输入 请输入 开 开 关
ᔜߝཛྷୗ ᥢཛྷୗ ӫӱڹᒒ+ᦡᦇ᯿ଶ݇Ө ىဳአಁ֛ḵ ىဳԾߝᤒሿێ ૡᑕ҈PD ԅԆ҄ᦡᦇᬀ ๐ۓཛྷୗ ӫ ّ
᭽᭗አᦡᦇᥢ ىဳᎸݎපሲ ّᶶአಁ֛ḵ
None
antd რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ React ದ Ꮈݎཛྷୗ
෯ጱದ ದᘌ۸ ᖌಷۖێӧ᪃ ᗌᐒ܄ Arale Alice spm Sea.js
ದᘌ۸ ᖌಷۖێӧ᪃ ᗌᐒ܄ Arale Alice spm Sea.js
ڹᒒದᄤၞ ೮ԋጱኞێ ᐒ܄ᕁڥ ಼ React რᐒ܄
ڹᒒದᄤၞ ೮ԋጱኞێ ᐒ܄ᕁڥ ಼ React რᐒ܄ ᭜ᭇݳقݎጱڹᒒचᏐᦡෞ
᭜ᭇݳقݎጱڹᒒचᏐᦡෞ ڹᒒದᄤၞ ೮ԋጱኞێ ᐒ܄ᕁڥ
ES2015
None
react-component antd UI ᕟկ
react-component antd UI ᕟկ
ਧ֖ ׀ବ੶ۑᚆ ਠ࠺ጱॺկ ୗ चᏐ݇ᘍୗ ᕹӞጱᦡᦇᥢ ᯈᗝ ୩य̵़॔ ᔜᓌ
ṛᴤ҅॔ ᔜᗦ҅ᶎݻڡᕆአಁ ಘ ṛ ֗ react-component antd
UI ᕟկ
ૡ֢ၞ ant-tool
ӥӞդᡶᡵڹᒒݎૡٍ ant-tool
HMR դቘ හഝ MOCK ୌ UI ၥᦶ හഝၞ ᓕቘ ᐶᕚ۱
ݎ դᎱ ᥢ ᚕಋຝ
ᚕಋຝ HMR դቘ හഝ MOCK ୌ UI ၥᦶ හഝၞ ᓕቘ
ᐶᕚ۱ ݎ դᎱ ᥢ
None
ݢൊጱ npm package
ֵአفݗ
ଫአຝ մӱᕆԾߝݎᵱᥝմӱᕆጱڹᒒଫአຝ ಅํጱդᎱ᮷ํᧆ݄ጱࣈො
ଫአຝ մӱᕆԾߝݎᵱᥝմӱᕆጱڹᒒଫአຝ ಅํጱդᎱ᮷ํᧆ݄ጱࣈො
API Server Data View URL Action routing react dispatch
react react-router-redux redux react-redux redux-saga reselect css-modules isomorphic-fetch
API Server Data View URL Action routing react dispatch isomorphic-
fetch async + awa it react-router react-router-redux redux-saga reselect css- modules
None
ङᦒ රᑕ ᦧړ ᬀާ ڹᒒದᴺ
قݎ ᬀާ قݎ قݎ قݎ قݎ ӱۓᕚ
None
ڹᒒದᴺ ङᦒ + රᑕ + ᦧړ + ᬀާ
antd რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ React ದ Ꮈݎཛྷୗ
$ npm install antd Ant Design ጱ React ਫሿ +
4700+ ਥᗑྯ෭ᦢᳯᰁ Իහ 1400+ Issue Pull request හᰁ 69
ᨯሠᘏහᰁ 70/193 ᥟፍᡶᡵӾݸݣᔮᕹ 1w+ npm ྯ์ӥᰁ 2w+
մӱٖ᮱ই֜؉რҘ
რ ≠ නრᎱ ڊݗٖᲀ ӞᥤݶՌ ىဳᐒ܄ عᛔࡣ
ant.design ᦡᦇᥢ ڹᒒֵአ
դᎱ >
None
ᄍᐏྲ API ๅଉአ ׀ Changelog ܋ᕆ ׀ݎᘏ᧔ก ׀ग़ᇇ
— ᵨຎ ӥ᭲ฎӞଷउ૱ጱᜉஞ̶ “ ” — ؇ݦ ग़ᇇฎრጱᜉஞ̶
ग़ᇇฎრጱᜉஞ̶ ӥ᭲ฎӞଷउ૱ጱᜉஞ̶ “ ”
໐ஞੜᕟ ٖ᮱ռ۱ + ݎᩒრ
None
ᳯ᷌ݍḇ ᵱᦎᦞ ᥠᵞ ձۓᓕቘ Issues ӧളݑ๚ Issue ጱᵱ
ӧളݑ๚ Issue ጱᵱ ᳯ᷌ݍḇ ᵱᦎᦞ ᥠᵞ ձۓᓕቘ
ٌ՜ਫሿ ّ ݢአ ᇙୌᦓ դᎱᷚ໒ ग़ ඪ೮ ๐ۓᒒ ວ ᚕಋຝ
ᐒ܄ᨯሠ
None
ӾݣӱۓԾߝ ದԾߝ & ᥢ Ant Design, antd, Roof, G2 etc.
ದ๐ۓ ֛ḵದ᮱
๚ TypeScript antm ᑏۖᒒ ๐ۓᒒ Ի ӱۓཛྷ ୗପ ࢵᴬ۸ …
Question is welcome
None
None
None
None
Semantic Version
ݎᇇғbeta ᑞਧᇇғstable
ݎᇇғbeta ᑞਧᇇғstable
develop-1.0.0 ݎᇇғbeta ᑞਧᇇғstable master
None
Commit ىᘶ issue