iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
14
Modern Web

前端工程師養成手冊系列 第 7

寫爛 CODE 是學程式必經之路

在我進公司寫程式的時候,前幾年都覺得自己在產出一堆噁爛的 CODE,業界還有一個術語叫做「義大利麵的程式碼」,意思就是你寫的 CODE 就像是麵條雜亂交錯,完全無法看出你的程式脈絡。

尤其是網站要準備上線時我就會特別緊張,都會想拉同事幫忙看一下能不能這樣寫。

阿杜:「靠北只要可以動就好了,管那麼多幹嘛??」
我:「.....」

設計師同事:「嗯..你網頁跟我設計稿很一致啊,應該沒有什麼問題吧?」
我:「喔....」

於是乎網站上線三個月後相安無事還譏笑我顧慮太多!!!

可惡你們都不懂我內心的糾結,我裡面下的 CSS 程式碼都從網路上複製亂貼亂測試,網路上說這樣就能兼容 IE6、7、8 我就傻呼呼的貼上去也沒問題?那時候流行 table 排版,裡面的結構 table 包 table 包 table 巢狀到不行你們也覺得沒關係?我 jQuery 效果亂貼跑馬燈就出來,問我怎麼寫?我只會跟妳說就這六行 jQ CODE 跟一個 CSS 載入就會動,你說原理哦?不好意思他 CSS 寫得很外星語言我完全看不懂欸。

以致於剛進公司前幾年的上線網站都不敢跟人說那些是我做的,深怕別人會打開原始碼,然後恥笑我的 CODE,恥笑公司怎麼會請到這麼巢的人來做網頁排版。

相信各位在開始學寫程式的時候,也一定會有我以上的心路歷程,那麼到底該如何調整心態度過這段時期呢?就讓我娓娓道來吧。

自己要先寫出爛 CODE 才知道要怎麼改進

寫程式同時也是培養邏輯的過程,以網頁排版來說你學了 HTML、CSS ,可能在網頁排版邏輯並沒有融會貫通,自己實作出個網站。JavaScript 學了一些流程控制、變數函數,自己硬幹出一個超陽春版的 todolist 代辦清單,雖然當下你都會覺得自己做得東西超爛,但你確實靠自己的想法做出一個「可以正常運作的東西」,更重要的是當東西做出來,才有辦法去優化,思考下一步要如何擴充功能,或做完後去搜尋其它人是怎麼寫的並加以練習。

所以我都會跟初學者說,你們就放心寫爛 CODE 吧!一位成功的資深工程師的背後都有著一堆爛 CODE,再從中去思考如何讓自己更好,沒有人天生就是天才,信手拈來就寫出一行行好 CODE,所以拋棄你的羞恥心,初期先以「先求有再求好」的心態來學習程式吧!

不要還不會走就想學飛

比較常見的例子就是 HTML、CSS 還沒實際做出一個版型就想直接用 Bootstrap,或是 JavaScript 才剛會 變數、if、for 等基本語法,就想直接學 SPA 框架 (vue、react、angular)。

以前我也會這樣,當社群上有人分享他開發的習慣與設計模式後,我就依樣畫葫蘆去模仿,然後還洋洋得意地以為自己功力大幅提昇。但實際用幾天後才發現,裡面有太多抽象的設計模式需要理解,或是你的專案根本不需要用到如此複雜的開發架構,導致自己痛不欲生。

所以會建議不要好高騖遠,好好地打穩基礎功才是王道,所以每當有人問我前端趨勢是哪些時,介紹完後我都還是會耳提面命地說,先把基礎功學好吧。要用 CSS 框架,至少底層的 CSS3 media queries 瞭解響應式原理,你才知道當版型有超出預期的調整時,自己也能寫 CSS 去客製,想學 JS SPA 框架,至少先把 AJAX 原理搞熟、知道網址 router 邏輯、JS執行生命週期再去碰才不會覺得各種觀念卡卡。

透過專案時程壓力來練功

當我培育線上學生投入到一個我認可的階段時,我都會建議他們盡快去就職將能力培養起來。

有時候透過自學你所能涉獵的範圍有限,例如一個專案從開始到結束的過程、跨部門溝通,更重要的是程式碼也會比較全面,在公司你要做的東西絕大部分都在做別人的產品服務,在功能邏輯也會比較複雜,吸收得東西也會比較多。

那在公司執行專案確保東西能如期交付,通常都會去壓時程,例如設計師要花二天設計與跟客戶確認,網頁切版 N 天,後端套程式 N 天。在時間有限的情況下,才能督促自己提升程式開發能力。

常常會有學生問說:「老師我想用 XX 框架,你覺得我可以在下個專案上用用看嗎?」

我都會建議說想試試看都 ok,但不要一口氣在一個專案用太多新技術,以免變數太多,像我在開發新專案時,至少七成是我有把握的東西,其中三成就會是最近我吸收的新技巧,想透過專案來使用他們提升我的程式功力。在時間壓力之下,學習效果自然會被逼得更好。

當然,你要全盤投入新技術在專案上也不是不行,個人覺得在開發程式時,也是在培養一種「我就是有辦法將這個系統依照我的技術觀打造起來」的自信,在決定導入前,先把一些重要的邏輯設計先設計出一個雛形 MVP,確認 ok 就放手去幹吧。

