react-based architecture

react-based architecture

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

April 02, 2016
Tweet

Transcript

  1. react-based architecture ಥሳ yiminghe@gmail.com

  2. • who am I? • yiminghe@github/gmail/twitter • ಥሳ@alipay/taobao • projects

    • kissy/modulex/xtemplate • react-component/antd/antm
  3. Outline • overview • detail • prospect

  4. overview

  5. detail

  6. package manager

  7. npm

  8. tnpm tnpm install @alipay/antm

  9. tools

  10. ant-tool • http://github.com/ant-tool • based on webpack • foundation for

    scaffolds • antd-init • antm-init • generator-rc
  11. why ant-tool • make webpack easy to use • webpack

    is complext • plugin/loader/middleware/… • engineering • lint/mock/proxy/test • doc/demo • build/deploy • monitor
  12. component

  13. react-component • http://github.com/react-component • cross-platform components based on react •

    rc-xx (core components, mainly pc) • rmc-xx (web mobile components) • rn-xx (react native components)
  14. component • https://github.com/react-component/calendar • assets: prototype less • bem +

    prefixCls • examples: es6 js • src: es6 js • tests: mocha js
  15. component infrastructure • npm start • http://localhost:8000/examples/xx.html

  16. component infrastructure • npm test/run coverage/run chrome-test

  17. component infrastructure • git commit • npm run lint

  18. component infrastructure • npm run pub • compile/npm publish •

    push master/gh-pages • http://react-component.github.io/calendar • react-native needs custom app to view demo • http://react-component.github.io/rn-cascader/
  19. learned lessons • fine-grained modular • shared across platform

  20. learned lessons • use nested component • Aspect Oriented Programming

  21. learned lessons • high order components • expose functionality

  22. antd • http://ant.design • An enterprise-class design language and high

    quality UI style. • Rich library based on React Component
  23. antd

  24. antd style • high quality and coherent style • modular

    component
  25. antd modules(1.0) modular component

  26. modular less

  27. less dependency

  28. use

  29. use on demand(1.0) • babel-plugin-antd

  30. markdown doc/demo

  31. antd website(1.0) • Universal static SPA doc • react-router •

    ant-tool • antd-md-loader • require(‘antd-md!button/basic.md’)
  32. others from alibaba • http://uxco.re/

  33. others from alibaba

  34. mobile • antm(developing) • web • react-native

  35. application architecture

  36. None
  37. react-router, redux and its family roof(developing)

  38. url route • react-router

  39. data(store) • redux • plain object • optional immutable.js

  40. data -> view • react-redux • reselect • roof(developing)

  41. view - css • css-modules • bem (*)

  42. action <> store • redux-saga

  43. redux-saga • before: redux-thunk

  44. redux saga • after: redux-saga

  45. data <> server • isomorphic-fetch • promise • standard •

    falcor (*)
  46. falcor • before

  47. falcor

  48. falcor • after

  49. None
  50. summary

  51. None