真正从零开始学应用开发,现在订阅即刻在线学习。 立即订阅

Sketch 可以扔了,Grid 可以用了,“卡夫卡” 好吃吗?

最近发现几样好东西,忍不住跟大家分享一下,顺便也寻了些视频,足够让同学们可以起动使用这些东西。我发现了一个很好的用户界面原型与设计工具:Adobe XD,CSS 的网格(Grid)布局,还有一个叫卡夫卡(Kafka) 的东西。(这个标题是不是有点标题党的嫌疑 :)

用户体验设计(Adobe XD)

在动手编写应用代码之前,你可以选择一款设计与原型工具,把网站或者应用的样子还有状态先做出来看看。Adobe XD 就是这样一款用户界面与用户体验的设计与原型工具。它跟 macOS 上用的 Sketch 应用是同一类的东西。不过我觉得有了 XD ,我的 Sketch 应该可以搁起来了。

在双方都不加装插件的情况下,XD 的使用体验要胜过 Sketch。它让我重新觉得做设计与原型是件挺快乐的事儿,虽然 XD 能做的,在 Sketch 上安装一些插件之后也大概可以做到,但是使用体验还是不能相比。

两个软件是一类东西,长得也差不多,很多概念也都是通用的,所以你只要用过其中一个,一般都可以平滑过渡到另外一个。比如它们都有画板或者叫画布这种东西,根据自己要设计的界面,创建一些画板,每个画板都可以有不一样的尺寸,在画板上可以使用图形工具画一些界面元素。

XD 与 Sketch 都有设计功能与原型功能,设计功能就是做出应用界面的样子,原型功能就是模拟界面在真实应用中的表现。比如按了一个内容列表页面里的其中一个内容项目,可以过渡显示一个内容详情页面。点击了一个按钮,弹出一个对话框 ...

哦,还有这个 Adobe XD 可以免费用,快去下载安装一个吧,等有想法了,就拿出  XD 画一画,任何你能画出来的东西,都可以把它实现出来,做成真正的网站或应用。(提示:宁皓网的课程可以助你实现自己的应用开发的想法。)

网格(Grid)

CSSGrid(网格)模块可以做出复杂布局的页面,在以前你可能需要借助 JavaScript 才能实现的布局,现在直接用 CSS 就可以了。网页的布局历史是从表格,到 Float,再到 Flexbox ,现在应该就是用 Grid 布局。大部分浏览器都已经支持这个模块了,你可以在 Can I use 这个网站,搜索一下 CSS Grid,可以观察一下 CSS Grid  的支持情况。

一般的 CSS 框架里面都带着一个网格系统,你可以使用这个设计好的网格系统布局页面。它们在设计这个网格系统的时候通常都会用到 CSS  的 Flexbox(弹性盒子) 模块,比如著名的 Bootstrap 框架,它的网格系统用的就是 Flexbox,相比之前的 Float 布局,Flexbox 已经灵活很多了。

我发现下一个版本的 Bootstrap 也会选择用 Flexbox 来设计它的网格系统,原因是支持 Flexbox 模块的浏览器更多一些。而且你会发现很多其它的领域也都实施了这种 Flexbox 布局模式,比如在小程序,还有在 Flutter 里面设计界面的布局,你都要理解 Flexbox 。

不用纠结到底要选择哪一种布局方式,还是从实际需求出发,如果 Flexbox 可以完全满足你的需要,也就没必要非得用 Grid。不过我们还是可以花点时间了解一下这种布局方式,需要的时候再用。我认为这是 CSS 目前提供的最好的设计页面布局的方法。

卡夫卡(Kafka)

卡夫卡(Kafka) 最开始是 LinkedIn 为了解决业务问题弄出来的一个产品,后来开源了。现在这个产品主要由一家叫 Confluent 的公司维护,这家公司提供 Kafka 相关的产品与服务,目前已经融了 4.5 亿美金。(卡夫卡像不像是一种零食?是因为奥利奥吗?)

Kafka 有点像是一种日志仓库,大家(各种应用,服务,可以通称为 Producer)都可以把自己生产出来的数据扔到这个日志仓库里,Kafka 会分类(Topic)管理这些日志。另外一伙人(Consumer)可以选择预订存储在这个日志仓库里的某个类别的日志数据,当这个类别的日志有新的数据以后,这伙人可以马上得到这些新的数据,然后决定到底要怎么使用这些日志数据,比如可以做实时的数据分析,或者把它们存储在其它的数据仓库里等等。

这个 Kafka 可以作为解决应用之间沟通问题的中间人,大家都把自己得到的消息告诉给卡夫卡同志,大家也都可以从卡夫卡同志这里获得自己需要的消息。所以他可以作为你的分布式,微服务应用架构的其中的一个组件,主要负责大家的沟通问题。用过消息队列的同学,可能觉得这个东西跟消息队列很像,比如像 rabbitmq 之类的产品。消息队列是卡夫卡的一个应用场景,它能做的还有很多。

这里解释一下什么是消息队列,先别把它想成是一个技术名词,我们把这个词分成两部分,消息与队列,然后用字面意义去理解它。消息的队列,消息就是数据,队列就是排队,比如我们排队买咖啡,先到先得,后来的人要排在队伍的最后,队列最前头的那个人最先得到咖啡。消息队列就是让消息(数据)排成一个队。消息的生产者每次生产出来新的消息,就会把这条消息放在这个队伍的最后。消息的使用者会从这个消息队列的最开前面,一个一个的使用这个队列里的消息。

卡夫卡同志是这样描述自己的:“分布式流平台(distributed streaming platform)”。分布式是卡夫卡的架构,一般使用卡夫卡你可以创建一个集群,就是由一堆(几台或几百台)服务器共同提供卡夫卡服务,我们不用操心卡夫卡服务器之间是怎么沟通,如何备份数据的,你只需要告诉卡夫卡你想怎么招就行了,剩下的事儿由卡夫卡同志自己搞定。

“流” 这个词也经常会出现在应用开发里,我们还是从字面意义去理解它。“流” 可以想成是不断产生的一组东西。水流,就是源源不断的水,数据流就是不断产生的数据。卡夫卡里的流,应该指的就是数据流的意思。比如说用户的访问日志,与应用的交互行为,这些都可以看成是数据流,因为用户的每次访问,每次与应用的交互行为都会产生新的数据。

实时的数据流处理是卡夫卡同志的大招,我们用一个应用场景来理解一下实时数据流的处理。比如你有个应用提供视频播放服务,每次用户请求播放视频你都把这个行为存储到卡夫卡的某个 Topic(主题)里面。

我们可以对这个 Topic 里的数据流做实时的分析与处理,比如用户如果在一段时间内,频繁的同时播放多个视频,你可以把这个用户相关的数据放到卡夫卡的一个指定的 Topic 里面。也就是这个 Topic 里的消息就是有同时播放多个视频这种异常行为的用户,你的一个应用可以订阅这个 Topic 里的消息,然后去做一些实时的处理,比如暂时禁止用户播放视频,或者给相关的人员发送邮件或者短信通知等等。

相关课程

订阅宁皓网,就可以立即在线学习所有相关的课程了,谢谢您的支持:)



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

12701
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点