你是怎麼理解前端工程化的?

2020-11-29 酷扯兒

本文轉載自【微信公眾號:前端人,ID:FrontendPeople】經微信公眾號授權轉載,如需轉載與原文作者聯繫

什麼是前端工程化?

工程化是一種思想,而不是某種技術。其主要目的為了提高效率和降低成本,即提高開發過程中的開發效率,減少不必要的重複工作時間等

慄子

要蓋一棟大樓,假如我們不進行工程化的考量那就是一上來踮起瓦刀、磚塊就開幹,直到把大樓壘起來,這樣做往往意味著中間會出現錯誤,要推倒重來或是蓋好以後結構有問題但又不知道出現在哪誰的責任甚至會在某一天轟然倒塌。

那我們如果用工程化的思想去做,就會先畫圖紙、確定結構、確定用料和預算以及工期,另外需要用到什麼工種多少人等等,我們會先打地基再建框架再填充牆體這樣最後建立起來的高樓才是穩固的合規的,什麼地方出了問題我們也能找到源頭和負責人。

前端工程化需要考慮什麼?

應該從模塊化、組件化、規範化、自動化4個方面去思考

模塊化

模塊化就是把一個大的文件,拆分成多個相互依賴的小文件,按一個個模塊來劃分

組件化

頁面上所有的東西都可以看成組件,頁面是個大型組件,可以拆成若干個中型組件,然後中型組件還可以再拆,拆成若干個小型組件

組件化≠模塊化。模塊化只是在文件層面上,對代碼和資源的拆分;組件化是在設計層面上,對於UI的拆分 目前市場上的組件化的框架,主要的有Vue,React,Angular2

規範化

在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規範有

目錄結構的制定編碼規範前後端接口規範文檔規範組件管理Git分支管理Commit描述規範定期codeReview視覺圖標規範自動化

也就是簡單重複的工作交給機器來做,自動化也就是有很多自動化工具代替我們來完成,例如持續集成、自動化構建、自動化部署、自動化測試等等

