Home

Awesome

前端体系规划指南

欢迎在 issue 中留下你的相关建议。

原则:

  1. Reusable (包含可重用 UI 设计)
  2. Responsive(快速发布周期)
  3. Quality (质量控制)
  4. Cross-Platform 跨平台(响应式设计,混合应用)
  5. Communication(减少沟通成本,UX 和开发)

1. 设计

原型

原型,是指某种新技术在投入量产之前的所作的模型,用以检测产品质量,保障正常运行。

分类:

相关工具:

相关文章:

设计系统(Design System)

设计系统

目的(Why):

设计系统是一组相互关联的设计模式与共同实践的,以连贯组织来达成数字产品的目的。模式是重复组合以创建界面的元素:用户流、交互、按钮、文本、图标,颜色、排版、微观等。实践则是选择创建,捕获,共享和使用这些模式的方法,特别是在团队中工作时。 —— Alla Kholmatova 《Design Systems》

如何做:

示例:

相关模式:

相关文章:

Design System Ops

Design System Ops,允许整个组织的人员设计、重新设计和改进产品,而不会失去质量,可用性和一致性。

相关文章:

可视化搭建前端

可视化搭建前端,是指通过推拽的方式,在线创建和生成前端界面。

示例:

相关文章:

架构

普通相关资源:

微前端相关资源:

相关文章:

2. 创建

脚手架/生成器

脚手架。作为一个基础的模块应用,用于快速生成、搭建前端应用。它除了包含一个前端项目所需要的要素,往往还包含着组织内部相关的规范和模式,如部署模板、构建系统等。

类型:

生成器,可以根据一系列的配置参数,以实现更强的定制化作用。它是一种更高级的脚手架的方式来创建应用。

相关文章:

快速工作平台

Why:搭建环境不是一件容易的事。

How:通过 CLI 生成。

3. 开发

代码模式库

模式库,是一系列可复用代码的合集,如前端的组件,通用的工具函数等等。其目的是在多个应用之间共享代码,以降低修改成本。在设计架构的时候,要是考虑内建相应的 UI 组件库,便需要考虑结合装饰器模式,作为一层代理,来封装外部的 API,以降低后期的修改成本。它还包含了用于多个前端应用通讯的数据通讯库。

相关资源:Vanilla.js Boilerplates

相关文章:

Mock Server

Why:

Mock Server(仿造服务器),即用于仿造后端接口的模拟 HTTP 服务器。它是一个简单的 HTTP 服务,在后端未准备好的情况下,它可以为前端提供一个可用的 API 服务。

模式:

相关资源:

编辑器/IDE 插件

编辑器/IDE 插件,用于在 IDE/编辑器插件中,集成文档、常用代码等相关内容。

Intellij IDEA 相关资源:

VisualCode Studio 相关资源:

浏览器插件

相关插件类型:

调试 Debug 工具

代理调试:不管是在开发过程中,还是实际的线上 Debug 中,都需要查看、修改 HTTP/HTTPS、WebSocket 的请求、响应,同时也需要 HTTP/HTTPS 代理服务,把实际的域名,代理到本地测试服务器用于调试。

相关工具:

移动端调试:在 APP 中或者在移动浏览器调试网页,没有类似 Chrome Developer Tools 的调试工具,无法方便的查看请求,打印到 Console 等常规调试方法。

相关工具:

性能分析与优化

检查清单:

要点:

相关工具:

常规优化:

企业级相关文章:

构建时优化:

4. 联调

统一 API 接口

Why: 后端设计的接口,并不一定适用于前端使用。这便要求前端对后端有一定的了解,以协助后端设计出适合前端使用的 API。

相关资源:

自动化契约测试

Why: 在实施前后端分离架构的过程中,最让人苦恼的莫过于:API 发生了变化。API 发生变化的原因那可是相当的丰富:业务变化、字段名出错、第三方接口不匹配等等。

契约测试,又称之为消费者驱动的契约测试(Consumer-Driven Contracts,简称CDC),根据消费者驱动契约,我们可以将服务分为消费者端和生产者端,而消费者驱动的契约测试的核心思想在于:从消费者业务实现的角度出发,由消费者自己会定义需要的数据格式以及交互细节,并驱动生成一份契约文件。然后生产者根据契约文件来实现自己的逻辑,并在持续集成环境中持续验证。

相关资源:

5. 测试

<img width="400" alt="前端测试金字塔" src="images/fe-test-primard.png">

前端测试

相关资源:

性能测试

相关文章:

可视化回归测试

可视化回归测试工具,通过捕获网页 /UI的屏幕截图,并将其与原始图像(历史基线屏幕截图或来自实时网站的参考图像)进行比较,来执行前端或用户界面(UI)回归测试。

相关 Awesome 资源:Awesome Visual Regression Testing

相关工具:

6. 运营

应用性能监测

APM (Application Performance Management,即应用性能管理,在分布式领域也称为分布式跟踪管理)对企业的应用系统进行实时监控,它是用于实现对应用程序性能管理和故障管理的系统化的解决方案。

相关资源:

相关文章:

错误日志跟踪

有很多种情况会导致Javascript抛出异常,包括网络失效、语法错误、运行时错误等。我们希望在页面上有异常发生时,能够获得脚本错误的基本信息、文件url、行号 。

How:

相关文章:

相关资源:

7. 维护?(待定)

架构迁移

相关文章:

重写

其它

相关文章

效能

度量

相关资源

AlloyTeam

来源:https://github.com/Pines-Cheng/think/issues/32

AlloyTeam 内部都有对应的解决方案:

Frontend Case Stuies

** https://github.com/andrew--r/frontend-case-studies 这个项目介绍了真实世界的企业前端架构,包含了一系列的相关案例。

***** 卫报 前端文档 该项目不仅包含了卫报的前端代码,以及相关的详细设计文档。

License

Phodal's Idea

© 2019 A Phodal Huang's Idea. This code is distributed under the MIT license. See LICENSE in this directory.