警告：本篇文章僅為表達自身觀點與想法，對於同行業人員沒有任何批判之意。

逐漸成熟的前端領域

我認為目前前端領域（此處指網頁開發）逐漸趨於成熟，前端框架採用元件化的中心思想與響應式機制，搭配框架特有的語法、開發手法與哲學，可以應付大部分的使用場景。目前大部分的改進是針對建構工具，例如透過 esbuild、vite、snowpack 來提高轉譯速度與開發體驗，或是在既有的框架上做各種優化，例如 vue3 推出 composition API、React 最近發表的 React Server Components，從各種層面上降低開發者的心智負擔。

另外一個趨勢則是瀏覽器與其他感測器、通訊協定的整合，像是 Web Serial API、Web Bluetooth、Web NFC 等等，透過瀏覽器的幫助，使用者不必再另外安裝軟體或是驅動程式，所有的操作都可以在網頁上解決。這類型的應用，網頁充其量只是一個外殼，不一定要好看外觀，只要能夠順利與裝置連線或互動即可。

另一方面，CSS 框架以及元件庫也都發展成熟，代表把網頁做好的門檻會越來越低，很多時候只是在 GitHub 上挑挑選選，找一個自己喜歡、用得順手的函式庫，修修程式碼而已。我感覺現在前端框架所能提供的功能，已經逐漸超越了大部分網頁所需要的，並不是每個網頁都是 Facebook、Netflix、Airbnb。

Translator

我感覺現在寫程式碼有點像是翻譯人員在做的事，把需求轉譯成程式碼，好一點加上測試與無障礙功能，但本質上幾乎與翻譯人員毫無區別。這類型的搬運工總有一天會被 AI 取代，或是讓工讀生搭配 AI 補助來寫程式碼。

我在之前直播時曾經用 Copilot 來寫 Vue3，雖然說直播內的功能比較陽春，所以參考價值可能沒有那麽高，但是看到 Copilot 產生的程式碼時，我還是覺得其發展性是值得讓人期待的。當這種簡單實作的程式碼可以交由 AI 幫忙的時候，我們就可以花更多時間在其他值得投注的事情上。

這是其他幾個使用 Copilot 的例子，都是 AI 自動產生的：

• 想要在 Serial 上印出當前的變數值，我只要宣告 buffer，Copilot 會根據這段函數的變數猜測我要印哪些東西

• AVR Timer 的設定：這需要看 datasheet 才知道要用哪個 register，Copilot 直接告訴你（雖然不是我想要的）

• 根據程式碼的片段跟函數，copilot 猜測我可能會想要一個 stop 函數，實作跟我想要的很接近

我知道會有人反駁說，但一切還是要回歸基礎啊！沒錯，對於基礎穩固的軟體工程師來說，這些都只是一種工具，只要抱持著正確的心態就不用害怕改變。但接下來是我覺得不舒服的地方。

網頁只是媒介

網頁開發上很多應用屬於「媒介」或是「載體」。例如，我想要在網路開線上商店賣商品，這時候網頁就是幫助你達成交易的工具，然而單憑一個線上商店網站而沒有商品是賣不了錢的；或許開發者可以寫出功能類似 Netflix 的網站，但沒有拍片、片場、後製、通路等，寫出了一個 Netflix 網站也一樣沒有使用者會買單；PCHome 網頁做得醜醜的，但是人家搞定了背後的物流追蹤、倉儲管理、金流等等，這些都是光憑一個網頁無法做出來的東西；部落格就算用了各種神奇炫砲的功能實作，如果沒有內容也一樣吸引不了讀者。

舉這些例子這是想要表達一件事，網頁很多時候只是媒介而已，對我來說光憑網頁本身要創造價值是非常困難的一件事，因為其價值是來自於背後的服務跟產品。

這件事情本身並沒有任何對錯，從網際網路誕生以來，網頁一直就是媒介這個角色，從來就沒有變過。然而對我來說，我開始對於媒介這件事感到憂慮，原因很簡單，我沒辦法直接創造價值。一旦有這種想法之後，我發現自己好像依賴在一個不穩健的沙塔一樣，說穿了有點像是不甘為人作嫁。我認同儘管身處於媒介的位置，也總有地方是值得改進的，也不代表媒介就是沒有價值，只是就像剛剛所說的，心裡的檻過不去而已。

網頁仰賴於巨大抽象化

網頁開發的本質涉及四大要素：HTML、CSS、JavaScript 以及瀏覽器。而 HTML、CSS、JavaScript 會如何發展則看各家瀏覽器廠商的實作。

對於開發者來說，只要知道 HTML 跟 CSS 的語法與規則，再搭配 JavaScript 就能夠開始撰寫網頁。剩下的部分交給瀏覽器來就好。HTML 怎麼渲染到螢幕上？JavaScript 如何被編譯？JIT 背後的實現是什麼？如何建立 HTTP 請求？影片如何編碼、解碼？這些不知道都沒關係，瀏覽器都會幫我們處理好。我想要再強調一次，有沒有理解這些事情從來就沒有對錯，就只是我心裡的檻過不去而已。然而我對這樣的抽象化感到焦慮，覺得自己只是在享用各種科技發展後的成果而已。我知道每個技術背後或多或少都具備了抽象化的概念，不然每個開發者都從機器語言寫算了，但仔細思考過後，我發現網頁的抽象化程度之高，真的令人歎為觀止。

