1. 前端開發框架有哪些
前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。
1、vue-element-admin
一個基於vue2.0和Element的控制面板UI框架，這是使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。
2、AdminLTE
非常流行的基於Bootstrap 3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。
3、ant-design-pro
這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。
4、ng2-admin
這是基於Angular 2、Bootstrap 4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。
9：material-dashboard
基於 Bootstrap 4 和 Material 風格的控制面板。Material Dashboard 是一個開源的 Material
Bootstrap Admin，其設計靈感來自谷歌的 Material Design 。
10：d2-admin
D2Admin 是一個完全 開源免費 的企業中後台產品前端集成方案，基於 vue.js 和 ElementUI 的管理系統前端解決方案 ，小於 60kb的本地首屏 js 載入,已經做好大部分項目前期准備工作
11：vuestic-admin
vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於登錄和注冊的預建頁面。
2. Web前端工程師應該知道的Web前端開發框匯總!
今天小編要跟大家分享的文章是關於Web前端開發框匯總。一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發框架。記住，這些框架並不僅僅是CSS
柵格之類的一些東西，它們包括的是整套的前端開發框架。下面就讓我們一起來看一看吧!
一、Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的Web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單(dropdowns)，按鈕組(buttongroups)，導航面板(navigation
control)——包括：tabs,pills,lists標簽，麵包屑導航(breadcrumbs)以及頁碼(pagination)，縮略圖(thumbnails)，進度條(progress
bars)，媒體對象(mediaobjects)等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals)，提示效果(tool
tips)，「泡芙」效果(popovers)，滾動監控(scrollspy)，旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的Web
界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQueryUIBootstrap——對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把
Bootstrap的清爽界面組件引入到jQueryUI中。
jQueryMobileBootstrapTheme——和上面提到的jQueryUI主題類似，這是一個為jQuery
Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
FuelUX——它為Bootstrap添加了一些輕量的JavaScript控制項。FuelUI安裝，修改，更新以及優化都很簡單方便。
#——
Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr——
利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch——提供大量免費的Bootstrap主題。
Bootsnipp——在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於BootstrapHTML/CSS/JavaScript
架構的免費元素。
LayoutIt——
通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
二、Fbootstrapp
Fbootstrapp基於Bootstrap並且提供了跟Facebookiframe
apps和設計相同的功能。包含用於所有標准組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。
三、BootMetro
BootMetro框架的靈感來自於MetroUICSS，基於Bootstrap框架構建，用於創建Windows8
的Metro風格的網站。它包括所有Bootstrap的功能，並添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。
四、Kickstrap
Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。
App是一些頁面載入完成之後載入運行的JavaScript和CSS打包文件。默認載入的app有Knockout.js,Retina.js,
FirebugLite,andUpdater，你也可以自行添加更多的app。
選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。
附加功能是一些用來擴展BootstrapUI庫的附件，它們的語法基本相同或者相似。
五、Foundation
Foundation
是一款強大的，功能豐富的並且支持響應式布局的前端開發框架，你可以通過Foundation快速創建原型，利用它所包含的大量布局框架，元素以及最優範例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，並且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，並且提高運行的速度。
Foundation擁有一套12列的靈活可嵌套的網格系統，你可以用它快速創建適應多種瀏覽設備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導航控制項。它也提供了很多的CSS組件，例如操作面板(panels)，價格表(price
tables)，進度條(progressbars)，表格(tables)以及可以適應不同設備的可伸縮視頻(flex
video)。與此同時，Foundation還包括了很多的JavaScript插件，如下拉菜單(dropdowns)，joyride(網站功能引導插件)，magellan(網站固定導航插件)，orbit(支持觸摸的響應式圖片輪播插件)，reveal(彈出框插件)，sections(強大的tab插件)以及tooltips(工具提示)等。
Foundation框架還提供了很多有用的擴展。
模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle
stencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。
HTML模板——HTML模板可以方便地用來快速創建頁面布局。你所要做的僅僅是復製得到模板代碼，然後丟到頁面的標簽之間就好了。
圖標字體(IconFonts)——包含自定義圖標的一種網頁字體。
SVG社交網路圖標(SocialIcons)——一組不依賴解析度的社交網路圖標(可縮放矢量圖標)。
響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，然後表格的其他列可以通過滾動條拖拉進行訪問。
關閉帆布布局(Off-CanvasLayouts)——
這些布局可以允許一些網頁內容或者導航控制項在移動端設備上默認隱藏，當瀏覽屏幕變大或者用戶進行相應操作的時候這些內容再出現。當用戶進行相關操作的時候，網頁內容或者導航控制項將會滑動出現。
如你所見，對於Web開發者以及設計師來說，Foundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。
六、GroundworkCSS
GroundworkCSS
是前端框架家族裡面新添的一款小清新框架。它是基於Sass和Compass的一個高級響應式的HTML5，CSS以及JavaScript工具包，可以用於快速創建原型並且建立在各種瀏覽設備上可以正常工作的網站和app。
GroundworkCSS擁有一個靈活，可嵌套的流式網格系統，方便你創建任何布局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當屏幕的寬度小於768或者480像素時，頁面中原本並列排版的表格列(grid
column)會自動變為獨立的行，而不是折疊在一起。另一個很酷的功能是jQuery的響應式文本(ResponsiveText)插件，這個插件可以動態調整頁面文字的大小以適應瀏覽設備的屏幕大小。這個插件對於可伸縮的標題以及創建響應式表格的時候特別有用。
GroundworkCSS包含了大量的UI組件，如tabs、響應式數據表格導航、按鈕、表單、響應式導航控制項、tiles(一套替代radio按鈕以及其他默認表單元素的優雅組件)、工具提示、對話框、Cycle2(一款強大的，響應式的內容滑塊)以及其他很多的有用組件。它還提供了很多矢量社交網路圖標以及圖標字體。
你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽設備要來查看這款框架的效果。通過這種方式，你可以測試在不同的瀏覽設備上各種組件的響應式布局情況。
GroundworkCSS的文檔寫的非常好，並且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對於這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。
七、Gumby
Gumby是一款基於Sass和Compass的簡單靈活並且穩定的前端開發框架。
它的流式-固定布局(fluid-fixed
layout)可以根據桌面端以及移動設備的解析度自動優化要呈現的網頁內容。它支持多種網格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。
Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導航，tabs，跳轉鏈接(skiplinks)，撥動開關(togglesand
switches，可以方便快捷地切換元素的class，而不需要進行額外的js操作)，抽屜功能(drawers)，響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流，Gumby的UI元素中還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立解析度的Entypo圖標，你可以在自己的Web項目中盡情使用。
Gumby有一個很好自定義下載選擇器，你可以自行配置各個組件的顏色，並且按自己的需求方便地下載。
八、HTMLKickStart
HTMLKickstart
是一款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標准以及跨瀏覽器兼容的代碼。
這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的Web組件比如JavaScript的幻燈片功能，tabs，麵包屑導航，包含子菜單的菜單以及工具提示等等。
你可以使用99LimeUIKIT提供的UI組件來搭建你的產品線框圖。
九、IVORY
IVORY
是一款輕量，簡單但是強大的前端框架，可以用於320到1200像素寬度的響應式布局。它基於12列的響應式網格布局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的組件和樣式。
當你需要一款輕量靈活，不需要額外的其他功能，並且適應不同瀏覽設備的框架時，IVORY是你最好的選擇。
十、Kube
最後，如果你的新項目需要一款實在的，不需要復雜的額外功能組件的，足夠簡單的框架，那麼Kube
將會是你正確的選擇。Kube是一款最小化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些Web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。
Kube框架包括一個簡潔的CSS文件用於方便地創建響應式布局，還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定製，那麼你可以下載開發者版本(developer
version)，這個版本包括了LESS文件(包括各種變數，mixins以及模塊)。
如何選擇一款優秀的前端開發框架?
將根據以下標准對這些框架進行評估：
·學習曲線
·針對簡單任務的開發效率
·針對復雜、特殊任務的開發效率
·依賴管理
·代碼性能/安全優化調整的能力
·平台升級/冗餘能力
·在企業市場中的認同度
·開發、使用SOAP和REST服務的復雜性
以上就是小編今天為大家分享的關於Web前端工程師應該知道的Web前端開發框匯總的文章希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web前端培訓官網。最後祝願小夥伴們工作順利哦!
作者：獨家記憶0408
3. 如何利用AngularJs快速搭建前端基本框架
前言 vuejs——輕量、學習成本低、雙向綁定、無dom的操作、組件的形式編寫 vuejs是個輕量級的mvvm框架， 集合了angular的基本功能，卻又比angular更為精簡，功能上涵蓋了雙向綁定、指令、邏輯控制、過濾器、事件監聽、函數等。框架的特點使得項目 在狀態變更、分頁的場景下可以擁有很大的便利——所有的操作只需要變更數組，沒有任何的dom操作。 webpack——CommonJS的引用和編寫方式、loader非常的豐富，包括vue-loader、css-loader、less-loader webpack是前端組件化的解決方案，webpack提供了核心的CommonJS引用方案去引用資源，下面這篇文章就給大家介紹webpack和vue.js，一起來看看吧。 項目的創建 1.新建項目文件夾，並在其中建立package.json $ mkdir [project name] $ cd [project name] $ npm init 2.在項目目錄下新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue example</title> </head> <body> <div>{{message}}</div> <script src="dist/build.js"></script> </body> </html> src文件夾，並在該文件夾下建立main.js import Vue from 'vue' new Vue({ el:'body', data:{ message:'test success!' } }); 設置webpack 1.安裝webpack，webpack-dev-server以及相關的loaders # 全局安裝webpack，webpack-dev-server $ npm install -g webpack $ npm install -g webpack-dev-server # 為項目安裝其他依賴 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D webpack-merge：開發環境和生產環節的webpaak配置文件的配置合並 css-loader：編譯寫入css style-loader：把編譯後的css整合進html file-loader：編譯寫入文件，默認情況下生成文件的文件名是文件名與MD5哈希值的組合 vue：vue主程序 vue-loader：編譯寫入.vue文件 vue-html-loader：編譯vue的template部分 vue-style-loader：編譯vue的樣式部分 vue-hot-reload-api：webpack對vue實現熱替換 babel-core：ES2015編譯核心 babel-loader：編譯寫入ES2015文檔 babel-preset-es2015：ES2015語法 babel-preset-stage-0：開啟測試功能 babel-runtime：babel執行環境 url-loader 這里介紹下url-loader，這個loader實際上是對file-loader的封裝 比如CSS文件中有時候會這么寫： .demo{ background-image: url('a.png'); } mole:{ loaders:[ {test:/\.(pngjpg)$/,loader:'url-loader?limit=8192'} ] } 經過以上配置，當a.png小於8K就會自動將圖片轉換成base64編碼，如果不小於，則不會轉換。 這里順便提一句，在mole配置的時候，loader的寫法： mole:{ loaders:[ {test:/\.jade$/,loader:'jade'} //這里配置了讓webpack識別jade的loader，其他類似，比如.vue //用於css文件的loader有兩種寫法 {test:/\.css$/,loader:'style!css'} {test:/\.css$/,loaders:['style','css']} ] } 2.配置webpack.config.js 在根目錄下建立webpack.config.js，配置如下： var path = require('path'); mole.exports = { entry: './src/main.js', //定義webpack輸出的文件，我們在這里設置了 讓打包後生成的文件放在dist文件夾下的build.js文件中 output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, mole: { loaders: [ //轉化ES6語法 { test: /\.js$/, loader: 'babel', exclude: /node_moles/ }, //圖片轉化，小於8K自動轉化為base64的編碼 { test: /\.(pngjpggif)$/, loader:'url-loader?limit=8192' } ] }, //這里用於安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫了 babel: { presets: ['es2015','stage-0'], plugins: ['transform-runtime'] } } 特別說明 如果要在.babelrc下配置babel，則需要在根目錄下新建該文件，windows環境下，不能新建該txt文件然後改後綴，需要通過dos命令建立： echo>.babelrc 通過該命令就可以建立babelde配置文件，用編輯器打開，修改裡面的內容為： { "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] } 完成該配置我們在命令中運行 $ webpack 打開index.html就可以看到瀏覽器中看到我們剛剛寫的文字 總結 至此我們實現了最基本的利用webpack打包vue，大家最好自己實際操作下代碼才能更好的理解，希望這篇文章對大家能有所幫助，如果有疑問大家可以留言交流。
4. 前端開發框架是什麼
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
首個開源HTML5跨屏前端框架產品系列，中文排版前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最後是127 都是零基礎的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(4)前端框架安裝圖解擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
5. web前端三大主流框架都是什麼
web前端的三大主流框架主要是React、Vue.js、Angular。
React
React框架是起源於Facebook的項目，可以輕易地解決跨瀏覽器兼容的問題，主要是通過對DOM的模擬減少與DOM的交互做到的。React的模塊化把組件進行了隔離，出現問題的時候更方便程序員對其進行修改，而且由於JavaScript，因此更有利於搜索引擎的優化。
優點：引入了一個叫作虛擬DOM的概念，運行速度快；提供了標准化的API，解決了跨瀏覽器問題、兼容性更好；代碼更加模塊化，重用代碼更容易，可維護性高。
缺點：React是目標是UI組件，通常可以和其它框架組合使用，並不適合單獨做一個完整的框架。
Vue
Vue是相對比較輕量級的框架，是通過進行雙向數據綁定來達到驅動頁面的效果，大多程序員在學習新框架的時候都會先從Vue開始。Vue比較簡單，官方文檔介紹的很清楚，可以非常快速的通過非同步批處理的方式對DOM進行更新，也能把可復用的、解耦的組件組合在一起使用，更能允許多種模塊的安裝，場景使用也更加靈活。
優點：漸進式構建能力是Vue.js最大的優勢，Vue有一個簡潔而且合理的架構，使得它易於理解和構建。Vue有一個強大的充滿激情人群的社區，這為Vue.js增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點：在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑；它類似於Web組件的模式，而不是真正的Web組件。
Angular
Angular擁有很好的應用程序，是一個以JavaSpript編寫的庫，模板功能也異常強大，本身就帶有豐富的Angular指令。一方面可以通過指令擴寬HTML，一方面可以通過表達式綁定數據到HTML。
優點：模板功能強大豐富並且是聲明式的，是一個比較完善的前端MVC框架，自帶了豐富的Angular指令；ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易地寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
缺點：驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽；ngView只能有一個，不能嵌套多個視圖；比較笨重，沒有讓用戶選擇一個輕量級的版本。
6. 前端常用的框架有哪些
web前端的主流框架，下面，我具體給你介紹一下：
1、Angular：Angular是一款優秀的前端JS框架，Angular有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能，在自定義指令後可以在項目中多次使用。
2、React：React可以非常輕松地創建用戶交互界面。為你應用的每一個狀態設計簡潔的視圖，在數據改變時React也可以高效地更新渲染界面。React為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
3、Vue：近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue對模塊很友好，可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
以上三個就是我給你介紹的關於web前端主流的框架，希望我的回答對你有所幫助
7. IT培訓分享web前端開發都有哪些常見框架結構
隨著互聯網的不斷發展，越來越多的程序員都開始學習和掌握關於web前端開發的相關技術知識。今天，我們就一起來了解一下，web前端開發都有哪些常見框架需要我們了解和掌握的。
一，socket通信
說起web，肯定離不開tcp協議和http協議(https協議較為復雜，暫時不在本章討論范圍之內)。http協議在後面，那什麼是tcp協議，cp協議就是網路的傳輸層面的東西，就是用來傳輸數據的，tcp協議相對安全可靠，主要連接過程如下圖，客戶端先發送一個SYN請求，包含一個隨機數seq，假設這個隨機數的值等於i。伺服器就會發送一個ACK請求，並且對這個隨機數加1，同時發給客戶端，客戶端收到服務端的ack之後也會向服務端發送一個ack(這里只是大概描述了一下tcp三次握手，如果想詳細了解的話可以去看tcp/ip協議卷)
http是應用層的協議，它的傳輸層是tcp協議。可以說sock通信是web服務的底層通信，沒有socket也就沒有http協議，跟談不上web服務了
二，體系架構
主要有c/s架構和b/s架構，c/s主要由一般需要在客戶端安裝的應用程序和遠程伺服器組成的。它的優點是通信雙方的通信量較少，因為大部分信息存儲在本地，缺點是客戶端的維護和升級較為麻煩，一般適用於大型的系統。
b/s架構是由瀏覽器和伺服器組成的，優點是方便，隨時可以上網，缺點是通信量較大，相對於c/s不是特別的穩定;
c/s架構
b/s架構
三，web應用程序的工作原理
web應用程序大致上分為兩種，即動態網站和靜態網站。靜態網站就是用HTML寫的靜態頁面，動態網站是根據用戶不同的請求動態的生成動態的不同的頁面發送給客戶端，通常使用HTML語言和動態腳本語言(ASP,PHP,JSP)等語言編寫。下面的圖片來源於網路
在開發Web應用程序時，通常需要應用客戶端和伺服器端兩方面的技術。其中，IT培訓http://www.kmbdqn.com/認為客戶端應用的技術主要用於展現信息內容，而伺服器端應用的技術，則主要用於進行業務邏輯的處理和與資料庫的交互等。
四，HTTP協議
為了使互聯網的web服務茁壯的發展，讓客戶端和服務端共同的遵守一些協議，http就出現了。http協議可以說是偉大的協議之一，主要有1.0版本，1.1版本和2.0版本。
8. 前端常用的框架有哪些
在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前端開發常用的一些框架。程序員們可以根據自己的業務需求選擇簡潔直觀、功能強大的前端開發框架，讓自己的工作更迅速簡單，提高開發的效率。
9. 前端開發框架都有哪些
web前端的三大主流框架主要是React、Vue.js、Angular。
React
React框架是起源於Facebook的項目，可以輕易地解決跨瀏覽器兼容的問題，主要是通過對DOM的模擬減少與DOM的交互做到的。React的模塊化把組件進行了隔離，出現問題的時候更方便程序員對其進行修改，而且由於JavaScript，因此更有利於搜索引擎的優化。
優點：引入了一個叫作虛擬DOM的概念，運行速度快；提供了標准化的API，解決了跨瀏覽器問題、兼容性更好；代碼更加模塊化，重用代碼更容易，可維護性高。
缺點：React是目標是UI組件，通常可以和其它框架組合使用，並不適合單獨做一個完整的框架。
Vue
Vue是相對比較輕量級的框架，是通過進行雙向數據綁定來達到驅動頁面的效果，大多程序員在學習新框架的時候都會先從Vue開始。Vue比較簡單，官方文檔介紹的很清楚，可以非常快速的通過非同步批處理的方式對DOM進行更新，也能把可復用的、解耦的組件組合在一起使用，更能允許多種模塊的安裝，場景使用也更加靈活。
優點：漸進式構建能力是Vue.js最大的優勢，Vue有一個簡潔而且合理的架構，使得它易於理解和構建。Vue有一個強大的充滿激情人群的社區，這為Vue.js增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點：在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑；它類似於Web組件的模式，而不是真正的Web組件。
Angular
Angular擁有很好的應用程序，是一個以JavaSpript編寫的庫，模板功能也異常強大，本身就帶有豐富的Angular指令。一方面可以通過指令擴寬HTML，一方面可以通過表達式綁定數據到HTML。
優點：模板功能強大豐富並且是聲明式的，是一個比較完善的前端MVC框架，自帶了豐富的Angular指令；ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易地寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
缺點：驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽；ngView只能有一個，不能嵌套多個視圖；比較笨重，沒有讓用戶選擇一個輕量級的版本。
10. 開箱即用的React前端框架——ReactAdmin
ReactAdmin是一個Github上免費開源的前端框架（不是組件庫，也不是模板，它是一個框架），採用es6、React和Material Design構建基於Rest/GraphQl API的Web應用程序。在React上star數超過8k。
https://github.com/marmelab/react-admin
ReactAdmin不是個UI組件庫，它是一個前端框架，因此你基本上基本上只要按照官網的文檔進行一些配置等然後在其基礎上開發自己的應用程序即可，可謂開箱即用，意識就是都給你集成好了。
你可以直接使用以下命令進行安裝（這是安裝react-admin及所有的依賴）
下面我們看一下官網提供的一個最簡單的示例，你可以在它的主倉庫中獲取
我們進入到simple中，大致看一下代碼和目錄結構
我們安裝一些依賴然後啟動
成功後打開瀏覽器，這是使用react-admin最簡單的一個例子
一圖了解
由於ReactAdmin是一個非常復雜的框架，你可以參考提供的文檔，我這里就不詳細介紹了，感興趣的可以直接看文檔，文檔是英文的，所有的說明都在文檔中。
https://marmelab.com/react-admin/
ReactAdmin它是一個集合，它將一些前端開發所需要的東西都集成了進來，然後做好，我們直接使用即可，不僅僅適合個人學習，也適合通過它來構建企業級的應用。我們不僅僅是拿過來直接用，我們可看一看別人是怎麼實現這樣的一個框架的，從源碼去學習會更快的提升自己的水平，希望對你有所幫助！