前端項目架構設計

Ⅰ 電商前端架構設計

什麼是前端架構

• 說到架構，很容易拉出一系列的概念知識點，像系統架構、軟體架構、框架等等，這些不是今天探討的重點，大家可以下去網路來理解。架構的本質是什麼？其實也是一種管理。通常我們所說的管理，都是指對於任務和人員的管理，而架構管的是機器和代碼。比如說，機器的部署屬於運維的物理架構，SOA屬於服務架構，那麼，前端的架構指什麼呢？

• 長期以來，前端所處的位置是比較偏應用層，很薄的一層，而架構又要求深度和廣度，所以之前在前端裡面做架構，好比在小水塘里游泳，稍微撲騰兩下就到處碰壁。但最近這幾年來，隨著一些列新的技術和概念的出現，前端的范圍被大大拓展了，所以這一層逐漸變得大有可為。

• 單純從語言的角度來說，html、js、css是最簡單最容易上手的開發語言，不考慮模塊化、工具、壓縮優化，任何人都可以快速上手，完成一兩個功能簡單的頁面。在規模很小的項目中，前端技術要素彼此不會直接產生影響，因此無需架構相關的思考。由於前端語言這種靈活鬆散的特點，使得前端項目規模在達到一定規模後，工程問題凸顯，成為發展瓶頸，原來孤立的技術要素開始彼此產生影響，各種技術要素彼此之間開始出現關聯，要用模塊化開發，就必須對應某個模塊化框架，用這個框架就必須對應某個構建工具，要用這個工具，就必須對應某個包管理工具……這個時候，需要有人從比較高的角度去梳理、尋找適合自己團隊的集成解決方案。而這一系列解決問題的工具和手段就是所謂的前端架構。

架構的組成

組件框架

• 架構不等於框架這一點很好理解，相信大家都能夠很深入的說明這里的差別，框架是架構的重要組成部分，架構決定框架的選型，框架決定架構的技術路線。架構圍繞框架進行一系列的流程工具建設，從而形成完善自動的開發體系。
  +框架不等於類庫，這里就是很多人困惑的點，你用的什麼框架？jquery、underscore、linq、seajs、requirejs等等，每個人都能夠列舉一大堆。但這個是不準確的，一套編碼框架是有一系列的元素組成：

• 開發模式，我們如何來實現代碼的職責分離。以前整個前端是mvc中v這一層，而現在前端內部也進行了mvc的邏輯細分，Javascript的MVC框架現在很多，有的強化m、有的強化c。每一個框架其實都有其特點的，並且有越來越多的創新改造，比如現在最流行的是mvvm。有angular、react等等。我們是為了引入mvvc才把他們納入到我們的開發體系，而不是因為他是一個好用的類庫。

• 通訊，模塊化、組件化是前端在推進開發模式過程中的一個過程產物，為了有效的進行組件隔離和獨立，現在有各種各樣的通信模型出來，不過由於實現簡單，代碼少，他往往是合入到某個類庫裡面，但本質也是一個類庫。比較成熟的比如：消息匯流排、事件模擬、緩存中轉、flux模型等等。

• 模板，我們用什麼樣的方式來集中的處理數據往html的轉換過程，這里就不用多展開，這種類庫現在太多了，光我們公司就有很多套，大家在代碼行、緩存管理、預編譯、運算性能、強大的語法等等各個維度不段追求各種極致。

• 基礎類庫最後才是傳統類庫，相信現在已經沒有同學會在項目中去約束團隊中的dom操作、常用函數、方法、非同步化等等各種很基礎東西，這個時候我們一般就是引入jq、zepto、underscor這些封裝好的東西就行了。核心就是為了改善編碼生產力。

• 對於框架的選型要從兩面看，一是看該框架的本領，二是看你們團隊的能耐。從經驗上給幾個點建議：

• 這里也可以順便展開聊一下現在前端產品的形態分類：

