蚂蚁金服学习

蚂蚁金服,阿里集团 前端问题

1.大量中后台系统没有专业前端支持2.各种类库拼凑3.维护性,易用性差

需求:

简单,全面,易于扩展的前端框架,让不懂JS的人也可以搭建

架构原则:

1.分层:避免单点依赖,每层可替代2.站在巨人肩膀: 尽量避免重新开发3.适合自己: 封装,组合,定制,自主开发

目前架构

云端通信服务器交互应用框架通用组件源   工具(打包,编译)1.源,工具spmnpm+browserify/webpackspm:几十个js/css连接1.发布麻烦2.版本号3.浏览器加载性能损耗4.源维护复杂npm: 包管理器1.在中国访问慢2.不能存放私有模块或收费tnpm1.私有业务模块2.稳定,速度快

工具

browserify:微内核+社区不足:整合难度大,质量不可控webpack宏内核+内置插件+社区通用性强配置复杂

通用组件

react-component+社区精选http://react-component.github.io基础设施完善:    开发调试    持续集成    文档生成源码规范脚手架: generator-rcassets: less源码: 用户不需要依赖于lessexamples: 实例代码src:    组件源码tests:  mocha测试用例用了react不需要页面,只需要js渲染到DOM就可以了npm run pub 发布到npm上,就可以被外界访问了写less代码test用例就可以了g2: 内部图形库,自动显示图形antd: ant-design + react-componentantd: 整合社区组件    简化api    集成css    封装Layout/Button/Form/Icon...    样式系统        色彩,图标,动画,布局,组件    文档系统        nico/markdown    core:layout    components        砖块页面路由: react-router数据/逻辑处理: roof    flux: 重复代码多    redux:        概念多,store,action,reducer,middleware...        简单项目复杂化,入门慢roof    Component --> Event Listener  -->Data --> ComponentReact View放到JS    我们希望组件是内聚的,css+js放到一起    一个页面打开会有几十个ajax请求    我们提供一个模型层    relay: 整合应用框架,成本大,功能强大,理念先进    flacor: 专注于数据请求        模型缓存,合并请求,数据去重

封装后的结果

云falcorroof+react-routerantdreact-component 社区组件npm+tnpm  ant-tool