React Ecosystem At Ant Financial

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