入坑React之二 UI

做前端肯定离不开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 NavigationDivider + List各类Menus 可以结合Popover、甚至Tabs也可以。
  • 它目前不支持权限管理,这个框架本身并未做这方面的考虑。因为我们的老系统的权限管理是可以控制到增删查改的。若在它的基础上增加权限管理,需要解决的问题有两个:1.不同的登录用户呈现的功能菜单项要有不同。这需要根据用户的不同实现菜单项内容的区别渲染。2.进入某个具体功能后,组件呈现要有不同,因为比如有些人有新增删除权限而有些人没有。这需要根据用户的权限对组件进行区别渲染。
  • 上面这两点从技术上来说可以实现,技术难度待考。并且没有最佳实践可供参考:例如是应该每次渲染时都请求呢,还是说应该将用户权限信息在登录时请求一次并保存呢。

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

另一个前端框架(脚手架)

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

其他的?很遗憾,到目前为止还没有。

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

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

VUE那边的UI也做得很不错如 VUE-ADMINVueJs 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选型结束

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容