react best practice

react best practice

react best practice

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

May 14, 2015
Tweet

Transcript

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

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

    •  Summary
  3. •  Technology  stack

  4. react •  react:    library  for  build  user  interface  

  5. react •  render

  6. react •  diff

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

  8. react-­‐component

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

  10. chain

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

      – Tair   – Ls
  12. chair •  Router   •  logger   •  Proxy  (generate

     from  jar)
  13. webpack •  hDp://webpack.github.io/   •  Module  bundler

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

  15. tnpm •  集团内部源,支持私有包

  16. •  prac*ce

  17. tnpm •  package.json:

  18. commonjs   •  commonjs  for  browser  and  server

  19. react •  Components  Composi*on

  20. Custom  page •  aliloan

  21. React  rerender •  Render  on  data  change

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

      •  Css  extrac*on
  23. webpack •  Development   – Build  into  memory   – koa  middleware

      – No  hash  
  24. webpack •  Build   – Compress   – hash  

  25. jsx  on  server •  jsx  as  skeleton  on  server

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

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

     memory   (webpack)   – Speedy  cbd  cycle
  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