對于筆者來說，對于架構的選型和應用還是挺感興趣的。現在市面上已經有很多的軟體架構了，而且還朝着更全面更快速的進行着發展。這裡筆者主要從前端、後端、UI架構三方面進行描述，介紹目前比較流行的架構。這裡沒記錄的請讀者自行去百度。
一、 前端架構；
1.Vue
https://cn.vuejs.org
Vue (讀音 /vjuː/，類似于 view) 是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
2.React
https://react.docschina.org/
React 是一個用于建構使用者界面的 JAVASCRIPT 庫。React主要用于建構UI，很多人認為 React 是 MVC 中的 V（視圖）。React 起源于 Facebook 的内部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
3.Angular
https://angular.io
AngularJS誕生于2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用于Google的多款産品當中。AngularJS有着諸多特性，最為核心的是：MVVM、子產品化、自動化雙向資料綁定、語義化标簽、依賴注入等等。
4.QucikUI
http://www.uileader.com/product_quickui
QucikUI 4.0是一套完整的企業級web前端開發解決方案，由基礎架構、UI元件庫、皮膚包、示例工程和文檔等組成。底層基于jquery建構。使用QucikUI 開發者可以極大地減少工作量，提高開發效率，快速建構功能強大、美觀、相容的web應用系統。
5.Layui
https://www.layui.com/
layui（諧音：類UI) 是一款采用自身子產品規範編寫的前端 UI 架構，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的内在，體積輕盈，元件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常适合界面的快速開發。layui 首個版本釋出于2016年金秋，她差別于那些基于 MVVM 底層的 UI 架構，卻并非逆道而行，而是信奉返璞歸真之道。準确地說，她更多是為服務端程式員量身定做，你無需涉足各種前端工具的複雜配置，隻需面對浏覽器本身，讓一切你所需要的元素與互動，從這裡信手拈來。
6.Avalon
http://avalonjs.coding.me/
avalon2是一款基于虛拟DOM與屬性劫持的 迷你、 易用、 高性能 的 前端MVVM架構， 擁有超優秀的相容性, 支援移動開發, 後端渲染, WEB Component式元件開發, 無需編譯, 開箱即用。
7.Dojo
https://dojo.io/
Dojo緻力于實作最大的互操作性。Web元件提供了一種機制，可以在Dojo應用程式中利用非Dojo元件，并在非Dojo應用程式中輕松使用基于Dojo的小部件。Dojo為Web元件提供一流的支援。您今天做出的決定不應該将您鎖定在未來的決策中。
8.Ember
https://emberjs.com/
Ember.js可能是最固執己見的主流架構，這也是其最大的優勢。它有建立Ember.js應用程式的正确方法，通常隻有一種方法來建立應用程式。Ember.js更類似于一個産品或平台，在那裡你會到一個供應商的長期支援和維護。Ember.js提供了對其平台的全面版本管理，更新工具以及對API更新的強大指導和工具。成熟，是對Ember.js的一個很好的總結。
9.Aurelia
https://aurelia.io/
Aurelia是一個令人驚歎的架構，它在不犧牲功能的情況下采用簡單而幹淨的代碼。在本教程中，我們将通過建構“Todo”應用程式向您介紹Aurelia的簡單性。您将看到應用程式代碼的簡潔程度，您将學習Aurelia的幾個基本概念和功能。
二、 後端架構；
在選擇要使用的後端架構時，有許多選項可用。雖然每個後端架構都有自己的優點和缺點，但在做出最終決定之前，還有一些其他因素需要考慮。在本指南中，我們将仔細研究經過嘗試的架構，以确定哪個是最适合您的後端架構。
後端vs前端
如果您是Web開發世界的新手，後端和前端開發之間的差別可能不那麼明顯，但是，了解兩者之間的差別很重要。以下是前端開發人員與後端開發人員的一些差別。
前端開發：前端開發人員在很大程度上負責使用者所看到的内容（即網站頁面），前端開發人員主要使用HTML，CSS和JavaScript。他們的主要關注點是建立出色的使用者體驗，并確定網站設計和布局或Web應用程式始終具有凝聚力。
後端開發：另一方面，後端開發人員正在研究幕後發生的事情，後端開發人員使用各種庫，API，Web服務等。他們負責資料庫系統的實作，確定各種Web服務之間的正确通信，生成後端功能等。
8個流行的後端架構清單
在這個後端架構清單中，我們不想堅持使用單一程式設計語言。相反，我們希望展示各種語言的後端架構。當然，下面的清單并未提供針對每種語言的後端架構建議，但它确實提供了一些很好的建議。
1.Laravel
Laravel
Laravel是一個基于PHP的後端架構，具有整潔優雅的文法，适應大型團隊的能力以及現代工具包的功能。Laravel遵循MVC架構模式，旨在促進廣泛的後端開發。Laravel還提供自己的資料庫遷移系統，并擁有強大的生态系統。
特征
簡單快速的路由引擎
附帶CLI
強大的模闆系統（刀片）
文檔功能
2.CakePHP
CakePHP
CakePHP是2005年釋出的PHP架構之一，從那時起，它已經走過了漫長的道路，現在被稱為現代PHP架構，允許開發人員快速建構。CakePHP使用幹淨的MVC約定，并且具有高度可擴充性，使其成為建構大型和小型應用程式的絕佳選擇。
特征
允許快速建構
建立在安全的基礎上
入門不需要複雜的配置
3.Django
Django
Django是一個進階Python架構，它包含了許多的功能子產品，意味着開發人員想要的大多數内容都包含在内。是以，對第三方插件的需求較少，如果你計劃建構一些小的東西，Django可能不是最好的選擇。
特征
高度可定制
可擴充
廣泛的社群和文檔
4.Ruby on Rails
Ruby on Rails
Ruby on Rails是一個用Ruby程式設計語言編寫的伺服器端Web架構，Ruby鼓勵使用設計模式，如MVC和DRY。
特征
提供大型插件庫
Ruby提供了清晰的文法
龐大的社群
小項目易于開發和管理
5.Flask
Flask
Flask是一個基于Python的後端架構，與Django不同，它是輕量級的，更适合開發小型項目。Flask支援Jinja2模闆，安全cookie，單元測試和RESTful請求排程等功能。它還提供了大量的文檔，對于那些不需要Django附帶的所有花俏功能的Python程式員來說，它是一個很好的解決方案。
特征
非常靈活
比Django更輕巧，适合小型項目
很棒的文檔
提供快速建構原型的能力
6.Phoenix
Phoenix是一個後端架構，可與Erlang的虛拟機配合使用，并使用Elixir編寫。鑒于Elixir是一種功能語言，它可能不像其他面向對象語言那樣受歡迎，但它是為建構可擴充和可維護的應用程式而設計的，Phoenix将經過驗證的技術與功能性程式設計的新思想結合使用。
特征
非常快
容錯
内置資料庫選項
精心設計
大量的文檔和活躍的社群
7.Express
Express
Express是Node.js的一個快速，簡約的架構。它提供了基本的Web應用程式功能，此外，借助各種HTTP實用程式方法和可用的中間件，可以輕松建構API。許多流行的伺服器端和完整堆棧架構都使用Express，如Feathers，KeystoneJS，MEAN，Sails等。
很棒的API
設定簡單，學習起來簡單
大量插件可供使用
8.Spring Boot
Spring Boot
Spring Boot是一個基于Java的開發架構，由Spring建立，旨在易于使用，并提供一個生産級的基于Spring的應用程式。
特征
建立獨立的Spring應用程式
高度可擴充
大量的文檔
專為使用雲方法的大型應用程式而建構
廣泛的生态系統
選擇後端架構時要考慮什麼？
在選擇後端架構之前，您應該考慮幾個重要因素，以下是一些要記住的事項。
學習曲線：每個架構在命名，目錄結構等方面都有不同之處。如果您已經熟悉特定的程式設計語言，那麼您可能希望堅持使用該語言的架構。另一方面，如果您還不熟悉特定的語言，使用Python的Django架構是一個很好的起點，因為它非常簡單。
文檔/社群：如果您以前沒有任何後端架構經驗，那麼選擇具有大量文檔和/或大型社群的架構可能是有利的。
庫：一些架構在提供的庫方面提供了更多的靈活性和選擇，這允許開發人員實作或配置庫以執行否則将是耗時或不可能的特定任務。
安全性：安全性是一個非常廣泛的主題，根據您正在建構的應用程式，您可能需要某些安全功能，某些後端架構表現更好。
可擴充性：如果您正在為大衆建構應用程式，您需要確定架構能夠随時擴充。
結論
有多種後端架構可供選擇，每種架構都有各自的優缺點。确定哪個後端架構是最好是相當主觀的，因為它取決于你想要實作的目标，你必須克服學習曲線等等。盡管如此，希望這個後端架構清單能夠為你提供一個方向。
三、 UI架構；
Bootstrap
首先說 Bootstrap，估計你也猜到會先說或者一定會有這個( 呵呵了 )，這是說明它的強大之處，擁有架構一壁江山的勢氣。自己剛入道的時候本着代碼任何一個字母都得自己敲出來擋我者廢的決心，來讓自己成長。結果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬裡有一的人才，但是老天隻讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美，是以這也是我最初選擇 Bootstrap 的原因之一，它讓我做出來的東西好歹能在妹子面前裝個逼，不過時間長了難免覺得 Bootstrap 美的讓人煩躁， 但好在它的每個版本都會有很大的改變，不會讓人覺得自己做的網站會跟很多網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數，了解他們痛的結果 )，以至于是個小前端都可以快速上手，幾乎沒什麼學習成本。
官網：http://getbootstrap.com/
Github：https://github.com/twbs/bootstrap/
作者：Mark Otto 和Jacob Thornton Star：93,112
總結：Bootstrap 最大的優勢就是它非常流行，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關注它的童鞋應該發現最新 V4 版也開始支援 FlexBox 布局，這是非常好的更新體驗。 劣勢是 class 命名不夠語義化，并且各種縮寫，以至于我離了文檔就是個菜，最近開始整混合 APP，選架構的時候首選就是它，但之前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我隻好選擇别的架構。
AUI
第三個是最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI架構，但實際它還是解決了很多移動前端開發的普遍問題，是主要面向混合開發的 CSS 架構。看起來作者比較猖狂，各種進階 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的相容性。不負衆望果然選的都是相容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，并且架構還提供了聊天界面、計數清單等元件，解決了很多複雜的讓我罵娘的布局，現在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網：http://www.auicss.com/
作者：流浪男 Star：92
總結：這個架構對我來說有個優點就是純 CSS 架構，自己以前也就用過 Pure，自己有點 JS 能力，如果不是複雜的效果，找個純 CSS 架構自己随便改改就可以，而現在 CSS3 也已經能夠做到動畫，效率、品質、高效全兼顧，是以還是選擇了這種 CSS 架構。有一點覺得不滿的是這架構的文檔真的好那什麼，說好的高大上呢。
Amaze UI
第二個介紹的是妹子UI，最初使用它是因為本尊遇到了一個愛糾結細節設計士，有一次她跟我的字型較上真了，結果一句頂萬句的 BOOS 誇了她，我隻好根據她的想法去解決，結果最後找到了Amaze UI 架構( 我不介意你叫我懶淫 )，按照官方的話說就是 "基于社群開源項目建構的一個跨屏前端架構，以移動優先，從小屏到大屏，最終實作所有螢幕适配，适應移動互聯潮流" 。但其實我就是看中它能解決國内浏覽器存在的跨屏适配和相容性問題。
官網：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
所屬公司：雲适配 Star：6710
總結：Amaze UI 總的來說就是加入更多符合中國市場特性的元素，架構對跨屏、适配都做了的比較好的處理并且準備一了一系列的常用的網頁元件，為減少搞相容、适配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。，架構還對中文排版優化，相容中國本土主流浏覽器、輕量化，不僅适用于桌面端，還更更适合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什麼了，比如 “人們不會在乎jQuery的那點流量。”，說實的在這真沒啥，不過我從來不會說出來( 哈哈 )，代碼和設計上感覺沒太多突出的點。
Frozen UI
有段時間看到 QQ 瞬間高大上了，後來四處打聽，原來 QQ 客服端也用了 混合開發，其中QQ會員前端用的是 Frozen UI，并且這套架構開源，欣喜若狂耐不住心裡的寂寞直接上手試了一遍，初體驗感覺基礎樣式效果簡單色調清爽，有個比較活躍的社群是以元件什麼的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發，這個架構對 android 2.3 +、ios 4.0 + 做了相容，或者拿來做 Web App 也是極好的選擇，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
Frozen UI
第三個是Frozen UI，有段時間看到 QQ 瞬間高大上了，後來四處打聽，原來 QQ 客服端也用了 HTML 混合開發，其中QQ會員前端就是用的 Frozen UI，并且這套架構開源，欣喜若狂耐不住心裡的寂寞直接上手三下五除二試了一遍就開始試用，初體驗的就是基礎樣式效果簡單色調清爽，有個比較活躍的社群是以元件什麼的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發，并且這個架構對 android 2.3 +、ios 4.0 + 做了相容，或者拿來做 Web app 也是極好的選擇，不過要是放在微信裡比這更合适的 WeUI 架構更是首選了，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
WeUIi
第四個是WeUI和同 FrozenUI都屬于 差不多的 WeUi了，也是一個比較專一的架構，WeUI應該說比FrozenUI前者更專一，話說連個官網都不搞，所有答疑都在 gitHub Issues 解決了，這個架構極其簡單，體積當然就不用說了，子產品也就 7 個左右，不過體量雖然小做的卻不錯，口碑看 star 就夠了，架構從 16/1/23 發版至今 github star 超過 7K,不過也不排除使用者沒地方發洩是以都跑到 git 上來，哈哈。
Github：https://github.com/weui/weui
DEMO：http://weui.github.io/weui/
Star：7,129
總結：看完微信設計團隊設計的這套 DEMO，二話不說如果要做微信公衆，這個二話不說必然是首選了。架構不好的地方簡而言之就是架構本身應該就沒考慮過讓使用者用到非微信的場景之下。
SUI
“SUI 是一套基于bootstrap開發的前端元件庫，同時它她也是一套設計規範。通過SUI，可以非常友善的設計和實作精美的頁面”。 果然還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞( 囧… )，當然了就像廣告說的，如果你之前用過 Bootstrap， 那麼可以輕松轉向 SUI，這可能就是淘寶給前端屌絲們的福利了。。
Github：https://github.com/sdc-alibaba/sui
官網：http://sui.taobao.org/sui/docs/index.html
Star：120
AUI
第六個是最近剛起來的最近剛起來的 AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI架構，但實際它還是解決了很多移動前端開發的普遍問題，是它主要面向混合開發的 CSS 架構。，是以看起來作者比較猖狂，各種進階 CSS3 遍地使用，這也使得我不得不去查查這些個 CSS3 的相容性。不負衆望果然選的都是相容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，并且架構還提供了聊天界面、計數清單等元件，解決了很多複雜的讓我罵娘的布局，現在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網：http://www.auicss.com/
作者：流浪男 Star：92
總結：這個架構對我來說有個優點就是純 CSS 架構，自己以前也就用過 Pure，自己有點 js 能力，如果不是複雜的效果自己找個純 CSS 架構自己随便改改就能達到效果，而現在 CSS3 也已經能夠做到各種動畫，效率、品質、高效各種一頓考慮是以還是選擇了這種 CSS 架構。而一直覺得不滿的是這架構的文檔真的好那什麼，說好的高大上呢。
MUI
曾經一直使用 Android 系統的我，後來見到 IOS，果斷移情别戀了，不知道為什麼蘋果每次調整系統我都特别喜歡，後來一段時間因為缺設計我專門模仿 IOS 系統做 UI，但始終不能夠做到很好，無意間就發現了 MUI 這個架構，這個架構給我的吸引之處就是它的 UI 是以 IOS 為主體設計的，當然它也補充了android特有UI樣式。并且MUI官方聲稱用來開發深入以後發現拿它做 APP 還能夠提高使用者使用流暢度，然後便試着更深入的了解和使用一段時間。
官網：http://dev.dcloud.net.cn/mui/
Github：https://github.com/dcloudio/mui
Star：2,450
總結：就像之前說的這個架構是以兩大系統為參照來封裝UI元件，架構自身還有一個較為活躍的社群，不太好的地方這也是我特别關注的一點，關于開發應用的流暢度，我當然知道這是 H5 目前的劣勢，但是看到官網給的描述，還是抱着期待的心理試試看能否提升，然而它其實還是需要是借助 Webview來提升，而不是架構本身。
Semantic UI
倒數第三個是 Semantic UI，接觸這個架構還是因為 Bootstrap，Semantic UI 剛上線 github 就受到大量開發者的關注，以至于很多人拿它倆對比各種挑刺各種誇，是好是壞不能單憑别人三句四句就擡起手指開始贊，用了以後感覺 UI 上跟 Bootstrap 沒太多的差別，不過代碼命名規範上卻相差甚大，本人認為 Semantic UI 是不是就想做的不一樣，它的命名全是采用複合的方式，類名特别的離散，用的時候你得很小心自己擴充或者新增的 class 命名與它的類名沖突。
官網：http://www.semantic-ui.cn/
Github：https://github.com/semantic-org/semantic-ui/
Foundation
Foundation 算是架構界的元老啦，都說架構去的早，而這個架構一直到現在依然這麼的熱門，如果你比較介意 Bootstrap 開發撞臉的尴尬事情，那麼你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像，就像官方說的給開發者更靈活的架構體驗。
官網：http://foundation.zurb.com/
Github：https://github.com/zurb/foundation-sites
Star：22,736
UiKit
UIkit是YOOtheme團隊開發的，在許多WordPress主題中都有應用(也就是如果你是個 WordPress 愛好者，那麼這個架構應該比較适合深究)，并且架構能夠通過GUI編輯器和手動編輯，是以它提供了一個靈活、強大的自定義機制。架構借助LESS、jQuery、normalize.css及FontAwesome開源項目的獨有特點，整合成了這麼一款輕量級、子產品化的前端架構。
官網：http://www.getuikit.com/ Github：https://github.com/uikit/uikit 作者：YOOtheme Star：6,372
Pure
終于最後一個了，我和你一樣好開森 (～￣▽￣)～)，這個架構是我在做管理系統時接觸的，選擇使用也是因為架構小巧，并且是純 CSS，沒有太多的牽扯，好用來與其他架構快速結合使用。
官網：http://purecss.io/
Github：https://github.com/yahoo/pure/
![webstorm中配置git[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)