那時程被拖延到怎麼辦呢?當然是自己加班補起來啊,如果是你自己壓得時程但自己錯估時程,本來原本技術就可以做好的事情,因為你投入新技術導致時程延宕,那就是你自己的責任。但這也能讓你培養起「瞭解自己的學習投入狀況,並評估工作時程的能力」,這樣一來在專案跑個好幾輪樣流程後,功力絕對大增。

適時重構,重新檢視自身不足

在公司一定會遇到時間很趕,但又必須有產出的時候。以我來說,正常開發時程我就會用我自己擅長且又正規的寫法來寫,都會考慮到程式品質與未來靈活彈性的狀況。但當時間少時,你自然會以所有功能都先有,連命名都超懶、完全不管任何品質,反正可以跑就好。雖然在時間允許之下你還是會瞬間寫出正規的 CODE,但絕大部分都還是相當的骯髒。

在這過程中也是對自己能力不足的照妖鏡,你可以發現自己在哪些細節上還有待加強的空間。例如對物件導向不熟悉、或是 CSS 模組設計上的脈絡,表示你對那些東西沒有真正內化到自己的心裡。

所以在公司沒有很忙得時候,我還是會自主研究自己已經上線的爛 CODE,去思考我哪裡還有進步的空間。唯有自主發現自身不足之處,才有辦法讓自己更好。


上一篇
盡早培養「自主解決問題」的能力
下一篇
程式寫不好,是不是我沒天份?
系列文
前端工程師養成手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
r567tw
iT邦研究生 5 級 ‧ 2017-12-10 01:16:39

有一套程式碼,經過了許多程式工程師維護,有可能當時的時程壓力或者當時工程師功力緣故,導致程式碼後續的維護困難及擴充不易,我們稱之為「歷史包袱」(不知道可不可以叫技術債?!),不知道您怎麼看待這樣的事情,身為工程師或者公司應該如何避免?! 做為菜鳥工程師的我.....其實也好像這樣子XDDD 等到一陣子學習到了一些新東西或被刺激到甚麼新視野,才發現自己以為當時寫得是功德一件;但好像是垃圾和包袱哈哈,但好像也來不及了~總覺先天不足,後天失調之感~~ 難道這也是您說的寫爛CODE 是必經之路嗎 QQ......總之,這難道都無法避免嗎? 只能等待經驗一步一步提升與挑整,然後有空的時候回去重構?!

廖洧杰 iT邦高手 2 級 ‧ 2017-12-10 01:40:19 檢舉

如果是被很多工程師經手的 CODE,你試圖修改他,則是「修改別人的屍體」,一間公司若是存活更久,裡頭也一定會有很多屍體是你需要經手的,算是還蠻常見的事情,這是沒辦法避免的 XD 若你轉職想要做一些新產品,應該是在面試的時候詢問面試官進去公司的投入項目是哪些,是開發新項目居多還是修改屍體,再從對方的說詞來去評估。

初期寫爛 CODE 是很正常的,你一定會發現自己在寫某項邏輯時都很卡卡,先挑出一些問題重複性高的壞味道,再從中改善會比較有效率,也會讓你在下個專案會更好 :D

0
棉花
iT邦新手 4 級 ‧ 2018-01-03 09:27:15

目前工作在開發新產品時,上頭要求直接拿舊的程式來改,加上時程不斷地被縮短
導致開發時完全沒有規劃,只能邊寫程式邊規劃流程
結果直到上線後才發現流程本身有瑕疵,或是一些舊系統的包袱被繼承過來
客戶打回來罵,上頭的又怪罪下來
最後搞到裡外不是人

現在聽到這些關鍵字,就知道又是個坑了
"這些以前就有寫過,直接拿來用"
"這案子時程比較趕,先能動就好"
"這不是OO系統就有的功能嗎? 直接複製過來用就好了"
"這案子很簡單,應該不用太多時間"

目前工作包山包海,全端、DBA、網管、畫面設計、系統分析
薪水不到3萬

好熟悉得對話呀!!!!!!

棉花 iT邦新手 4 級 ‧ 2020-04-01 15:06:08 檢舉

電腦達人 那案子花了一年多開發,最後沒客戶想用

雖然很垃圾
但這是往更高的地方爬的糧食
其實有這樣的經驗很棒真的

0
照燒
iT邦新手 4 級 ‧ 2022-08-03 11:01:52

其實以前我也很認真學clean code,而且經過數次的敏捷與各種開發討論(mvc mvp mvvm),這樣的打滾努力,讓我到現在還有小掙扎,還是會手癢查一下。
不過,之前跟國外朋友工作與討論之後,過去這些觀點真的,我只想說已經有更好的做法,但通常是各個公司的機密,雖然最近已經有拿出來賣的公司,code跟打洞卡一樣,就是學生時代練習的東西而已,你還是需要知道好的程式碼怎麼寫,但你未來工作真不該浪份時間擔心手動讓程式碼串接問題,如果一個公司還在大量手打code,難逃最終是一大坨爛code,除非你沒有新成員、人不會走、文件齊全、人人時間充足、各個一目卍行。

我要留言

立即登入留言