gitc2016 react based architecture

Slide 1

Slide 1 text

चԭ React ጱᕣᒒຝ຅ ֜Ӟễҁಥሳ҂ [email protected]

Slide 2

Slide 2 text

ӱۓᇙᅩ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

قᒒ҅ق຾ૡᑕ૵ JavaScript

Slide 6

Slide 6 text

ق຾Ꮈݎཛྷୗ Ծߝᕪቘ ق຾/قᒒ୏ݎ + ڹᒒचᏐᦡෞ

Slide 7

Slide 7 text

ᩒრࣳࢫᴚ ๐ۓࣳࢫᴚ

Slide 8

Slide 8 text

ڹᒒຝ຅

Slide 9

Slide 9 text

React ದ๞຾

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

• ᩂᬪݸᒒ୏ݎཛྷୗ • ᧍᥺ғjava -> es6/typescript • ۱ᓕቘғmaven -> npm/tnpm • ׁᩢᓕቘғimport • ᔄਧԎғclass • හഝ: හഝପ(orm) -> ajax/graphql/falcor • ኴᶎғvelocity -> jsxҁᕟկ۸҂ • ಑۱ғ jar/war -> ݳଚ js/css

Slide 13

Slide 13 text

ES2015 TypeScript

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

package manager

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

tnpm install @alipay/antm

Slide 19

Slide 19 text

ૡٍ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ᚕಋຝ HMR դቘ හഝ MOCK ຅ୌ UI ၥᦶ හഝၞ ᓕቘ ᐶᕚ۱ ୏ݎ դᎱ ᥢ᝜

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ݢൊ೑ጱ npm package

Slide 24

Slide 24 text

ֵአفݗ

Slide 25

Slide 25 text

ᕟկ

Slide 26

Slide 26 text

react-component antd antm

Slide 27

Slide 27 text

react-component • https://github.com/react-component • चԭ React ጱ᪜ᕣᒒᕟկ • xx: ᭗አᕟկ҅य़ग़አԭ PC/Pad • m-xx: ᑏۖᕟկ҅ᭇᯈ web Ө react-native

Slide 28

Slide 28 text

ᕟկᥢ᝜

Slide 29

Slide 29 text

ᕟկᥢ᝜ • assets: ܻࣳ less • bem + preﬁxCls • examples: es6/typescript • src: es6/typescript ᭇᯈ react-native web • tests: es6/typescript mocha

Slide 30

Slide 30 text

ᕟկचᏐᦡෞ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

൉Ի • git commit • npm run lint

Slide 34

Slide 34 text

ݎ૲ • npm run pub • es6/typescript ᖫᦲک es5 • npm publish • git push master • ኞ౮ᶱፓ઀ᐏᶭ • http://react-component.github.io/calendar/ • git push gh-pages

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ ङᦒ ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ᝜ ᦡᦇ᧍᥺

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

antd (PC)

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

෈໩

Slide 42

Slide 42 text

ࢵᴬ۸

Slide 43

Slide 43 text

ֵአ babel-plugin-antd ೲᵱے᫹

Slide 44

Slide 44 text

ᗑᒊ • http://ant.design • SPA ܔᶭᶎଫአ • ׁᩢ • bisheng (markdown to jsx) • ant-tool

Slide 45

Slide 45 text

4700+ ਥᗑྯ෭ᦢᳯᰁ ൉Իහ 1400+ Issue ޾ Pull request හᰁ 69 ᨯሠᘏහᰁ 70/193 ᥟፍᡶᡵӾݸݣᔮᕹ 1w+ npm ྯ์ӥ᫹ᰁ 2w+ 45xx

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

• ᪜ᕣᒒ • web • react-native

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

web

Slide 50

Slide 50 text

iOS

Slide 51

Slide 51 text

iOS

Slide 52

Slide 52 text

android

Slide 53

Slide 53 text

android

Slide 54

Slide 54 text

ਧ֖ ൉׀ବ੶ۑᚆ ਠ࠺ጱॺկ ໏ୗ चᏐ݇ᘍ໏ୗ ᕹӞጱᦡᦇᥢ᝜ ᯈᗝ ୩य̵़॔๥ ᔜᓌ ෈໩ ṛᴤ҅॔๥ ᔜᗦ҅ᶎݻڡᕆአ ಁ ಘ઀௔ ṛ ֗ react-component antd/antm

Slide 55

Slide 55 text

ଫአ໛ຝ

Slide 56

Slide 56 text

• ᛔᎸ roof • ᐒ܄

Slide 57

Slide 57 text

roof ᫷ᰁᕆጱහഝᕬਧ

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

API Server Data View URL Action routing react dispatch

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

API Server Data View URL Action routing react dispatch isomorphic-fetch async + await react-router redux-saga reselect css-modules

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

๐ۓ࢏Ի԰

Slide 64

Slide 64 text

• fetch • promise / standard • async / await • falcor • graphql

Slide 65

Slide 65 text

ֵአ fetch ԏڹ ࢧ᧣ڍහ

Slide 66

Slide 66 text

fetch generator await / async

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

ӱۓᥟፍ

Slide 69

Slide 69 text

• Ӿݸݣᔮᕹ • ᰂᣟԯ • oceanbase ԯଘݣ • ᗑӤᱷᤈ • ᬩ០ଘݣ • ݗᏧӾݣ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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