網頁位於金字塔頂端

既然網頁仰賴於瀏覽器上，HTML、CSS、JavaScript 標準也是完全公開的，這代表任何的演進都需要等待提案、草案到決定標準，最後才是瀏覽器器實作。雖然 Chrome 時常領先其他瀏覽器，甚至是提供各種實驗性的 API ，但如果是平台限定的話也會大幅限制使用場景，前面舉例的 Bluetooth、NFC 等等，這些是好幾年前就存在東西，在其他平台上理所當然可以使用的東西，在網頁上開發者必須要等瀏覽器實作才能使用，技術的發展就有所侷限。

這種感覺很像新技術出現一段時間了，等到瀏覽器終於實作了之後很超級興奮，但其實其他人早就知道這個技術的存在，也早就應用到他們服務當中。

總結一下

歸納一下，我的焦慮來源來自於：

• 網頁多數只是「媒介」與「載體」，較難「直接」提供價值
• 前端領域發展趨於成熟
• 多數的程式碼只是 Translation，可以被 AI 取代
• 網頁本身依賴於巨大抽象化

價值的創造

我在價值這回事這篇文章中也有提過類似概念，一個廚房計時器只要外觀做得好看一樣，儘管功能簡單，但一樣能夠讓消費者買單（薄利多銷的商業模式是否具有價值不在討論範圍），但同樣的價格要讓使用者買個軟體有多麽困難。另外一個例子是我最近愛用的 SwitchBot，仔細觀察一下背後的運作也很簡單，透過具有藍芽功能的 SoC 連接，在跟手機 App 與各大服務做整合，就是一個優秀的 IoT 應用。

第一步

我希望自己可以更接近價值生產者的位置，近一年來我也一直在朝這個方向邁進。我的第一步，是往硬體或 IoT 應用研究。現在可以用非常便宜的價格買到 Arduino（中國製）、AVR chip、Raspberry Pi pico、STM32 等低功耗的單晶片，麵包板焊槍電子零件買一買馬上就能夠做實驗。

這一年下來老實說我也越來越迷惘了，一方面是這種以興趣開發的強度要跟產業內打滾許久的工程師比，想必還有一大段距離；另一方面我看了看相關領域的薪水（嵌入式？），實在低得是令人不想轉行。迷惘應該也是好事，至少現在的生活還有餘裕可以研究這些東西，而且還能用這麼便宜的價格買到，實在是謝天謝地。

仔細想一想自己唯一的優勢大概就是在高職時學的東西幾乎都能夠用上吧，暫存器、多工解多工、加法器，這些電路在高職時已經被摧殘很多遍；電晶體、放大電路、振盪器、整流、諧振，這些當初拿來考試用的東西，到現在才發現有多麽珍貴。

第二步

我的第二步，是試著讓實驗電路更接近成品的型態，跑去學了基本的 3D 列印與 Fusion360 拉 3D 模型，試著了解 PCB 的製作。例如之前為了理解靜電容鍵盤的原理，自己嘗試設計了 PCB 並印出成品來。

後來發現電路有誤，只好先暫停進度之外，整個過程理解之後才發現沒有想像中的那麼困難，只是需要花時間跟耐心去熟悉整個流程而已，其實就跟任何領域一樣。最近還有其他的事情需要忙，等到告一段落之後就能夠繼續進行了，希望有天能實際看到成品。

第三步：軟硬整合

前面有提到網頁的技術發展侷限於瀏覽器實作，因此最近也試著尋找可能性更高的平台。目前是以 Macbook 及 iPhone 當作日常開發設備與手機，因此從 iOS 入門。影片當中是我用 Bluetooth 模組與 Macbook 做連接，將目前番茄鐘的狀態與電腦連動，可以直接在電腦上控制狀態，不需要用瀏覽器包一層，直接透過 CoreBluetooth 連接即可。

這邊的例子雖然很簡單，電路看起來也醜醜的，但我想要表達的概念是，軟硬整合（或是 IoT 整合）能夠進一步提升價值。原本容易被忽略的番茄鐘通知，可以透過物理的蜂鳴器、LED 顯示來解決，套用到其他應用上也是如此。

第四步

第四步是試著理解 Linux kernel，雖然比較小型的應用使用像 AVR 這種的單晶片就能處理，但也有多數嵌入式應用是基於 Linux kernel 上，或是撰寫 driver 來驅動。

這一步對我來說還有點遠。

下一步

老實說我也不知道下一步該怎麼做，如果知道的話歡迎在 Twitter 上跟我說。

這樣看下來，我對價值的定義很像「有形狀」的東西？現階段來說的確如此，相對於軟體，我認為這些東西更容易創造價值。不過，像是機器學習、AI 應用、遊戲開發、資料科學、剪輯軟體，這類型的應用雖然是軟體，但對我來說都可以直接產生價值。雖然寫 UI 互動還是很開心，但也該是時候往其他領域瞧瞧了。