antd at qcon2016

Transcript

1. ᡶᡵᰂ๐ڹᒒૡᑕ૵ 不只是组件库 React ޾ Ant Design ࣁᡶᡵᰂ๐ጱਫ᪢ ؇ݦ | afc163

2. 不只是组件库 React ޾ Ant Design ࣁᡶᡵᰂ๐ጱਫ᪢ ᡶᡵᰂ๐ڹᒒૡᑕ૵ 2011 ଙےفඪ՞ਪ ֛ḵದ๞᮱ᕣᒒದ๞ᕟ

   ؇ݦ | afc163

3. React 和 Ant Design 在蚂蚁金服的实践 ᡶᡵᰂ๐ڹᒒૡᑕ૵ 2011 ଙےفඪ՞ਪ ֛ḵದ๞᮱ᕣᒒದ๞ᕟ ᳩ๗ᨮᨱڹᒒचᏐᔄପ

   & ૡٍᎸݎ ؇ݦ | afc163

4. antd ୏რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ᧍᥺ React ದ๞຾ Ꮈݎཛྷୗ

5. Ꮈݎཛྷୗ փᕹ ڹᒒ ᦡᦇ૵ Ծߝᕪቘ ၥᦶ ݸᒒ + + +

   + ဋ᭗౮๜ṛ ӧᭇݳӾݣᎸݎᜓॵ ᩒრኒ᷀

6. ڹᒒ ᦡᦇ૵ Ծߝᕪቘ ၥᦶ ݸᒒ + + + ဋ᭗౮๜ṛ ӧᭇݳӾݣᎸݎᜓॵ

   ᩒრኒ᷀ ӱۓࢫᴚ

7. + + + ဋ᭗౮ ๜ṛ + + + ဋ᭗౮ ๜ṛ

   + + + ဋ᭗౮ ๜ṛ + + + ဋ᭗౮ ๜ṛ + + + ဋ᭗౮ ๜ṛ + + + ဋ᭗౮ ๜ṛ

8. + + + ဋ + + + ဋ + +

   + ဋ + + + ဋ + + + ဋ + + + ဋ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
9. None
10. None

11. ᑏۖၵᄤ๶ᤪ PC ڹᒒ୏ݎ݄֜֜՗Ҙ

12. ᬩ០ଘݣ හഝଘݣ ਮಁӾݣ CRM ૡᑕଘݣ ૡᑕଘݣ մӱᓕቘ ๐ۓလቘ ᬩᖌᔮᕹ ਮ๐Ӿஞ

    ݍḇଘݣ

13. մӱӾݣ౴ኼ ٩ઊԆᥝࣁ࿜ᶎӥ

14. ই֜ࣁᩒრᔲᗌጱఘ٭ӥඪ೮य़ᰁӾݸݣԾߝ ّᶶᎸݎපሲ޾አಁ֛ḵҘ Ӿ।᮷٬ਧԧ֦҅ժ๶؉ᶭᶎ “ ”

15. Ӿ।᮷٬ਧԧ֦҅ժ๶؉ᶭᶎ “ ” Ծߝᕪቘ ق຾୏ݎ +

16. Ծߝᕪቘ ق຾୏ݎ + Ӿ।᮷٬ਧԧ֦҅ժ๶؉ᶭᶎ “ ”

17. ق຾Ꮈݎཛྷୗ Ծߝᕪቘ ق຾୏ݎ + ڹᒒ & ᦡᦇचᏐᦡෞ

18. ᩒრࣳࢫᴚ ๐ۓࣳࢫᴚ

19. चᏐڹᒒૡᑕ૵ + ӱۓڹᒒૡᑕ૵ ᦡᦇ૵ + ದ๞Ծߝڹᒒૡᑕ૵ + +

20. antd ୏რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ᧍᥺ React ದ๞຾ Ꮈݎཛྷୗ

21. Ant Design ӞӻӾݣᦡᦇ᧍᥺

22. ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ᝜ ᦡᦇ᧍᥺ ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ

    ङᦒ

23. ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ ङᦒ ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ᝜

    ᦡᦇ᧍᥺