• 從這些分類裡面，我們這些年派生出了所謂全端和全棧的概念。但本質上怎麼走還是要由所在產品的形態來決定。

• 內容型Web站點 側重渲染方面的優化，前端邏輯比重小

• 操作型B/S系統 以數據和邏輯為中心，界面較規整

• hybrid內置型，要處理緩存和一些本地介面，包括PC客戶端和移動端。現在的本地應用，基於很多考慮，都變成了混合應用，也就是說，開發這個應用的技術，既包含原生的代碼，也包含了嵌入的HTML5代碼

• Web游戲，前端的邏輯非常重，在代碼結構上要求非常高的可管理性和更復雜的設計模式。

• 桌面應用型，現在有一些PC端的混合應用開發技術，比如node-webkit和hex，前者的典型應用是XDK，後者的典型應用是有道詞典，此外，豌豆莢的PC客戶端也是採用類似技術的，也有一些產品是用的qt-webkit。這類技術可以方便做跨平台，極大減少開發工作量。

• 大工程應該盡量避開谷歌產品，他的很多技術開源項目都是玩票性質的，GWT、Closure、Darty就是前車之鑒。曾今提出過很多的新技術，到現在還是獨家的，變出太大。包括現在angular，喜歡做斷崖式升級，做做運營後台系統問題不大，如果是線上系統的話，每次升級就是一次人月神話中的典型焦油坑。

• 關注應用場景，像剛才說到的boss後台是一種；另外我的平台是否有沉重的歷史包袱，需要兼容ie6，還是可以輕裝上陣；產品對於seo是什麼樣的態度？是否需要考慮自適應？或者我的團隊足夠大，能夠各搞一套？；產品特徵是強內容還是強交互或者是游戲性。這些都是選擇不同框架的主要出發點。

• 沒有最好，只有最適合自己的，基本上，針對每個平台，我們都可以列出一些主流框架，但不意味著你們都能駕馭得住。小馬過馬，老牛沒過膝，松鼠淹個半死，就是這么回事。但無論我們選擇什麼框架或決定自己動手造輪子，都勿忘初心，技術必須讓我們工作生活更為輕松愉快——我們只選擇我們能駕馭住的框架，我們不能保證它在一年後是否會過時落後。

• 而且按照我個人這么多年的經驗來看，任何框架都會過時，往往不是因為他不夠好，而是因為一定有更好的出來。我們再選擇一個框架或者一個類庫的時候就要想好，未來我如何拋棄他。至少不能成為我們引入新的框架的絆腳石。現實的工作中很多的團隊往往會陷入到年復一年的用今年的新框架去重構去年老框架代碼的歷史循環中去。對於引入框架如何盡量延長他的生命力，我個人的意見是選擇框架時去追求概念，而不是潮流，當我的架構可以接受新的設計概念的時候才去考慮引入新的框架。用設計理念的選擇代替框架的選擇。之所以這么說是因為我觀察到我們部門的後端架構的開發理念跟我進公司的時候是差不多的。更多你可以參考成都網站建設

Ⅱ 目前常用的一些前端的框架

目前常用的一些前端的框架如下：

1.Bootstrap

Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。

Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：

腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。

基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。

組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（buttongroups），導航面板（navigationcontrol）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁升激碼（pagination），縮略圖(thumbnails)，進度條（progressbars），媒體對象（mediaobjects）等等。

JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tooltips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示核枯(typeahead)，等等。

Bootstrap已經足夠強大，能夠實現各種形式的Web界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的改笑洞一部分工具和資源。

jQueryUIBootstrap——對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把Bootstrap的清爽界面組件引入到jQueryUI中。

jQueryMobileBootstrapTheme——和上面提到的jQueryUI主題類似，這是一個為jQuerymobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。

FuelUX——它為Bootstrap添加了一些輕量的JavaScript控制項。FuelUI安裝，修改，更新以及優化都很簡單方便。

info——Bootstrap提供了自己的幾種界面風格，提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。

BootSwatchr——利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。

