react best practice

Transcript

1. 1.

   react  best  prac*ce yiminghe@gmail.com   承玉

2. 2.

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

   •  Summary
3. 3.

   •  Technology  stack

4. 4.

   react •  react:    library  for  build  user  interface  

5. 5.

   react •  render

6. 6.

   react •  diff

7. 7.

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

8. 8.

   react-­‐component

9. 9.

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

10. 10.

    chain

11. 11.

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

      – Tair   – Ls
12. 12.

    chair •  Router   •  logger   •  Proxy  (generate

     from  jar)
13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

    •  prac*ce

17. 17.

    tnpm •  package.json:

18. 18.

    commonjs   •  commonjs  for  browser  and  server

19. 19.

    react •  Components  Composi*on

20. 20.

    Custom  page •  aliloan

21. 21.

    React  rerender •  Render  on  data  change

22. 22.

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

      •  Css  extrac*on
23. 23.

    webpack •  Development   – Build  into  memory   – koa  middleware

      – No  hash  
24. 24.

    webpack •  Build   – Compress   – hash  

25. 25.

    jsx  on  server •  jsx  as  skeleton  on  server

26. 26.

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

27. 27.

    dev.assets •  Half  dead   – Serve  sta*c  resources  in  nodejs

     memory   (webpack)   – Speedy  cbd  cycle
28. 28.

    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