Refactor
constraint(NoSQL, SQL)
what is the object you are tramsform?
解耦/定義每個 folder/function 的功能
User Side(API)
Service(Business Logic)
Repository( DB)
API Server
Why?
- interface(input && output)
- resource check or not
讓每個 function 專注在完成某件事
讓每個 function 專注在完成某件事
User Side(API)
提供接口給對外的使用者
為了確保 transaction，要思考什麼是一個 api 可以完成的邏輯
GraphQL 降低了前後端溝通的耦合
Service(Business Logic)
基於商業模式，會更在乎跟其他 domain 的交互關係
input 的 interface 應該會更有目的性
Repo
面向的是 Third Party 或 DB
提供最通用的介面 通常就是 CRUD
例如 update 不會特別指定哪個欄位可以 update 哪個不行
service
input 基於目的性
output
對於 input 的來源不需要特別去檢查（）
Repo
get
set
input id
output dto(using dto mapper)
input dto
output dto(using dto mapper)
export class Network {
static LIVE_CHECK_INTERVAL = 300000;
id: string = '';
status: NetworkStatus = NetworkStatus.NOT_DEPLOYED;
...
serviceEdges: ServiceEdge[] = [];
createdAt: Date = new Date();
updatedAt: Date = new Date();
constructor(input: Partial<Network>) {
Object.assign(this, input);
}
setStatus(
deviceMesh: boolean,
serviceEdges: ServiceEdge[],
dataFetchedAt: Date,
) {
// some logic
}
}
Model
Service
@Injectable()
export class NetworkService implements INetworkService {
private readonly logger = new Logger(NetworkService.name);
constructor(
private readonly networkRepository: NetworkRepository,
private readonly serviceEdgeService: ServiceEdgeService,
) {}
#generateValidationCode(): string {
return generateUUID();
}
#generateNetworkId(): string {
return generateUUID();
}
async getNetwork(id: string) {
const network = await this.networkRepository.findById(id);
if (!network) {
throw new NotFoundException(`Network with id ${id} not found`);
}
const serviceEdges =
await this.serviceEdgeService.getServiceEdgesByNetworkId(id);
network.serviceEdges = serviceEdges;
return network;
}UI component
headless UI
state query
Text
有時候太久沒寫前端會忘記 react 配 typescript 該怎麼寫有點煩，筆記一下
const Table: React.FC<TableProps> = (props) => {
return (
...
)
}定義 component 的方式
const Table = <T extends {}>(props: TableProps): JSX.Element => {
return (
...
)
}const Table = <T extends {}>(props: TableProps): JSX.Element => {
return (
<TableRowExpansion<T> />
)
}如果下面的 component 也是 generic
refactor legacy code
By Jay Chou
refactor legacy code
- 56
