一個簡單後台的開發經驗

這個心得呢,是因為公司(WAPOS)在這個月被賣掉了,產品的開發已經移交給新公司的團隊,所以趁還有記憶的時候做個總結,不然以後都忘光光就後悔也來不及了。

我負責開發的是管理後台,非常典型的管理後台。任務就是CRUD商品、訂單、庫存等等所有商家都會有的資訊。基本上沒有什麼複雜的功能,目標是提供給商家最好的UX,順暢的管理他們的資料。我們有研究過同類型產品的後台,大多一看就是停在10年前的風格,所以也是希望能用跟得上時代的設計吸引到客戶。

這段兩年多的開發經驗很可能是我這輩子最愉悅的,以後不大可能有同樣的機會了。這是因為大部分的事情我可以決定,不太需要顧慮什麼。比方說技術的選擇。另外,library 的版本也是想升就升,例如我看到 react-router v4 的新寫法,馬上就覺得超棒,立刻就升級改寫法。這也是非常快樂。

我前端技術選擇的主幹是 React + MobX 。MobX 的好處是讓我開發時寫的 code 比用 Redux 少很多,壞處是要讓 MobX 的 magic 有作用,有一些細節要注意,而且其實會感覺比較在寫Vue,而不是正統 React。甚至 MobX 的 obserable 物件可以同時 import 到不同的 React Component 裡去,component之間要共用 state 不用靠 context。

也因為跟主流的寫法不同,我一直覺得我用 React + MobX 寫的 code 很不乾淨,component 裡面有個物件從裡面操控很奇怪,所以一直想換成 Redux。直到 Hooks 的出現, Hooks 也是從「裡面」控制 component 的感覺,我不舒服的心結才打開。

我們是小小的新創團隊,只有 2 個人力在寫這個後台。我的夥伴負責 DevOps的部分,而我只需要專心寫前端,不用管(我完全不懂的)server。也因為這麼少的人力,我們是能「外包」就外包。

除了很一般的用很多 open source library ,像是 Bootstrap ,我們也買了一些不便宜的UI,像是ag-grid 。作為一個管理後台,對資料清單的操作可以說是核心的功能, ag-grid 很好的滿足了我們的需求。另外,使用者登入我們用 auth0,圖片的縮圖我們用 imgix,這些都節省了我們很多時間。

其實,更大的挑戰是,我還有正職工作。WAPOS 這邊,我只有在下班後的時間才能開發,一天只有3 ~ 4個小時,週末有沒有時間不一定。所以,可以說是沒有一分鐘可以浪費。幸好的是,當開發的人只有一個人時,有很多有利的條件,讓我一個人開發的速度能跟一個小團隊不相上下。

大家比較熟知的是可以節省大量的溝通時間。開會,寫文件都不必了。我們唯一而且重要的開發文件是 DB schema。除了省下溝通時間以外,一人開發在每個環節都可以選用最方便的方式開發,「互相配合」。例如,後台吐的資料結構,可以設計成最方便前端使用的。

設計師跟前端工程師的配合也是如此。設計師的設計,往往最多能配合到工程師「做得出來」,當設計處在做得出來但是有點麻煩的狀態下,是不會要設計師改設計的。另外,設計師也往往想嘗試新設計,不會嚴格只使用現有的UI元件,這時工程師就又不能使用以前寫好的東西了。

因為這個後台的設計師就是我,所以上述浪費時間的狀況就當然不會出現了。我是直接用 Bootstrap 的元件去排,設計完成時就是實作完成。不但省下畫設計圖的時間,實作不方便的設計也沒有機會出現。

現在,這段旅程已經告一段落。對我來說,實作別人的設計不如自己做設計開心。不過我的設計能力當然是不如專業的設計師,所以是不會有機會領薪水這樣做的,這段開心的經驗,也只能放在回憶裡了。