前端框架匯總

三大主流框架

1. Vue

   Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
   開源小demo：簡易留言板

2. React

   React 是一個聲明式，高效且靈活的用於構建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”。React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
   開源小demo：簡易留言板&待辦事項

3. Angular

   AngularJS誕生於2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
   開源小demo：Angular Bootstrap管理面板框架

Node.js

原文出處 來源知乎

If you’ve been paying attention to news about web technology in the last year, you’ve most likely heard the name node.js mentioned at least once or twice. What happened next probably went like this: you asked, “What is it?” and someone (or Google) told you that it was a way to write web servers using JavaScript. If that didn’t scare you away, you might then have asked, “Why would you want to use it?” and the answer might have been along the lines of it taking advantage of non-blocking, event-driven IO to enable high concurrency in long polling or comet-based applications.

At which point you stopped asking questions. I don’t blame you. To help break apart that wall of jargon, here’s my attempt at explaining what node.js is and why you should be paying attention to it.

So here’s how it is, how it’s always been: a browser sends a request to a website. The site’s server receives the request, tracks down the requested file, performs any database queries as needed, and sends a response to the browser. In traditional web servers, such as Apache, each request causes the server to create a new system process to handle that request.

Then there was Ajax. Instead of requesting a whole new page each time, we’d only request the piece of information we actually wanted. Okay, that’s an improvement.

But now think about how you’d go about building a service like FriendFeed, where each user’s feed is updating in real time, all the time. The only way that’s possible is if each user has an active connection to the server at all times. The simplest way to do that at present is through long polling.

Long polling essentially tricks HTTP into acting like a persistent connection: as soon as the page loads, it fires off an Ajax request to the server, even if the page doesn’t want anything in particular. But, unlike a normal Ajax request, the server doesn’t respond right away. It just waits, and fires back a response only when it has something new it wants the browser to display. For example, as soon as one of your friends adds a new post, the server returns the response telling the browser to update its display. As soon as the browser receives the response, it shoots back another request. This way the browser is always waiting for a new event to happen on the server side.

Now think about what that means for a traditional web server like Apache. For each and every user connected to the site, your server has to keep a connection open. Each connection requires a process, and each of those processes will spend most of its time either sitting idle (consuming memory) or waiting on a database query to complete. This means that it’s hard to scale up to high numbers of connections without grinding to a near halt and using up all your resources.

So what’s the solution? Here’s where some of that jargon from before comes into play: specifically non-blocking and event-driven. What those terms mean in this context is less complicated than you might fear. Think of a non-blocking server as a loop: it just keeps going round and round. A request comes in, the loop grabs it, passes it along to some other process (like a database query), sets up a callback, and keeps going round, ready for the next request. It doesn’t just sit there, waiting for the database to come back with the requested info.

If the database query comes back — fine, we’ll deal with that the same way: throw a response back to the client and keep looping around. There’s theoretically no limit on how many database queries you can be waiting on, or how many clients have open requests, because you’re not spending any time waiting for them. You deal with them all in their own time, and that’s what event-driven means: the server only reacts when an event occurs. That could be a request, a file being loaded, or a query being executed — it really doesn’t matter.

FriendFeed uses a non-blocking framework written in Python, called Tornado, to do this. The nginx web server also behaves in this way. Node.js, however, has an ace up its sleeve: because it’s using JavaScript — running on Google’s crazy-fast V8 engine — it never needs to worry about whether a request it makes to another piece of code might cause the loop to block up. The reason is that JavaScript is intrinsically event-driven. Think about it: when you write JavaScript for the browser, you’re just attaching event handlers and callbacks. That’s the way the language was designed.

Node.js is still in its infancy, so if you want to write an application based on it you’ll need to do some fairly low-level coding. But with the impending arrival of WebSockets in next-generation browsers (eliminating the need for long polling altogether), this type of technology will only become more important on the Web. I hope I’ve given you the incentive to start messing around and getting your head around these concepts.

簡單的說 Node.js 就是運行在服務端的 JavaScript。
Node.js 是一個基於Chrome JavaScript 運行時建立的一個平台。
Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

UI前端UI框架

原文出處：來源CSDN

1. Mint UI

官網：https://mint-ui.github.io/#!/zh-cn
Github: https://github.com/ElemeFE/mint-ui/
由餓了么前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫，自 開源以來，根據社區和團隊內部的反饋，修復了一些 bug 並新增了部分組件。

2. WeUI

官網地址：https://weui.io/
Github: https://github.com/weui/weui.git
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。

3. iView UI

官網地址：https://www.iviewui.com
Github: https://github.com/TalkingData/iview-weapp
一套基於 Vue.js 的高質量UI 組件庫，主要服務於 PC 界面的中后台產品，過去的兩年里，iView 開源項目已經幫助成千上萬的開發者快速完成網站開發，大幅度提高了開發效率，成為 Vue.js 生態里重要的一部分。

4. layui

官網地址:https://www.layui.com
Github: https://github.com/sentsin/layui/
經典模塊化前端框架由職業前端傾情打造，面向所有層次的前后端開發者，零門檻開箱即用的前端UI解決方案 ，在年度最受歡迎的框架排名榜上也是前三名的。

5. ElementUI

官網地址:http://element-cn.eleme.io/#/zh-CN
Github: https://github.com/ElementUI/element-starter
element ui框架的按鈕組件，這款由餓了么前端開源的UI框架，一經面世，就收獲大量程序員的芳心，在github 上更是高達29.8k的star早已說明一切，用於開發PC端的頁面還是綽綽有余的，如果說你是用vue開發者，卻沒用過element UI，那你肯定不是合格的vue開發者。

6. vant UI

官網地址：https://youzan.github.io/vant/#/zh-CN/intro
Github: https://github.com/youzan/vant
Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基於相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用。

7. Flutter

官網:https://flutterchina.club/
Github: https://github.com/flutter/flutter
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面，前端對於 Flutter 的熱忱度之高一度讓人有點驚訝，事實上在 Flutter 社區內見到的客戶端開發者遠多於前端開發，不過前端對於跨端解決方案確實有着天然的渴求。

8. Bootstrap

官網：http://getbootstrap.com/
Github：https://github.com/twbs/bootstrap/
Bootstrap 最大的優勢就是它非常流行，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關注它的童鞋應該發現最新 V4 版也開始支持 FlexBox 布局，這是非常好的升級體驗。 劣勢是 class 命名不夠語義化，並且各種縮寫，以至於我離了文檔就是個菜，最近開始整混合 APP，選框架的時候首選就是它，但之前搞 PC 一直沒注意，后來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我只好選擇別的框架。

一個比較有趣的問題

原文出處

前端用的框架，就是前端框架。
只是有些框架屬於輕框架，比如部分UI框架，只提供一些基本的ui控件封裝，
有些框架屬於重框架，比如extjs，vuejs，AngularJS、React 等，提供全套UI組件，以至於不需要寫html了。。。
還有一些屬於解決某些痛點的基礎框架，比如jquery，Bootstrap等，前者是為了js編碼的兼容和簡潔，后者是提供一套響應式布局的基礎設計。
不要對框架這個詞有太多解讀，就是框架而已。
就像蓋房子的框架，
純粹的承重柱和承重梁組成的，也是框架，
添加了部分牆面的，也是框架，
添加了門窗結構的，也是框架，
甚至抹水泥了，還是框架。。。
只有裝修可入住了，才算是成品房