react-based architecture

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