gitc2016 react based architecture

react react-native antd antm gitc2014

Transcript

1. चԭ React ጱᕣᒒຝ຅ ֜Ӟễҁಥሳ҂ yiminghe@gmail.com
2. ӱۓᇙᅩ
4. ᬩ០ଘݣ හഝଘݣ ਮಁӾݣ CRM ૡᑕଘݣ ૡᑕଘݣ մӱᓕቘ ๐ۓလቘ ᬩᖌᔮᕹ ਮ๐Ӿஞ ݍḇଘݣ
5. قᒒ҅ق຾ૡᑕ૵ JavaScript
6. ق຾Ꮈݎཛྷୗ Ծߝᕪቘ ق຾/قᒒ୏ݎ + ڹᒒचᏐᦡෞ
7. ᩒრࣳࢫᴚ ๐ۓࣳࢫᴚ
8. ڹᒒຝ຅
9. React ದ๞຾
10. • ቘஷضᬰ҅ۓਫ • ᐒ܄ᔺឍ҅ᨶṛ • ᭇአ௔ଠ • ᩂᬪݸᒒ୏ݎ
12. • ᩂᬪݸᒒ୏ݎཛྷୗ • ᧍᥺ғjava -> es6/typescript • ۱ᓕቘғmaven -> npm/tnpm • ׁᩢᓕቘғimport • ᔄਧԎғclass • හഝ: හഝପ(orm) -> ajax/graphql/falcor • ኴᶎғvelocity -> jsxҁᕟկ۸҂ • ಑۱ғ jar/war -> ݳଚ js/css
13. ES2015 TypeScript
14. ಑᭜ᭇݳق຾/قᒒጱڹᒒचᏐᦡෞ
16. package manager
18. tnpm install @alipay/antm
19. ૡٍ
20. • https://github.com/ant-tool • चԭ webpack ԫེ੗ᤰ
21. ᚕಋຝ HMR դቘ හഝ MOCK ຅ୌ UI ၥᦶ හഝၞ ᓕቘ ᐶᕚ۱ ୏ݎ դᎱ ᥢ᝜
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
36. Ant Design ӞӻӾݣᦡᦇ᧍᥺ http://ant.design
37. ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ ङᦒ ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ᝜ ᦡᦇ᧍᥺
38. ਫአԆԎ ੜᘒᗦ ᕹӞ Ի԰ ۖኮ ᪜ᕣᒒ
39. antd (PC)
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
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
63. ๐ۓ࢏Ի԰
64. • fetch • promise / standard • async / await • falcor • graphql
65. ֵአ fetch ԏڹ ࢧ᧣ڍහ
66. fetch generator await / async
68. ӱۓᥟፍ
69. • Ӿݸݣᔮᕹ • ᰂᣟԯ • oceanbase ԯଘݣ • ᗑӤᱷᤈ • ᬩ០ଘݣ • ݗᏧӾݣ
70. Ӿݣෛᔮᕹ 100% http://antp.alipay.net/service#/bigdata
71. • 2016 ڹᒒෛी 20 Ո, ق຾ෛी 501҅ᬡຽ 135 • http://antp.alipay.net/service#/bigdata
78. ӥӞྍ
79. ๚๶ TypeScript antm ᑏۖᒒ ๐ۓᒒ Ի԰ ӱۓཛྷ ୗପ ࢵᴬ۸ …