React Ecosystem At Ant Financial

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
December 19, 2015

React Ecosystem At Ant Financial

React Ecosystem At Ant Financial

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

December 19, 2015
Tweet

Transcript

  1. React Ecosystem At Ant Financial ಥሳ yiminghe@gmail.com

  2. • ᙧว • ຝ຅ • ਫ᪢ • ઀๕

  3. ᙧว

  4. ᡶᡵᰂ๐ӱۓ୵ா

  5. ڹᒒᳯ᷌ • य़ᰁӾݸݣᔮᕹဌํӫӱڹᒒඪ೮ • ݱᐿᔄପ೪ٻ • ᖌಷ௔҅ฃአ௔૧ ୽ߥૡ֢/୏ݎපሲ

  6. ᵱ࿢ ᓌܔ҅قᶎ҅ฃԭಘ઀ጱڹᒒຝ຅ ᭇአԭق຾Өӫӱڹᒒ

  7. ຝ຅ܻڞ

  8. ܻڞ •ړ੶ •᭿عܔᅩׁᩢ •ྯ੶ݢ๊դ

  9. ܻڞ •ᒊࣁ૤Ոᙒᚺ •ੱᰁ᭿ᶎقෛ୏ݎ •ੱᰁቘᥴବ੶ׁᩢ

  10. ܻڞ •ᭇݳᛔ૩ •੗ᤰ •ෆݳ •ਧګ •ᛔԆ୏ݎ

  11. ܻڞ •ࢧಸᐒ܄ •ݍḇׁᩢጱᔄପ •୏ݎṛᨶᰁᔄପ

  12. ຝ຅

  13. რ/ૡٍ

  14. ᭌࣳ • spm • npm + browserify/webpack

  15. spm •cdn ᕟկ + ၨᥦ࢏ᒒ loader •Ӟᛱఘ٭҅پ܈ӻ᱾ള •http://cdn.com/x/1.0.2/x.js •http://cdn.com/y/0.1.1/y.js •…

    •combo ӧᚆᥴ٬໑๜ᳯ᷌
  16. spm ᳯ᷌ • ݎ૲Ἃᅸ • ᗌ०᧍Ԏ۸ᇇ๜ • ၨᥦ࢏ᒒے᫹੕ᛘጱ௔ᚆഖᘙ • რᖌಷ౮๜

  17. npm • npm is the package manager for javascript. •

    node / react / angular / jquery /… • ӧ᪃ • ᭛ଶౌ • ӧᚆਂනᐺํཛྷࣘ
  18. tnpm • ᐺํӱۓཛྷࣘ • @your-company/xx • ᑞਧ҅᭛ଶள

  19. browserify • ஙٖ໐ ҄ ᐒ܄ • ӧ᪃ғ • ෆݳᵙଶय़҅ᨶᰁӧݢഴ

  20. webpack • ਡٖ໐ ҄ ٖᗝൊկ ҄ᐒ܄ᤑش • ᭗አ௔୩ • ӧ᪃ғ

    • ᯈᗝ॔๥
  21. ෆݳ੗ᤰ • चԭ webpack • ᭇݳᛔ૩҅ᴳ֗ᳪད

  22. ૡٍ

  23. ᕟկ

  24. ᕟկ • react-component + ᐒ܄ᔜᭌ • + design= antd (http://ant.design)

  25. react-component • ṛᨶᰁጱᕟկᵞݳ • es2015 • ׁಓ npm • ࢧಸᐒ܄

    http://react-component.github.io
  26. react-component • चᏐᦡෞ • ୏ݎ҅᧣ᦶ • ೮ᖅᵞ౮ • ෈໩ኞ౮

  27. რᎱᥢ᝜ • ᚕಋຝ: generator-rc • assets: less რᎱ • examples:

    ᐏֺդᎱ • src: ᕟկრᎱ • tests: mocha ၥᦶአֺ
  28. react-component less რᎱ

  29. react-component src es2015 ཛྷࣘრᎱ

  30. react-component example ᐏֺդᎱ

  31. react-component mocha ၥᦶአֺ

  32. react-component ୏ݎᄍᐏ

  33. react-component ܔزၥᦶ

  34. react-component ᥟፍሲ

  35. react-component ޸եᤈғnpm run browser-test-cover

  36. react-component ೮ᖅᵞ౮

  37. react-component • npm run pub • ෈໩/npm/git tag

  38. react-component demo ઀ᐏ

  39. react-component ֵአ

  40. ෆݳࢶ୵ପ g2

  41. antd import { Component } from ‘antd’ = ant-design +

    react-component
  42. antd • ෆݳᐒ܄ᕟկӨᛔԆᦡᦇ • ᭇݳᛔ૩ • ᓌ۸ api • ᵞ౮

    css • ੗ᤰғLayout/Button/Form/Icon/…
  43. antd • ໏ୗᔮᕹ • ᜋ୸҈ࢶຽ҈ۖኮ҈૲ੴ / ᕟկ • ෈໩ᔮᕹ •

    nico / markdown
  44. ໏ୗᔮᕹ • core: layout • components

  45. ෈໩ᔮᕹ • markdown • => • html docs/demo

  46. antd • ֵአ

  47. antd Form

  48. ଫአ໛ຝ

  49. ଫአ໛ຝ • ᶭᶎ᪠ኧғreact-router • හഝ/᭦ᬋ॒ቘғroof

  50. why roof • flux • ᯿॔դᎱग़ • redux • ༷ஷग़,

    store, action, reducer, middleware … • ᓌܔᶱፓ॔๥۸
  51. roof • ṛපᓌܔࣈᥴ٬ᕟկᳵጱᘶۖ჉ວӨහഝىᘶ • ฦ᭗ᕟկ • ᬌف(ᤒܔ)ᕟկ state is evil

  52. ฦ᭗ᕟկ

  53. roof

  54. roof RootContainer Ө Container

  55. ᐏֺ

  56. rootContainer

  57. rootContainer

  58. container

  59. cart container

  60. ProductList container

  61. ᤒܔᕟկ

  62. ᤒܔ॒ቘ • փᕹጱᤒܔ॒ቘ • ᯿॔դᎱ • ḵᦤᔺቜ

  63. ᤒܔ॒ቘ • roof • DRY • ٖᘸ

  64. api ௛ᕮ • component • rootContainer/container/storeState • form • createForm/getFieldProps…

  65. ಘ઀ redux • dispatchContainer / dispatch • createReduxStore

  66. ๐ۓ࢏Ի԰

  67. ajax ?

  68. ᕟկᔉଶ ᕟկٖᘸ ᱾ളහ

  69. ݳଚ᧗࿢

  70. ๐ۓ࢏Ի԰ • ᭌࣳ • relay • falcor

  71. ๐ۓ࢏Ի԰ • relay • ෆݳଫአ໛ຝ • ቘஷضᬰ • ۑᚆ୩य़ •

    ౮๜य़ • ਍ԟ҈ቘᥴ҈ᬢᑏ
  72. ๐ۓ࢏ᒒԻ԰ • falcorғ ӫဳԭහഝ᧗࿢ • ཛྷࣳᖨਂ • ݳଚ᧗࿢ • හഝ݄᯿ғjson

    graph
  73. falcor

  74. ᐏֺ

  75. ੒ྲ ق᮱ᇿᒈ: 1s

  76. ੒ྲ ړսضᕆݳଚ: 600ms

  77. ਠ౮೪ࢶ

  78. ਫ᪢

  79. ਫ᪢ • ᡶᡵᰂ๐ • ᴨ᯾ᵞࢫ

  80. ᐏֺ౼ࢶ

  81. ᐏֺ౼ࢶ

  82. ᐏֺ౼ࢶ

  83. ઀๕

  84. ઀๕ ᕹӞᵞࢫय़Ӿݸݣᔮᕹ

  85. ઀๕ • ս۸ • ૡٍғๅঅ஑ඪ೮ java/nodejs/ᨶᰁכᦤ • ᕟկғๅӿ੄ጱᕟկ҅ๅଠጱᭇአ௔ • ଫአຝ຅ғroof

    ᩂᬪӱۓਫᴬ࣋ว • ๐ۓ࢏Ի԰ғਫ᪢ falcor(ᔄ֒)
  86. ઀๕ • റᔱ • es -> typescript: ൉ṛ॔๥ଫአጱᖌಷ௔ • ant-mobile:

    react-native Ө react.js ࣁᑏۖᒒጱ ᪜ᒒᕹӞ • relay: ڹݸᒒෆݳොໜ
  87. None