前端架构

B系统前端总体架构

B系统前端架构图

1. 底层模块化基于ES6模块处理；

2. 基于react全家桶框架、使用superagent封装ajax请求,兼容浏览器和node,适配同构

3. 使用webpack-isomorphic-tools和ReactDom.renderToString实现同构,有利于seo优化及用户体验

4. 基于业务场景将react组件分为公共组件和业务组件,公共组件同时适配移动端和pc端,公共组件位于components目录

5. 使用webpack将es6、jsx转换成es5,node使用babel-register运行es6模块,使用webpack-dev-server热加载,提升开发效率

项目结构

├── api               // api 服务 实现与数据服务交互和前端交互
│   ├── config        // 线上&staging , host 配置
│   ├── middleware    // 中间件(登录,验证)
│   ├── rpc           // grpc 与数据服务器交互
│   ├── service       // 数据处理结构,但不暴露给用户
│   ├── utils         // 工具类方法
│   └── views         // 前端数据请求代理及路由配置,暴露给用户
├── bin               // server 启动入口文件
├── business          // B系统项目目录 (同构项目,前后端通用)
│   ├── components    // 公共组件
│   ├── helpers       // ajax api 封装,及其他通用模块
│   ├── redux         // reducer   目录
│   ├── routes        // 业务路由,组件
│   ├── theme         // 配置主题
│   └── utils         // 工具类方法
├── Dockerfile        // docker 配置
├── pm2               // pm2 配置,监控项目运行情况
├── README.md
├── run.sh            // 项目开发,上线,发布,启动脚本
├── src               // sdv项目(目录结构与B系统一致)
│   ├── components
│   ├── helpers
│   ├── redux
│   ├── routes
│   ├── theme
│   └── utils
├── static           // 静态资源目录
└── webpack          //webpack配置,包括开发,build配置

页面渲染及ajax请求过程

页面渲染及ajax请求过程

页面渲染分为服务器渲染和浏览器渲染
1. 服务器渲染完成后,将html发送给浏览器,浏览器根据html标记判断服务器是否已渲染完成,如果渲染完成,则不重新渲染,只绑定事件.
2. 浏览器渲染,用户操作并且,未刷新页面时,执行客户端渲染,渲染流程如上图

开发、构建系统

开发、构建系统

开发构建工具基于webpack开发,项目发布后使用pm2进行监控和日志分析
1.因为同构是项目,使用webpack-isomorphic-tools解决node中非js文件不能使用require加载的问题
2.项目使用es6,jsx,sass语法进行模块化开发,必须将其转换成原生的js+css+html
3.项目使用webpack-dev-server,热更新机制,提升编译速度,加快开发效率

问题优化

• api路由优化,接口不规范,不符合restful规范,造成接口混乱(接口规范化可自动处理路由,提高开发效率);
  优化方案: 加入版本号,接口命名应将驼峰命名改成-分割,如:http://host/api/v1/brand-supplier{/brandId}

• 资源加载优化,加入cdn加速与缓存

• 业务组件化程度不高,造成业务代码重复编写,包括css优化

• 国际化,主题方案;

• webpack1.0构建速度慢,考虑升级至最新