Upgrade to Pro — share decks privately, control downloads, hide ads and more …

antd at qcon2016

yiminghe
April 22, 2016

antd at qcon2016

yiminghe

April 22, 2016
Tweet

More Decks by yiminghe

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Ꮈݎཛྷୗ
    փᕹ
    ڹᒒ ᦡᦇ૵ Ծߝᕪቘ ၥᦶ
    ݸᒒ
    + + + +
    ဋ᭗౮๜ṛ
    ӧᭇݳӾݣᎸݎᜓॵ
    ᩒრኒ᷀

    View full-size slide

  6. ڹᒒ ᦡᦇ૵
    Ծߝᕪቘ ၥᦶ
    ݸᒒ
    +
    +
    +
    ဋ᭗౮๜ṛ
    ӧᭇݳӾݣᎸݎᜓॵ
    ᩒრኒ᷀
    ӱۓࢫᴚ

    View full-size slide

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

    View full-size slide

  8. +
    +
    +

    +
    +
    +

    +
    +
    +

    +
    +
    +

    +
    +
    +

    +
    +
    +

    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Normal
    Hover
    Active

    View full-size slide

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

    View full-size slide

  29. AntD icons
    Alipay icons
    PNG 25
    Alipay icons
    Alipay icons
    Ant Desgin
    AntD for Mobile
    Ant Desgin
    主按钮 次按钮 幽灵按钮 失效按钮 中号按钮
    按钮一 按钮二 按钮三
    请选择 请选择
    请选择
    请输入 请输入
    开 开

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. react-component antd
    UI ᕟկ

    View full-size slide

  38. react-component antd
    UI ᕟկ

    View full-size slide

  39. ਧ֖ ൉׀ବ੶ۑᚆ ਠ࠺ጱॺկ
    ໏ୗ चᏐ݇ᘍ໏ୗ ᕹӞጱᦡᦇᥢ᝜
    ᯈᗝ ୩य̵़॔๥ ᔜᓌ
    ෈໩ ṛᴤ҅॔๥ ᔜᗦ҅ᶎݻڡᕆአಁ
    ಘ઀௔ ṛ ֗
    react-component antd

    View full-size slide

  40. ૡ֢ၞ
    ant-tool

    View full-size slide

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

    View full-size slide

  42. HMR դቘ
    හഝ
    MOCK
    ຅ୌ
    UI ၥᦶ
    හഝၞ
    ᓕቘ
    ᐶᕚ۱
    ୏ݎ
    դᎱ
    ᥢ᝜
    ᚕಋຝ

    View full-size slide

  43. ᚕಋຝ
    HMR դቘ
    හഝ
    MOCK
    ຅ୌ
    UI ၥᦶ
    හഝၞ
    ᓕቘ
    ᐶᕚ۱
    ୏ݎ
    դᎱ
    ᥢ᝜

    View full-size slide

  44. ݢൊ೑ጱ npm package

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. API Server
    Data
    View
    URL
    Action
    routing
    react
    dispatch

    View full-size slide

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

    View full-size slide

  49. API Server
    Data
    View
    URL
    Action
    routing
    react
    dispatch
    isomorphic-
    fetch
    async + awa
    it
    react-router
    react-router-redux
    redux-saga
    reselect
    css-
    modules

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 4700+
    ਥᗑྯ෭ᦢᳯᰁ
    ൉Իහ
    1400+
    Issue ޾ Pull request හᰁ
    69
    ᨯሠᘏහᰁ
    70/193
    ᥟፍᡶᡵӾݸݣᔮᕹ
    1w+
    npm ྯ์ӥ᫹ᰁ
    2w+

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. ෈໩ դᎱ
    >

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  67. ӾݣӱۓԾߝ
    ದ๞Ծߝ & ᥢ᝜
    Ant Design, antd, Roof, G2 etc.
    ದ๞๐ۓ
    ֛ḵದ๞᮱

    View full-size slide

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

    View full-size slide

  69. Question is welcome

    View full-size slide

  70. Semantic Version

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. Commit ىᘶ issue

    View full-size slide