前端框架汇总

前端框架汇总

三大主流框架

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编码的兼容和简洁，后者是提供一套响应式布局的基础设计。
不要对框架这个词有太多解读，就是框架而已。
就像盖房子的框架，
纯粹的承重柱和承重梁组成的，也是框架，
添加了部分墙面的，也是框架，
添加了门窗结构的，也是框架，
甚至抹水泥了，还是框架。。。
只有装修可入住了，才算是成品房