做前端肯定离不开UI。
基于React的UI
React本身就是做VIEW的,被包装成的React的组件,说白了就是一个封装程度高的DOM对象。
自然而然的就会想到:如果有些库,基于React,对一些网站中会常用DOM进行一些封装。开发者只要引入库中的某些React组件,拿来用直接就是一些连样式带行为都有的页面元素,岂不是对开发就方便了。
有些人就开发了一些这样的库。
最自然的想法就是:直接拿bootstrap封装一下嘛,什么文本框,表格什么的。引进来的时候传入必要的参数作为数据,页面直接就能呈现,连样式带数据都有了。你可以在上面的连接中找到这样的库。
我首先感兴趣的还是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选型结束
现在到这里我觉得选型对比已经没有必要了。