iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

關於 UI 元件你所該知道的事系列 第 12

Day 12 - UML — 系統設計不可不知的 UML

https://ithelp.ithome.com.tw/upload/images/20210927/20120754ppmDo2bEeS.png
今天再度要進入新的篇章啦!!!
身為軟體工程師,想要設計出好的系統架構,或是綜觀地去理解系統的話,UML 都是不可或缺的,但我在轉職自學的過程中卻遲遲沒有碰到這個觀念,直到開始工作才從前輩那邊知道這個東西的,真的覺得相見恨晚!
那以下就讓我來概述一下 UML,並在後續幾天實際畫一些 UML 來給各位看看!

為什麼要用 UML?

其實在上面介紹時就已經回答這個問題了 — 「釐清軟體系統架構」

隨著日復一日的開發,一開始簡簡單單的網頁就會變成超出我們想像的大系統,這種時候可不能繼續只把架構跟邏輯放在各個開發者的腦袋裡,這樣不論是日後有其他人要進來協作還是自己回去重構、Debug 上都會造成很大的認知負擔。

因此,這時候就需要像 UML 這種東西來協助我們去統整跟梳理軟體系統的架構,當然應該還有很多種方式可以去做到類似的事情,但我自己在元件庫的開發上是有使用到 UML 的,也認為透過這張圖讓我更理解元件之間的關係了。

那什麼是 UML?

UML (Unified Modeling Language) ,直翻過來是「統一塑模語言」,相信光看名字絕對不知道這是在說什麼,那我們先來看看維基百科怎麼說:

「UML是一種開放的方法,用於說明、可視化、構建和編寫一個正在開發的、物件導向的、軟體密集系統的製品的開放方法」

「塑模」的意思就是以圖形的方式,先將系統的功能與結構畫成模型與藍圖,然後再依據藍圖進行實體開發,類似「流程圖」的概念。

一言以蔽之,UML 就是 「以圖形的方式,將系統的功能與結構畫成的模型與藍圖」

而 UML 有很多種圖表可以呈現,不同的 UML 來滿足不同的需求,今天會介紹的是描述元件之間的依賴鏈的是元件圖 (Component Diagram) ,常見的還有物件導向的類別圖 (Class Diagram) 和壯態管理會用的狀態圖 (State Diagram)。

https://ithelp.ithome.com.tw/upload/images/20210927/20120754jREusdXQ0s.png

元件圖 Component Diagram

https://upload.wikimedia.org/wikipedia/commons/7/74/Component-4.png

元件圖這邊很單純,就是反映出元件之間的依賴關係反映出元件之間的依賴關係。

介面( Interface )就如同 Day 04 所說的,是一項功能的抽象化。

元件( Component )就是指那一個個的 UI 元件。

大多數的元件都可以追溯到一個介面,也就是先實作介面,再慢慢擴充成一個個元件,接下來這系列每天都會畫一個 UML 來讓大家更理解這個概念。

那先給大家看看一個 UI 元件庫的元件圖可能會長成什麼樣子:

https://ithelp.ithome.com.tw/upload/images/20210927/201207548mwKEsaEsm.png

簡易清晰一點的版本:
https://ithelp.ithome.com.tw/upload/images/20210927/20120754NpTpt8p3qG.png

大方向就是 介面(Interface) 會是基底,並連接許多元件,而單一元件不一定只會連接到一個介面,還是覺得看不清楚的沒關係,後續幾天會各自去介紹裡面的每個小區塊的!
簡易版的是我實作的版本,那其實還有很多介面是可以再抽出來的,就等全部介紹完再跟大家說說有哪些優化方向了!

這系列會怎麼介紹?

除了透過 UML 來介紹元件間的依賴關係之外,這個篇章還有一大重點是:

希望把所有(或至少會把九成的元件介紹一遍)會用到的 UI 元件介紹一輪,介紹的主要方向會是「開發者會預期怎麼去使用這些元件(也就是元件的 API 設計)」、「各個元件的使用情境(為什麼需要這些 UI 元件的,它們解決網站互動或呈現上的什麼需求)」。

小結

今天是新篇章,所以其實算是導覽的性質,帶大家理解 UML 的概念跟介紹我們會使用的 元件圖 (Component Diagram) 之後,明天開始就會一個個去畫這些圖並跟大家介紹了!

而在各家對元件分類的方式都不一樣的情況下,元件的 UML 也是可以不一樣的,該如何去規劃元件之間的關係跟封裝它們都沒有絕對,大原則就是團隊使用起來順手、有共識,或是文件要寫得好,避免使用者踩到一些莫名其妙的雷!

那就明天見囉!

References
https://app.diagrams.net/
https://hooo.medium.com/工作筆記-關於uml的一點小分享-a06cdd9d912d
http://tx.liberal.ntu.edu.tw/InfoMgt/Jx/IS_IM/uml.htm
https://ithelp.ithome.com.tw/articles/10223499
https://glj8989332.blogspot.com/2018/02/design-pattern-uml.html


上一篇
Day 11 - Design System x 實作 — Transition
下一篇
Day 13 - UML x Interface — Transition
系列文
關於 UI 元件你所該知道的事30

尚未有邦友留言

立即登入留言