freejishu
喵!
StatusLive重构记-与MDB后的一天一夜
StatusLive重构记-与MDB后的一天一夜

这几天没事的时候,重写了StatusLive,使用了UptimeRobot作为数据源,以后再也不用担心多个服务器节点的问题了。

看到各位小伙伴都有属于自己的状态监控页,心里就觉得我也应该写一个。

然后我遇到了MDB,我以为我遇到了我想要的,可事实往往很残酷。

[title]1、MDB是什么?[/title]

(在编写这篇文章的时候,我查到其实这样类似的框架多多少少有一些,而且基本上都叫这个名字,所以做如下前提:本文的MDB框架指的是仓库地址位于https://github.com/mdbootstrap/bootstrap-material-design的MDB框架)

MDB,全称Material Design for Bootstrap,一个基于Bootstrap的Material Design框架。这样描述会有一些诡异,但是确实是这样:使用Bootstrap“重构”Material Design(这种设计)。

[title]2、初探MDB[/title]

不论是设计思路还是设计风格,作者完美的将Bootstrap(4)和Material Design结合在了一起。当如此两个强势的框架碰撞到一起,就产生了一些新的东西,这便是MDB所追求的东西。

MDB不仅支持JQuery,还支持angular、react、vue共计4种JS框架,针对不同的用户有不同的版本(Free/Pro)。Pro相较于free版本,有更多更华丽、更实用的组件,更适合比较正式的商业团队使用;另外一端,基于BS和MD的得天独厚的优势,浏览器的兼容性也是很好的(MD和Bs4的交集)。

官网(https://mdbootstrap.com/)不仅仅有详细的文档(而且是每一种Js框架都有),还有各种方便的构建工具,对于开发页比较友好。

看完了大概介绍之后,我很想称其为“水桶框架”,因为各方面的表现都比较均衡,而最长的一块木板大概就是基于MD而设计了吧。

[title]3、重构StatusLive[/title]

新的StatusLive的设计风格我想过一些,但是心里也是模模糊糊的。最初的设计有点像传统普通页面的那种感觉,有导航栏,有header,还有footer,但当我把代码写出来之后发现——效果挺糟糕的。看到新页面的半成品的一瞬间,我有一种感觉,所有的交互都没有什么意义,不能产生一种舒服的感觉。这迫使我开始重新设计StatusLive。

如果用户访问到这里,他们最需要的是什么信息?这个信息获取的过程是否要添加什么成本?要给用户一种什么样的体验?

答案也很显然:最需要服务器的状态信息、不应该有什么成本、简洁明了才是最好的。所以我更希望新的StatusLive有一种简洁明了的卡片风格。

重写页面的过程没有遇到什么特别大的障碍,这是我一直都不知道MBD的页面基础是怎么构建的,直到我从他们的一个示例中扒拉出来了container这个class才得以告终。

旧的StatusLive采用进度条的方式去表示可用率但个人觉得效果一般(配色很乱)。重构了列表的style,但是仍然使用UptimeRobot官方的设计——用颜色表示状态。给人视觉冲击,使访问者可以更快的找到自己需要的内容。使用官方设计还有一个好处:降低学习成本。

所以,新的页面就大概做好了:

https://www.freejishu.com/wp-content/uploads/2018/07/screencapture-1-kode-freejishu-test-2018-07-20-10_26_06-1024x550.png

尽管有一些纠结(纠结过程如下文),但是最终我还是决定(在功能完善后)将StatusLive的页面开源。不过不是在这篇文章里面,我会单独写一篇文章关于StatusLive的使用,敬请期待。

[title]4、吐槽MDB[/title]

我一开始写这个项目的时候就抱着会开源的心态写的,不过在查看官方文档的时候,很多东西(比如loading)free(版)用不了,需要Pro版。

根据其官方的描述,MDB一共有2.4k+的组件和30个插件,只有400+的基本组件和8个基础插件是free(版)可以使用的。如果想要用剩下的2k+高级组件和22个高级插件,就需要升级至Pro(版)。

我大概浏览了Pro(版)才能用的东西,发现大多数是经过了一些二次发挥的东西(这也就意味着有一部分不是),比如轮播图、parallax等原生没有的组件。

我本来想买一个Pro(版)来继续研究,但贫穷阻止了我的想象力——

https://www.freejishu.com/wp-content/uploads/2018/07/QQ截图20180720104527-300x237.png https://www.freejishu.com/wp-content/uploads/2018/07/QQ截图20180720104538-300x237.png

PS:官网是没有中文的,这是我自己F12改的做的翻译。价格截取时间为20180720。

139欧元≈1100软妹币、75欧元≈594软妹币,我的天啊=。=

果然,贫穷限制了我的想象力。MDB看起来什么都挺好的,与此同时,价格就成了其短板。

我看了一下,除了极少数的组件需要Pro(版)我感觉不太合理,free(版)的MDB也够用了,最起码设计风格我个人还是蛮喜欢的。

[title]5、深挖:框架收费的模式到底是否可取[/title]

我以前其实还没有接触过收费的前端框架,这是我真正进去了解的第一个收费框架。

横向对比了目前网页上的几种收费的框架,结果发现:这些都是为企业更快生产而产生的。使用一些质量可靠的收费框架,可以省去很多测试调试过程,而且对程序员的要求更低,生产速度更快。

所以说,收费框架的模式是值得存在的,因为这些工作框架的开发者已经替你提前做了。这些功夫也值得去为其买单,而且这些收入可以更好的激励开发者继续开发。

虽然我吐槽MDB对个人的许可有些真心贵了,但是如果真的需要,这个价钱也不算特别的贵。因而可以说,其实是可取的,但是价格千万不要引起愤怒。

[title]6、后记[/title]

今天0720,BiilbiliWorld第一天,可惜去不鸟惹QAQ

话说,有木有8月4日ChinaJoy的小伙伴(或者这个时间在上海的小伙伴)?如果你想和我一起(或者面基啊什么的也是欢迎的)那就赶紧联系窝吧wwww

分享一张云吧w

https://piccdn.freejishu.com/images/2018/07/20/qrc9T.jpg

 

赞赏

此处可能有用于缓解服务器资金压力的广告,请注意不要误点不需要的广告

没有标签
首页      杂文集      StatusLive重构记-与MDB后的一天一夜

发表评论

textsms
account_circle
email

  • https://secure.gravatar.com/avatar/ee91505fd4744bee6a5e4d1858441a5b?s=80&d=mm&r=g

    大佬,求开源StatusLive :huaji5:

    4月前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

      @Liues: 还在写着,这几天差不多了就放出来 :huaji14:

      4月前回复

freejishu的美丽世界

StatusLive重构记-与MDB后的一天一夜
这几天没事的时候,重写了StatusLive,使用了UptimeRobot作为数据源,以后再也不用担心多个服务器节点的问题了。 看到各位小伙伴都有属于自己的状态监控页,心里就觉得我也应该写一个…
扫描二维码继续阅读
2018-07-20