gitc2016 react based architecture

gitc2016 react based architecture

react react-native antd antm gitc2014

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

July 01, 2016
Tweet

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