Bootswatch——提供大量免費的Bootstrap主題。

Bootsnipp——在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於BootstrapHTML/CSS/JavaScript架構的免費元素。

LayoutIt——通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。

2、flex

Apache基金會發布了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本

需要注意的是

2014年03月10日，ApacheFlex技術社區發布了全新的ApacheFlex4.12.0版本，該版本是ApacheFlex4.11.0的升級版本，改進的功能包括：

◆支持最新版本的FlashPlayer

◆支持最新的AIR運行時

◆改進了內存佔用和性能

◆改善了針對移動平台的組件的樣式

◆支持iOS7系統

◆修復了超過80個漏洞[4]

2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex4.12.1，新版本加入對全新FlashPlayer及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。

3、extjs

ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。

功能豐富，無人能出其右。

無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。

華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！

4、easyui

easyui幫助你構建你的web應用更加容易。

它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。

但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！

5、MiniUI

又一個基於jquery的框架，開發的界面功能都很豐富。

jQueryMiniUI_快速開發WebUI。

它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。

使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。

界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！

6、jQueryUI

jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。

功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！

7、DWZ

DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.

設計目標是簡單實用,快速開發,降低ajax開發成本。

歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。

畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！

8、GWT

Google網頁工具包——GWT提供了一組基於Java語言的開發包，這個開發包的設計參考JavaAWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉JavaAWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。

你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！

9、YUI

