工程化的好处：增加代码一致性和可读性、降低维护成本

  1. 需求分析
  2. 页面布局
  3. 生命周期
  4. 架构设计
  5. 全局状态

https://www.freecodecamp.org/chinese/news/front-end-engineering-tutorial/

  1. 前端—前端控制层、视图层
  2. 后端—后端控制层、服务层、数据访问层
  3. 前端在没有API的情况下，可以完美的运行。前端负责展现，后端负责数据
  4. 前后端相对独立且耦合
  5. 风险点：
    1. 前后端集成——-CI/CD
    2. 前端或者后端无法做到“及时协商，尽早解决”最终导致集中爆发
  6. 解决方案
    1. 首先定义schema，并实时跟踪最新的API，降低集成风险

工具.jpg

前端代码架构

Model 封装数据管理
Views 页面
Service 请求后端接口

后端代码架构

Controller
Service
Data Access

响应式测试

  1. Responsive Test 测试站点响应速度
    1. github https://github.com/nghuuphuoc/responsivetest
  2. 测试任何网站的在你的浏览器上的响应是否正常
  3. 输入一个URL并将窗口拖到您要测试的任何宽度
  4. 可以切换为iPhone、iPad和通用电脑的预定义大小方案
  5. 类似的工具：http://mattkersley.com/responsive
    1. 缺点：只能使用几种预定义大小的窗口用于测试

字体测试

  1. WhatFont
  2. 在网络上找到最棒的字体