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
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
50. summary