Skip to content
前端体系规划指南。Architecture of Frontend Development Efficiency
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
.gitignore build: update ignore file Apr 9, 2019
CNAME Create CNAME Apr 23, 2019
LICENSE docs: init license Apr 7, 2019
README.md
_config.yml build: add markdown theme Apr 9, 2019
lifycyle.md

README.md

前端体系规划指南

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

原则:

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

1. 设计

原型

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

分类:

  • 验证原型 用于验证最初设计的一些关键功能,没有最终产品的所有功能。
  • 工作原型 最终产品所有的或几乎所有的功能。
  • 视觉原型 预期设计的尺寸和外观,而不是功能。
  • 形态原型 是初期的视觉原型,强调其中设计的几何特征,不是很重视颜色,纹理,或其他与最终外观相关的属性。
  • 使用者体验原型 在功能与外观上相当完整的原型,可以用于使用者研究。
  • 功能原型 完成设计上所要求的功能和外观,但可能是与最终设计使用不同的技术和不同的尺寸来创建。
  • 纸上原型 印刷的或手绘的软件产品之使用者界面。这些原型通常用于设计软件时,在早期的设计阶段时进行软件功能盘点,以便在投入更多耗费成本的设计之前,先确认设计决策是否正确。

相关工具:

  • Balsamiq Mockups
  • Axure
  • Sketch

相关文章:

设计系统(Design System)

设计系统

目的(Why):

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

如何做:

示例:

相关模式:

  • 原子设计,是一个设计方法论,由五种不同的阶段组合,它们协同工作,以创建一个有层次、计划性的方式来界面系统。

相关文章:

Design System Ops

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

相关文章:

可视化搭建前端

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

示例:

  • 飞冰 是一套综合解决方案,用来极速构建中后台应用。

相关文章:

架构

普通相关资源:

微前端相关资源:

相关文章:

2. 创建

脚手架/生成器

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

类型:

  • GUI 脚手架。
  • CLI 脚手架。

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

相关文章:

快速工作平台

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

How:通过 CLI 生成。

3. 开发

代码模式库

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

相关资源:Vanilla.js Boilerplates

相关文章:

Mock Server

Why:

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

模式:

  • 普通 Mock Server。在 API 配置文件中定义了什么,便返回什么内容。
  • DSL 形式的 Mock Server。它是以普通的 Mock Server 有所不同,其中的配置文件(通常是 JSON)是通过特定格式编写的,返回的数据只是 API 配置的一部分。
  • 编程型 Mock Server。它需要我们编写简单的代码,才能返回对应的 API 数据。它的优点是灵活性更高,但是缺点便是维护成本更高。
  • 契约测试,又称之为消费者驱动的契约测试(Consumer-Driven Contracts,简称 CDC),是指从消费者业务实现的角度出发,驱动出契约,再基于契约,对提供者验证的一种测试方式。

相关资源:

编辑器/IDE 插件

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

Intellij IDEA 相关资源:

VisualCode Studio 相关资源:

浏览器插件

相关插件类型:

  • Developer Tools.
  • API 验证。诸如 Postman

调试 Debug 工具

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

相关工具:

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

相关工具:

性能分析与优化

检查清单:

要点:

  • TTFB (Time to first byte)时间

相关工具:

  • Chrome Lighthouse/Audits (Chrome Developer Tools 的 Audits 标签里)

常规优化:

企业级相关文章:

构建时优化:

4. 联调

统一 API 接口

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

相关资源:

自动化契约测试

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

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

相关资源:

5. 测试

前端测试金字塔

前端测试

相关资源:

性能测试

相关文章:

可视化回归测试

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

相关 Awesome 资源:Awesome Visual Regression Testing

相关工具:

  • snapshot testing

6. 运营

应用性能监测

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

相关资源:

相关文章:

错误日志跟踪

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

How:

相关文章:

相关资源:

  • BetterJS 是一个 Web 前端脚本错误监控及跟踪解决方案。该项目为鹅厂 imweb 团队的开源项目。
  • badjs2 是一个前端脚本错误监控及跟踪解决方案。
  • Sentry

7. 维护?(待定)

架构迁移

相关文章:

重写

其它

相关文章

效能

度量

相关资源

AlloyTeam

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

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

  • Steamer 命令行工具及脚手架
  • AlloyStore 组件展示平台
  • LinkStar 假数据联调平台
  • JB 测试部署平台
  • Ars 发布上线平台
  • AlloyData 数据上报平台
  • Sentry 错误监控平台
  • AlloyKit 离线包发布平台
  • XuanWu 直出平台

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.

You can’t perform that action at this time.