电商前端架构

前端知识储备：

前端架构需要考虑的点：

• 基本框架和类库
  
  • react + react-router + react-redux + axios + antd
• 设计模式
  
  • 继承&重用
• 性能优化
  
  • http cache / local cache /compress(代码压缩）/ Dom render
• API设计
• 自动化（grunt/nodejs)
  
  • 如何提升开发效率
  • 如何把代码更有效的发布
  • 如何提升团队合作
• 跨终端适配
• 代码托管
• 产品设计、发布和迭代
  
  • 产品设计：配合UI，设计更易开发，交互最优的效果图
• 数据分析和优化
  
  • 通过用户访问页面的数据波动进行页面优化

架构组织的维度

• 目录层面
  
  • 利用操作系统与生俱来的目录结构，合理规划目录结构，是好的架构实现的基础
• 页面层面
  
  • 页面层面，通常是用来组织视图（HTML）
• 功能层面
  
  • 最简单的网站，单个文件通常是一个或多个相关功能的聚合
• 组件化和设计模式层面
  
  • 当一个逻辑需要被多次使用时，我们就要开始组件化和抽象

前端架构实施考虑什么问题？

• 优化和扩展
  
  • 代码层面
    
    • code review & 代码规范
  • 架构层面
    
    • 可扩展性是否受到制约
      
      • 扩展性好不好：可以评估产品需求和改动能不能快速上线
  • 协议层面
    
    • 通过http(s)协议优化
  • 综合
    
    • 优化往往是多种技术的综合使用
• 自动化
  
  • 前端自动化基础
    
    • nodejs & grunt
    • 例子：
      
      • 减少客户端加载数据
        
        • 1. 减少请求 2. 合并文 3. 压缩文件
    • 自动化的方向
      
      • 发布&测试&开发

为什么实现自动化，帮我们做什么事情？

在发布时，打包、处理、按特定规则来进行合并