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，並實現可視化