好像很多人對工程師的想像都是埋首寫程式，
不用講話，寫程式就好了～
但其實前端工程師真的不是只有寫程式而已，
會遇到很多合作的對象，需要溝通，
也會不同階段是除了程式之外的事
今天我就分享一下前端工程師的工作日常吧。

在介紹之前，我先定義一下我分享的“前端工程師”，
市面上(?)的前端工程師，其實工作範圍依據每間公司負責的範圍都不太相同，
有的公司可能會是設計＋切版，叫做前端畫面設計師，
有些公司可能會切版一個人負責，前端邏輯串接又有一個人負責，
我現在做的工作，工作的範圍是 ”切版＋邏輯串接“

在一個專案開始時，前端的角色和位置會是怎麼樣呢？

前端加入專案的時間點

通常前端工程師會開始正式進到一個專案，大部分是已經有初步的畫面流程(wireframe, UI flow)了，需要把目前的需求畫面給實作端（包含UI設計師、前後端工程師）確認有沒有問題，或需要一些實作上的建議咨詢。

階段1 流程確認

這個階段通常會由PM、UX規劃師(也有可能由PM自己做、或UI設計師負責)講述目前網站的規劃，讓接下來要具體實作的專案人員(設計師、工程師)，確認目前的規劃是否有問題。通常在這樣的階段，前端工程師可以從幾個面向注意整體規劃是否有提到這些面向

1.動態資料與靜態資料

畫面上有哪些資料是固定就是這幾項，打死不會變；有哪些資料現在是動態的，動態的話，動態的來源是什麼？是PM會提供一份動態資料list還是要從哪裡取得這些動態的資料
Ex. 我有網站裡面有提供5個模式給使用者做設定，那這5個模式是固定的嗎？還是每個使用者會有不同的5個模式？那如果依據使用者有不同的5個模式，我要怎麼知道總共有哪些模式呢？

2.各種不同狀態的流程考量

包含空狀態、資料多的狀態、除了正常流程外，如果例外流程怎麼處理、錯誤狀態該是怎麼樣的流程。
Ex. 正常流程是當使用者拖曳jpg或png就歸類到圖檔，拖曳到zip就屬於檔案，那這時候就要問如果拖曳了一個doc檔案，那這時候會發生什麼事？
除了理想流程外，例外狀況的流程也是要在過程中要思考的

3.有表單就要注意表單填寫的最大最小值及檢核條件

表單都會有input, select, checkbox, ratio button, textarea..等等組合而成，其中必填選填、預設值、可以輸入的最大值、還有表單中要檢核哪些欄位，都是要注意的

4.在流程或呈現規劃上給予可能是技術面或過去經驗的建議參考

在規劃網站的時候有很多種方式可以達到類似的目的，但有些時候可能需要考慮到不同方式的優缺點，根據優缺點去選擇更適合的方式是哪一個。這個也可以前端技術面都可以在會議中提出給大家參考的
eg. 列表頁面資料多時，可以用頁碼 或 infinite scroll（往下滑再長出資料)，如果用頁碼的話要用點擊的才能到下一頁，也許跟滑動的方式比較起來是沒有這麼順手；infinite scroll雖然滑動很順手，但如果我要看到最後一筆資料，又沒有搜尋功能使用者就要一直滑到底才看得到。那到底哪個適合使用者的情為？

5.前後端的分工

有些邏輯要做在前端還是後端，這個也是要注意的。如：頁面的排序是後端把全部給前端，前端在做排序嗎？還是我們給排序的條件，由後端排序完之後再給前端呢？

階段2 與UI設計師溝通 - 設計與切版

在流程確認後，GUI出圖後，前端這邊會就會可以進到切版，這個階段就是跟UI設計師溝通的階段，包含整畫面是否都有缺漏、合作的方式。
通常設計上很常會缺漏的會是同一個資料不同狀態的定義
Ex.資料超過一行應該要...還是折行、沒有資料的畫面呈現、loading畫面等等

階段3 與後端工程師溝通 - API規格、前後端分工

在開API規格前，除了討論哪些邏輯是由前端或後端負責，
通常也會討論到後端傳給前端的規格要怎麼給比較好開發或有利後續維護，
接著等後端把API開好後，我們就可以再往下一個階段前進～

API開好後，我們就可以開始開發了嗎？NONONO別心急
還有什麼該做的事呢？明天我們再帶大家繼續看下去囉～～