前端应用开发架构图谱

个人整理的前端架构图谱，之后会根据这个图谱不断的完善内容。希望这个图谱可以对开发同学的知识脉络有个梳理的作用。

相关图谱文件已上传至Github：https://github.com/sahadev/front-end-architecture，后续将不定期更新。

2020年02月28日已更新。

项目创建

脚手架

• IDE脚手架

  IDE或社区提供的脚手架

• 业务型脚手架

  根据业务特点通过Node写的工具，用于降低高频手写操作

通用组件

• 项目分层组件

  • 错误数据采集

  • 业务代码与运行时框架隔离

    • 安全性兼容: setData
    • API访问缓冲: setData

  • 网络访问封装与管理

    • 访问主机运行时变更

  • 数据存储封装与管理

  • 日志统一收集

• 社区推荐组件

  https://ice.work/docs/guide/resource/npms

• UI组件

  • Element UI

  • Echart

  • IView

  • Vant

    https://youzan.github.io/vant/?source=vuejsorg#/en-US/

极速构建

• 飞冰

  极速构建企业级中后台前端应用
  https://ice.work/
  海量物料

  优势在于拥有强大的物料：
  涵盖：模板、区块、业务组件、基础组件
  可以通过拖拽快速组合各种页面。

  使用React开发，拥有特定的IDE，裁剪自VSCODE，这些组件目前还不能预览

  iceworks 内置了 ICE 官方模板帮助您快速创建一个中后台应用，并提供了 SCM 的支持（强大的 Git 集成）以加速发布操作。iceworks 还支持对接应用发布平台

  • 后台管理系统

    快速预览：https://unpkg.com/@icedesign/[email protected]/build/index.html#/dashboard/monitor

    当项目庞大，单页面冗长，需要多团队开发时，可以考虑：icestark

编码

多人协作

• 编码规范

  • Airbnb JavaScript Style Guide

    https://github.com/airbnb/javascript

  • 规范检查

    配合ESLint执行

    • eslint
    • tslint
    • stylint
    • commitlint

  • 自动格式化

    提交代码仓库时根据规范自动进行调整
    按照团队统一的相关格式进行格式化，使提交到仓库的代码风格都是一致的

    • husky

      https://github.com/typicode/husky#supported-hooks
      https://git-scm.com/docs/githooks

• 分支管理

  Git Flow

  • 线上分支

    该分支的最后一次commit总是目前生产环境所运行的稳定版本

  • 开发分支

    所有的子分支都是从该分支检出
    该分支的状态永远不落后于线上分支

  • 功能性开发分支

    根据人员与功能所划分的功能版本开发分支
    命名方式可以为：
    分支类型/日期-姓名-功能
    例如：
    feature/20200202-Jim-performance-improve

  • 统一测试分支

    有效利用小程序体验版只有一个的缺点
    与测试分支相配合的还需要支持一个版本可以随时切换环境
    这种特点在并行开发时效果尤为明显

脚手架

根据业务特性编写的脚手架
可以通过CLI的方式生成常用的小程序页面，并直接提供固定的页面模板与常用的页面模板，减少重复量，加速开发

• Yeoman

  https://yeoman.io/

组件化

• 业务组件
• UI组件
• 基础组件

自动编码工具

• 代码一键生成

  较为通用的前端解决方案，例如：HtmlFindClass

  • HtmlFindClass

• 业务组件一键生成

  与业务有强相关性，需要结合业务特点专门建造此类工具

编译

• 目标环境代码转换（Babel）

• 文件变更监控

• 编译结果缓存

  缩短单次编译时间，避免不必要的资源浪费，提升开发效率

• 编译/打包工具

  • Webpack
  • Rollup
  • Gulp
  • Grunt

Mock

• 开发数据自动生成

  根据接口的数据接口自动生成测试数据

  • Mock.js

    http://mockjs.com/

  • 随机数生成

    • Chance

      https://chancejs.com/

• Mock平台

  • RAP2

    http://rap2.taobao.org/
    https://github.com/thx/rap2-delos

  • easy-mock

  • Api-mocker

  • eoLinker

  • fastmock

    https://www.fastmock.site/#/

  • Mock.js

    http://mockjs.com/

调试

• 控制台
• 网络
• 存储
• DOM

IDE

• VS Code
• WebStorm

语言

• Html

• CSS

  • SASS/SCSS

  • LESS

  • POSTCSS

    https://postcss.org/

