gitc2016 react based architecture

Transcript

1. चԭ React ጱᕣᒒຝ຅ ֜Ӟễҁಥሳ҂ yiminghe@gmail.com

2. ӱۓᇙᅩ

3. None

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

   ݍḇଘݣ

5. قᒒ҅ق຾ૡᑕ૵ JavaScript

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

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

8. ڹᒒຝ຅

9. React ದ๞຾

10. • ቘஷضᬰ҅ۓਫ • ᐒ܄ᔺឍ҅ᨶṛ • ᭇአ௔ଠ • ᩂᬪݸᒒ୏ݎ

11. None

12. • ᩂᬪݸᒒ୏ݎཛྷୗ • ᧍᥺ғjava -> es6/typescript • ۱ᓕቘғmaven -> npm/tnpm

    • ׁᩢᓕቘғimport • ᔄਧԎғclass • හഝ: හഝପ(orm) -> ajax/graphql/falcor • ኴᶎғvelocity -> jsxҁᕟկ۸҂ • ಑۱ғ jar/war -> ݳଚ js/css

13. ES2015 TypeScript

14. ಑᭜ᭇݳق຾/قᒒጱڹᒒचᏐᦡෞ

15. None

16. package manager

17. None

18. tnpm install @alipay/antm

19. ૡٍ

20. • https://github.com/ant-tool • चԭ webpack ԫེ੗ᤰ

21. ᚕಋຝ HMR դቘ හഝ MOCK ຅ୌ UI ၥᦶ හഝၞ ᓕቘ

    ᐶᕚ۱ ୏ݎ դᎱ ᥢ᝜
22. None

23. ݢൊ೑ጱ npm package

24. ֵአفݗ

25. ᕟկ

26. react-component antd antm

27. react-component • https://github.com/react-component • चԭ React ጱ᪜ᕣᒒᕟկ • xx: ᭗አᕟկ҅य़ग़አԭ

    PC/Pad • m-xx: ᑏۖᕟկ҅ᭇᯈ web Ө react-native

28. ᕟկᥢ᝜

29. ᕟկᥢ᝜ • assets: ܻࣳ less • bem + prefixCls •

    examples: es6/typescript • src: es6/typescript ᭇᯈ react-native web • tests: es6/typescript mocha

30. ᕟկचᏐᦡෞ

31. ୏ݎ • npm start • localhost:8000/examples/xx.html

32. ၥᦶ • karma • npm run test/coverage/chrome-test

33. ൉Ի • git commit • npm run lint

34. ݎ૲ • npm run pub • es6/typescript ᖫᦲک es5 •

    npm publish • git push master • ኞ౮ᶱፓ઀ᐏᶭ • http://react-component.github.io/calendar/ • git push gh-pages
35. None

36. Ant Design ӞӻӾݣᦡᦇ᧍᥺ http://ant.design

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

    ᦡᦇ᧍᥺

38. ਫአԆԎ ੜᘒᗦ ᕹӞ Ի԰ ۖኮ ᪜ᕣᒒ

39. antd (PC)

40. None

41. ෈໩

42. ࢵᴬ۸

43. ֵአ babel-plugin-antd ೲᵱے᫹

44. ᗑᒊ • http://ant.design • SPA ܔᶭᶎଫአ • ׁᩢ • bisheng

    (markdown to jsx) • ant-tool

45. 4700+ ਥᗑྯ෭ᦢᳯᰁ ൉Իහ 1400+ Issue ޾ Pull request හᰁ 69

    ᨯሠᘏහᰁ 70/193 ᥟፍᡶᡵӾݸݣᔮᕹ 1w+ npm ྯ์ӥ᫹ᰁ 2w+ 45xx

46. antm (mobile) http://antm.alipay.net

47. • ᪜ᕣᒒ • web • react-native

48. None

49. web

50. iOS

51. iOS

52. android

53. android

54. ਧ֖ ൉׀ବ੶ۑᚆ ਠ࠺ጱॺկ ໏ୗ चᏐ݇ᘍ໏ୗ ᕹӞጱᦡᦇᥢ᝜ ᯈᗝ ୩य̵़॔๥ ᔜᓌ ෈໩

    ṛᴤ҅॔๥ ᔜᗦ҅ᶎݻڡᕆአ ಁ ಘ઀௔ ṛ ֗ react-component antd/antm

55. ଫአ໛ຝ

56. • ᛔᎸ roof • ᐒ܄

57. roof ᫷ᰁᕆጱහഝᕬਧ

58. ᐒ܄ ᘸݳսᐹᔄପ୵౮մӱᕆጱڹᒒଫአຝ຅

59. API Server Data View URL Action routing react dispatch

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

61. API Server Data View URL Action routing react dispatch isomorphic-fetch

    async + await react-router redux-saga reselect css-modules
62. None

63. ๐ۓ࢏Ի԰

64. • fetch • promise / standard • async / await

    • falcor • graphql

65. ֵአ fetch ԏڹ ࢧ᧣ڍහ

66. fetch generator await / async

67. None

68. ӱۓᥟፍ

69. • Ӿݸݣᔮᕹ • ᰂᣟԯ • oceanbase ԯଘݣ • ᗑӤᱷᤈ •

    ᬩ០ଘݣ • ݗᏧӾݣ

70. Ӿݣෛᔮᕹ 100% http://antp.alipay.net/service#/bigdata

71. • 2016 ڹᒒෛी 20 Ո, ق຾ෛी 501҅ᬡຽ 135 • http://antp.alipay.net/service#/bigdata

72. None
73. None
74. None
75. None
76. None
77. None

78. ӥӞྍ

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

80. None