在Web前端技術變化日新月異的今天，Web前端項目變的越來越復雜。前端架構也會隨著我們現在千變萬化的迭代需求，架構技術的演化，不僅是架構師也是我們每個開發人員都必須去關注的問題。下面，給大家詳細說一說前端構架！
一、前端架構的由來2014年10月13日CSS開發者大會上，在新奧爾良會議中心一個擁擠的房間里“舉起前端架構的旗幟”成了在一線奮斗著的開發者們共同的訴求。在那之后，那些想要弄清楚自身定位以及在公司中所扮演的角色的開發者們發現，其實他們一直扮演著前端架構師的角色， 卻從來沒有擁有過這個頭銜，或者沒有足夠的信心去爭取這個職位所應具有的權力。
在大會召幾周之后，很多人把他們在Twitter上的個人簡介改成了“前端架構師”。
二、你理解的前端架構是怎樣的？前端架構如同建筑設計，在建設過程中，建筑設計師需要設計和規劃方案，并且跟進施工過程。這與前端架構師的工作有著異曲同工之妙，不同的是后者建造的是網站，而不是建筑物。比起澆筑混凝土，建筑設計師會在設計工程構圖的工作上傾注更多的精力。同理，相比編寫具體的代碼，前端架構師更專注于開發工具和優化流程。
前端架構是一系列工具和流程的集合，旨在提升前端代碼的質量，并實現高效可持續的工作流。
前端設計架構不是一勞永逸的工作，沒有任何設計在一開始就是完美的，也沒有任何計劃可以一步到位。
三、前端架構的原則1. 體系設計
試想一下，如果一棟建筑沒有明確的構造設計，所有的重要事項都由建筑工人直接決定，那么就可能會出現這樣的情景:第一面墻用石頭壘，第二面墻用磚頭砌，第三面墻用木頭搭，第四面墻因為追求時髦而留空。
雖然網站的整體外觀和風格基調完全由經驗豐富的視覺設計師決定，但前端架構師掌控 著背后的前端開發方法和系統設計哲學。通過設計所有前端開發人員都要遵循的系統規范，前端架構師清晰描繪了產品和代碼的最終形態。
一旦前端架構師建立起了系統設計的規范，項目就擁有了可以衡量代碼質量的標準，否 則我們如何判斷代碼是否達標呢？一個精心設計的系統，應當具備完善的檢驗機制，并做出適當的取舍，以保證系統中的代碼有實質的價值，而不是簡單的堆砌。
2. 工作規劃
有了清晰的結構設計之后，就需要制定開發工作流了。開發人員寫一行代碼并且提交到線上需要經過什么步驟？舉一個最簡單的例子，這個過程包括使用 FTP 登錄服務器，修改一個文件并保存。然而，對于大多數項目而言，完整的工作流可能會用到多種工具，如版本控制器、任務調度器、CSS 處理器、文檔工具、測試組件和服務器自動化工具等。
前端架構師的目標是設計出能流暢運轉的系統。這個系統不僅能高效快速地啟動，還可以通過語言分析、測試用例、文檔記錄等方法持續地提供有效的反饋，并且大幅減少由于重復操作而產生的人為錯誤。
3. 監督跟進
前端架構設計絕不是一勞永逸的工作。沒有任何設計在一開始就是完美的，也沒有任何計劃可以一步到位。客戶和開發人員的需求會隨著時間改變。在某個階段運行得很好的開發流程，隨后也可能需要重新調整，以便提高效率、減少錯誤。
前端架構師的一個非常重要的能力，就是能夠持續地優化工作流程。如今各種各樣的構 建工具可以讓我們很方便地改變工作方式，并通知到每一位開發人員。
有些人問前端架構師是否等同于管理角色，不再需要寫業務代碼。前端架構師不僅要寫更多代碼，更要會用多種編程語言，還要使用大量的工具。代碼量并未減少，只是代碼的讀者發生了改變。前端開發人員面向終端用戶寫代碼，而前端架構師面向的則是團隊里的開發人員。
四、前端架構的核心1. 代碼
歸根結底，所有的網站都是由一堆文本文件和資源文件組成HTML、CSS、JavaScript的。當我們面對制作網站所產生的大量代碼時，就會發現為代碼和資源設定一個期望是多么重要。
2. 流程
怎么用工具和流程構建一個高效且避免出錯的工作流是一個重要的思考。工作流變得越來越復雜，那些用于構建它們的工具也同樣如此。這些工具在提高生產力、加快效率和保持代碼一致性上帶來了驚人的效果，但也伴隨著過度工程化和抽象化的風險。
3. 測試
要構建一個可擴展和可持續優化的系統，必須保證新代碼與老代碼能夠很好地兼容，我們的代碼不會孤立存在，它們都是大型系統中的一部分，創建覆蓋面廣泛的測試方案，能確保老代碼還能正常運行。
4. 文檔
設計文檔是你同他人交流的工具，來闡述你的設計決策是什么，來闡明你的設計決策是什么以及為什么你的決策是好的。如果不是團隊中的重要成員要離開，幾乎都不會意識到文檔的重要性。
這四個核心是構建可擴展和可持續優化的系統的基礎。以上就是我介紹的前端構架，相信大家對前端構架已經有所了解。希望對從事Web前端的小伙伴有所幫助。如果你想了解更多Web前端行業動態和學習資料，可以關注“武漢千鋒”微信公眾號！
前端框架一般指用于簡化網頁設計的框架，比如，jquery，extjs，bootstrap等等，這些框架封裝了一些功能，比如html文檔操作，漂亮的各種控件（按鈕，表單等等）。前段框架的好處：對于互聯網的產品而言，前端用戶體驗往往決定了一款產品的競爭力和吸引力;而對于前端工程師來說，考慮的問題更為復雜，他們既要為網站上提供的產品和服務實現一流的Web頁面、優化代碼，保證體驗的最佳，更要考慮與市面上各大瀏覽器的兼容性，還需顧及Web前端表現層和前后端交互的架構，以及模塊化、通用類庫、框架編寫等一系列問題，由此提升前端開發的效率，降低開發成本和周期。
你好，我自己主要是做后臺開發，對前端稍有了解，所以我覺得初學者更快入門web前端，以下是關于web前端方面的教程知識點。web前端是app開發、h5網頁等主流的程序語言，而且待遇報酬高，較其他計算機語言更加容易入門。
1）先學html5+css基本語法
2）學些css的框架，比如less，bootstrap等
3）js是必然會涉及的，學jquery吧，簡單易學，實例多
4）別光看，多動手，把1）到3）串起來，做個項目，或虛擬一個，比如購物車，或博客
幾個要點，供參考
專注一條線，前端涉及知識點太多，別都學，雜而不精。
前端+HTML5德 學習內容：
第一階段：前端頁面重構：PC端網站布局、HTML5+CSS3基礎項目、WebAPP頁面布局；
第二階段：JavaScript高級程序設計：原生JavaScript交互功能開發、面向對象開發與ES5/ES6、JavaScript工具庫自主研發；
第三階段：PC端全棧項目開發：jQuery經典特效交互開發、HTTP協議，Ajxa進階與后端開發、前端工程化與模塊化應用、PC端網站開發、PC端管理信息系統前端開發；第四階段：移動端項目開發：Touch端項目、微信場景項目、應用Vue.js開發WebApp項目、應用Ionic開發WebApp項目、應用React.js開發WebApp；
第五階段：混合（Hybrid）開發：各類混合應用開發；
第六階段：NodeJS全棧開發：WebApp后端系統開發。
主流框架下面介紹了5種比較流行的前端框架
1. AngularJSAngular JS 是一個有Google維護的開源前端web應用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年開發出來。Angular JS是一個模型-視圖-控制器（MVC）模式的框架，目的在于使HTML動態化。與其他框架相比，它可以快速生成代碼，并且能非常輕松的測試程序獨立的模塊。最大的優勢是在你修改代碼后，它會立即刷新前端UI，能馬上體現出來。它是用于SPAs（單頁面應用）開發中最常用的javascript框架。Angular JS是一個全功能的框架，可能也是最流行的框架。缺點就是學習起來有點困難。
優點：模板功能強大豐富，并且是聲明式的，自帶了豐富的Angular指令；
是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對于敏捷開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動。
良好的文檔。
雙向數據綁定簡化了流程的某些部分。
缺點：驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽；
ngView只能有一個，不能嵌套多個視圖，雖然有angular-ui/ui-router 解決，但ui-router 對于URL的控制不是很靈活，必須是嵌套式的；
對于特別復雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是內存泄漏了還是什么其他問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中；
ng提倡在控制器里面不要有操作DOM的代碼，對于一些jQuery 插件的使用，如果想不破壞代碼的整潔性，需要寫一些directive去封裝插件，但是現在有很多插件的版本已經支持Angular了，最好能夠和cordova插件結合進行混合式開發；
Angular 太笨重了。
雙向數據綁定檢查數據模型的變化，這可能導致可能的性能問題并且更快地耗盡設備的電池。
理解代碼和調試困難。
2. ReactJSReact JS 不像一個框架反而更像一個庫，但絕對是值得一提。AngularJS是一個MVC模式的框架，但ReactJS是一個由Facebook開發的非MVC模式的框架。它允許你創建一個可復用的UI組件，Facebook和Instagram的用戶界面就是用ReactJS開發的。你可以用React進行很復雜的更新并且應用運行仍然很快，因為框架本身能很快的處理他們。你也能寫許多可復用的小文件，而不是編寫一個大文件。對于要處理大量數據的大型程序來說這是最好的選擇。這個框架的缺點之一就是它只處理應用程序的視圖層，所以你可能需要結合其他工具來一起處理。
優點：1.掌握起來很容易。
2.在React中很容易維護隔離的組件。
3.組件的不斷重新渲染提供了有效的安排
復雜。
4.方便的架構 - Flux - 與MVC競爭激烈。單向數據流
提供數據和DOM元素的可維護性和有效安排。
它是當今廣泛使用的最輕量級框架。
缺點：1.DOM操作庫的一些問題是可能的（例如，jQuery）。
2.頻繁的重新渲染可能會減慢處理大量數據的APP的工作。
3. MeteorJSMeteorJS 發布于2012年，涵蓋了開發周期的所有階段，包括后端開發、前端開發、數據庫管理。它是一個由NodeJS編寫的開源框架。MeteorJS是一個簡單和容易理解的框架，所有的包和框架都可以輕松使用。代碼層的所有改變能夠立即更新到UI界面，服務的和客戶端都只需要用javascript開發。他主要用于IKEA和馬自達等公司的實時應用開發。不建議用于大型或復雜的程序。
優點：1.易學
2.偏向客戶端
3.響應式
4.代碼高度重用
缺點：1.運算密集型應用能力差
2.成熟度不高
3.約束少
4.初次加載時間長
4. Vue.JS在了解React和Angular后，你可以嘗試了解下VueJS，一個用于用戶界面開發的漸進式javascript框架。它是一個能快速開發和跨平臺的方案。與Angular和React相比較，它被證明速度更快，并且吸收了這兩者的優點。Vue的創始人是尤雨溪，他曾在Google工作并使用Angular。他的想法是直接抽取出他喜歡的Angular的特性，不再引入其他復雜的理念而打造一款新的框架。所有的Vue模板都是基于HTML，你可以在GitHub上找到很多資源。它也提供雙向綁定和服務端渲染。在Vue中，你可以使用模板語法或使用JSX直接編寫渲染函數。
Vue.js 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
優點：1.雙向數據綁定 也就是所謂的響應式數據綁定。這里的響應式不是@media 媒體查詢中的響應式布局，而是指vue.js會自動對頁面中某些數據的變化做出同步的響應。
也就是說，vue.js會自動響應數據的變化情況，并且根據用戶在代碼中預先寫好的綁定關系，對所有綁定在一起的數據和視圖內容都進行修改。而這種綁定關系，就是以input 標簽的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
這也就是vue.js最大的優點，通過MVVM思想實現數據的雙向綁定，讓開發者不用再操作dom對象，有更多的時間去思考業務邏輯。
2.組件化開發
在前端應用，我們是否也可以像編程一樣把模塊封裝呢？這就引入了組件化開發的思想。
Vue.js通過組件，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只要先在父級應用中寫好各種組件標簽（占坑），并且在組件標簽中寫好要傳入組件的參數（就像給函數傳入參數一樣，這個參數叫做組件的屬性），然后再分別寫好各種組件的實現（填坑），然后整個應用就算做完了。
3.Virtual DOM
現在的網速越來越快了，很多人家里都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會緩存很多資源文件，那么幾十M的光纖為什么打開一個之前已經打開過，已經有緩存的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript DOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。
而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優化，由于這個DOM操作屬于預處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。
4.輕量高效
5. BackboneJSBackbone是一個MVP模型，它依賴于Underscore.js庫。它旨在開發單頁面web應用，并保證不同部分的web應用同步。它采用命令式的編程風格，與使用聲明式編程風格的Angular不同。Backbone也與后端代碼同步更新，當模型改變后HTML頁面也隨之改變。Backbone被用來構建Groupon, Airbnb, Digg, Foursquare, Hulu, Soundcloud, Trello等許多知名應用。
優點：將數據和界面很好的分離開來。
將事件的綁定很好的剝離出來，便于管理和迭代。
使得Javascript程序的模塊化更加清晰、明了。