1. 如何做商业前端框架+UI库选型
这将帮助你了解前端社区中海量的工具。
当然，这些只是一些可选的列表，当你需要做出选择的时候帮助你抉择。
我自己使用它吗？
是的，当我需要开始项目的时候，我用它来作为提醒。
同时，每当有人问“我该使用什么框架呢？”的时候，我就会把这篇文章给他看。
因为，正如你明白的，事情没有绝对的对与错，但是有一些优质的框架能够帮助做出我们更好的选择。
另外，我也会不时的更新本文，因为有时候当我学习更多后也会改变当初的想法。
我应该怎样开始?
如果你的项目不是很小，你应该需要下面几件事：
项目模块化 我个人比较喜欢 Component-based architecture，因为他适用于 various-frameworks
同时，考虑一些其他的例子，比如 BOT 、 Elm Architecture 或者 re-frame 或者 CycleJS
模块加载器(RequireJS，Browserify, Webpack, ComponentJS, SystemJS)
这些东西能够帮助我们保持Javascript(或者components)彼此独立和可维护。
包管理器(npm, jspm, bower)
我个人一直比较喜欢 npm ，似乎他是javascript和nodejs真正的标准。另外我会考虑bower来做补足，因为他是一个很好的下载静态资源的工具，但它在管理组件和依赖又不如npm强大。
自动部署/编译/构建流水线(grunt/gulp/brunch/broccoli)
因为，如果一直做重复的事情的话生命是很短暂的。
CSS预处理(jss/stylus/sass/css-moles)和 postprocessors(css0, autoprefixer, postcss)
这些工具使css更美好，去除了一些浏览器兼容的问题。是的，我是从2015知道这些的，但是不论如何，它在过去确实是痛点。
构建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)
这些框架让很多web开发者合作，它们会帮助你处理基本的布局和样式。
尽管，你可以考虑构建你自己的解决方案，如果你感觉构建很厉害或者希望成为前端专家，或者你需要为你的公司构建基本的视觉元素。
如果是这样的话，建议你尽快使用方法论(BEM, OOCSS)，它们可以帮助你节约时间。
我个人比较喜欢 BEM 命名方式和基本工作流，你能够从 styleguide for Brainly.com找到一些可以帮助你的灵感。
如果你不构建基本的组成，建议看一看 HTML5 Boilerplate
测试工具(jasmine, karma, mocha, tape, itern)
任何人都需要测试，没有例外的。
代码质量监控工具(eslint, husky, editorconfig)
可以获取帮助的社区(chats, IRC, meetups, twitter)
好了，下一步呢？
在选择你的工具前有一些值得思考的问题需要解决。
准备好了吗？
我需要和其他人合作吗？他们是谁？他们想要什么？
这个问题会帮助你选择语言和工作流，这对你和你的伙伴都有帮助。
我最关注什么？质量，开发速度，还是可维护性？
这样你可以决定是否试验一些新工具，以及是否能承担失败的风险。
是否需要开放给第三方？
面向的团队不同可能会限制我们语言的选择。
我是否在处理核心的项目
如果你处理核心项目，请最好选择高稳定性的语言和框架，这更安全，让你睡得更好。
是一个可交互的app还是基本的文档页面。
结果很可能是你仅仅需要基本的HTML ＋CSS ＋ tools，或者静态网站生成器或者CMS。
这是一个单一的项目还是其他项目的相关项目？
即使你有一系列项目，你也应该用一些组件和样式引导，这些有不错的文档。
直接减少代码重用，保持一致性。
另外，考虑SEO，和服务端渲染。
语言列表
当你回答完上面这些问题后，就可以和你的队友聊聊，然后选择一个语言了。
因为这里有很多的东西，而不是糟糕的Javascript，你可以选择
是否有js开发团队
考虑ES6(babel兼容)
这会让你的生活简单一些。
你是否偏爱typed语言？开发typed是否可以？
考虑 typescript
函数式编程是否接受？
你可以从简单ES6库开始，比如 lo-dash 或者 ramda。
这里有一些教程和书来帮助你开始美好的旅行。
你是否尝试过函数式编程，想要更好的东西？
试试 elm ，很酷的！
你是否能够全栈？
试试 clojurescript，很酷很酷的
你喜欢沙拉吗？
试试scalaJS
你知道Haskell吗?
试试 purescript，真的很酷
想要更多疯狂的？
这里有一个可以编译成javascript的语言列表，选一个然后享受吧。
框架列表
你仅仅需要基本的可运行的app？
没有时间做更复杂的工作？
试试 angular. start looking for help imediately
你是否经常需要快速的原型开发？
是否能在未来修复一些问题？
试试 angular. 一些问题
你是尝试前端开发的后端？
试试 angular. 寻找一些前端开发者
你是否需要很快的进行开发和构建，但是同时会丢失一些特点？
试试 ampersand/backbone
同样的技术选型，怎样从中型到大型？
把 marionette/chaplin添加到你的backbone里面去，另外可以考虑 Reackjs
你是否有一些时间来实验，同时得到很大的性能提升？
试试mithril/knockout/aurelia+
你是否有不错的前端实验精神，对函数式编程熟悉？
试试 ReactJS＋Rex＋ImmutableJS+
更多函数式编程技巧？或者偏好交互性强的应用？
使用 reactive streams(bacon, rxJS) 或者试试 Cycle.js(实验性)
注意1: add streams any会是很好的选择，可以推荐别人使用。
注意2: 请不要拒绝使用 FRP的reactive streams
你想要使用严格的验证和通用处理方式？
你的应用会越来越大？
你计划扩充你的团队？
你有时间学习新东西？
建议花时间学习 EmberJS，他将会是很好的投资!
你是否需要“类桌面应用”？
你的应用有表格，图例，或者其他分析功能？你在构建企业应用？
试试 ExtJS
你们是一个为其他开发者提供服务的工作室？
你最好有一个不错的工具集，另外，同事之间最好有一些公共用例。
你是一个为他人提供工具的自由开发者？
适应他们的选择。
尝试angular，这将不会造成多大麻烦，让其他人得到他们想要的。
注意：如果别人付费，请不要改变客户的需求
你正在构建一个有吸引力的产品，它将会很多人使用？
有了明确的需求后我们就从上面的列表中选择一个合适的框架。
关于开发什么样的应用你有明确的需求（比如10屏的移动应用)
花两周时间来试验特定的需求（ionic, famous, Sencha Touch)
怎样开始编码？
花一些时间阅读你所选择框架或者工具的文档。
在社区里面询问一些经验开发者怎样算是优秀项目的开端。
准备所有的工具。
极客精神。但是我建议更加工程化一点。
...
成功。
不知道怎么用我介绍的一些不常见框架？
看看 TodoMVC Examples，找到你选择的框架。
但是记住，这些项目只是示例，大多数情况下他们不适合大中型项目。
2. 好用的前端ui框架
Aliceui
Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS的更好方式。
Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
sui
SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。
通过SUI，可以非常方便的设计和实现精美的页面。
同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。
FrozeUI
Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
uiKit
uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。
H-ui
H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。
Weui
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
layui
Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。
YDUI Touch
YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。
3. 如何评价 React 实现的前端 UI 库 material-ui
前端通过Material-UI构造界面，然后通过hprose-html5调用后端hprose服务取数据
hprose服务参考 上一篇hprose实践,
环境配置：
必须先安装nodejs与npm
新建工程目录
mkdir react-workspace
cd react-workspace
npm init
安装依赖
npm install --save react react-dom react-tap-event-plugin material-ui
npm install --save-dev babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
npm install --save-dev webpack
第一行是生产用的 React 与 Material-UI 部分。
第二行是Babel转换器的核心部分。
第三行是Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）。
第四行是Webpack的部分。
第二、三、四行的内容只在工程构建之前有用（用于开发：-dev）。
安装完毕之后呢，可以先检查一下 package.json
应该会看见如下内容
"dependencies": {
"material-ui": "^0.15.0",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-tap-event-plugin": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"webpack": "^1.13.1"
},
配置 Babel
在 package.json 中添加一个域”babel”，与之前的”dependencies” 同级。
"babel": {
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": []
}
配置 Webpack
在项目目录新建一个webpack.config.js ，并写入：
var path = require('path');
mole.exports = {
entry: './entry.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
mole: {
loaders: [
{ test: /\.jsx?$/, loaders: ['babel'] }
]
}
}
这里对Webpack的打包行为做了配置，主要分为几个部分：
entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
mole：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装
plugins: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js
当然Webpack还有很多其他的配置，具体可以参照它的配置文档
配置 npm 脚本
现在我们还缺少一个构建脚本，编辑package.json 中的 “scripts” 域：
"scripts": {
"build": "webpack",
"build-dev": "webpack -w -d"
}
接下来我们就可以在项目目录下使用简单的构建脚本了：
$ npm run build
如果是开发中，可以使用监听式的Webpack，差量打包，提升效率。
$ npm run build-dev
按照配置，打包生成的文件为 dist/bundle.js 。
至此，基本的环境已经配置完毕，我们来尝试一下调用Material-UI库。
代码编写
创建Web入口
在项目目录下创建一个index.html，写入：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
编写Webpack入口
编辑项目目录下的 entry.js，写入：
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<AppBar title="Hello, Material-UI!" />
</MuiThemeProvider>
);
let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);
运行构建脚本：
npm run build
输出
现在可以看到目录下有了一个dist/bundle.js
打开index.html
成功
以上内容严重参考：http://blog.csdn.net/zccz14/article/details/51421324
浏览器自动刷新
如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。
npm install --save webpack-dev-server
修改package.json文件的scripts：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：
webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
–devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
–progress - 显示合并代码进度
–colors - Yay，命令行中显示颜色！
–content-base build - 指向设置的输出目录
总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！
访问 http://localhost:8080 你会看到效果。
访问发现 “Cannot GET /” 错误
因为我们的index.html不是在build目录下
调整项目结构为
/app
main.js
component.js
/build
bundle.js (自动创建)
index.html
package.json
webpack.config.js
修改index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
将entry.js移动到app/main.js
修改webpack.config.js，将入口文件设置为app/main.js，output设为build目录下的bundle.js,
并新增入口点，使得浏览器在文件修改之后会自动刷新。
var path = require('path');
mole.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/main.js')
],
output: {
path: path.join(__dirname, '/build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
mole: {
loaders: [
{ test: /\.jsx?$/, loaders: ['babel'] }
]
}
}
运行命令 npm run dev, 然后访问http://localhost:8080/
看到之前同样页面，然后修改一下main.js
将
<AppBar title="Hello, Material-UI!" />
修改为
<AppBar title="Hello, World!" />
保存一下，再回到浏览器，会发现自动刷新了，内容也变成了Hello, World!
通过hprose-html5取数据
下面通过后端服务取数据，来替代Hello，World！
现已有hprose for php 构建的hprose服务，在远程服务器http://xx.xx.xx.xx:8080/
方法为getUserByID
修改index.html,引入hprose-html5.js，使用的是bootcss提供的cdn
<script type="text/javascript" src="http://cdn.bootcss.com/hprose-html5/2.0.8/hprose-html5.js"></script>
修改main.js
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
const muiTheme = getMuiTheme();
class App extends React.Component{
constructor(props){
super(props);
this.state = {
data:"none",
};
this.componentDidMount = this.componentDidMount.bind(this);
}
componentDidMount() {
this.setState({data: "block"});
let self = this;
let client = hprose.Client.create("http://xx.xx.xx.xx:8080/", ["getUserByID"]);
client.getUserByID(2, function(result) {
console.log(result.player_name);
self.setState({data: result.player_name});
}, function(name, err) {
console.log(err);
});
}
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title={this.state.data} />
</MuiThemeProvider>
);
}
}
let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);
查看结果
从后端服务取到了数据“keyunqqq”
PS：React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现，如下：
Class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
…
}
Babel的Blog上还有一种实现方法，即直接使用赋值语句：
Class App extends React.Component {
constructor(props) {
super(props);
}
state = {}
…
}
ES6中this需要手动绑定：
this.componentDidMount = this.componentDidMount.bind(this);
4. 前端ui框架排名
在前端项目开发过程中，现在很少有人会使用原生的CSS来搭建页面，总归都会引入一些前端UI框架以减少代码的书写。一般为了方便自己的使用，很多大公司都有自己的一套UI框架，同时也会把其开源出来。下面就是最近经常使用并且很流行的一些前端UI框架，总有一款适合你：
Mint UI
Flutter
Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.
ionic
Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。
5. 除了Bootstrap，还有什么其他前端UI库
除了 Bootstrap 和 Semantic-UI，其他的 UI 框架：
Google Material UI
Ant Design
Element UI
jQuery UI
...
都各有优缺点，Semantic-UI 体积有点大，但写起来相当方便，UI 也具有现代感，推荐使用。对于有经验的人，可以结合多种框架，使用不同的组件。
6. 网页前端常用的库或框架有哪些
bootstrap是twitter出的一款不错的UI框架，或者与其说是框架不如说是类库（lib），当然这里边牵扯到一个“究竟什么是框架什么是类库？”的问题，我们暂时不谈。毕竟是有大公司背景的代码堆，我觉得没什么“落伍”可言。
angular是前两年之内突然火得一塌糊涂的一个fe框架，这个我觉得可以算的上是真正意义上的框架了，MVVM双向绑定，包括它拥有足够完善的社区、生态，甚至chrome上都有很多好用的相关插件（这一点可以说是占了google出品的光），比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西，杀鸡焉用宰牛刀吧我觉得。
backbone主要针对的MVC中的M层，至少我是这么理解的。对UI层它几乎没什么太多的限制，一方面给出了coder自由度进行发挥，另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架，另外对于underscore前端模板那一套东西，说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了，不一定准确，况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我，别急着反驳，至少往下看完我说的话。
相比之下，react可以说是一个在MVC中V层做的十分出色和新颖的框架了，独特的jsx编译机制就已经让你的代码变得高大上了，我是觉得这个类库在UI层做的更彻底更专业，或者说让FE的代码更专业了。更何况，react比angular更年轻，而且同样拥有大公司背景，react native一出更是让JS工程师的地位取得了革命性的提升，（不要跟我提phonegap，用过两个东西后你会明白，react打包的app性能甩phonegap几条街没问题）。另外既然楼主提到了之前的网站是bootstrap，不妨可以看一看react-bootstrap这个东西，或许这就是你想要的。
7. uikit和bootstrap这两个前端ui库，哪一个更好
Uikit是一个简洁的框架，它易于使用，易于定制组件。虽然它不像其它竞争对手一样受欢迎，但它提供了相同的功能和质量。实际使用中已经成功的在许多WordPress 主题上使用，它提供了一个灵活、强大的定制化机制，也可以通过GUI定制器进行手动操作。
Bootstrap是最流行的HTML5框架之一。这是一款用于Web开发的时尚、直观、强大的前端框架。它有着用于开发响应式网站的所有组件，如12列响应式网格、定制jQuery插件、bootstrap编辑器等等。
但是在实际开发过程中，会遇到很多问题，仅仅是Bootstrap的基本组件是完全不够使的，比如下拉框没有，table不能绑定。都需要自己上网找合适的插件来达到想要的效果。需要很多时间来研究这些插件，效果也不一定好。
一般都是搭配着看实际项目需求使用的
8. 请问java项目开发中前端的UI是用现成的UI库（比如jQuery的UI库），还是自己手写
公司里面肯定是用现成的框架，肯定是尽快把项目做出来最好。
平常看你的目的是什么吧。
要是自己想学东西的话肯定是自己手写啊。要是只是为了做出来就用框架。不过JQuery可以很容易做出很多效果，要是纯手写的话很不容易啊。
9. 有了ui库,还需要前端吗
需要。对于UI跟前端来说，我是比较看好前端的。目前大部分的产品都是使用java开发。H5的火爆、微信小程序等。都要使用大量的前端。我公司做2个APP产品。java前端近20个，UI两个。基本上一个UI就可以支持一整个20人左右的技术团队。而技术不同，ios、PHP、前端等，都比UI的需求量大。可能你去一家公司上班，程序五六个，前端三五个。UI一个....
做产品，UI必不可少。
10. 移动webapp前端ui用哪个框架好
WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是腾讯社交用户体验设计 － 增值UI开发团队一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，
做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。
FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI。
FrozenJS 的所有组件均以 zepto 的插件的形式存在。
阿里开源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
轻量的UI库 SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。
对于只有HTML&CSS的组件，你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件，并且提供了Zepto/jQuery 风格的API，你将会非常熟悉这种方式。
开发团队：阿里巴巴共享业务事业部UED团队
网络系
GMU
GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件!
Jingle
Jingle是一个SPA(Single Page Application)开发框架，用来开发移动端的html5应用，在体验上尽量去靠近native应用，希望有一天html5能够做到与native一样的操作体验。
丰富的UI组件提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件，简单适用，
前后端分离支持前端模板渲染，模板按需自动加载，完善的事件机制。
轻量级基于Zepto开发，依赖了iscrol
purecss
purecss采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。Purecss小的没有节操，全部模块gzip压缩后才 4.4KB* 。 考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。
Pure基石,Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。
移动端是初衷,Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。
写出你自己的样式,Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。
ionic
基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。
jquery mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
wex5
国产的ui，支持打包。
前端UI：完全恪守html5+css3+js，干净纯洁设备api：采用业界主流Phonegap/Cordova
向导、模板：简单定义，即可轻松制作向导和模板
主题、样式：海量bootstrap资源引入和定制
UI组件：纯H5+CSS3，轻松引入第三方UI组件
插件：轻松对接即时通讯、推送、支付等各类插件
后端：轻松调用后端组件和api，并实现可视化