Skip to content

Commit b654179

Browse files
phodalphodal
committed
[ch14] add some ddd for thinking
1 parent 89849b4 commit b654179

5 files changed

Lines changed: 72 additions & 22 deletions

File tree

‎chapters/chapter-14.md‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,17 @@
5454
项目准备
5555
---
5656

57-
我们已经在第三章《如何选择合适的前端语言》、第四章《如何选择合适的前端框架》中谈到的技术选型简介绍的那些细节，这里就不展开讨论了。
57+
### 技术选型
58+
59+
在第四章中，我们提到了影响技术选型的几个因素。
60+
61+
![技术选择因素](../images/tech-decide.png)
62+
63+
这时，为了更好的考量不同的因素，你就需要列出重要的象限，如**开发效率**、团队喜好等等。并依此来决定，哪个框架更适合当前的团队和项目。
64+
65+
![PRI](../images/pri.jpg)
66+
67+
即使，不考虑前端框架以外的因素，那么技术选型也是相当痛苦的一件事。
5868

5969
选好了合适的技术栈，有了一个 hello, world 模板，剩下的就是考虑一下：构建系统与工作流。
6070

@@ -74,11 +84,15 @@
7484

7585
也因此需要不断地练习，并积累相关的经验。
7686

77-
### 架构设计
87+
### 前后端分离设计
7888

79-
虽然这是一个前端的创建指南，但是我还想稍微扯一点无关的内容。
89+
虽然这是一个前端的创建指南，但是我还想稍微扯一点『无关』的内容。好的前端程序员，应该是要懂后端的，特别是后端的数据模型。其次，便是与后台交互时的 API 行为/动作设计，即事件。
8090

