技术整体架构

一个原则就是要看整体设计， 从上帝视角出发，不要特别关注细节

• 需要几个项目

  • 前端项目
  • 后端项目
  • 组件库

• 项目之间的关系 可以用图进行描述

核心问题分析 海报

• 组成
  • 背景
  • 元素
  • 数据结构

    "page":{
        title:'',
        props:{
            background:'',
            backgroundPosition:'',
            backgroundMusic: ''
            //
        }
    },
    "components":[
        {
            name: 'text',
            id: '',
            props: {
                left: '10px',
                top:'20px',
                text: 'hello',
                fontSize: '24px'
            }
        },
        {
            name: 'image',
            id: '',
            props: {
                left: '10px',
                top:'20px',
                width: '200px'
            }
        }
    ]

• 数据流转 画图描述

结论

• 不要关注细节
• 技术方案设计，为的就是寻找一个方向，论证： 可行性、扩展性、复杂度高低

研发流程优化

为什么要

• 项目量级增加：几千行到几万行
• 项目数量：几个项目到几千个项目
• 项目复杂度：web--> h5 /小程序/后端/脚手架
• 团队人数： 几个人到几百人

流程优化的内核

• 效率

• 质量

• 性能

• 大厂研发流程

  • 创建项目

    • 脚手架
    • 研发平台创建

  • 项目开发

    • 技术规范

      • git 规范
      • 代码规范
      • 文档规范

    • 研发模式

      • 源码开发 vscode
      • 低代码 钉钉宜搭 Ms powerApps
      • 易企秀 兔展
      • 物料中心
        • 基础组件
        • 业务组件
        • 区块
        • 模板

    • 前端监控

      • 前端埋点
      • 前端日志
      • 大数据分析平台

  • 项目测试

    • 单元测试
      • mocha
    • 性能测试
      • chrome

  • 项目发布

    • gitflow 自动化
    • 远程自动检查
    • 发布机

前端监控体系

三个阶段

• 初级： 使用第三方平台，百度，友盟
• 中级： 自研监控体库，缺乏完整的监控体系
• 高级： 自研监控体平台，具备完整的监控体系

监控数据

• 流量数据： 如 pv uv 点击率 页面停留时间
• 自定义事件： 滑动、请求、曝光
• 交易指标监控： 成交额、转化率
• 综合分析： 用户画像、流量漏斗

前端测试

如何测试

• 测试同学： 功能测试、性能测试、测试用例
• 前端同学： 单元测试，常用于组件库 api 等 (jest mocha)
• 线上监控
  • 稳定性 如 jsError 、白屏检测
  • 性能： 秒开率、首屏渲染时长、接口时长
  • 前端日志： console.log api 请求记录

前端发布

脚手架发布

• 规范：统一发布规范、 commit、分支名称、代码规范
• 效率： 避免大量重复操作
• 安全：构建和发布全部在云端操作，避免个人发布带来的隐患

脚手架架构设计和框架搭建

课 1

• 学习方法：
  • 掌握原理 -> 独立思考 -> 总结反思
  • 深度剖析优秀开源项目，由表及里，由浅到深
  • 视觉切换： 多切换到架构师角度，从全局思考问题

课 2 脚手架入门