Yahoo!UILibrary(YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為BSD許可證，基本上沒怎麼研究過！

YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！

10、Sencha

Sencha是由ExtJS、jQTouch以及Raphael三個項目合並而成的一個新項目。

大公司的框架，並且是幾樣庫的強強聯合，值得推薦！

11、Dojo

在國內應用好像不是很廣，不過性能上應該沒問題。

Dojo是一個用javascript語言實現的開源DHTML工具包。

有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！

12、ZK

ZK是一套以AJAX/XUL/Java為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以及以XML為基礎的使用介面設計語言ZKUser-interfacesMarkupLanguage(ZUML)。

功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！

13、OperaMasks-UI

OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。

文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！

14、JavaFX

Sun公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用JavaFX編程語言開發富互聯網應用程序(RIA)。JavaFXScript編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative,staticallytyped(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用JavaAPI的能力。因為JavaFXScript是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序變為可能。

Ⅲ web前端開發開發技術架構有哪些

前端的應用非常廣泛，基本網站、APP、HTML5小程序等都需要前端開發，所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面，Web上、H5上的炫酷效果，是前端開發大展身手的地方。最常見的用於前端開發的技術組合是：
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員，一個開發團隊的成果是要靠web前端去展現，因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台，各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜，用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...

Ⅳ 前端常用的框架有哪些

前端三大框架，是Angular、React、Vue，這三個框架現在是最為流行也是最多人用的框架。

React：
1.聲明式設計：React採用聲明範式，可以輕松描述應用。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1.速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2.跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的API，甚至在IE8中都是沒問題的。
3.模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4.單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構5.同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。6.兼容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點：React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。

Vue：
Vue是尤雨溪編寫的一個構建數據驅動的Web界面的庫，准確來說不是一個框架，它聚焦在V（view）視圖層。
它有以下的特性：
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
優點：
1.簡單：官方文檔很清晰，比Angular簡單易學。
2.快速：非同步批處理方式更新DOM。
3.組合：用解耦的、可復用的組件組合你的應用程序。
4.緊湊：~18kbmin+gzip，且無依賴。
5.強大：表達式無需聲明依賴的可推導屬性(computedproperties)。
6.對模塊友好：可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
缺點：
1.新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2.影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3.不支持IE8。

Angular：
Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
它有以下的特性：
1.良好的應用程序結構
2.雙向數據綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味著他有一個堅實的基礎和社區支持。
缺點：
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔例子非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7兼容不算特別好,就是可以用jQuery自己手寫代碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果代碼壓縮需要顯示聲明。

Ⅳ 什麼是前端架構

架構設計的最重要目的是為了進行整體系統概覽，以及開發方向指導。
而架構要包含的內容，簡單說就是下面四個
1、系統間關系
2、系統內關系
3、應用內架構
4、系統規范與原則
而架構的原則主要是三個方面
1、架構的合適：架構就像衣服，不能太長，也不能太短
2、可擴展的：架構需要充分考慮擴展性
3、持續不斷的：架構不是一次性物品，是一個跟著軟體生命周期的長期過程

Ⅵ 前端框架

1.前端框架一般指用於簡化網頁設計的框架，比如，jquery，extjs，bootstrap等等，這些框架封裝了一些功能，比如html文檔操作，漂亮的各種控制項(按鈕，表單等等)。

2.使用前段框架可以降低界面開發周期和提高界面的美觀性。

3.有些框架比較輕量，比如jquery，有些框架比較重量，比如extjs。一般來說重量的框架會封裝更多的功能，比如extjs，封裝的grid控制項有很強的數據展示和操作功能。

1.對用戶的價值：

大部分產品對用戶的核心價值是功能和內容提供的，而不是由表現層和交互。譬如支付、電商、新聞、交友。

後端解決有還是無的問題，開天闢地。

前端解決有了以後好用的問題，錦上添花，在競爭激烈的領域確實至關重要。

2.技術廣度和難度：

廣度上後端工作在伺服器領域，能控制的硬體基本沒有極限，CPU、存儲、網路、集群等等，因此技術領域極廣。一個優秀的後端需要掌握或了解大量技術如：並發、業務架構、資料庫、幾打流行框架、性能調優、分布式計算、集群架構、容災、安全、運維等等，一層知銷和挖透了還有下一層。幾十年計算機發展歷史中大量的技術沉澱在伺服器端。

Web前端一直工作在一個瀏覽器盒子里，先天不足，能承載的可能性太小，技術廣度不足。

深度上，現代計算機領域的難題如大規模負載，海量數據處理，實時計算也是後端的，前端集中在表示層，這一層雖然也很復雜，但能稱之為難題的技術幾乎沒有，也很容易復制。

前端要說深度也不是沒有，但這一步需要跨到圖形領域(如網頁游戲)，不是常見場景。

說到底前端代碼能控制的硬體確實不如後端，因此在技術上，前端更容易。現在為什麼說前端會比後端更值錢呢?那是因為前端對硬體的控制能力提升了(html5odejsmobile)，而後端分化得比較厲害，有一批後端專門只寫業務邏輯，框架是別人寫的，系統架構是別人搭的，伺服器跑在雲里，連機器物理地址都不知道。世人眼裡可能覺得這種寫MVC代碼的人才斗褲是後端，這種被限制在一個「虛擬盒子」里的後端確實不怎麼難上手。

一般而言網上說的互聯網行業的技術含量排名大概是這樣：

產品經理<設計師<前端<後端<其他更高級職位，比如演算法工程師等等。

在廣大中小公司，很多產品經理都是不會代碼，不會設計。很多技校學藝術設計的畢業生，當上了美工。這些都是真，所以能力低，乾的人多，自然搭盯就低。然而，你問Google設計師掙多少了嘛?

門檻低不等於技術含量低。

Ⅶ 前端常用的開發框架有哪些

一、 Web前端框架之Angular 2+
Angular 2+優點解析：
Angular 2+ 的最大優勢在於它的流行程度。也有人認為它和 Google 密切相關的名字，會影響團隊使用它。Angular 1 的迅速流行是因為那些來自其他互動式應用程序開發環境的人會發現對於開發單頁面 Web 應用程序具有相似的模型-視圖模式。通過對 Angular 1 進行現代化演變和重新構建框架的某些部分，Angular 2+ 已經真正的爆發了，大量的正式的和非正式培訓機構數量都讓人印象深刻，開發者有很強的市場競爭力。對於用戶來說它有一套用於構建用戶界面的豐富組件，這也是本系列中少有的幾個框架能夠做到這點。
缺點解析：
我們覺得 Angular 框架著重於在單個頁面應用程序中創建用戶界面並沒有處理構建完整的 Web 應用這個更大的關注點，如果不及早確定下來，這將會導致整個項目難以維護，在實際項目中，運行時提供不屬於核心框架的技術往往讓人覺得不可思議，這大大降低了 TypeScript 對最終開發者的價值。
發展方向：
Angular 5 剛剛發布，這看來是 Angular 已經成功的印證了快速發布版本的承諾，在 Google 的持續支持下，Angular 會越來越成熟。
像許多的大型組織一樣，Google 具有多重(分裂)的人格，從外表上看，Angular 團隊和那些專注於瀏覽器標準的團隊之間顯得很和諧。但我們的觀點是，和諧只是一層薄薄的窗戶紙。Angular 團隊對於 Web 組件和漸進式 Web 應用沒有一個真正解決方案。我們認為，業界普遍認可的標准將會在 Angular 框架中會逐步實現，這將會影響到如何更好的構建 Angular 應用將成為一個中/長期的風險。
使用環境：
如果你需要在一個大型的框架內獲取技術資源，框架內的技術通常很容易移植;或者你需要在框架中訓練開發人員，並且還要有一定的信心，他們會在短期內獲得一定的開發能力，這樣的話你可以考慮 Angular 2+ 。需要注意的是 Angular1(angular.js)與 Angular2+ 是截然不同的，其中的應用、技術和經驗不能直接移植到 Angular2+ 的開發中去。
如果你的 Web 應用能夠很好的轉化為標準的模型-視圖模式，那麼你也可以忽略其他直接考慮使用 Angular2+ 。
如果你對 Google Material UX 設計模式滿意，那麼 Material Angular 是遵循該模式的一種快速、簡單且可靠的方式。
二、Web前端框架之React + Rex
React + Rex優勢解析：
React 和 Rex 的最大優勢在於它們相對簡單和專注。做一件事情並把它做好是非常困難的，但這兩個庫都很有效地完成了它們的目標。雖然對於某些狀態容器方法可能是外部的，但大多數開發人員還是可以輕松掌握概念，並了解單向數據體系結構的好處，簡化大量的用戶界面應用程序。
缺點解析：
React 和 Rex 最大的弱點不是它們是什麼，而是它們不是什麼。要構建一個功能豐富的 Web 應用程序，你需要許多功能，一旦脫離 React 和 Rex 和其他一些庫的核心，你將發現一個非常分散的社區，擁有無數的解決方案和模式，不容易整合在一起。
因此，雖然 React 和 Rex 都是非常專注的庫，但缺乏經驗的團隊還是會很容易地生成不可維護的解決方案，而不是意識到他們所做的選擇會導致性能不佳或錯誤。即使有經驗的開發人員也可能意識到，一個鬆散的架構或慣例可能會在未來困擾他們。
假省錢是一種對自己的欺騙，組織范圍內採用 React 和 Rex 將輕松降低無效率問題。沒有其他庫和模式的廣泛約定和標准化，標准化 React + Rex 比較於我們正在採用的 JavaScript 來編寫我們的應用程序效率要高。
發展方向：
Facebook 和 React 最近從繁瑣的附加專利糾紛中抽離，他們認識到，就像其他項目一樣，更廣泛的社區能夠提高自己的聲音。我覺得這有助於 Facebook 意識到他們還不能更好地了解我們，相信我們來引導項目。希望這將繼續貫穿項目的特點和技術方向。
很難預測 React 和 Rex 的未來。但是，將庫集中在一起，確實會顯著提高適應性，大多數React + Rex 模式都會促進一個分離的體系結構，從而可以輕松地進行重構和迭代。兩年前，大家喜歡的還是React + Flux，但整個社區很快就擁抱了Rex。思維或模式的其他重大轉變可能很容易被採納。這種關鍵能力可能會持續到未來。
使用環境：
如果你很少需要手把手指導，並且正在尋找更好的庫而不是全面的框架，那麼 React + Rex 可能是正確的。在這一過程中，你不僅需要對你的團隊和組織的能力保持誠實，還要在你的初始開發過程中，以及在整個應用程序的長期維護過程中保持誠實。
三、Web前端框架之Vue.js
vue.js優勢介紹：
漸進式構建能力是vue.js最大的優勢，vue 有一個簡潔而且合理的架構，使得它易於理解和構建。
vue 有一個強大的充滿激情人群的社區，這為vue.js增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點介紹：
在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑，即使沒有完美包含一個模式到另一個模式的完美轉換，但讓人感覺希望能維持兩個模式的相關性。對於那些期待vue.js完美解決方案，並可能導致難以維護不一致的應用程序的人來說，這至少是令人困惑的。
一個更大的挑戰是vue.js依賴於一個單獨的人，很明顯，其他的項目基本是由一個組織提供支持，但這讓人感覺更加有意義，雖然它有一個強大文件的社區和許多有創新的新增項目，但是 vue 核心的開發基本落在一個人身上。
我們很高興看到 vue 更加容易接受新興的標准方法，但是它的類似於 Web 組件的模式，而不是真正的 Web 組件，這可能是 vue 所得不償失的地方。
發展前景：
雖然vue.js有相當廣泛的應用，但也很難預測在中期發展中這個勢頭能持續多久，它不是由一個商業組織直接支持並維護，因此，這很大程度上依賴於維護者的生存能力和繼續維護下去的願望來決定。
它也表現出了一定程度的語言適應能力，並且隨著某些模式的落伍和失寵而繼續保持自身語言的現代化和時代性，目前沒有跡象表明vue.js架構將來無法適應進一步發展。
使用場景：
如果你有一個傳統的Web應用程序，並需要一個強壯穩健的應用程序層，那麼vue.js 可能是一個很好的選擇，它有清晰的模式，即使沒有經驗的團隊也能正確或者錯誤的使用它。盡管vue UX框架沒有開箱即用的功能，但在vue.js上也能大量持續性構建應用，這將有利於你的項目。

Ⅷ 前端開發框架有哪些

1.Bootstrap

Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。

Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：

腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。

基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。

組件——收集了大量可以重用的組絕襲件，如下拉菜單（dropdowns），按鈕組（buttongroups），導航面板（navigationcontrol）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progressbars），媒體對象（mediaobjects）等等。

JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tooltips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。

Bootstrap已經足夠強大，能夠實現各種形式的Web界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。

jQueryUIBootstrap——對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把Bootstrap的清爽界面組件引入到jQueryUI中。

jQueryMobileBootstrapTheme——和上面提到的jQueryUI主題類似，這是一個為jQueryMobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。

FuelUX——它為Bootstrap添加了一些輕量的JavaScript控制項。FuelUI安裝，修改，更新以及優化都很簡單方便。

info——Bootstrap提供了自己的幾種界面風格，提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。

BootSwatchr——利用這個工具你可掘宏賣以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。

Bootswatch——提供大量免費的Bootstrap主題。

Bootsnipp——在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於BootstrapHTML/CSS/JavaScript架構的免費元素。

LayoutIt——通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。

2.Fbootstrapp

Fbootstrapp基於Bootstrap並且提供了跟Facebookiframeapps和設計相同的功能。包含用於所有標准組件的基本的CSS和HTML，包括排版、表單、按鈕、判逗表格、柵格、導航等等，風格與Facebook類似。

3.BootMetro

BootMetro框架的靈感來自於MetroUICSS，基於Bootstrap框架構建，用於創建Windows8的Metro風格的網站。它包括所有Bootstrap的功能，並添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。

4.Kickstrap

Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。

App是一些頁面載入完成之後載入運行的JavaScript和CSS打包文件。默認載入的app有Knockout.js,Retina.js,FirebugLite,andUpdater，你也可以自行添加更多的app。

選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。

附加功能是一些用來擴展BootstrapUI庫的附件，它們的語法基本相同或者相似。

Ⅸ 前端常用的框架有哪些

在Web前端開發中，適時地使用一些框架，對於我們日常的開發，可以說是事半功倍。那麼，常用的Web前端框架有哪些呢？程序員常用的Web前端開發框架如下：
1、Bootstrap
Bootstrap流行的CSS框架，它是最早的Web前端框架，Bootstrap提供了許多實例來幫助入門。使用Bootstrap可以將不同的組件和布局組合在一起，從而創建有趣的頁面設計，還提供了大量詳細的文檔。
2、QUICK UI
QUICK UI一套完整的企業級web前端開發解決方案，由基礎框架、UI組件庫、皮膚包、示例工程和文檔等組成。使用QUICKUI開發者可以極大地減少工作量提高開發效率，快速構建功能強大、美觀、兼容的web應用系統。
3、MDC Web
Material Components for the web(MDC Web)，谷歌為Web設計的全新前端框架。MDC Web幫助開發人員執行Material Design，組件由谷歌的核心工程師團隊和UX設計人員開發。這些組件可以建立可靠的開發工作流程以構建美觀且功能強大的Web項目。
4、Pure
Bootstrap，Patternfly和MDC Web功能非常強大的CSS框架，但非常繁瑣復雜。如想要一個輕量級的CSS框架建議嘗試Pure.css，本身更接近於CSS編程，但又可以幫助構建一個不錯的網頁。Pure是具有最小佔用空間的輕量級CSS框架由Yahoo開發根據BSD許可是開源。
5、Foundation
Foundation聲稱是世界上最先進的響應式前端框架。它提供了用於構建專業網站的高級功能和教程。許多公司，組織都使用該框架，並且該框架具有大量可用的文檔。
6、Bulma
Bulma基於Flexbox的開源框架可根據MIT許可證開源。一個非常輕量級的框架，只需要一個CSS文件。Bulma擁有簡潔明了的文檔可輕松選擇想要的主題。還具有許多Web組件可以在設計中使用它們。
7、Skeleton
輕量級框架Skeleton。Skeleton庫只有大約400行，且該框架僅提供一些基本的CSS框架組件。Skeleton還是提供了詳細的文檔來幫助快速上手。
8、Materialize
Materialize 是一個基於 Material Design風格的一個現代化的響應式前端框架，解決了最繁重的工作，結合的自定義組件為提供默認的樣式。Materialize的文檔頁面非常全面很容易遵循。其組件頁麵包括按鈕，卡片，導航等。
9、Bootflat
Bootflat是從Twitter的Bootstrap派生的開源CSS框架。與Bootstrap相比Bootflat更簡單更加輕量級。大部分都是圖像沒有太多的文字。
10、PatternFly
PatternFly是Red Hat的開源CSS框架，和Bootstrap不同的是Bootstrap是為那些想要創建漂亮網站的人而設計，而PatternFly主要專注於企業應用程序開發人員提供諸如條形圖、圖表、導航之類的組件，實際上Red Hat就是使用它創建了OpenShift。除了靜態HTML，PatternFly還支持ReactJS框架，這是Facebook開發的流行JavaScript框架。PatternFly具有許多適用於企業級應用程序的高級組件，如條形圖，圖表，模式和布局。
11、flex
Flex目前還在孵化階段，還不是Apache的正式項目，Flex4.8也不是一個正式的Apache版本。，該版本標志著Flex新時代的開始，Flex的未來將由社區來驅動而不是由一個公司驅動。開發者可以通過貢獻代碼來幫助改進Flex，如修復bug、增加功能等。
以上就是分享的Web前端開發常用的一些框架。程序員們可以根據自己的業務需求選擇簡潔直觀、功能強大的前端開發框架，讓自己的工作更迅速簡單，提高開發的效率。