隨著日新月異的資訊革新，越來越多以往未曾見過的職業漸漸誕生，而「前端工程師」這個職位也是其中之一，在大約 2010 年之前，其實有關網頁的工程師都被稱為 Web developer，而會導致 Front End(前端)工程師誕生的契機，個人認為是因 UI 與流程複雜度日益提高，以及 Github、npm 等平台橫空出世的關係，基本上就是因為有了「需求」而造就了「市場」，且嶄新的技術練也造就了合適發育的環境，說得更簡單一點，也就是來源於「科技始終於人性那句話」，更方便地控制，更簡寫的寫法，輕鬆簡單的架設，無一不讓我們能往資訊的領域更近一步地前行。

在社群媒體上有人曾討論過，現今的工程師非常幸福，因為大部分的程式與軟體均有封包或範例，我們可以藉由各式各樣的資源來完成或協助我們的工作，但也有人提出相反意見，因為實際上我們需要的知識儲備絕對是不減反增的，從最簡單的案例來說，就是在過去製作 RWD(響應式網頁設計) 並非是必要的技能而是加分項，但隨著時間的流逝，他成為了絕對的標配，也就是我們所必須要掌握的技能之一．

來總結一下前言的核心概念，前端網頁工程師這個職位，正站在巨人的肩膀上，因此即使在操作與開發上十分快速與方便，也仍有著不少的事務需學習，更友善的介面與更方便的操作，更甚也包括了 UI/UX 的思考等等，都是我們所應面對的課題。

前端開發基礎概念

網際網路發展概念

其實從我們常用的全球資訊網 WWW（World Wide Web）也就是 web 發展至今，以時間上來看不過短短二十多年而已，而說起網際網路的發源，往上追溯也不過是 1960 年代左右的事情，雖然中間有許多不同的發展方向，但追根結底後可以發現，他誕生的根本目的就是進行資料的傳遞運輸，更方便簡潔的操作，更安全高效的傳輸，正是體現了那句科技始終於人性的話語。

網路的基本概念

網路最直白的解釋，其實就是藉由線材來將個別的裝置進行連接，已完成設備之前的互相連結，而當有複數的裝置進行連結時，就可以被稱之為一個「網路」，而我們現在日常使用的無線網路，則是藉由某些設備或裝置(Wi-Fi)進行無限電的發送與接收，已完成所謂的資訊傳輸的動作。

而當中有趣的是，其實我們在使用 Google Search 查詢資料時，我們的請求是會藉由「網路」傳遞到 Google 總部或是其他所屬的設備，然後再回傳給我們相關的結果，而這一過程雖然非常的快速，但他實際上其實跑了一段非常遙遠的過程，而中間功不可沒的，就是埋藏在海中的「海底電纜」，這些海底電纜串接了全球的網路設備，並讓看起來十分困難的 WWW（World Wide Web）化為了現實。

海底電纜分布圖 - submarine cable map

其實也有人使用衛星等方式進行網路連結，但撇除掉訊號傳輸過遠導致速度緩慢之外，天氣因素等也會影響其發揮，因此目前我們正常都是使用海底電纜進行全球的網路連結。

前端基礎知識探索

使用語言

在前端開發的課堂中，我們將會著重學習三個主要使用的程式語言，第一個是 HTML(Hyper Text Markup Language)中文稱「超文字標示語言」，他主要負責網頁內容的資訊標記與傳達，第二個是 CSS(Cascading Style Sheets)中文稱階層是樣式表，他主要負責頁面 UI 的顯示樣式，而最後一個是所謂的 JavaScript 簡稱為 JS，他負責了網頁動態的行為與操作，在實際的網頁應用中，這三者的結合可說是缺一不可，HTML 作為最基本的骨架，在缺少的情況網頁將會是一片空白，而若沒有 CSS 的幫助，其實 HTML 也並沒有那麼方便供人閱讀，最後是讓一切操作化為可能的 JavaScript，小至聊天訊息發送大至帳號登入註冊，可以把他想像成完成大部分操作的根本，而目前頁面所使用的大部分架構(ex:React、Angular、Vue)，其實也是其所衍生的產物。

圖片上的 5 與 3 分別是 HTML5 與 CSS3，只是顯示目前使用的主流版本而已。

補充概念圖

純 HTML 只具有線稿結構	CSS 將賦予色彩與樣式等	JavaScript 將會提供額外控制

介紹網頁工作流程

一般我們在說所謂的系統開發時，通常都是指所謂的 Full Stack (全端)應用，而 Full Stack 所指的便是由 Front End(前端)、Back End(後端)與 Database(資料庫) 所構築起來的應用，可以把它想像成一間餐廳，美麗的店面與擺設，使用者的動線與餐廳的佈局等，都是前端(Front End)所負責的工作，而後端(Back End)則負責將廚房裡的各種食材(DATABASE)，組合加工成使用者所指定的餐點，最後再透過負責傳遞餐點的服務員(資料傳輸)，送至消費者的手上。

當然，並不是所有的網頁都需要後端與資料庫的支持，只是在缺少了這兩項應用的時候，我們變得無法提供較為動態的服務，但相對的，就如同部分企業的形象官網抑或是個人頁面等等，並非是所有的需求都依賴著後端，這裡可以把它想像成名勝古蹟與自然風景等，當只需要定期維護而非長期時，靜態官網也是一個相當好的選擇。

最後我們來說說雛形設計這塊，他其實並不會被歸納進 Full Stack 的應用，因為他就像是建築的設計圖一樣，且能與技術工程完全分離，但若想完成一個可良好操作且美觀的網站，一個好的設計圖是絕對不可或缺的。

基礎設計三步驟

• Wireframe 流程線稿設計 - 建立操作流程以確保功能頁面完善(工具或手繪)
• Mockup 視覺槁 - 完成畫面 UI 建置與設計指南(色票組、標題大小、設計風格等)
• Prototype 原型串接 - 完成操作流程串接

網頁工程師(包含前端後端)涵蓋內容解析

其實只要是從事網頁網站開發的，都可以被稱為「網頁工程師」(Web Developer)，因此這個群體可以說是非常龐大，但隨著各種應用的複雜度日漸攀升，當中的許多項目便慢慢地產生了明顯的分支，而導致分支的主要原因，個人認為是以開發的環境有著相當緊密的關係，以下就讓我們稍微解析一下個職位的工作項目吧。

前端網頁工程師

• 主要負責
  • 將使用者介面(UI)從設計轉換為網頁
  • 處理與後端的資料介接
  • 確認各瀏覽器的順利運行
  • 確認各裝置的順利運行
  • 優化使用者體驗
  • 優化操作效能
• 困難點
  • 前端技術的更新速度非常快速
  • 卡在設計與後端之間，需要較長進行協助溝通

後端網頁工程師

• 主要負責
  • 負責商務邏輯處理
  • 需設計與前端溝通的機制(API)
  • 優化傳輸速度或程式效能
  • 資訊安全機制
  • 與資料庫進行介接(可能有專門的資料庫工程師)
  • 確立伺服器端的運作正常(可能有專門的系統網路工程師)
• 困難點
  • 較為複雜的計算會在後端處理
  • 需面對資訊安全隱患

其實後端的困難點很容易根據專案需求異動，像大數據的工程師就需要面對演算法等等。