「前端」這兩個字聽起來蠻酷的，似乎像是戰場的前線。前端的內容到底是甚麼?接下來就是我對這個名詞的理解，但其實圈子內對它的界定有時候差異會蠻大的，所以僅供參考喔!

前端可以分成「設計面」和「工程面」，職務上就區分為前端設計師、前端工程師。

設計面

「設計面」這部分呢，其實又包括了網頁介面的設計，例如主題顏色、風格、排版、使用動線等等，常見的工具有Photoshop, Sketch, Adobe XD 等等，那設計完成之後，當然就是真正布局到瀏覽器上的「切版」工作，這部分的工作就是看著設計出來的圖檔，使用 HTML & CSS 最大程度地還原在網頁上，會用到的工具常見有 Sublime, Visual Studio Code或者是比較老牌的DreamWeaver等等。前者通常職務上稱為「網頁設計師」，後者稱為「前端設計師」。

工程面

至於「前端工程師」呢，一言以蔽之就是在上述網頁layout的基礎之上，將真實的資料透過串接後端API的方式，注入到網頁中，並設計出前後端訊息交換的框架，以達到特定的一些功能。

所謂真正的資料常常是透過伺服器去資料庫取出來的，例如我們知道博客來網站上商品常常會更換，但在網站維護的實務上，不會每次有新商品要上架時，都需要前端設計師/工程師去修改撰寫好的網頁，而是只要讓網頁連接上資料庫，拿到最新的資料就好。一般商務網站常見的登入、瀏覽商品、購買等行為，也都是在大量的前後端訊息交換之中達到的。

這部分會用到的技術呢，就是大名鼎鼎的JavaScript了，這個程式語言，它可以選取、修改頁面上各個區塊元素，使得網站更加有變化，它可以偵測到使用者的滑鼠、鍵盤、滾動等行為，使得網站能與使用者「互動」，它也可以去呼叫後端資料（通常以json的格式傳到前端），拿到資料後進行處理放置到頁面上…

小節

總結一下，當有人稱呼自己為「前端XXX」時，我們可以進一步了解對方比較偏向「前端設計」還是「前端工程」。如果是設計，我們會期待他/她具備的就是 HTML & CSS 的能力，如果是工程，則是JavaScript甚至是其框架的使用能力。

前端是一個相對新興的區塊，傳統上比較不重視這塊，或者覺得可以分攤給後端們做一做就好。但團隊當中有沒有專職的前端設計、前端工程師，其實是可以從網站的細緻度推敲出來。

接下來我們會比較詳細地去談到前端各個技術環節，明天見囉！