教你開發出不會被後端吐槽的前端版型

洧杰 已發佈 2019-10-16

當 UI 提供給你設計稿,你轉換為前端介面後,下一個步驟就是轉給後端工程師開發成動態應用程式,有些剛涉入前端工作沒多久的新人在不瞭解後端邏輯時,在溝通上容易有障礙,分享幾個觀念給各位,讓你減少被吐槽的機會。

我將會以下圖的產品列表當做案例解說:

設計版型時要考量當內容變多時,也能自適應延伸

以右側產品列表為例,很多人都會設計這樣的結構,每個 <li> 都有客製的 class 與對應的 CSS,請不要這樣,因為你根本不清楚右側產品列表會有幾項產品,假使會有 20 項以上你的網頁不就掛掉了?所以你必須在 CSS 選擇器上在.product li來指定樣式,同時確保在內容變多時也能自適應從上到下排列才是。

你可能會想說,我跟企劃討論過,這裡一頁只會出現 20 個產品,那我寫客製化 20 個 class 不也可以解決問題?但這樣你會搞死後端啊,後端在從資料庫撈資料時,還必須針對你這個 class 名稱去客製化,每新增一個產品就要數字加一,無形之間也增加後端的 loading,如果不想讓後端討厭你,會跑迴圈的資料請盡量讓裡面的 class 保持固定名稱。

<ul class="product">
  <li class="list-1"></li>
  <li class="list-2"></li>
  <li class="list-3"></li>
  <li class="list-3"></li>
</ul>

語意要寫清楚,不要全部都寫 div

以右側產品列表的其中一個產品,如果你寫成這樣,後端一定會討厭你,或是默默將你列入黑名單。

<div class="product">
  <div class="box">
      <div><img src=""></div>
  <div>經典漢堡</div>
    <div>$120</div>
<div><a href="#">加入購物車</a></div>
  </div>
            <div class="box">
      <div><img src=""></div>
  <div>經典漢堡</div>
    <div>$120</div>
<div><a href="#">加入購物車</a></div>
  </div>
</div>

縮排不正確,看不出來誰是第一層誰是第二層,然後 class 推敲不出來前後關係性,HTML 標籤完全看不出語意,然後亂下 div,不管任何元素全部都用 div 搞定,以前的我就是這樣排版給後端被念到臭頭,較好的方式是下面這樣。

<ul class="product">
  <li class="product-item">
    <img src="">
    <h2>經典漢堡</h2>
    <span>$120</span>
    <a href="#">加入購物車</a>
  </li>
  <li class="product-item">
    <img src="">
    <h2>經典漢堡</h2>
    <span>$120</span>
    <a href="#">加入購物車</a>
  </li>
</ul>

自己比較看看,如果是你,會希望拿到哪份前端程式碼呢,答案應該呼之欲出了吧。

瞭解樣版語言

請去瞭解一個樣版語言 (Template Language),當後端拿到你的前端程式碼時,也會拆解版型,將共用的版型獨立成一個檔案,例如叫做 layout.php,其它頁面都會載入到 layout.php,舉例來說,你做了 30個網頁,如果表頭要新增一個文字,只要改那隻 layout.php 就好,不需要改 30頁。

如果你不懂後端,至少要自己用 Gulp 學一個樣版語言,這樣當後端問你哪些範圍要設計成 Layout,你才知道該如何回應他。較常見的樣版語言有 pugslim、Haml。

前後端合作細節

以 API 為例好了,有時候後端在組 JSON 時,可能因為一些限制,導致較難從資料庫整出你想要的結構,這時就必須討論彼此都好做的方式。

但還是會有些東西是前後端都必須做的,就是「資料驗證」,例如填寫 E-mail 格式,當前端就已經寫錯,就必須用 JS 回饋他寫錯必須重寫。有些人都以為前端寫完,後端就不用寫了,這是錯誤的。因為使用者的瀏覽器五花八門,它就是有辦法繞過你的 JS 去傳送,或是用像是 Postman、curl 方式去傳資料到後端就能繞過前端,不可不防。

有些時候一定會遇到些問題是前端比較好處理,後端比較難做的時候,亦或相反,這時就相互溝通,彼此協助提昇工作效率。

投入一個後端語言

有很多朋友聽完我以上的建議,還是覺得他們跟後端的問題相當多,我個人建議你就試著學一個後端語言吧,這真的才是一勞永逸的方法。希望用 JS 寫後端可以選 Node.js,或是 PHP + MySQL、Ruby、.NET + MSSQL。

要你投入不是要你成為後端工程師,你是為了以後能夠跟每位後端合作都能溝通順暢才投資的。現在學習資源相當豐富,如果看書看文章都覺得不夠,現在中文線上課程也很多,每天看個三十分鐘,不到一個月練習就能瞭解大概的輪廓,最起碼瞭解到後端語言如何與資料庫介接,並顯示到網頁上就相當足夠了。

關於筆者

暱稱:洧杰

介紹:六角學院校長,熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。