跳到主要內容

正式產品開發,技術框架的選擇


每次面對新的專案開始,對於開發者來說總是充滿了許多驚喜及幻象,總是幻想著該如何使用最新的架構在開發流程上,將這次的新開發專案,視為是一次的挑戰,一個可以讓開發者試刀的競技場。

對於技術的熱情及憧憬,總是無法避免,技術本位的我們,心中總是充滿了熱情及想法,看到許多好的框架,酷炫的套件庫總是會希望來上一回,但是火砲洋槍一開始使用時搞不清楚,不僅傷身,還會搞的自己灰頭土臉,更不用說實際上要用在動手殺敵上。

火砲洋槍,中華武術,那個好?

每次看到許多火力展示,洋槍大砲的面前展示,偶而來個酷炫的『成果展示』,總是讓我們底下看的目眩神迷,長官們看的拍手叫好,就只差一個起立敬禮。



但是對於實際要開發產品,這些 F-999, 阿趴器等新世代的武器到底是不適合我們? 這到底要怎麼評估!?

火砲洋槍炫技拆解

在激情過後,目眩神迷之後,我們關起門來,靜下心,重新旁敲側擊一下到底這火砲是怎麼跑得,這洋槍會不會傷身,畢竟中華武術五千多年,都是先講求不傷身在追求成效,否則頭緒沒有釐清,就成了七傷拳,傷人七分,傷己三分,這就不妙了。

炫技之餘,總是會有跡可尋,從開源專案來看,我們可以從大多數的 Readme 略知一二,到底這到底是什麼咚咚,以 react 我們就可以從開宗明義瞭解,

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

以及底下的段落可以略知, react 並不是一個框架來著,而是稱呼為 library ,同時也能夠和目前的專案整合使用,採用了所謂的 VIRTUAL DOM, one-way data flow 的概念。

當我們有了一些瞭解,也開始抓到一些 神秘的字眼

解開神秘的面紗

當抓到某些字眼,以及神秘的詞語時,再度將這些字串前往求尋 google, wiki 大神的幫助,讓我們再接下來閱讀文件時,這名詞的定義是什麼。

這時就可以瞭解,這洋槍到底是一把小手槍,還是一把火箭筒來著,至少定義上我們可以明確,也比較能夠瞭解,對於專案的導入是否適用。

文件及測試

我們可以視為前面的動作稱為『快速導覽』,接下來就是是否要採用套件的關鍵,從裡面文件是否充足,有哪些實際案例,範例展示。

如果是一個開源專案,從技術性上可以
  • test code 是否充足,能否執行
  • google , stackoverflow 是否有許多人討論
  • github 程式開發進度狀態
  • open source license 規範
等方向來瞭解是否符合專案需求,否則使用到一個 GPL 的專案,一旦被發現,就會知道 google 為什麼會有兩個 g。

POC (Prototype of concept)

最後,使用新技術,抓到核心應用,建立一個簡單的 POC ,透過實際的動手整合才會瞭解到底會有哪些窒礙難行之處。

這火箭筒到底是單兵操作即可,是否還要搭配一個強力支架才能運行,還是說已經有許多擴充元件可以搭配使用,這都必須要透過 POC 才能有個初步的評估及瞭解。

結論

對於炫技,神器總是會希望有朝一日拿在手上,揮舞一番,最好是能夠帶到場上殺敵打仗。但是很多時候等級不足,瞭解不夠,帶著神兵力器,最後殺敵也殺己,雖然成為了英雄,但是團隊的成員在這一路上,沒有戰死也半殘。

使用在正式服務的技術評估上,很多時候並不是炫為主,趨勢考量,而是綜觀希望成果,實際局面,技術成本,團隊成員等是需要綜合考量,也需要提供資源(時間,人力,研發,犯錯)的成本在其中。

資訊投資有賺有賠,開發前請詳閱 open source 說明書。

留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。