24. ਫአԆԎ ੜᘒᗦ ᕹӞ Ի԰ 50+ चᏐᕟկ ۖኮ

25. None
26. None

27. ᦡᦇ޾ದ๞ᕮݳ አݶ໏ጱ᧍᥺੒ᦾ +

28. ӥ೉ᭌೠ Select ӥ೉ោܔ Dropdown

29. Ԇᜋ @brand-color-1 ᴢ୽ @shadow-1

30. ᭦ᬋ۸ጱᦡᦇᥢڞ لୗ۸ ᜋ୸ Յੂ௔ ᪗ᐶ

31. Normal Hover Active

32. tint(@primary-color, 80%) shade(@primary-color, 80%)

33. None
34. None

35. AntD icons Alipay icons PNG 25 Alipay icons Alipay icons

    Ant Desgin AntD for Mobile Ant Desgin 主按钮 次按钮 幽灵按钮 失效按钮 中号按钮 按钮一 按钮二 按钮三 请选择 请选择 请选择 请输入 请输入 开 开 关

36. ᔜߝཛྷୗ ᥢ᝜ཛྷୗ ӫӱڹᒒ+ᦡᦇ᯿ଶ݇Ө ىဳአಁ֛ḵ ىဳԾߝᤒሿێ ૡᑕ૵҈PD ԅԆ҄ᦡᦇᬀ੕ ๐ۓཛྷୗ ӫ ّ

    ᭽஗᭗አᦡᦇᥢ᝜ ىဳᎸݎපሲ ّᶶአಁ֛ḵ
37. None

38. antd ୏რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ᧍᥺ React ದ๞຾ Ꮈݎཛྷୗ

39. ෯ጱದ๞຾ ದ๞ᘌ۸ ᖌಷۖێӧ᪃ ᗌ੝ᐒ܄ Arale Alice spm Sea.js

40. ದ๞ᘌ۸ ᖌಷۖێӧ᪃ ᗌ੝ᐒ܄ Arale Alice spm Sea.js

41. ڹᒒದ๞ᄤၞ ೮ԋጱኞ޸ێ ᐒ܄ᕁڥ ೜಼ React ޾୏რᐒ܄

42. ڹᒒದ๞ᄤၞ ೮ԋጱኞ޸ێ ᐒ܄ᕁڥ ೜಼ React ޾୏რᐒ܄ ಑᭜ᭇݳق຾୏ݎጱڹᒒचᏐᦡෞ

43. ಑᭜ᭇݳق຾୏ݎጱڹᒒचᏐᦡෞ ڹᒒದ๞ᄤၞ ೮ԋጱኞ޸ێ ᐒ܄ᕁڥ

44. ES2015

45. None

46. react-component antd UI ᕟկ

47. react-component antd UI ᕟկ

48. ਧ֖ ൉׀ବ੶ۑᚆ ਠ࠺ጱॺկ ໏ୗ चᏐ݇ᘍ໏ୗ ᕹӞጱᦡᦇᥢ᝜ ᯈᗝ ୩य̵़॔๥ ᔜᓌ ෈໩

    ṛᴤ҅॔๥ ᔜᗦ҅ᶎݻڡᕆአಁ ಘ઀௔ ṛ ֗ react-component antd

49. UI ᕟկ

50. ૡ֢ၞ ant-tool

51. ӥӞդᡶᡵڹᒒ୏ݎૡٍ ant-tool

52. HMR դቘ හഝ MOCK ຅ୌ UI ၥᦶ හഝၞ ᓕቘ ᐶᕚ۱

    ୏ݎ դᎱ ᥢ᝜ ᚕಋຝ

53. ᚕಋຝ HMR դቘ හഝ MOCK ຅ୌ UI ၥᦶ හഝၞ ᓕቘ

    ᐶᕚ۱ ୏ݎ դᎱ ᥢ᝜
54. None

55. ݢൊ೑ጱ npm package

56. ֵአفݗ

57. ଫአ໛ຝ մӱᕆԾߝ୏ݎᵱᥝմӱᕆጱڹᒒଫአຝ຅ ಅํጱդᎱ᮷ํᧆ݄ጱࣈො

