iT邦幫忙

第 11 屆 iThome 鐵人賽

3
Modern Web

深入現代前端開發系列 第 31

[番外篇] 什麼是好的程式碼、UI?

這個問題和前端似乎沒有太大的關聯,但對於工程師來說卻是相當重要的課題。我們在追求好的程式碼之前,都應該先想想看,什麼叫做好的程式碼。

但也不用把這個問題想得太刁鑽,或是覺得一定有什麼規則要遵守的,因為對於每個開發者來說或許都有不同的答案。

對我來說,好的程式碼或許可以用語言來類比:

  • 可以清楚表達自己的意思。
  • 有豐富的語法可以表達廣泛的情境。
  • 不容易造成歧義
  • 有簡單的規則可循
  • 容易學習、被他人理解

恩,看起來似乎比較具體一點了,不過把每個敘述更加深入的話,又會發現更多可以探討的問題:

  • 什麼叫做清楚表達自己的意思?
  • 怎樣的程式碼容易造成歧義
  • ...

而每個開發者對好的程式碼或許又有不同的認知,想要在團隊中建立共識又更加困難了。在早期有 JSLint,但隨著 JavaScript 生態圈的工具蓬勃發展,JSLint 已經不敷需求,後來逐漸衍伸出各種規範與工具,像是 eslint、prettier、stylelint 等等,以及之中著名的 Airbnb styleguide,雖然不代表用這些工具就能保證程式碼一級棒從此不出錯,但可以從各大專案與團隊當中觀摩好的程式碼看起來是怎樣的。

但是儘管 eslint 可以幫你抓分行、長度、switch 要記得加上 default 等等,也不代表把這些事情做好就叫做好的程式碼對吧。

倒也不是要有個清楚明確的定義,隨著產品的迭代一定會有不適合的程式碼或架構,我們能做的就是多累積經驗。

那麼,挪用到前端的話,怎樣算是好的 UI 呢?

前面我們花了很多篇幅來介紹現代前端的手法與 UI 要考慮的事情,但把這些事情考慮進去後就變成好 UI 了嗎?顯然不是,像是 lazy loading、無限滾動等等的手法並不適用在每個場景當中,那麼怎樣才是比較好的 UI、程式碼呢?這個問題或許還沒有答案,就算在前端已經演化到用 React、Vue 等等的框架建構 UI,或許下一個 10 年就有更新穎且更好的架構出現。


上一篇
Day30 前端當中的錯誤處理
下一篇
[番外篇] 再談 Redux
系列文
深入現代前端開發32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言