• JS/TS

包管理

• 打包工具

  • NPM

  • YARN

  • CNPM

    淘宝出品的npm镜像，很快

运行时框架

• Vue
• React

版本发布

代码压缩

• TreeShaking

  Tree-shaking, 也被称为 “live code inclusion,” 它是清除实际上并没有在给定项目中使用的代码的过程，但是它可以更加高效。词汇来源查看https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.jnypozs9n

• uglify

• csso

混淆

分包

最小可执行单元

• 首屏公共库
• 必要业务代码

发布

• 平滑发布

• 增量发布

• 部署工具/系统

  • Walle

    https://walle-web.io/

  • Jenkins

    https://jenkins.io/

国际化

• 语言管理
• 内容管理

运行时环境分发

根据服务的用户环境预先生成各种运行时版本，依据环境获取对应的版本代码，例如通过Pollfill

Html托管服务

极大缩短部署步骤与时间

• surge

  http://surge.sh/

  参考本架构部署示例：http://wooden-process.surge.sh/

• github pages

  https://pages.github.com/

• netlify

  https://www.netlify.com/

  几部就可以完成代码部署
  支持与Github，Gitlab强关联，可以读取仓库的分支，自定义配置编译脚本，非常方便，支持环境变量配置

云服务器

• DigitalOcean

  https://www.digitalocean.com/

测试回归

自动化测试

• 主链路测试（针对高频使用/功能复杂的模块）

• 接口自动化测试

  • 可以对各类环境进行配置性测试

  • 接口串行测试

  • 接口性能测试

    • 并发测试
    • 单接口访问时长

• ⾃动化测试沙盒

  通过模拟微信⼩程序运⾏环境和基础库 API，将⼩程序的运⾏和测试脱离微信环境，从⽽⽅便地对其进⾏⾃动化测试。最后通过拦截setData 接⼝及判断当前⻚⾯路由，对⼩程序运⾏结果进⾏校验

• 单元测试框架

  • Chai Assertion Library

    用于JS测试的测试框架：https://www.chaijs.com/

手工测试

代码质量测试

lint类工具

版本控制

全量发布

包含版本回退能力

灰度发布

https://mp.weixin.qq.com/s/IT65m3VwlAhXusipB6wa2g

• 按百分比发布
• 按地域或特定人群发布

版本定义

• 代码版本管理
• 线上运行版本

运行时版本识别

• 肉眼随时可识别

质量监控及告警

https://mp.weixin.qq.com/s/HtxkwEVm8f1Ur1Il6JmEYQ

执行日志控制台

运行时性能数据采集与分析

业务日志采集

网络请求采集

• 接口响应率
• 接口响应速度
• 请求响应参数

脚本错误采集

分函数级与业务级

白屏化日志

业务异常采集

• 页面访问稳定率
• 页面测速
• 健康检查/存活监测

诊断能力

• 链路分析
• 错误聚类
• 函数流量回放

社区解决方案

• CAT

  https://github.com/dianping/cat/

性能

监控

• 运行时性能数据采集

• 代码编译时长数据采集

• 小程序包体积数据采集

  • 分包情况下子包体积数据

• 接口响应时长数据采集

• 页面打开速度数据采集

  应用实时监控服务 ARMS

  https://www.aliyun.com/product/arms

Faas网关

流量感知、HSF/HTTP触发器、限流

语言执行加速

• WebAssembly

性能监控与测试

• Sitespeed.io

  https://www.sitespeed.io/

  • 性能测试

    • Browsertime

      https://www.sitespeed.io/documentation/browsertime/introduction/

      What is Browsertime good for?

      It is usually used for two different things:

      You run it as a standalone tool to collect performance timing metrics of your web site.
      You integrate it in your tool as a JavaScript runner that collects whatever JavaScript metrics/information you want.

  • 性能数据比较

  • 网站监控

优化手段

• 首屏渲染时长

  • 骨架屏
  • 按需加载
  • 图片资源压缩

