轉職後三年，我過的如何？

2019 是我人生中的一個重大的轉捩點，由製造業品質工程課長卸任，來到了一個全新的領域「前端網頁開發」，也算是為了圓一個學生時期的夢想，如今我轉職三年了，我現在過的如何呢？

當初從 vue 開始，先寫著簡單的邏輯，和切切畫面作作一般的功能，後來開始接觸到 nuxt ，開始對專案的整體架構打開了眼睛，不過這個時候還是寫 JS 比較多，沒碰觸其它 web 開發週邊的東西。

後來輾轉到了一家要開發 angular 的公司，就開始我的 typescrip 、Rxjs 的學習之旅。但因有 nuxt 的專案結構想法，所以在學習上也變的比較快速，也嘗試的把過去好的經驗，帶入到 angular 的結構中，過程中和前輩的討論，也學習了不少的知識。

然後因為開發環境是本地端，所以就不得不學點 …

1. 啟一個 docker
2. build 一個 socket server 和介接
3. 設定本地 nginx，申請 ssl 憑證
4. 開發時要會查看一下 db 的資料 table
5. 抓 bug 的時候要了解更多的 deploy flow 和 script 的用法
6. 作 ssr 所以需要寫一點點 node.js，處理 render 機制
7. 當然還有一瑣碎的東西，也是經過這路，我才更了解到要用好一個網站，效能、SEO、cache 機制 … etc ，實在是沒有這麼的容易，

下面我來分享一下，我覺得開發中很重要的東東

coding style

自己的 coding style 剛開始在寫專案的時候，常常會發生，才過個幾個月回去看自己寫的 code 就想要吐血的情況，很常是因為下面的幾點：

1. 看不懂自己的邏輯
2. 命名不精準
3. 用過多的變數
4. 操作行為不統一

這樣子的情況多半來自，對語言還不熟悉，解決的方法也都是偏奇怪。然後為了開發快一點，所以在命名變數上不放心思，所以常常導至痛恨幾個月前的自己。

另一種就是因為經驗不足的關係，因此總是想著用定義變數去控制狀態，這個本身沒有錯，但是定義過多的變數，甚至還有重複的意義，讓整個流程變的複雜，不好維護最後變成了悲劇。

之後在寫了一陣子後，開始有了開發老梗，像是如果要拿 array 最後一個值

[1, 2, 3, 4, 5].slice(-1)[0]; // 是不是看起來有一點點乾淨

等等之類的老梗越來越多的時候，發開也變的越來越順利，也開始形成了自已的 coding style

coding style tool

那大家一起開發，不免一定會有習慣不同的地方，那怎麼樣子能在最快的時間統整，也能加速大家的開發效率。下面有幾個 tool 是好棒棒的必會的：

1. Husky https://ithelp.ithome.com.tw/articles/10278411
2. pretty
3. ESLint
4. VScode 的 setting file

專案結構

一個好的專案結構讓你上天堂，不好的專案結構讓你想回家睡覺

剛開始寫的時候，常常看到前輩光是用想的，就能猜到 bug 在那裡，那時覺得神奇到不行，自己只能從 code 的一行一行中 console.log 來看問題，光釐清問題的時間就多出了不少。到了後來才慢慢發現，寫 code 的當下是要思緒萬千的，要考慮到很多不同的情況，還要把很多不必要的事情避免，一個小小的腦子真要要想好多的事情阿。

後來才了解到，專案的邏輯歸一，讓行為變的簡單，是能讓你馬上理清楚問題所在的唯一途徑。

在商業邏輯中對應到你的專案，一定會有重複 or 共用的地方，如果是常常在不同的地方放著一樣的邏輯，未來的你一定也會討厭過去的你。

能共用的就共用，不能共用的就不要勉強共用

之前也是為了要寫一個 component ，但是因為沒思考好它真正的用途，所以就一直加了很多的判斷，看起 component 好像很強大，不過裡面的邏輯亂到一個不行，還為了迎合一些特別的狀態加入了一些，未來的我一定看不懂的邏輯。

這個專案結構也會因為所使用的不同技術，而有很大的差別。那 nuxt 是一個己經把大部分的結構作出來的一個框架，你只需要去遵循基本就不會差到那裡去，但是 vue 和 angular 就不是這樣子了，一個空空的骨架，需要一一的去建立。

單一且簡單的開發邏輯

前端的開發基本是看著 UIUX 的規格來去開發，所以會看行為也是一門大學問，有沒有辦法在一開始的時候就發現，未來開發上可能會遇到的坑。

Server Side Render

這一切的一切都是 SEO 惹得禍，為了可以被爬蟲找到，我們了解 header 中的屬性，還有需要把畫面作 cache ，或著完成一個高效的 SSR 。

現在的前端開發，已不在只有 html, css, javascript 和框架，還多包含的效能和 SEO 的問題，效能的問題也包含了 render 的速度，可否在第一時間讓使用者使用，那這個往往就會牽扯的到 server 端，現在 node 作為 server ，那一個前端框架不用 node ，所以了解 node 也變成了前端必需要知道的常識之一了。

我的老天鵝阿，阿不就是全端了嗎？

你要這樣子想也不是錯，但是 backend 也是有很多 backend 要去處理的事情，術業有專攻，前端主要還是會放在 render 效能和畫面上的處理。

總之來說…

code 最寫越覺得自己知道的很有限，但自己是頭都洗下去了，己無法回頭了

code 海無邊，回頭找不到岸

不過這路上，還是遇到不錯導師和朋友，開發的路上才不會覺得孤獨，有時候時間的壓力，和寫不出功能的時候，真的是壓力山大阿。所以人生在世一定要有幾位，大師級的朋友為你 support ，這路才走的下去阿，如果真的不行的話，還有一句話一定要聽進去。

「天下無難事，只要肯放棄」

有時候寫不出來的時候，不是你的問題，是你累了。你需起來走一走，睡個覺，講個廢話笑一笑，此時在回來看，你會發現你不小心 lose 了什麼重要的東西，然後這個坎就過了，所以結論就是…

「 code 要寫的好，覺要睡的飽阿」

這什麼結論…