最近发现几样好东西，忍不住跟大家分享一下，顺便也寻了些视频，足够让同学们可以起动使用这些东西。我发现了一个很好的用户界面原型与设计工具：Adobe XD，CSS 的网格（Grid）布局，还有一个叫卡夫卡（Kafka） 的东西。（这个标题是不是有点标题党的嫌疑 ：）
用户体验设计（Adobe XD）
在动手编写应用代码之前，你可以选择一款设计与原型工具，把网站或者应用的样子还有状态先做出来看看。Adobe XD 就是这样一款用户界面与用户体验的设计与原型工具。它跟 macOS 上用的 Sketch 应用是同一类的东西。不过我觉得有了 XD ，我的 Sketch 应该可以搁起来了。
在双方都不加装插件的情况下，XD 的使用体验要胜过 Sketch。它让我重新觉得做设计与原型是件挺快乐的事儿，虽然 XD 能做的，在 Sketch 上安装一些插件之后也大概可以做到，但是使用体验还是不能相比。
两个软件是一类东西，长得也差不多，很多概念也都是通用的，所以你只要用过其中一个，一般都可以平滑过渡到另外一个。比如它们都有画板或者叫画布这种东西，根据自己要设计的界面，创建一些画板，每个画板都可以有不一样的尺寸，在画板上可以使用图形工具画一些界面元素。
XD 与 Sketch 都有设计功能与原型功能，设计功能就是做出应用界面的样子，原型功能就是模拟界面在真实应用中的表现。比如按了一个内容列表页面里的其中一个内容项目，可以过渡显示一个内容详情页面。点击了一个按钮，弹出一个对话框 ...
哦，还有这个 Adobe XD 可以免费用，快去下载安装一个吧，等有想法了，就拿出 XD 画一画，任何你能画出来的东西，都可以把它实现出来，做成真正的网站或应用。（提示：宁皓网的课程可以助你实现自己的应用开发的想法。）
网格（Grid）
CSS 的 Grid（网格）模块可以做出复杂布局的页面，在以前你可能需要借助 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 里的消息，然后去做一些实时的处理，比如暂时禁止用户播放视频，或者给相关的人员发送邮件或者短信通知等等。
相关课程
订阅宁皓网，就可以立即在线学习所有相关的课程了，谢谢您的支持：）