• 首屏响应时长

  • 资源缓存

    https://www.cnblogs.com/laixiangran/p/8971119.html

    • expires
    • cache-control
    • Etag
    • Last-Modified

  • 资源压缩

    单文件最小可运行单元，缩减空格与分号等

    • 文本压缩

      • Gzip

    • 图像压缩

      • 矢量图
      • 光栅化
      • 有损/无损压缩
      • Tinypng

  • 资源合并

    多类资源合并为单个的Html/Css/Js，降低http链接次数与时间

  • 资源裁剪

    缩减为首屏所需最小代码量

  • CDN静态资源加速

    • HTTP2

      • 权重

      • 多路复用

        减少TCP握手时间

      • HTTPS安全加密

      • 无需等待

        必要情况下，可以直接发送数据包，不需要等待缓存队列满的条件

      • 服务器推送

      • 头部压缩

        https://link.jianshu.com/?t=https%3A%2F%2Fimququ.com%2Fpost%2Fheader-compression-in-http2.html

    • 缓存及版本管理

    • 最近访问节点

    • 负载均衡

    • 预热

    • 容灾

  • SSR

    Server Side Render 服务侧渲染，有效降低网络传输时间，并且可以对渲染结果实施缓存策略，加速客户端呈现时间

    • Rax SSR

      https://rax.js.org/ssr

数据统计

手工埋点

无痕埋点

业务数据指标

• PV/UV
• 漏斗数据
• 渠道转化

用户行为数据

• 流量分析

  查看全站流量状况，与历史进行比较，是涨是跌，哪个时段出了问题？出了问题需要排查。

  关注实时流量，如直播网站，趋势分析无法满足需要看当前在线。

• 来源分析

  来源分哪几类，分别带来多少流量？

  搜索引擎、外链的引入流量具体状况如何？

• 受访分析

  网站哪些内容受欢迎？？

  页面设计是否合理？

• 访客分析

  访客都是谁？

  访客的浏览行为是怎样的？

• 转化路径分析

  路径分析：根据您设置的特定路线，监测某一流程的完成转化情况，算出每步的转换率和流失率数据，如注册流程，购买流程等。

社区解决方案

• 友盟
• 阿里云

DevOps

Auto DevOps provides pre-defined CI/CD configuration which allows you to automatically detect, build, test,
deploy, and monitor your applications.

CI/CD

持续集成（Continuous Integration）
持续交付（Continuous Delivery）
持续部署（Continuous Deployment）

https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/

https://mp.weixin.qq.com/s/k16SjTN7__iRB_7q78hldg

• Gitlab

  • 自动构建

  • 自动测试

    代码质量分析：
    https://docs.gitlab.com/ee/user/project/merge_requests/code_quality.html

  • 自动部署

  • 自动性能测试

  • 自主监控

  • Code Review

    https://about.gitlab.com/stages-devops-lifecycle/code-review/

  • Review Apps

    https://docs.gitlab.com/ee/ci/review_apps/index.html

Node中间件

通过Node.js实现的网关层，可以整合各服务网关数据，实现按需配置请求，减少网络等待时间，加快网络请求时长，降低开发成本，在大型复杂的应用中效果尤为明显

按需获取数据常见的两种方案：
1.中台化服务
2.GraphQL

应该多关注稳定性，容灾容错，弹性，监控告警等

逆向分析

JS

• js-beautify

  https://github.com/beautify-web/js-beautify

安全

数据安全

代码安全

通信安全

• SSL

  SSL, or Secure Sockets Layer, is the industry-standard technology for establishing an encrypted link between a web server and a browser.

社区库

热力图

https://github.com/Leaflet/Leaflet.heat

Demo1：
http://leaflet.github.io/Leaflet.heat/demo/

Demo2：
http://leaflet.github.io/Leaflet.heat/demo/draw.html

three.js (3D)

https://threejs.org/

商业解决方案

• EverCraft

  https://evercraft.co/zh/api

Lottie (动画)

For Web, Android, iOS, React Native, and Windows

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

https://github.com/airbnb/lottie-web

http://airbnb.io/lottie/#/

跨平台开发

Rax

https://rax.js.org/

• H5

• Weex

  • Android
  • iOS

• 阿里小程序

• 微信小程序

Electron

跨域

http://www.ruanyifeng.com/blog/2016/04/cors.html

简单请求

• HEAD
• GET
• POST

非简单请求

非简单请求在发起请求前会发起预检，执行Opions的请求，如果预检通过，则本次生命周期内不会再进行预检

• PUT
• DELETE

常用工具推荐

https://ice.work/docs/guide/resource/tools

FusionCool

Sketch设计辅助工具

React Developer Tools

Charles

Postman

Octotree

XMind: ZEN - Trial Version