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
250
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
antd at qcon2016
yiminghe
April 22, 2016
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
290
支付宝小程序的开放架构
yiminghe
0
220
gitc2016 react based architecture
yiminghe
1
190
react-based architecture
yiminghe
2
190
React Ecosystem At Ant Financial
yiminghe
4
2.3k
ant design preview
yiminghe
1
340
react best practice
yiminghe
3
230
react at alipay
yiminghe
43
4.6k
form validation in react
yiminghe
4
580
Other Decks in Technology
See All in Technology
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
mhrtech
3
510
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい!Databricksのai_queryについて調べてみた
kamoshika
1
280
AI時代におけるエンジニアの新たな役割──FDEとクオリアの探求/登壇資料(戸井田 裕貴)
hacobu
PRO
0
320
JAWS_ICEBERG_BASECAMP
iqbocchi
2
110
”AIを使う” から ”AIに任せる” へ ─ 開発プロセスを再設計してAIを組織標準にするまで
cyberagentdevelopers
PRO
1
140
AIとハーネスで育てるトランスコンパイラ / 20260722 Yasushi Katayama
shift_evolve
PRO
3
780
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
bash0c7
1
190
GoでCコンパイラを作った話
repunit
0
150
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
smt7174
1
490
AICoEでAIネイティブ組織への進化
yukiogawa
0
220
AI_Dev_Day_製造業領域でのAI活用から見た活用の罠と成功に導く実践知.pdf
kintotechdev
0
160
仕様駆動開発、導入半年。「本当に速くなってるの?」にデータで答える / AICon2026_hirakawa
rakus_dev
0
320
Featured
See All Featured
The Spectacular Lies of Maps
axbom
PRO
1
870
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
420
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.2k
Become a Pro
speakerdeck
PRO
31
6k
Facilitating Awesome Meetings
lara
57
7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Building an army of robots
kneath
306
46k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Product Roadmaps are Hard
iamctodd
55
12k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
WCS-LA-2024
lcolladotor
0
750
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