小白也能聽懂的前端工程化
前端工程化最近也是被很多公司或者企業都用起來了，變成了一個很火的名詞，所以我就好奇一下中間的前因後果是怎麼樣的
01 前言
前端工程化這個方面的內容我也是近年來才聽到的一個信息，我一聽就覺得十分地高大上，什麼時候前端開始變成了一個工程化的層面了？不過現在隨着技術的更新換代我逐漸相信前端的發展了。之前覺得驚訝的時候，我還是大家認爲前端該乾的事情——切圖，套模板。
本文就和大家扯一下前端工程化的前世今生，沒有技術在裏面。大家可以帶着好奇的心情閱讀。
02 前端開發？切圖？
其實之前對於前端的概念基本上是沒有的，那時候很多招的就是後端的開發，所以java的開發就很喫香了，差不多站到了鄙視鏈的頂端。那爲什麼我不去學後端呢？因爲我（後）相（端）信（太）前（難）端（了）的發展。
所以沒辦法，我就隨便找個其他的學一下，由於美工不好那就找前端吧！有點東西還可以馬上出效果。
前端歷史
不得不承認的是，現在前端經歷了兩次的重生。纔有今天突飛猛進的發展，第一次是從靜態網站變成了動態網站；第二次就是Node.js的推出，可以使腳本語言JavaScript運行在服務器端，這可是解放了生產力，讓前端不再卑微了。
很多人都覺得動態網站不是很早就有了嗎？一開始我也是這麼覺得的，畢竟寫一個腳本就可以讓頁面動起來，但是這裏說的動態可不是這個意思，是可以與用戶進行交互了。大家可以想想看之前的前端歷史，無非就是把幾個頁面模板拼湊起來，然後使用js加上幾個動畫，就會覺得你的網站不得了了。那時候的網站基本上是沒有交互的，就是給別人看的頁面，僅此而已。
有時候你辛苦調試出來的一個完美的頁面，發給同學朋友看的時候，頁面也可能會亂。沒錯，那個就是不兼容的時代，會讓每一個前端抓狂的時代，而現在就不一樣了，很多框架都幫你弄好了，很少會有兼容的問題。
開發模式
由於本人是沒有經歷過前後端混合的開發模式，我開始學習前端的時候，vue和elementui這些都已經出來了，所以我就跟高興晚出生了幾年，讓前人們幫我們這羣人鋪平了前端道路。
當我谷歌了前端工程化了之後，發現之前的開始模式是比較混亂的，也是沒有很強的邏輯在裏面的。大概的開發模式就是切一下圖，把設計的部分做了和寫一下腳本（相信大家都知道dreamweaver這個軟件，既可網頁設計也能寫前端代碼）。然後頁面模板就交給後端來做，前後端混合在一起，耦合性非常高。這真的就是牽一髮而動全身的局面。相信大家都知道大名鼎鼎的JSP了，我在大學的時候也學了這個，基本上沒什麼用（下一屆取消這門課程）。
後來後端就忍不住了，你這前端的東西啥玩意，零碎的很，又毫無邏輯可言。
好吧，前端本着背鍋的心態啃了這塊骨頭，把所有頁面相關的東西都給了前端，後端就負責發給我數據就好了。這就是上面提到的動態網站的開始，這得益於Ajax的誕生。從此以後前端的工作就不用去切圖了，你的工作就變成了怎麼搞模板，設計與美化頁面的工作了。
03 前端工程化
之前我們開發完了頁面之後，剩下的就等後端來給你數據了。但是你前端的開發快了，但是後端的接口跟不上啊，這可怎麼辦？聰明的前端就想出了“假數據”這個東西，就是我先把數據自己模擬出來，你後端就必須按照我的格式給我返回數據（與後端溝通好格式）。
這不，出了很多數據模擬的工具，比如easymock等。大家可以脫離後端的控制單飛了，我們可以把這個項目同步進行開發，每一個過程都是完整可交付的狀態，可以隨時給客戶演示這個過程而不用等後端的接口。項目組一看，前端做的不錯（升職加薪）。但是這和工程化的概念還很遠呢，我們知道項目大概可以分成四部分：設計，開發，測試，部署。
設計
這裏的設計主要是由產品經理與UI設計一起，設計這款產品的願景以及要實現的功能，簡單一點就是把用戶需求的功能通過產品設計出來，交給開發。
前端就主要通過產品頁面的評估，主要是評估開發週期以及項目的難度，然後是技術棧的選擇。後端會對系統進行架構設計，包括系統接口，權限控制，性能，可維護可複用等的設計。基本上前後端設計的都是關於技術類型的。
開發
接下來就會進行開發的狀態，根據需求進行開發。這個階段就要注意一些小功能的開發，是否可以通過所有的測試用例。不知道大家是否聽過敏捷開發的技術，這是一種高效的模式，確保開發的過程中每個部分的功能都可以使用。他的初衷就是能夠高效地開發迭代，快速地轉變用戶需求。前端的組件化、模塊化的設計就是能夠保證敏捷開發的前提。
測試
測試的作用就是進行小範圍的對功能本身的驗證，一般來說會有很多測試用例，只有你通過了所有的用例測試之後就可以進行下一部的操作。測試是直接面向用戶的，這時候就站在用戶的角度去體驗這個產品，把用戶可能出現的操作都測試一遍看服務或者數據是否正常，前端工程師是主要責任人。通常可能還會包含壓力測試等，用來測試產品的性能，這時候就是後端的主要責任。
部署
部署的流程就是一個很重要的一部分，假如前期的工作做得不夠好，項目上線之後可能會遇到很多問題，讓你難以定位問題出在哪，項目難以維護等。前後端分離的開發模式可以有效的減少故障的發生，能夠快速定位問題，解決問題。其實這裏也是得益於單元測試以及項目工程拆分的過程。
這裏的部署可以把一些靜態的文件部署到靜態服務器或者CDN，把涉及數據交互的放在web服務器，做到類似“讀寫分離”的功能，能夠最大程度提升性能。
在開發的過程中就可以使用前後端分離的開發模式，這是一種與技術無關的模式，就是一種工程思維的考量。很多面試都會問你談談前端工程化的理解，其實無非就是爲什麼有前端工程化、怎麼做纔可以、有什麼好處等。基本上這就是一種工程的思維，與技術的關係不大。總的來說有以下三個優點：
- 並行開發，縮短開發週期
- 快速定位問題，迅速解決問題
- 部署可以動靜分離，簡化流程，提升程序的健壯性
04 小結
其實我發現一些書籍把前端工程化的概念講的很深，比如可能會說前端的打包工具、持續集成等。當然這也是前端工程化的一部分，簡單來說它的核心就是“解耦”，讓之前的糾結不清的脈絡重新整理出來，變成一個可維護可複用的狀態。
總結一下前端工程化就是爲了簡化開發流程，並行開發，互不影響且能夠方便合併整個項目。核心目標就是建立一種開發環境，提升整體的開發效率。
