做前端肯定离不开UI。

基于React的UI

React本身就是做VIEW的，被包装成的React的组件，说白了就是一个封装程度高的DOM对象。

自然而然的就会想到：如果有些库，基于React，对一些网站中会常用DOM进行一些封装。开发者只要引入库中的某些React组件，拿来用直接就是一些连样式带行为都有的页面元素，岂不是对开发就方便了。

有些人就开发了一些这样的库。

最自然的想法就是：直接拿bootstrap封装一下嘛，什么文本框，表格什么的。引进来的时候传入必要的参数作为数据，页面直接就能呈现，连样式带数据都有了。你可以在上面的连接中找到这样的库。

还有一些，例如啊妹子，或者KendoUI，总能找到很多。

我首先感兴趣的还是Material UI。（但是后面我打脸了。因此，你可以直接跳转到ANTD的章节。）

Material UI

它并不是谷歌出品，但它号称实现了Google的Material Design。

所谓Material Design，有人这样解释：它是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

你可以理解它是软件人机界面设计的一套标准，在这套标准中，它定义的风格和我们常见的iOS风格各有千秋。

据墙外人士说，Google自家很多产品的界面就是aterial Design的。如G+。

Material UI 就是对这个标准的一个实现。简单的说：它提供了一些React组件，如导航条、按钮、列表等等等等，你在你的React项目中使用它们，它们就是符合MD的。

如果一个站点或者手机APP，整体都符合MD，那么它的风格会很舒适，而且交互感非常棒。

Admin on REST

有了MU，我突然觉得就可以做前端SPA了。

结合我们到目前为止了解的所有技术：上一篇讲的Redux、Router，它们的引入解决了工程文件架构和耦合的问题，使前端工程整体清晰了。然后有了MU，我们只要把页面布局好，在正确的地方引入对应的组件，而且风格自然就是MD的了。

但是，直到我发现了 Admin on REST。

法国一个公司出品（该公司也出品了github上万star的项目ng-admin）。admin-on-rest号称自己是一个前端的所谓的框架：用于构建一个在浏览器端的WEB应用（管理系统类），并且对后端的REST服务有良好的支持。而且号称和融合上面我们那些技术。因为它就是基于MU的。

它封装度非常高，入门教程20行代码就可以搭建前端系统的雏形。入门教程你甚至不用懂React，你只需要把第一篇文章介绍的create-react-app跑起来就可以了。

这样必然会带来一个很大的缺点：封装度越高，可定制度越低。我们之所以对全家桶又爱又恨，爱它因为它易用，恨它因为它不灵活。因此，我们接下来需要看看admin on rest灵活性究竟怎样。

• 相比于传统全家桶，这个倒是专注于前端，它不必考虑后端的各种兼容问题，因此理论上可以给前端提供更高的可定制性和灵活性。并且它号称兼容于我们之前提到的那些技术框架。
• 翻看了它的源码，代码量并不多。结合文档，代码思路也很清晰。
• 他的数据交互部分是符合RESTful风格的。【我们常说RESTful，它到底是什么？在这里必须统一澄清一下。REST没有新技术，也不是什么协议，它也没有统一标准。到底什么叫风格？举个例子：你写代码段落缩进是喜欢写两个空格还是四个空格？这就是你的个人风格。那REST既然是一套风格，那如果我们把这个风格统一一下，都缩进2个空格，那就成了我们自己定的标准了。说到这里，让我们来认识一下RESTful，请看阮一峰的 RESTful概念 、RESTful API标准】
• 因此它看起来就是对MU做了一些封装，也不是很重。
• 国际化的功能有。也有cn的国际化库。但是只是一个国人贡献的而已，被官方采纳了。一共没有汉化几个字，那个库就60行代码。不过我们倒是可以自己做国际化。
• 它目前不支持多级目录。现在的话，我们可以基于它现在这个版本改源码实现。以后的话，不知道它后续的版本会不会提供官方支持。我看到github上作者已经提交了类似自定义menu的相关代码（2017-2-28），但是截止到今天（2017-3-2）还没合并到master上。BTW，它上一个Pre Release版本（v0.8.3）Tag是上个月（2017-2-23）打的。
• 多级目录也可以用其他方式实现，例如MU本身的Bottom Navigation、Divider + List、各类Menus 可以结合Popover、甚至Tabs也可以。
• 它目前不支持权限管理，这个框架本身并未做这方面的考虑。因为我们的老系统的权限管理是可以控制到增删查改的。若在它的基础上增加权限管理，需要解决的问题有两个：1.不同的登录用户呈现的功能菜单项要有不同。这需要根据用户的不同实现菜单项内容的区别渲染。2.进入某个具体功能后，组件呈现要有不同，因为比如有些人有新增删除权限而有些人没有。这需要根据用户的权限对组件进行区别渲染。
• 上面这两点从技术上来说可以实现，技术难度待考。并且没有最佳实践可供参考：例如是应该每次渲染时都请求呢，还是说应该将用户权限信息在登录时请求一次并保存呢。

因此，基于它算是可以比较方便地进行开发。

另一个前端框架（脚手架）

Admin-on-react算是一个脚手架。

其他的？很遗憾，到目前为止还没有。

React的一直在找，VUE的另一个同事在找，到目前还没找到。（Angular的没人找，因为这个框架我们不打算用）最多的还是UI组件库，但是脚手架只找到了上面那一个。

React是有些人搞些小玩闹，比如这个 react-SPA。

VUE那边的UI也做得很不错如 VUE-ADMIN 和 VueJs AdminLTE等等。

说说JHipster

jHipster也说有React的版本，但是根本没法用。我看了一下，它根本就还没实现。

下面我们再来看一个UI库 -- ANTD

后来，在缘分的驱使下，我找到了它。

它，老牌而成熟。它，自己定义了一套 ant Design 设计规范/理念，并且官方用React实现了。（同时也提供vue的等版本）

对不起，它只是一个UI库，这样的UI库我在上面见多了。它并不是脚手架。

但是基于它的脚手架，有吗？我找着找着。。。然后。。。我的天啊！我仿佛找到了开启天堂大门的钥匙！！！

首先，这个钥匙直接带领我们进入了 dva-cli。先不管cli（command line interface），我先要搞DVA！

完善的中文资料糊了我一脸：我哩个擦！它竟然是阿里（支付宝）出品！（怪不得那么风骚，取名叫DVA【扩展阅读：我才是真的DVA】）

所以，难道，那，你以为antd就不是阿里出品吗？？哼，愚蠢的人类啊！！肤浅！！

今天我感受到了作为前端工程师的幸福。

好了，BB到这里。其他好奇之处请自行知乎。如果想达到精神方面和艺术家沟通和共鸣，请自行各种Github。我们要讨论的是技术问题，而我要去研究它，分析它是否真的能给我们带来幸福。

DVA

人人都需要入门：

先看Demo of antd-admin，直观感受一下效果。

DVA甚至贴心地为我们准备了入门前的概念讲解和最小知识集讲解，先要对概念和语法进行一定的学习理解。

然后，开始官方教程。

UI选型结束

现在到这里我觉得选型对比已经没有必要了。