CS►web►front-end►framework

Angular的适用领域相对窄一些，React可以拓展到服务端，移动端Native部分，而Vue因为比较轻量

分类

  • css框架
    • Bootstrap: 一套ui皮肤+少量js组成的框架，属于封装度偏低的框架

  • js框架
    诸如AngularJS、Ember.js、Meteor.js、ExtJS和React等面向网页浏览器的JavaScript框架采纳了单页应用（SPA）原则。

    • AngularJS是一个全面的客户端侧框架。其模板基于双向UI数据绑定。数据绑定是一种自动方法，在模型改变时更新视图，以及在视图改变时更新模型。其HTML模板在浏览器中编译。编译步骤创建纯HTML，浏览器将其重新渲染到实时视图。该步骤会在随后的页面浏览中重复。在传统的服务器端HTML编程中，控制器和模型等概念在服务器进程中进行交互以产生新的HTML视图。在AngularJS框架中，控制器和模型状态在客户端的浏览器中维护，从而使生成新页面不依赖与服务器的交互。
    • Ember.js是基于模型-视图-控制器（MVC）软件架构模型的客户端侧JavaScript Web应用程序框架。它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性，Handlebars.js提供的自动更新模板，以及一个路由器管理应用程序状态。
    • Meteor.js是一个专门为单页应用设计的全栈（客户端-服务器）JavaScript框架。它具有比Angular、Ember或ReactJS更简单的数据绑定特性[6]，并且使用Distributed Data Protocol[7]和一个发布/订阅来自动将数据更改传播到客户端，无需开发人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以在必要时自动更新。诸如服务器端渲染[8]等生态系统包则解决搜索引擎优化（SEO）等问题。
    • Aurelia是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS，但更新、更匹配标准，并采用模块化举措。Aurelia使用下一代ECMAScript编写。[来源请求]
    • Vue.js（通常称为Vue）是一个用于构建用户界面的开源渐进式JavaScript框架。
    • React（通常写为React.js或ReactJS）是一个构建用户界面的JavaScript库。它由Facebook、Instagram和个人开发者以及企业社区维护。React最大的优势是易于使用——基本上任何熟悉HTML的开发人员都可以创建React应用程序。另一个所称的优势是可能使用相同的技术堆栈来同时创建Web与移动应用程序。有多家公司使用React和Redux库来让开发人员创建复杂但可扩展的Web应用程序。[9]
      Fulcro是一个全栈库，它采用Netflix的Falcor，Facebook的Relay和Om Next对反应性，功能性，数据驱动软件进行改编的数据驱动原则。
BootStrap Foundation Semantic UI Angular React Preact Vue jQuery
人气 Preact 受众最小，但增长最快
说明 Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在网络上开发响应式、移动的Web项目 世界上最先进的响应式前端框架 基于自然语言原则的UI组件框架 框架只负责”View”层，这意味着其它业务逻辑是完全解耦的，并且能以任何方式来实现。
核心概念/原则 RWD和移动端优先。 RWD，移动端优先，语义 Semantic, tag ambivalence, responsive
框架大小 154 KB 197.5 KB 806 KB
预处理器 Less和Sass Sass 少
响应式布局 √ √ √
模块化 √ √ √
启动模板/布局 √ √ √
图标集 Glyphicons Halflings设置 基础图标字体 Font Awesome

bootstrap

bootstrap基本就是

Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在网络上开发响应式、移动的Web项目。

掌握 LESS 有助于理解 Bootstrap。

1
2
3
4
5
6
7
8
9
10
11
<!-- Latest compiled and minified CSS
这是编译后的版本，119K，有点大。
有些人建议采用编译前的less，选择性引用。
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • 自己整理css的话工作量太大。
  • bootstrap主要是样式侵入性太强，个性化定制太麻烦
  • bootstrap.min.css 100多k。

会加载整个css吗？还是只加载用到的？

如果引用bootstrap.min.css，肯定会加载所有样式。
所以很多人不建议直接引用bootstrap.min.css，而是下载bootstrap source的less，然后选择性引用。

grid system是什么鬼？

bootstrap.min.css 119k
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css