关键词：

2022.02.08 今天读了一篇关于前端整洁架构的设计，因此对其中的内容进行了一些整理以及我自己的思考，后续阅读《领域驱动设计》后可以加入更多的内容。

References:

前端领域的 “干净架构”

架构方面学习笔记（3）–前端架构设计

文章目录

• 架构方面学习笔记（3）--前端架构设计
• • 整洁架构
  • DDD(Design Driven Design) 领域驱动设计
  • • DDD 相对于三层架构有什么提升？

整洁架构

以一个🌰来介绍整洁架构：

商店会出售不同种类的饼干，用户可以自己选择要购买的饼干，并通过三方支付服务进行付款。

用户可以在首页看到所有饼干，但是只有登录后才能购买，点击登录按钮可以跳转到登录页。

把饼干加进购物车后，用户就可以付款了。付款后，购物车会清空，并产生一个新的订单。

上图明确出了整洁架构的三个部分，但它还是有一些抽象，在实际开发和设计中我们如何遵循这个架构进行设计呢？

1. 明确实体，比如例子中的：商品、用户、购物车、订单。明确数据转换函数（必须仅依赖本层的各种实体和规则）如计算总价的方法
2. 应用层：
   - 列 use case：①找出参与者②找出动作③明确结果
   - 写数据转换或者说描述 use case：side effect(从适配层与服务端的交互中拿数据) --> pure function(纯函数处理数据)–> side effect(存储处理结果)
   - 列 Interfaces
3. 适配层：
   • 用户界面
   • API 请求
   • 存储或状态管理

最后：整洁架构让每个 use case 独立起来，同时适配层让第三方服务随时可替换，这会让整个架构扩展性极强，但不可避免的会带来一些如代码量的增大这种劣势。

我个人看法是整洁架构最关键的一点是希望逻辑和 UI、第三方服务 能够分离，而如今的 react vue 都提倡使用 hooks，核心也正是如此。在现实开发中实现理想状态下的整洁架构当然是具有一定的难度和不可预测性，比如你真的可以做到逻辑和状态管理的真正分离吗，你的项目可以随意从 react 和 vue 中切换吗，诸如此类的问题。但梳理整洁架构的过程仍然给了我们不少启发：

• 通过列实体、列 use case 对于我们设计 store 结构具有很大的帮助
• 将逻辑从状态管理、第三方服务中剥离出来，尽量做到各司其职和不依赖框架的测试

// 整洁架构下的商品购买代码树
src/
|_domain/
  |_user.ts
  |_product.ts
  |_order.ts
  |_cart.ts
|_application/
  |_addToCart.ts
  |_authenticate.ts
  |_orderProducts.ts
  |_ports.ts
|_services/
  |_authAdapter.ts
  |_notificationAdapter.ts
  |_paymentAdapter.ts
  |_storageAdapter.ts
  |_api.ts
  |_store.tsx
|_lib/
|_ui/

DDD(Design Driven Design) 领域驱动设计

Reference:

领域驱动设计在互联网业务开发中的实践

《领域驱动设计》

特点： 从开发到测试整个团队使用同一的架构语言；业务与架构强关联，从而建立针对业务变化的高响应力架构

几个名词解释：

DDD 中有较多的术语，这里仅写了几个，更多的可以参考 领域驱动设计-什么是领域驱动设计和怎么使用它

• 领域：一个系统要解决的实际问题的集合，或者说业务本身
• 通用语言：所谓通用语言讲的并不是开发和测试都用一种开发语言，比如 golang，JavaScript 等，而是与领域模型相关的结构化语言保证整个团队对整个系统的理解一致，比如一个商城系统中的订单收货地址和个人信息收货地址应该明确区分，而不是混为一谈「收货地址」

上文中提到的前端架构设计其实类似于 DDD 六边形架构。

DDD 相对于三层架构有什么提升？

三层架构的劣势：MVC 可以看做是三层架构的一种实现模式，我们知道任何一个操作都是从 controller 层传入，services 层操作数据库或者第三方服务。

• 严格分层模式下，用户界面层不能跨过业务逻辑层调用数据访问层
• 三层架构下往往 service 层会越来越臃肿，最终一堆逻辑混杂在一起，不易于扩展以及满足新的业务需求

三层架构又被称为「分层贫血领域模型架构」，贫血即指业务实体中没有或者很少方法。而 DDD 则被称为充血领域模型，正式因为领域对象拥有更多的能力。

待增加更详细的内容

nvdla学习笔记(代码片段)

...NVIDIA深度学习加速器（NVDLA）是一个免费和开放的架构，促进设计深度学习推理加速器的标准方法。NVDLA采用模块化架构，可扩展、高度可配置，旨在简化集成性和便携性。硬件 查看详情

《ios应用架构谈》学习笔记

...代码还是很乱，逻辑思路不清晰，各种回调不明确。有些架构的扩展性很差，甚至很多crash都是由于架构不合理导致。架构的设计需要了解产品的业务，未来的走向来制定。经验对于架构而言非常重要。通过学习《iOS应用架构谈... 查看详情

什么是架构(代码片段)

一、前言架构，又名软件架构，是有关软件整体结构与组件的抽象描述，用于指导大型软件系统各个方面的设计。架构描述语言（ADL）用于描述软件的体系架构。软件架构（softwarearchitecture）是一系列... 查看详情

