前端工程化

2021-10-19 02:09:02 字數 3678 閱讀 6107

很久沒寫過部落格沉澱下,最近看了幾篇前端工程化的文章,結合自己實踐所學,闡述下什麼是前端工程化。

大前端其實分為很多種

本篇主要是說下web前端的工程化

在回答前端工程化這個問題之前,我們應該先考慮另外乙個問題:前端開發中會不會涉及到業務?再詳細一點,就是前端工程師到底需不需要了解服務端的業務邏輯,再或者說,要不要將一部分服務端的業務邏輯放到前端來實現。這個問題沒有標準的答案,實際上應該屬於工程協作問題,就是誰該幹什麼的問題。

最早的前端開發就是實現頁面,頂多再寫寫js讓頁面可以有互動的特效。屬於前後端未分離的時代。

前端工程化的主要目標就是解放生產力、提高生產效率。通過制定一系列的規範,借助工具和框架解決前端開發以及前後端協作過程中的痛點和難度問題。

一切以提高效率、降低成本、質量保證為目的手段都使工程化

注意,工程化不是某個工具,工具化只是實現工程化的方式,如vue-cli。node對前端工程化起了非常大的作用

首先前端工程化是把軟體工程相關的方法和思想應用到前端開發中。

狹義上的理解:將開發階段的**發布到生產環境,包含:構建,分支管理,自動化測試,部署

廣義上理解:前端工程化應該包含從編碼開始到發布,執行和維護階段

也有人把前端工程化等同於效率工程

認為一切能提公升前端開發效率、提高前端應用質量的方法和工具都是前端工程化,我覺得這麼理解也是沒有問題的,提公升開發效率、提公升產品質量、降低開發難度、降低企業成本應該是工程化的意義所在。

前端工程化可以分成四個方面來說,分別為模組化元件化規範化自動化

模組化是指將乙個檔案拆分成多個相互依賴的檔案,最後進行統一的打包和載入,這樣能夠很好的保證高效的多人協作。其中包含

不同於模組化,模組化是對檔案、對**和資源拆分,而元件化則是對 ui 層面的拆分。

通常,我們會需要對頁面進行拆分,將其拆分成乙個乙個的零件,然後分別去實現這乙個個零件,最後再進行組裝。 在我們的實際業務開發中,對於元件的拆分我們需要做不同程度的考量,其中主要包括細粒度通用性這兩塊的考慮。 對於業務元件,你更多需要考量的是針對你負責業務線的乙個適用度,即你設計的業務元件是否成為你當前業務的 「通用」 元件。

正所謂無規矩不成方圓,一些好的規範則能很好的幫助我們對專案進行良好的開發管理。規範化指的是我們在工程開發初期以及開發期間制定的系列規範,其中又包含了

從最早先的 grunt、gulp 等,再到目前的 webpack、parcel。這些自動化工具在自動化合併、構建、打包都能為我們節省很多任務作。而這些只是前端自動化其中的一部分,前端自動化還包含了持續整合、自動化測試等方方面面。

以上就是我所了解的前端工程化,以工程的角度去理解我們的web前端。工程是工程,而不是某項技術。

很久沒寫過部落格沉澱下,最近看了幾篇前端工程化的文章,結合自己實踐所學,闡述下什麼是前端工程化。

大前端其實分為很多種

本篇主要是說下web前端的工程化

在回答前端工程化這個問題之前,我們應該先考慮另外乙個問題:前端開發中會不會涉及到業務?再詳細一點,就是前端工程師到底需不需要了解服務端的業務邏輯,再或者說,要不要將一部分服務端的業務邏輯放到前端來實現。這個問題沒有標準的答案,實際上應該屬於工程協作問題,就是誰該幹什麼的問題。

最早的前端開發就是實現頁面,頂多再寫寫js讓頁面可以有互動的特效。屬於前後端未分離的時代。

前端工程化的主要目標就是解放生產力、提高生產效率。通過制定一系列的規範,借助工具和框架解決前端開發以及前後端協作過程中的痛點和難度問題。

一切以提高效率、降低成本、質量保證為目的手段都使工程化

注意,工程化不是某個工具,工具化只是實現工程化的方式,如vue-cli。node對前端工程化起了非常大的作用

首先前端工程化是把軟體工程相關的方法和思想應用到前端開發中。

狹義上的理解:將開發階段的**發布到生產環境,包含:構建,分支管理,自動化測試,部署

廣義上理解:前端工程化應該包含從編碼開始到發布,執行和維護階段

也有人把前端工程化等同於效率工程

認為一切能提公升前端開發效率、提高前端應用質量的方法和工具都是前端工程化,我覺得這麼理解也是沒有問題的,提公升開發效率、提公升產品質量、降低開發難度、降低企業成本應該是工程化的意義所在。

前端工程化可以分成四個方面來說,分別為模組化元件化規範化自動化

模組化是指將乙個檔案拆分成多個相互依賴的檔案,最後進行統一的打包和載入,這樣能夠很好的保證高效的多人協作。其中包含

不同於模組化,模組化是對檔案、對**和資源拆分,而元件化則是對 ui 層面的拆分。

通常,我們會需要對頁面進行拆分,將其拆分成乙個乙個的零件,然後分別去實現這乙個個零件,最後再進行組裝。 在我們的實際業務開發中,對於元件的拆分我們需要做不同程度的考量,其中主要包括細粒度通用性這兩塊的考慮。 對於業務元件,你更多需要考量的是針對你負責業務線的乙個適用度,即你設計的業務元件是否成為你當前業務的 「通用」 元件。

正所謂無規矩不成方圓,一些好的規範則能很好的幫助我們對專案進行良好的開發管理。規範化指的是我們在工程開發初期以及開發期間制定的系列規範,其中又包含了

從最早先的 grunt、gulp 等,再到目前的 webpack、parcel。這些自動化工具在自動化合併、構建、打包都能為我們節省很多任務作。而這些只是前端自動化其中的一部分,前端自動化還包含了持續整合、自動化測試等方方面面。

以上就是我所了解的前端工程化,以工程的角度去理解我們的web前端。工程是工程,而不是某項技術。

前端工程化

為什麼出現了前端工程化?09年之前,我們學習的css,div,js只是對頁面設計進行乙個打輔助的功能,當時只能勉強的成為頁面設計師,為什麼會出現前端工程師 1.突然間前端的需求逐漸增多,使用者對介面的要求越來越高,前端範疇越來越大。2.前後端總是保持一致才能進行開發,不能分開開發,提出前端工程化,也...

前端工程化

一 什麼是前端工程化 根據業務特點,將前端開發流程規範化 標準化 包括開發流程 技術選型,規範,構建發布等用於提公升前端工程師開發效率和 質量,提高產品的質量。實現前端工程化的目的 就是通過流程規範 自動化工具來提公升前端的開發效率 效能 質量 多人協作能力以及開發體驗。前端工程化體系分為 元件化 ...

前端工程化

老大考慮到團隊成員學習的曲線,最終選擇thunk 為了更方便團隊人員使用,封裝直接的thunk,和cobinereducer 1 專案分為四大塊,服務治理,資源治理,診斷除錯,分析管理 幾十個元件,不可能將所有的狀態解除安裝乙個reducer裡面來管理 不利於維護 然後因為封裝了元件thunk所以要...