Tweet
Tweet

Slide 1

Slide 1 text

react  best  prac*ce [email protected]   承玉

Slide 2

Slide 2 text

Outline •  Technology  stack   – react/koa/webpack/npm   •  Prac*ce   •  Summary

Slide 3

Slide 3 text

•  Technology  stack

Slide 4

Slide 4 text

react •  react:    library  for  build  user  interface  

Slide 5

Slide 5 text

react •  render

Slide 6

Slide 6 text

react •  diff

Slide 7

Slide 7 text

React-­‐components •  Components  based  on  react   •  hDps://github.com/react-­‐component  

Slide 8

Slide 8 text

react-­‐component

Slide 9

Slide 9 text

koa •  Koa:  next  genera*on  web  framework  for   node.js

Slide 10

Slide 10 text

chain

Slide 11

Slide 11 text

chair •  基于 koa，整合支付宝基础服务   – Session   – Hsf(Tr)   – Drm   – Tair   – Ls

Slide 12

Slide 12 text

chair •  Router   •  logger   •  Proxy  (generate  from  jar)

Slide 13

Slide 13 text

webpack •  hDp://webpack.github.io/   •  Module  bundler

Slide 14

Slide 14 text

npm •  Package  manager  for  javascript   (react,jquery,angular…)

Slide 15

Slide 15 text

tnpm •  集团内部源，支持私有包

Slide 16

Slide 16 text

•  prac*ce

Slide 17

Slide 17 text

tnpm •  package.json:

Slide 18

Slide 18 text

commonjs   •  commonjs  for  browser  and  server

Slide 19

Slide 19 text

react •  Components  Composi*on

Slide 20

Slide 20 text

Custom  page •  aliloan

Slide 21

Slide 21 text

React  rerender •  Render  on  data  change

Slide 22

Slide 22 text

webpack •  commonjs  compile,  sourcemap   •  Common  code  extrac*on   •  Css  extrac*on

Slide 23

Slide 23 text

webpack •  Development   – Build  into  memory   – koa  middleware   – No  hash  

Slide 24

Slide 24 text

webpack •  Build   – Compress   – hash  

Slide 25

Slide 25 text

jsx  on  server •  jsx  as  skeleton  on  server

Slide 26

Slide 26 text

share  code  with  server •  u*l/enum/jsx  …   •  app/common/getUserFromIvr.js:

Slide 27

Slide 27 text

dev.assets •  Half  dead   – Serve  sta*c  resources  in  nodejs  memory   (webpack)   – Speedy  cbd  cycle

Slide 28

Slide 28 text

summary •  server-­‐browser  harmony   – js  rules  all   – Use  React  on  server  and  browser   – Use  npm  on  server  and  browser   – Use  webpack  on  server  and  browser