<!-- .slide: data-background="white" -->
# nestjs 設計核心理念理解
---
<!-- .slide: data-background="white" -->
## 什麼是 nestjs?
* [nestjs](https://docs.nestjs.com/) 是一個支援使用 [Typescript](https://www.typescriptlang.org/) 語言開發的 nodejs 網路應用後端開發框架。
---
<!-- .slide: data-background="white" -->
## 使用 nestjs 的優點
1. 配置簡單
2. 具有一些標準的規範架構
3. 具有內建的 DI 容器
---
<!-- .slide: data-background="white" -->
## 使用 nestjs 的缺點
1. 學習成本高
2. 彈性過大,容易誤用元件
3. 說明文件不夠詳細
4. 並沒有透過官方網站說明其設計特點
---
<!-- .slide: data-background="white" -->
## 什麼是 Dependency(依賴)
![](https://hackmd.io/_uploads/SJaSHRu02.png)
---
<!-- .slide: data-background="white" -->
## 以 code 的角度來說
```typescript=
export class MapService {}
export class PathFinder {
private mapService;
constructor() {
this.mapService = new MapService();
}
}
```
代表
```mermaid
classDiagram
MapService <|-- PathFinder
class MapService
class PathFinder{
-MapService mapService
}
```
---
<!-- .slide: data-background="white" -->
## 什麼是依賴注入
- 一種設計框架
- 透過帶入參數依賴的方式,降低兩個相依物件耦合
---
<!-- .slide: data-background="white" -->
## nestjs 核心概念
---
<!-- .slide: data-background="white" -->
### Self-Contained Module
![](https://hackmd.io/_uploads/H1AdiLSe6.png)
---
<!-- .slide: data-background="white" -->
### Module Base
* nestjs 使用模組當作邏輯切割的最小單位
* 最外層是一個最大模組,最大模組內可以依照職責去切分成多個小模組
* 每個模組內部就是包含所有可以完成該模組職責所需的元件
* 透過 DI container 把每個需要的相依性服務以 provider 方式住入到需要的元件
---
<!-- .slide: data-background="white" -->
### Separate Of Concern(關注點分離)
nestjs 預設採用分層式架構,預設有分層的式元件比如 Controller, Guard, Filter, Middleware 讓開發者可以把不同關注點的邏輯做隔離,在開發與除錯時能更加快速找到原因
---
<!-- .slide: data-background="white" -->
![](https://hackmd.io/_uploads/BkggLPBlT.png)
[ref linkedin slide](https://slides.com/yariv-gilad/nest-js-request-lifecycle#/1)
<!-- ![](https://hackmd.io/_uploads/Hkh7Hftlp.png)[^2] -->
---
<!-- .slide: data-background="white" -->
## nestjs request lifecycle 介紹
---
<!-- .slide: data-background="white" -->
### [請求處理 lifecycle](https://slides.com/yariv-gilad/nest-js-request-lifecycle#/1)
![](https://i.stack.imgur.com/2lFhd.jpg)
[stack overflow answer](https://stackoverflow.com/questions/54863655/whats-the-difference-between-interceptor-vs-middleware-vs-filter-in-nest-js)
---
<!-- .slide: data-background="white" -->
### Request Lifecylce sample
[request lifecycle sample](https://github.com/nodejs-typescript-classroom/nestjs-request-response)
---
<!-- .slide: data-background="white" -->
## [nestjs Module 元件](/bcskddysQxqRAzOaZ4zhOg)
1. 要引入的模組
2. 要提供的 http 外部處理接口(controller)
3. 要使用的外部服務(provider)
4. 要提供給的外部服務
---
<!-- .slide: data-background="white" -->
## [nestjs Provider 元件](https://docs.nestjs.com/providers)
- 只要可以被標注是 Injectable 的元件,或是值
![image alt](https://docs.nestjs.com/assets/Components_1.png)
---
<!-- .slide: data-background="white" -->
## [nestjs Provider Inject 方式](https://docs.nestjs.com/providers)
1. Constructor 方式: 透過 constructor 參數帶入
2. Property 方式: 以 property 的形式帶入,通常用在有子類別的類別(減少重複呼叫 constructor帶入的麻煩)
---
<!-- .slide: data-background="white" -->
## [nestjs Provider Inject 範圍](https://docs.nestjs.com/fundamentals/injection-scopes)
- DEFAULT: 一整個 App 只存在一個。舉例: ConfigService
- REQUEST: 一個 Http Request flow 只存在一個。舉例: LoggingInterceptor
- TRANSIENT: 每個 consumer 各自有一個。舉例: CounterService
---
<!-- .slide: data-background="white" -->
## nestjs 開發使用
- [cli 安裝](https://docs.nestjs.com/cli/overview)
```
yarn global add @nestjs/cli
```
- [建制專案](https://docs.nestjs.com/cli/usages)
```
nest new $project_name
```
---
<!-- .slide: data-background="white" -->
## nestjs 開發 Debug
---
<!-- .slide: data-background="white" -->
### 1. with vscode lauch debugger
建立一個 launch.json 在 .vscode 下
```json=
{
"version": "2.0.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Nest Framework",
"runtimeExecutable": "pnpm", // 此處可以替換為該專案使用的 node module 管理套件工具
"runtimeArgs": [
"run",
"start:debug",
"--",
"--inspect-brk"
],
"autoAttachChildProcesses": true,
"restart": true,
"sourceMaps": true,
"stopOnEntry": false,
"console": "integratedTerminal",
}
]
}
```
---
<!-- .slide: data-background="white" -->
然後就可以在程式下中斷點 逐步執行要執行的程式
![](https://hackmd.io/_uploads/r1jt2WDxT.png)
---
<!-- .slide: data-background="white" -->
## 好文共享
[小雞鎮 Nest概念](https://town.lychicken.com/docs/category/-nest-%E8%A7%80%E5%BF%B5/)
---
<!-- .slide: data-background="white" -->
Q&A
[^1]: [nest offical document](https://docs.nestjs.com/faq/request-lifecycle)
[^2]: [linkedin shared slide](https://slides.com/yariv-gilad/nest-js-request-lifecycle#/1)
[^3]: [stackoverflow answer](https://stackoverflow.com/questions/54863655/whats-the-difference-between-interceptor-vs-middleware-vs-filter-in-nest-js)
{"description":"nestjs 是一個支援使用 Typescript 語言開發的 nodejs 網路應用後端開發框架。","slideOptions":"{\"title\":\"文件標題\",\"description\":\"文件描述\",\"author\":\"Gson\",\"slideOptions\":{\"transition\":\"slide\",\"slideNumber\":true,\"theme\":\"white\"},\"type\":\"slide\"}","title":"nestjs 設計核心理念理解","contributors":"[{\"id\":\"26019314-8fc1-463c-94bf-a62e1b56e651\",\"add\":7740,\"del\":2893}]"}