58. ଫአ໛ຝ մӱᕆԾߝ୏ݎᵱᥝմӱᕆጱڹᒒଫአຝ຅ ಅํጱդᎱ᮷ํᧆ݄ጱࣈො

59. API Server Data View URL Action routing react dispatch

60. react react-router-redux redux react-redux redux-saga reselect css-modules isomorphic-fetch

61. API Server Data View URL Action routing react dispatch isomorphic-

    fetch async + awa it react-router react-router-redux redux-saga reselect css- modules
62. None

63. ङᦒ රᑕ ᦧړ ᬀ੕ާ ڹᒒದ๞਍ᴺ

64. ق຾୏ݎ ᬀ੕ާ ق຾୏ݎ ق຾୏ݎ ق຾୏ݎ ق຾୏ݎ ӱۓᕚ

65. None

66. ڹᒒದ๞਍ᴺ ङᦒ + රᑕ + ᦧړ + ᬀ੕ާ

67. antd ୏რᕪ០ԏ᭲ ݒᬢ Ӿݣᦡᦇ᧍᥺ React ದ๞຾ Ꮈݎཛྷୗ

68. $ npm install antd Ant Design ጱ React ਫሿ +

69. 4700+ ਥᗑྯ෭ᦢᳯᰁ ൉Իහ 1400+ Issue ޾ Pull request හᰁ 69

    ᨯሠᘏහᰁ 70/193 ᥟፍᡶᡵӾݸݣᔮᕹ 1w+ npm ྯ์ӥ᫹ᰁ 2w+

70. մӱٖ᮱ই֜؉୏რҘ

71. ୏რ ≠ ୏නრᎱ ڊݗ᫨ٖᲀ ӞᥤݶՌ ىဳᐒ܄ ᭿عᛔࡣ

72. ant.design ᦡᦇᥢ᝜෈໩ ڹᒒֵአ෈໩

73. ෈໩ դᎱ >

74. None

75. ᄍᐏྲ API ๅଉአ ൉׀ Changelog ޾܋ᕆ෈໩ ൉׀୏ݎᘏ᧔ก ൉׀ग़ᇇ๜෈໩

76. — ᵨຎ ӥ࿜᭲ฎӞଷउ૱ጱᜉஞ̶ “ ” — ؇ݦ ग़ᇇ๜෈໩ฎ୏რጱᜉஞ̶

77. ग़ᇇ๜෈໩ฎ୏რጱᜉஞ̶ ӥ࿜᭲ฎӞଷउ૱ጱᜉஞ̶ “ ”

78. ໐ஞੜᕟ ٖ᮱ռ۱ + ୏ݎᩒრ

79. None

80. ᳯ᷌ݍḇ ᵱ࿢ᦎᦞ ఺ᥠ஄ᵞ ձۓᓕቘ Issues ӧളݑ๚൉ Issue ጱᵱ࿢

81. ӧളݑ๚൉ Issue ጱᵱ࿢ ᳯ᷌ݍḇ ᵱ࿢ᦎᦞ ఺ᥠ஄ᵞ ձۓᓕቘ

82. ٌ՜ਫሿ ّ਻௔ ݢአ௔ ᇙ௔ୌᦓ դᎱᷚ໒ ग़᧍᥺ ඪ೮ ๐ۓᒒ ჉ວ ᚕಋຝ

    ᐒ܄ᨯሠ
83. None

84. ӾݣӱۓԾߝ ದ๞Ծߝ & ᥢ᝜ Ant Design, antd, Roof, G2 etc.

    ದ๞๐ۓ ֛ḵದ๞᮱

85. ๚๶ TypeScript antm ᑏۖᒒ ๐ۓᒒ Ի԰ ӱۓཛྷ ୗପ ࢵᴬ۸ …

86. Question is welcome

87. None
88. None
89. None
90. None

91. Semantic Version

92. ୏ݎᇇ๜ғbeta ᑞਧᇇ๜ғstable

93. ୏ݎᇇ๜ғbeta ᑞਧᇇ๜ғstable

94. develop-1.0.0 ୏ݎᇇ๜ғbeta ᑞਧᇇ๜ғstable master

95. None

96. Commit ىᘶ issue