React Ecosystem At Ant Financial

Transcript

1. 1.

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

2. 2.

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

3. 3.

   ᙧว

4. 4.

   ᡶᡵᰂ๐ӱۓ୵ா

5. 5.

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

6. 6.

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

7. 7.

   ຝ຅ܻڞ

8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

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

12. 12.

    ຝ຅

13. 13.

    რ/ૡٍ

14. 14.

    ᭌࣳ • spm • npm + browserify/webpack

15. 15.

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

    •combo ӧᚆᥴ٬໑๜ᳯ᷌
16. 16.

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

17. 17.

    npm • npm is the package manager for javascript. •

    node / react / angular / jquery /… • ӧ᪃ • ᭛ଶౌ • ӧᚆਂනᐺํཛྷࣘ
18. 18.

    tnpm • ᐺํӱۓཛྷࣘ • @your-company/xx • ᑞਧ҅᭛ଶள

19. 19.

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

20. 20.

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

    • ᯈᗝ॔๥
21. 21.

    ෆݳ੗ᤰ • चԭ webpack • ᭇݳᛔ૩҅ᴳ֗ᳪད

22. 22.

    ૡٍ

23. 23.

    ᕟկ

24. 24.

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

25. 25.

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

    http://react-component.github.io
26. 26.

    react-component • चᏐᦡෞ • ୏ݎ҅᧣ᦶ • ೮ᖅᵞ౮ • ෈໩ኞ౮

27. 27.

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

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

    react-component less რᎱ

29. 29.

    react-component src es2015 ཛྷࣘრᎱ

30. 30.

    react-component example ᐏֺդᎱ

31. 31.

    react-component mocha ၥᦶአֺ

32. 32.

    react-component ୏ݎᄍᐏ

33. 33.

    react-component ܔزၥᦶ

34. 34.

    react-component ᥟፍሲ

35. 35.

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

36. 36.

    react-component ೮ᖅᵞ౮

37. 37.

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

38. 38.

    react-component demo ઀ᐏ

39. 39.

    react-component ֵአ

40. 40.

    ෆݳࢶ୵ପ g2

41. 41.

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

    react-component
42. 42.

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

    css • ੗ᤰғLayout/Button/Form/Icon/…
43. 43.

    antd • ໏ୗᔮᕹ • ᜋ୸҈ࢶຽ҈ۖኮ҈૲ੴ / ᕟկ • ෈໩ᔮᕹ •

    nico / markdown
44. 44.

    ໏ୗᔮᕹ • core: layout • components

45. 45.

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

46. 46.

    antd • ֵአ

47. 47.

    antd Form

48. 48.

    ଫአ໛ຝ

49. 49.

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

50. 50.

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

    store, action, reducer, middleware … • ᓌܔᶱፓ॔๥۸
51. 51.

    roof • ṛපᓌܔࣈᥴ٬ᕟկᳵጱᘶۖ჉ວӨහഝىᘶ • ฦ᭗ᕟկ • ᬌف(ᤒܔ)ᕟկ state is evil

52. 52.

    ฦ᭗ᕟկ

53. 53.

    roof

54. 54.

    roof RootContainer Ө Container

55. 55.

    ᐏֺ

56. 56.

    rootContainer

57. 57.

    rootContainer

58. 58.

    container

59. 59.

    cart container

60. 60.

    ProductList container

61. 61.

    ᤒܔᕟկ

62. 62.

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

63. 63.

    ᤒܔ॒ቘ • roof • DRY • ٖᘸ

64. 64.

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

65. 65.

    ಘ઀ redux • dispatchContainer / dispatch • createReduxStore

66. 66.

    ๐ۓ࢏Ի԰

67. 67.

    ajax ?

68. 68.

    ᕟկᔉଶ ᕟկٖᘸ ᱾ളහ

69. 69.

    ݳଚ᧗࿢

70. 70.

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

71. 71.

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

    ౮๜य़ • ਍ԟ҈ቘᥴ҈ᬢᑏ
72. 72.

    ๐ۓ࢏ᒒԻ԰ • falcorғ ӫဳԭහഝ᧗࿢ • ཛྷࣳᖨਂ • ݳଚ᧗࿢ • හഝ݄᯿ғjson

    graph
73. 73.

    falcor

74. 74.

    ᐏֺ

75. 75.

    ੒ྲ ق᮱ᇿᒈ: 1s

76. 76.

    ੒ྲ ړսضᕆݳଚ: 600ms

77. 77.

    ਠ౮೪ࢶ

78. 78.

    ਫ᪢

79. 79.

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

80. 80.

    ᐏֺ౼ࢶ

81. 81.

    ᐏֺ౼ࢶ

82. 82.

    ᐏֺ౼ࢶ

83. 83.

    ઀๕

84. 84.

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

85. 85.

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

    ᩂᬪӱۓਫᴬ࣋ว • ๐ۓ࢏Ի԰ғਫ᪢ falcor(ᔄ֒)
86. 86.

    ઀๕ • റᔱ • es -> typescript: ൉ṛ॔๥ଫአጱᖌಷ௔ • ant-mobile:

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

    None