81-
[stepping](https://github.com/phodal/stepping) 完成建模？
91+
我们需要考虑领域相关的模型，则模型相关的事件，而后整理出系统的领域事件图。
92+
93+
![Stepping](../images/stepping.png)
94+
95+
而诸如 [stepping](https://github.com/phodal/stepping) 这样的工具，则可以用 DSL 来生成。
8296

8397
```
8498
domain: 库存子域
@@ -90,12 +104,15 @@ domain: 库存子域
90104
command: 编辑库存
91105
```
92106

93-
![Stepping](../images/stepping.png)
107+
再依据此去划分相关的子域，以及对应的微服务层次。
108+
109+
![领域](../images/event-storming.png)
94110

95-
结合 Swagger 生成 Mock API
111+
借此，开发人员与领域专家共同完成业务的抽象。
96112

97-
可这是后端的工作~~，2333。
113+
再由后台人员去设计后台数据结构，并结合 Swagger 设计并生成 Mock API 供前端使用，就可以完成前期的准备工作。
98114

115+
后端与前端开发人员，都能分别专注于自己的工作。
99116

100117
实现功能
101118
---

‎ebook.md‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1824,7 +1824,17 @@ if(response && response.data && response.data.length > 0){}
18241824
项目准备
18251825
---
18261826

1827-
我们已经在第三章《如何选择合适的前端语言》、第四章《如何选择合适的前端框架》中谈到的技术选型简介绍的那些细节，这里就不展开讨论了。
1827+
### 技术选型
1828+
1829+
在第四章中，我们提到了影响技术选型的几个因素。
1830+
1831+
![技术选择因素](images/tech-decide.png)
1832+
1833+
这时，为了更好的考量不同的因素，你就需要列出重要的象限，如**开发效率**、团队喜好等等。并依此来决定，哪个框架更适合当前的团队和项目。
1834+
1835+
![PRI](images/pri.jpg)
1836+
1837+
即使，不考虑前端框架以外的因素，那么技术选型也是相当痛苦的一件事。
18281838

18291839
选好了合适的技术栈，有了一个 hello, world 模板，剩下的就是考虑一下：构建系统与工作流。
18301840

@@ -1844,11 +1854,15 @@ if(response && response.data && response.data.length > 0){}
18441854

18451855
也因此需要不断地练习，并积累相关的经验。
18461856

1847-
### 架构设计
1857+
### 前后端分离设计
18481858

1849-
虽然这是一个前端的创建指南，但是我还想稍微扯一点无关的内容。
1859+
虽然这是一个前端的创建指南，但是我还想稍微扯一点『无关』的内容。好的前端程序员，应该是要懂后端的，特别是后端的数据模型。其次，便是与后台交互时的 API 行为/动作设计，即事件。
18501860

1851-
[stepping](https://github.com/phodal/stepping) 完成建模？
1861+
我们需要考虑领域相关的模型，则模型相关的事件，而后整理出系统的领域事件图。
1862+
1863+
![Stepping](images/stepping.png)
1864+
1865+
而诸如 [stepping](https://github.com/phodal/stepping) 这样的工具，则可以用 DSL 来生成。
18521866

18531867
```
18541868
domain: 库存子域
@@ -1860,12 +1874,15 @@ domain: 库存子域
18601874
command: 编辑库存
18611875
```
18621876

1863-
![Stepping](images/stepping.png)
1877+
再依据此去划分相关的子域，以及对应的微服务层次。
1878+
1879+
![领域](images/event-storming.png)
18641880

1865-
结合 Swagger 生成 Mock API
1881+
借此，开发人员与领域专家共同完成业务的抽象。
18661882

1867-
可这是后端的工作~~，2333。
1883+
再由后台人员去设计后台数据结构，并结合 Swagger 设计并生成 Mock API 供前端使用，就可以完成前期的准备工作。
18681884

1885+
后端与前端开发人员，都能分别专注于自己的工作。
18691886

18701887
实现功能
18711888
---

‎images/domain-event.png‎

70.4 KB
Loading

‎images/event-storming.png‎

37.3 KB
Loading

‎index.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -244,8 +244,9 @@ <h1>我的职业是前端工程师</h1>
244244
<li><a href="#如何从头开发一个前端应用">如何从头开发一个前端应用</a><ul>
245245
<li><a href="#前端应用的生命周期">前端应用的生命周期</a></li>
246246
<li><a href="#项目准备">项目准备</a><ul>
247+
<li><a href="#技术选型">技术选型</a></li>
247248
<li><a href="#构建系统">构建系统</a></li>
248-
<li><a href="#架构设计">架构设计</a></li>
249+
<li><a href="#前后端分离设计">前后端分离设计</a></li>
249250
</ul></li>
250251
<li><a href="#实现功能">实现功能</a><ul>
251252
<li><a href="#分析设计图">分析设计图</a></li>
@@ -1477,7 +1478,16 @@ <h2 id="前端应用的生命周期">前端应用的生命周期</h2>
14771478
<p>有兴趣的读者，阅读 GitHub 上的相关资料：<a href="https://github.com/phodal/growth-in-30-minutes">30分钟了解《全栈应用开发：精益实践》</a>。或者等待，即将出版的纸质书籍。</p>
14781479
<p>现在，让我们进入这最后的一章，了解真实世界的应用构建。</p>
14791480
<h2 id="项目准备">项目准备</h2>
1480-
<p>我们已经在第三章《如何选择合适的前端语言》、第四章《如何选择合适的前端框架》中谈到的技术选型简介绍的那些细节，这里就不展开讨论了。</p>
1481+
<h3 id="技术选型">技术选型</h3>
1482+
<p>在第四章中，我们提到了影响技术选型的几个因素。</p>
1483+
<figure>
1484+
<img src="images/tech-decide.png" alt="技术选择因素" /><figcaption>技术选择因素</figcaption>
1485+
</figure>
1486+
<p>这时，为了更好的考量不同的因素，你就需要列出重要的象限，如<strong>开发效率</strong>、团队喜好等等。并依此来决定，哪个框架更适合当前的团队和项目。</p>
1487+
<figure>
1488+
<img src="images/pri.jpg" alt="PRI" /><figcaption>PRI</figcaption>
1489+
</figure>
1490+
<p>即使，不考虑前端框架以外的因素，那么技术选型也是相当痛苦的一件事。</p>
14811491
<p>选好了合适的技术栈，有了一个 hello, world 模板，剩下的就是考虑一下：构建系统与工作流。</p>
14821492
<h3 id="构建系统">构建系统</h3>
14831493
<p>如《全栈应用开发：精益实践》一书中所说，构建系统是一个投入产出比非常高的组件部分。只需要在前期投入一定的时间，便能节省大量的时间用于开发 。</p>
@@ -1491,21 +1501,27 @@ <h3 id="构建系统">构建系统</h3>
14911501
<img src="images/build-web-project.png" alt="构建系统" /><figcaption>构建系统</figcaption>
14921502
</figure>
14931503
<p>也因此需要不断地练习，并积累相关的经验。</p>
1494-
<h3 id="架构设计">架构设计</h3>
1495-
<p>虽然这是一个前端的创建指南，但是我还想稍微扯一点无关的内容。</p>
1496-
<p><a href="https://github.com/phodal/stepping">stepping</a> 完成建模？</p>
1504+
<h3 id="前后端分离设计">前后端分离设计</h3>
1505+
<p>虽然这是一个前端的创建指南，但是我还想稍微扯一点『无关』的内容。好的前端程序员，应该是要懂后端的，特别是后端的数据模型。其次，便是与后台交互时的 API 行为/动作设计，即事件。</p>
1506+
<p>我们需要考虑领域相关的模型，则模型相关的事件，而后整理出系统的领域事件图。</p>
1507+
<figure>
1508+
<img src="images/stepping.png" alt="Stepping" /><figcaption>Stepping</figcaption>
1509+
</figure>
1510+
<p>而诸如 <a href="https://github.com/phodal/stepping">stepping</a> 这样的工具，则可以用 DSL 来生成。</p>
14971511
<pre><code>domain: 库存子域
14981512
aggregate: 库存
14991513
event: 库存已增加
15001514
event: 库存已恢复
15011515
event: 库存已扣减
15021516
event: 库存已锁定
15031517
command: 编辑库存</code></pre>
1518+
<p>再依据此去划分相关的子域，以及对应的微服务层次。</p>
15041519
<figure>
1505-
<img src="images/stepping.png" alt="Stepping" /><figcaption>Stepping</figcaption>
1520+
<img src="images/event-storming.png" alt="领域" /><figcaption>领域</figcaption>
15061521
</figure>
1507-
<p>结合 Swagger 生成 Mock API</p>
1508-
<p>可这是后端的工作~~，2333。</p>
1522+
<p>借此，开发人员与领域专家共同完成业务的抽象。</p>
1523+
<p>再由后台人员去设计后台数据结构，并结合 Swagger 设计并生成 Mock API 供前端使用，就可以完成前期的准备工作。</p>
1524+
<p>后端与前端开发人员，都能分别专注于自己的工作。</p>
15091525
<h2 id="实现功能">实现功能</h2>
15101526
<h3 id="分析设计图">分析设计图</h3>
15111527
<p>我的意思是：切图。</p>

0 commit comments

Comments
 (0)