React Ecosystem At Ant Financial

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: ڹݸᒒෆݳොໜ