前端交付前的最後檢查 前面的篇幅大多在講工程師如何與設計師透過 Figma 合作，請設計師們配合產出文件，那 Figma 於工程師們可以有什麼價值呢？ 雖然進入...
今天我們來把系統文件完成，還剩下兩個流程點。 系統文件設計： 流程點二的實作很明顯是 switch case，於是我們可以使用 “分岔節點” 來繪製。 流程圖...
延續上一篇的需求， 一個全域的 Popup。功能有三： 可以輸入自訂的訊息 依照情境於關閉 Popup 時觸發不同的行為 Popup 有統一的 UI 系...
假設今天收到了一個需求，要在前端專案加入一個全域的 Popup。功能點有三： 可以輸入自訂的訊息 依照情境於關閉 Popup 時觸發不同的行為 Popup...
首先，為什麼需要系統設計文件? 的確，在某些開發周期短，人數少或是功能較單純的情境底下，可能有個單純的spec或是口頭溝通清楚就可以了。 但是，當今天討論到團隊...
前一篇文章我們畫出了使用者進入商品頁面的序列圖，今天我們要繼續完成序列圖。還差兩個功能，使用者過濾商品和前往商品明細頁，我們開始吧! 繪製序列圖 商品列表頁面...
今天我們要透過範例程式碼來畫出序列圖。範例包含一個商品列表Component(HTML,TS)，一個Service，以及一個Route檔案。 廢話不多說先上程式...
那麼該怎麼畫序列圖呢? 我們從序列圖使用到的圖形開始解釋。 序列圖(Sequence Diagram)中使用的圖形 首先呢，序列圖分成”X軸(橫)”和”Y軸(...
在第二篇文章中有提到系統流程圖就是像是咖啡廳的作業流程SOP，以前端開發的角度來解釋，系統流程圖的內容會包含使用者的操作行為以及專案的技術細節(生命週期，元件載...
類別圖是一種 UML (Unified Modeling Language) 中的靜態結構圖，主要用於呈現系統中的類別的靜態結構。類別圖中包含了該系統的類別、類...
ArchiMate 是一種用於描述企業架構的建模語言。ArchiMate 設計簡單易用，適合廣泛人群使用。任何參與復雜系統設計、規劃和管理的人都可以從學習 Ar...
ArchiMate 3.1 是企業架構建模語言的最新版本，是ArhciMate 3.0 的升級版，引入了一些新功能和改進。以下是ArhciMate 3.1 的概...
今天終於來到 UML 的最後一篇了，要來接著把沒介紹到的常見 UI 元件介紹完，那就廢話不囉唆直接進入正題！ Table 網頁中的大魔王 Table，作為呈...
前面把有依賴關係的 Component 都講一講之後，今天就來帶過其他的 UI 元件吧，因為想介紹的元件還有點多，因此會區分成兩天，今天主要講的是 Navig...
Button 是網頁中最常用的元件，跟他相依的元件和情境也不少，因此雖然他不是一個介面，依然還是可以把它單純抽出來介紹，下面的 UML 只是列舉了一個大概而已，...
上一章是在講跟 Input 相關的表單元件會使用 TextField 來給定表單會用到的 required, disabled, helperText 以及 l...
今天的 TextField 和明天的 FormControl 都是在介紹跟表單有關的介面和元件，而這主要是 Material-UI 實作的方式，在明天講完後，...
UML Notifier 的 UML 主要是根據 Ant Design 的設計畫出來的，而在 Material 那邊是只有 Snackbar（ = Messa...
UML Portal 是什麼？ 開始之前，先說一下 Portal 其實是 React 比較常用的 Pattern，因此非 React 使用者可以斟酌一下怎麼...
Intro 接下來幾天會逐個介紹 Components 之間可以共享的一些 Interfaces 和 能作為基底的 Base Components。 Inte...
今天再度要進入新的篇章啦！！！身為軟體工程師，想要設計出好的系統架構，或是綜觀地去理解系統的話，UML 都是不可或缺的，但我在轉職自學的過程中卻遲遲沒有碰到這個...
2023/04/05 更新: 為了避免本文章散落在不同網站，之後統一由部落格更新，再麻煩從部落格查看～ 在 DAY 1 ~ DAY 12 已經介紹了我認知常...
UML (統一建模語言)，對於所有學過 OOP 語言的人是一個耳熟能詳的圖表，UML, SysML, IDEF 都是建模語言，他們要做的事情其實都是在描述整個功...
學習Pattern之前，首先要學會看Class Diagram，以了解Pattern中物件與物件之間的關係是什麼，並且能快速套用Pattern在自己設計的D...
在進入Pattern的介紹之前，我覺得要先讓大家認識一下UML這個東西，尤其是Class Diagram，了解UML以後就可以更快的吸收一個程式是如何運作的...
UML 有四種表達 Entity 之間互動的圖，分別是: 狀態圖、時序圖、協作圖、活動圖，這次要介紹的是協作圖(Communication Diagram)，協...
時序圖 (Sequence Diagram, Timeline Diagram)，是 UML 底下的一種圖表，這種時序圖最常看見用在解釋 API 的執行工作順序...
課程目標了解什麼是微服務的架構以及使用 UML 塑模呈現從問題領域界定 Bounded Area 成?一個微服務單一微服務內部的組成分層結構了解幾個常用的微服務...
今天課程的重點就在「破」。 我們要突破前端工程師的框架，找到系統設計過程真正的關鍵點，並持續關注它，找到解決它的方法。 看一下這個系統從發想到設計細節的過程。...
今天先不講流水帳，來說說每個工程師或是PM都很頭痛的問題 那就是估時程!! 我想也許對資深工程師來說，應該不太是問題。 且慢， 資深? 資深的定義是? 身為軟體...
TC
艾瑞卡
Evans Wu
parkerhiphop027
髒桶子 York Lin
Mac Taylor
HLD
Ivan
szcjoker
iThome鐵人賽
看影片追技術