iT邦幫忙

15

前端工程師如何與團隊合作

kurotanshi 4 年前15492 瀏覽

延續前一篇的內容,今天我們來聊聊前端工程師如何團隊合作。
前端開發位於整個網站開發流程的中游地帶。前面有視覺/UI設計師設計好整個網站的樣式,後頭有後端(伺服器端)工程師負責資料來源。


source: 那些mockup沒告訴你的事@WebConf.tw 2013 by Adam Wang

而前端工程師的定位就是要與這兩者溝通 (這只是初略概分,實際上你可能還會遇到 企劃/PM/SA...等),然後<del>讓水流出來</del>,讓網頁及效果正確地呈現。

Round 1 企劃 + 設計對前端:

在最初的規劃階段,其實重點只有一個:不斷溝通,持續調整

企劃/PM 先出整個網站的框架圖(Wireframe),前端人員看到元素、頁面後快速做出 Prototyping。大部分的調整都盡量在這個時期,這個時候由於製作草圖的時間較短,就算整組砍掉重練也比較不那麼痛。


source: Instant wireframes

這個時候,推薦像是 middlemanBootstrapfireappMoreText 等好用的工具軟體都能幫助前端工程師快速製作 Prototyping,而且產生出來的程式碼大多在往後也都還可以繼續沿用。完成後再依照視覺出的 Mockup 進行切版,即使往後畫面可能會變,但資料欄位則固定不變。

Round 2 前端對後端:

這個時候前端人員要做的事情,不外乎是切版、套版、Web UI 動態效果開發等等。

這階段的重點在減少前/後端雙方耦合後端只負責提供內容(資料),前端則是把拿到的資料放在正確的地方,以及開發對應的效果。
雙方先定義好 API,確定好要傳遞的參數,回傳值等等的資訊,至於資料的格式是用 JSON、XML 或者是直接從後端生成的 HTML,只要溝通好即可。如此一來,就算後端功能還沒開發,前端開發人員也可以自行塞假資料進行模擬及測試。

這邊稍微提一下,雖然前端開發者不太需要深入去了解後端資料庫存取的細節,
但如果前端開發人員越熟悉後端開發語言及流程,在往後的除錯以及程式優化的時程絕對能夠大幅降低。

Round 3 前端對前端:

接著來談談同為前端開發成員之間的合作問題。
前端合作最常出現的問題之一: A 工程師寫了一段 CSS; B 工程師也寫了另一段 CSS,單獨看各自的網頁都很完美。然而某天,當 A 工程師的頁面需要套用 B 工程師寫好的 CSS 元件時,問題來了。B 工程師的 CSS 樣式是直接套用 h1, p, div 這樣的 HTML tag selector,這種時候就最容易出現樣式汙染

在前端合作時要避免這類問題,需改用 .class, #id 來套用樣式,不同的組件不要取同樣的類別名稱。而需要重複使用的元件,則可以將它提取出至另一隻共用的 CSS 中,以達到程式的重複利用。

單獨使用的元件,開發上相對自由許多,只要名稱不要重複,就可以避免衝突。
但因為也有可能由他人接手維護,所以在開發前,團隊應約定一套規範,成員遵守規範開發,並補上必要的註解,這樣一來也就可以省掉許多不必要的麻煩。

結語

上述的分享其實在實際的情況都只是冰山一角,其實團隊合作最困難的地方不是技術,而是人與人之間的溝通

只要團隊開發依循訂定好的規範,成員能力不要落差懸殊,程式開發都不會有什麼太大的問題。反倒是由於彼此個性、習慣,說話方式都可能有所不同,難免會發生衝突,如果處理不當,帶著情緒工作影響開發進度,那就不好了。

成員間彼此信任,視覺設計多關心網頁與平面設計的差異,前端多與設計、後端溝通彼此之間的看法。資料由後端提供,使用介面由前端負責。大家分工,彼此尊重。人與人之間的相處都遠比技術層面的問題來得重要許多。


推薦閱讀:
* 前端與設計如何真心合作 by TonyQ
* 用原型驅動設計@webconf by Justin Lee
* 那些mockup沒告訴你的事@WebConf.tw 2013 by Adam Wang


0
ted99tw
iT邦研究生 1 級 ‧ 4 年前

喜歡喜歡喜歡喜歡喜歡

讚啦~~~

0
chibc
iT邦新手 3 級 ‧ 4 年前

喔喔喔,我要來抄筆記!!

ted99tw iT邦研究生 1 級 ‧ 4 年前 檢舉

總裁有很多支筆,可以跟他借~打嗑睡

總裁 iT邦好手 1 級 ‧ 4 年前 檢舉

Yes

0
老鷹(eagle)
iT邦高手 1 級 ‧ 4 年前

大大文章俺要來收藏了~~!筆記謝謝

0
terencemak
iT邦新手 4 級 ‧ 4 年前

這正正就是MVC的重點啊(握拳)讚

我要留言

立即登入留言