June 6, 2019

前端工程師半年紀錄

負責專案 | 設計師 & PM | 心態


文 / Siddharam 西打藍

前言


明天就是端午節了,在回家的路上,突然想寫下這半年來,擔任前端工程師時的種種想法,希望能給後進者一些方向,也為自己的人生做個紀錄。怕自己太發散,還是先列出大綱:

1. 負責專案

2. 同事間的合作

3. 進步之路

4. 心態

5. 工作之外


負責專案


A:還記得剛進公司的第一個專案,就是官網的徵才頁面,相當適合練手,所以就丟給我了。

技術棧:Gulp、mustache

公司是用 GitLab 而不是常用的 GitHub,這時才知道,GitLab 中的 issue 有一定的命名方式,和 branch 命名息息相關,而 Wiki 通常用做專案知識分享, ReadMe 則會教你如何啟動專案。

而我在專案採到的第一個笨坑,就是看不懂 gulp,也不去看 README,所以搞了半天專案都沒啟起來哈。

官網算是相對單純的專案,只有職缺有接 API,剩下的就是純粹的靜態網站。而 mustache 是用來解決簡繁英三語的問題,透過 gulp 分別引入三種語言的 json 檔,嵌入 html 中。

B:過了幾周,另一個持續做到現在的專案出現,是金控公司的理財機器人專案。

技術棧:D3、jsp(Java)

這個專案算是開了眼界,原來 java 是用類似模板的方式在寫前端。另外就是本公司其他專案都在使用的圖表工具,D3。它能客製化做出以前 word 常用的圖表,甚至是複雜圖表。

C:中間插進來一個小專案,是一大屏幕系統,可以讓工廠管理者知道物流以及存貨進度,寬度約為兩台大螢幕寬,無須 RWD,裡頭一半是圖表顯示。

技術棧:Vue、Jinja、Vue-ECharts

這是我第一次使用 Vue 框架,對比 React 來說,學習難度的確下降許多,甚至要比原生操作還容易,支援的套件也很多,並能優雅的寫出可重複利用的組件。jinja 則是 python 的模板引擎。

D:最近的分析機器人專案,直白來說,就是問卷、身分驗證、圖表的綜合體專案。

技術棧:Vue、Vee-Validate、Vue-ECharts

這和上一則專案用的工具很像,不一樣的地方是,這次專案從環境建置到結束,有八九成都是我自行完成的,而且是個兩周要完成的急件。光是 Vue CLI2 的 Router 和 SCSS Loader 就花了我一下午的時間建置,幸好近期已完成核心功能,只剩細節需要收尾。這個專案非常感謝我們的資深前端,每天幫我做 Code Review,提升我對 Vue 的掌握度。

同事間的合作


A:前端工程師

目前只有在 Vue 相關的專案上有合作,我們會先把 component 拆分完畢,然後各自選擇要做的部分,最後在透過 git 來合併。

通常會由一位資深帶初階工程師來合作專案,每次完成一項 issue,就會讓資深工程師檢查程式碼,目的是讓整份專案的 coding style 維持一致,也順帶提升初階工程師的 coding 能力。

B:後端工程師

幾乎每個專案都會有合作的後端工程師,最基本的就是開 API 給你,讓你存取資料庫中的資料。前端通常透過 AJAX、AXIOS、FETCH 來存取,其中需要溝通的部分是 JSON 格式,取得的資料要陣列、物件還是字串包裹,都可以由前端事先想好,就可以先在本地模擬假資料,等到後端完成 API 後,就能直接存取使用。

C:UI/UX 設計師

目前合作的設計軟體有兩種,一是 Zeplin,二是 figma,個人比較喜歡 figma,因為自由度高,又能共編,分層的方式也比較直覺。

合作的時候,工程師可以主動提出參考作法給設計師知道,還有某些效果會花費的預估時間,這都能讓設計師更了解工程製作邏輯,也有助於讓案子在時程之內完成。

D:專案經理(PM)、行銷

普遍工程師對 PM 都是又愛又恨,恨的地方是,他總是會塞滿任務給你,愛的地方是,他會是你和客戶之間的潤滑劑,會幫你擋掉不合理的需求和時程。我們公司在專案結束後,PM 都會請工程師和設計師吃頓大餐,感謝這次的合作。

進步之路


一開始,我以為所謂的進步,就是懂得更多的工具,例如 webpack、vuex 等等,前幾個月才發現設計模式(design pattern)的重要性。設計模式是一種在開發中,解決難題的方法,而要如何聰明的解答,就需要懂得設計模式,雖然直覺上的解法最容易,但經過前人整理認證過的解決方式,才能讓你寫程式的功力大增。軟體界有一段經典名言:「你程式寫得再爛,電腦都看得懂,但重要是要人看得懂。」

在近期,寫程式也會依循著該語言的建議模式來寫,例如 SASS BEM 或是 Vue guide,這能提高程式碼的統一性,有助於其他人看懂你的程式碼。

心態


一直以來,我都是按照自己的節奏來寫程式,喜歡把任務拆成很小很小的任務,寫在筆記本上,每解決一個就打一個勾,遇到解決不了的問題,也因為拆的很小,很容易在網路上就能得到解答,或是得到同事的支援,這種方式也讓我有很大的滿足感,感覺今天做了許多事,學了不少東西。

工作之外


因為一直挺喜歡寫文章,所以下班後還弄了個部落格,紀錄一下工作上的所得,希望轉職當工程師後,還能繼續寫字。

此外,我也花了時間接些案子,有活動頁面,也有官方網站,等到完全結案後,可以寫一篇接案心得。此外,近期也會和合作的設計師,一起做個作品,也趁機學些工作上不會用到的技術。


閱讀量




技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: