胡謅前端工程化

工程

要理解前端工程化，首先要清晰工程的定義。而前端工程中的工程化實際上是屬於軟件工程化，何爲軟件工程，百度百科是這樣說的：「軟件工程是研究和應用如何以系統性的、規範化的、可定量的過程化方法去開發和維護軟件」。 其中工程的三個特性：

• 系統性
• 規範化
• 可定量

目前前端項目已經知足這三種特性，後面咱們一一介紹。

那麼工程的產物就是產品，而產品的特性就是：

• 功能性
• 可靠性
• 可用性
• 效率
• 可維護性
• 可移植性

前端工程化

接下來咱們要開始說一下前端工程化，先說一下前端的發展史（純我的觀點）。

階段一:靜態模板

技術棧：css + html + php

前期的前端主要是負責頁面開發、樣式調整，把寫好的頁面給到後端php，php再根據業務邏輯去動態化頁面邏輯。優點就是前端只須要關心頁面樣式，業務邏輯都交給後臺處理，這個時修並不涉及到seo等問題；缺點就是開發效率低，偶合性高，溝通成本高，須要兩邊人員同時去維護一個模塊。

階段二：jquery 等工具庫的出現， 讓前端開發更簡單。

技術棧： css + html + jquery/swiper + php/java

隨着前端的發展開始出現相似於jquery等等的工具庫，讓開發更簡單，封裝大量的工具庫，讓前端更高效。這個時候也開始出現先後端分離式開發，優點就是前端開發更高效，獨立維護本身的模塊，後端也能夠專一於本身負責的模塊。

隊段三：進入徹底先後端分離式開發 前端工程化

技術棧： 前端框架 + UI框架 + 後臺

至今，前端框架逐漸成熟，咱們開發不單單隻關心頁面功能以及樣式這樣簡單的問題，更多的時候咱們關心的更多，好比：如何讓開發更高效、如何進行頁面優化、如何作seo、如何管理項目、如何讓代碼更加規範化。。。，這個前端項目就已經工程化了。

這時候的前端項目就已經符合工程的三個特性，那咱們如何作好前端工程：

• 選擇開發框架，根據當前的業務需求與業務場景。（目前比流行的框架（vue/react/angular））
• 選擇UI框架，仍是根據當前的業務需求與業務場景。（好比說像已管理後臺的項目就能夠用antdesign或是element）.
• 選擇代碼管理工具（git）
• 選擇項目構建工具（jenkins / gitlab CI/CD）,集成測試，集成部署

隊段四：前端走向全棧化

技術棧： 前端框架 + UI框架 + 中間層 + node.js

這時候前端就像一個成年意氣風發的孩子，在各個領域中翩翩起舞而且婀娜多姿。

這個孩子不單單在移動端瀏覽器得瑟了，他還去了微信小程序，百度小程序等等各類小程序，最後仍是耐不住寂寞盯上了原生app, 那就是 flutter，憑着和dart親密的關係，咱們能夠搞定的，固然還有electron，桌面應用，不難能開發桌面應用，還能把html打包成桌面應用，棒棒噠。

說的有點題外話，如今的前端不只要懂 html、css、css3 、js 這麼簡單了 ，咱們要開始進化了，咱們還要懂前端性能優化、服務器渲染、構建部署、代碼規範、高併發、後臺開發、數據庫。。。。。。。

學無止鏡呀， 各位大佬們，且行且珍惜吧