大数据高级开发工程师——spark学习笔记(代码片段)

文章目录Spark内存计算框架SparkSQLSparkSQL架构设计1.SparkSQL的架构设计实现2.Catalyst执行过程SQL解析阶段Parser绑定逻辑计划Analyzer逻辑优化阶段Optimizer生成可执行的物理计划阶段PhysicalPlan3.代码生成阶段生成代码与sql解析引擎的区别Tun... 查看详情

设计模式学习笔记贫血模型与充血模型(代码片段)

1.贫血模型目前大部分业务系统都是基于MVC三层架构来开发的，而这种架构实际上是一种基于贫血模型的MVC三层架构开发模式。虽然这种开发模式已经成为标准的Web项目的开发模式，但它却违反了面向对象编程风格，... 查看详情

armv8架构与指令集.学习笔记(代码片段)

目录http://blog.csdn.net/forever_2015/article/details/50285865第1章ARMv8简介.31.1基础认识.31.2相关专业名词解释.3第2章ExecutionState42.1提供两种ExecutionState42.2决定ExecutionState的条件.4第3章ExceptionLevel53.1ExceptionLevel与Securi 查看详情

了解微前端，深入前端架构的前世今生(代码片段)

前端架构的前世今生🛵前言一、🛴前端架构的前世今生1、架构是如何产生的？2、MVC架构3、前后端分离架构4、Nodejs5、单页面架构（1）现有单页面架构（2）单页面架构的优势（3）单页面架构... 查看详情

spark基础学习笔记03：spark运行架构及原理(代码片段)

文章目录零、本讲学习目标一、Spark架构（一）采用主从模型（二）整体流程二、Spark执行过程（一）SparkonStandalone模式（二）SparkonYARN模式1、YARN-Cluster运行流程2、YARN-Client运行流程3、两种模式的比... 查看详情

前端学习笔记-07一些总结(代码片段)

本文目录前端的概念前端的学习思路软件开发架构浏览器访问网址的流程HTTP协议四大特性请求数据格式响应数据格式响应状态码请求方式url:统一资源定位符(即网址)标签的分类1head内常用标签body内常用标签基本标签标签的分类2... 查看详情

学习笔记3--自动驾驶汽车电子电气架构

...汽车平台技术基础》书籍的笔记.1.自动驾驶汽车电子电气架构1.1典型电子电气架构电子电气架构是汽车电子电气系统的顶层设计，目的是在政策法规和设计指标等约束条件下，对功能、成本和装配等方面进行具体分析ÿ... 查看详情

了解微前端，深入前端架构的前世今生(代码片段)

前端架构的前世今生🛵前言一、🛴前端架构的前世今生1、架构是如何产生的？2、MVC架构3、前后端分离架构4、Nodejs5、单页面架构（1）现有单页面架构（2）单页面架构的优势（3）单页面架构... 查看详情

了解微前端，深入前端架构的前世今生(代码片段)

前端架构的前世今生🛵前言一、🛴前端架构的前世今生1、架构是如何产生的？2、MVC架构3、前后端分离架构4、Nodejs5、单页面架构（1）现有单页面架构（2）单页面架构的优势（3）单页面架构... 查看详情

架构学习架构设计目的和复杂度

架构设计的真正目的为了解决软件系统复杂度带来的问题。复杂度来源：高性能、高可用、可扩展性、低成本、安全、规模1.高性能软件系统中高性能带来的复杂度主要体现在两方面，一方面是单台计算机内部为了高性能带来的... 查看详情

alink漫谈:从源码看机器学习平台alink设计和架构(代码片段)

Alink漫谈(二):从源码看机器学习平台Alink设计和架构目录Alink漫谈(二):从源码看机器学习平台Alink设计和架构0x00摘要0x01Alink设计原则0x02Alink实例代码算法调用算法主函数算法模块举例0x03顶层--流水线1.机器学习重要概念2.Alink中概念... 查看详情

前端架构思想

软件架构（softwarearchitecture）是一系列相关的抽象模式，用于指导大型软件系统各个方面的设计。传统软件架构描述的对象是直接构成系统的抽象组件，侧重于系统的抽象、拆分、组织方式等。所以如果从传统软件架构定义出发... 查看详情

前端领域的“干净架构”(代码片段)

大家好，我是ConardLi，前端有架构吗？这可能是很多人心里的疑惑，因为在实际业务开发里我们很少为前端去设计标准规范的代码架构，可能更多的去关注的是工程化、目录层级、以及业务代码的实现。今天我们来看一种前端架... 查看详情

前端领域的“干净架构”(代码片段)

大家好，我是ConardLi，前端有架构吗？这可能是很多人心里的疑惑，因为在实际业务开发里我们很少为前端去设计标准规范的代码架构，可能更多的去关注的是工程化、目录层级、以及业务代码的实现。今天我们来看一种前端架... 查看详情

springcloud学习笔记day01(代码片段)

...Nginx+RabbitMQ+SpringBoot2.02.JVM/JUC/JMM/GC/Nginx……2.微服务架构理论入门2.1.微服务架构概述什么是微服务？微服务架构是一种架构模式，它提倡将单一应用程序划分成一组小的服务，服务之间互相协调、 查看详情