相關焦點

  • 你應該知道的前端小知識
    10.前端工程化一提到前端工程化很多人想到的都是webpack,這是不對的,webpack僅僅是前端工程化中的一環。在整個工程化過程中他幫我們解決了絕大多數的問題,但並沒有解決所有問題。前端工程化是通過工具提升效率,降低成本的一種手段。
  • 上微前端後,我司的祖傳代碼有救了
    近日,我們採訪了愛奇藝資深前端工程師楊昊一老師,了解到更多微前端在愛奇藝號的落地情況。 InfoQ:有人說,微前端這個概念是由後端引入的,你怎麼看?楊昊一: 微前端其實是現代前端框架發展到一定程度時自然產生的一個方案,不能說完全是由後端引入的。只不過是恰巧世界上解決這類問題的大方法殊途同歸,借鑑了後端微服務的一些理念應用到了前端,成為了微前端。
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    不知從何時起,前端開發變成一件工程化的事情,曾經的紅極一時的Jquery如今也慢慢退出歷史的舞臺,取而代之的是更前沿的技術;前端框架層出不窮,Angular 2+,React + Redux,Dojo 2,Vue。。。等等,太多了,那我們如何在這繁雜的框架中選擇一個合適的呢?
  • 前端工程化以及如何通過Node.js中babel來編譯es6模塊化代碼
    模塊化 ,CommonJS 適用於伺服器端的 Javascript 模塊化並不統一 ,還是比較亂 ,後來ES6 語法規範中,在語言層面上定義了 ES6 模塊化規範,就形成了大一統的模塊化規範 - ES6模塊化ES6模塊化規範中定義:每個 js 文件都是一個獨立的模塊.導入模塊成員使用 import 關鍵字暴露模塊成員使用 export 關鍵字之後就形成了前端工程化下面在
  • Web前端和後端有什麼區別(上)
    關於Web前端與後端之間有什麼區別呢,下面有小編帶你了解一下,相信看完本文你會有新的理解。 一.定義不同 一般來說,我們把網站分為前端和後端。前端主要負責頁面展示,後端是業務邏輯的實現。
  • 科班出身零基礎轉行做前端的一些經歷
    前端學完,我期望達到一個怎麼樣的薪資水平? 我覺得在轉行的時候定一個薪資對於轉行有幫助薪資,對於自己轉行有幫助的 熟悉頁面布局並能進行搭建2.熟練使用js,掌握vue,react框架3.能對用戶需求和用戶體驗有一定的了解要有人去指導,其實這個我好像談了無數次,現在一個新手想要全部通過自己學習前端,並且找到工作,首先這種可能性非常的小,如果誰能單憑自己一個人的力量自學前端找到工作,那麼這個人一定是一個人才,但是這種人只有1%,所以一定要有一個可以幫你解決小問題的人,不然會走很多彎路,得不償失。
  • 妹子你這是走在時尚的前端啊,這麼單薄的褲子你怎麼好意思穿出門
    3、騎自行車的時候一定要記住先檢查4、我錯了,我下次再也不敢搶你的吃的了!5、手法嫻熟,這卑微的樣子讓我看到了愛情6、這是什麼7、貓:你是不是太自作多情了,我還用你救麼,看我的。8、自拍的妹子傷不起了,可憐了兩個小妹妹9、我不出聲,就當配合你的表演10、攝像的,你是怎麼跟上的?趁橋不注意麼?11、哈哈哈哈哈!好尷尬啊~!!!!!
  • Web前端是做什麼的?
    Web前端開發工程師是一個相對較新的行業,在國內外真正開始受到關注不到5年。Web前端的發展是從網頁製作演變而來的,其名稱具有明顯的時代特徵。網際網路的演化過程中,網頁製作是Web1.0時代的產物,當網站的主要內容是靜態的時候,用戶使用網站的行為多數也只是瀏覽。
  • 簡單粗暴理解與實現機器學習之邏輯回歸:邏輯回歸介紹、應用場景...
    所以接下來我們回憶之前的線性回歸預測結果我們用均方誤差衡量,那如果對於邏輯回歸,我們預測的結果不對該怎麼去衡量這個損失呢?我們來看這樣一張圖。那麼如何去衡量邏輯回歸的預測結果與真實結果的差異呢?損失以及優化1、損失邏輯回歸的損失,稱之為對數似然損失,公式如下:分開類別:怎麼理解單個的式子呢?
  • SDCC 2015前端專場札記:Facebook、百度、騰訊、美團、餓了麼等...
    其中20日的前端開發專場,現場聽講人數一度爆滿,而沒有機會親臨現場的童鞋們,我們特邀請了業內專家、與會者分享他們的聽課感受及他們眼中的前端專場。以下是來自AdMaster前端高級工程師劉越凡參加前端開發專場的聽課札記,以饗讀者。
  • 如何理解射頻前端模組的「價值密度」?
    如何理解射頻前端模組的「價值密度」? 半導體行業觀察 發表於 2020-12-03 17:08:02 射頻前端的「價值密度」 既然5G手機PCB面積是受限制的資源,同時我們需要在5G手機內「擠入」更多的射頻功能器件,因此我們評價每一類型射頻器件時
  • Web前端和後端有什麼區別(下)
    由於前臺界面的數據都來自後臺,如果能點後臺代碼,知道如何與後臺交互數據是最好的,這樣節省了時間,也可以讓前端代碼更加規範.否則,可能因為你的寫法和後端給來的數據不能結合,而前端代碼又要重寫,那就更麻煩了。 6、學習css3+html5對於剛接手的新人來說可能有點難,需要很強的代碼知識和經驗,但是如果你打算專攻前端的話,還是學習一下比較好,對以後的工作會更有幫助。
  • 貴州省遵義市池塘工程化循環水養殖技術
    貴州省遵義市池塘工程化循環水養殖技術宋嬌等池塘工程化循環水養殖模式具有節水、節地、生態環保、生產可控性強等優點,是一種基於生態學原理的生態循環水養殖技術,能有效降低養殖水體的汙染。目前,全國已有10餘個省(市)示範應用流水養殖槽2000多條,推廣面積3萬餘畝,有力助推漁業轉型升級,是現代漁業主要發展方向之一,但在推廣應用中暴露出一些問題。
  • Web前端三大主流框架是什麼?
    前端框架對於前端開發的好處是顯而易見的,比如減少代碼中因失誤產生的bug,還能大大節約時間和人力成本,縮短開發周期等等。目前,市面上Web前端三大主流框架分別指的是Angular、React和Vue,在Web前端開發中,它們平分秋色,各有優劣。
  • 全球首臺高溫超導高速磁浮工程化樣車下線,時速620KM,突破真難
    4年後的1月13日,全球首臺高溫超導高速磁浮工程化樣車在成都下線,時速可達620公裡,最高可達最高時速800公裡,高速試驗線同期啟用,這標誌著高溫超導高速磁浮工程化研究從無到有的突破,具備了工程化試驗示範工況。從微小模型,到首臺載人高溫磁懸浮樣車,再到現在的「工程化樣車」,沒有捷徑可以走,每一步都很難。那麼這臺全球首臺高溫超導高速磁浮工程化樣車有何神奇?
  • 世界首輛高溫超導高速磁浮工程化樣車長這樣→
    具備了工程化試驗示範條件快來看稀奇↓↓↓川觀新聞記者徒手推火車在啟用儀式現場,參與研發的鄧自剛教授打趣地對川觀新聞記者說,你推推列車看看?一輛重達十幾噸的列車,推它?!帶著好奇,川觀新聞記者真的用力一推。然後……車跑了!以一人之力推動一輛火車,這是怎麼做到的?
  • web前端需要學習什麼?初級階段都要學什麼?
    網絡看到了很多詢問貼子,web前端需要學習什麼?自學要多久?要學習哪些技術?初級階段都要學習什麼?有什麼要求……也有很多朋友在網絡上自學的,也有參加網絡教學的,或者在去一些培訓學校參加培訓Web前端的,都會關心一個「web前端需要學習什麼」?
  • 前端新書福利
    不過,有幾本出鏡率不是很高的前端書籍今天上午發出了強烈抗議。所以,圖小鹿決定放個大招,把這5本書籍一次性推薦給小夥伴並送給大家一個小小的福利。1.>Building Isomorphic JavaScript Apps作者:Jason Strimpel , Maxime Najim譯者:張俊達定價:49.00元客戶端和伺服器端使用同一套代碼,提升網頁加載速度,減輕伺服器負載已經在Facebook、Netflix、沃爾瑪、Airbnb採納的同構JavaScript方案將帶領你改變
  • 納米組織工程化脊髓修復脊髓損傷
    :支架以膠原為原料,應用電子紡絲技術製備纖維平行排列及交錯排列的納米纖維膜,種子細胞為SD大鼠脊髓源性神經幹細胞,神經幹細胞已被證實為優質種子細胞,通過共培養7 d使神經幹細胞貼附於納米纖維膜表面,二者共同構建組織工程化脊髓。
  • 中國版超級高鐵啟動工程化試驗
    世界首條高溫超導高速磁浮工程化試驗線啟用中國版超級高鐵啟動工程化試驗西南交通大學今天(1月13日)宣布,應用原創技術的世界首條高溫超導高速磁浮工程化樣車及試驗線在該校正式啟用。研究人員表示,這是高溫超導高速磁浮工程化研究從無到有的突破,具備了工程化試驗示範條件。