博客

在 2015 React 欧洲大会上，Lee Byron 介绍了 Facebook 的 GraphQL ，包含 GraphQL 背后的故事，查询语句的示例，还有核心的概念。GraphQL 非常易懂，直接看查询语句就能知道查询出来的数据是什么样的。你可以把 GraphQL 的查询语句想成是没有值，只有属性的对象，返回的结果就是对应的属性还有对应值的对象。

故事

从 2011 开始，Facebook 开始越来越重视移动端，一支很小的团队开始去做 Android 与 iOS 应用。Facebook 的强项是 Web，也非常的了解 Web ，而且在这方面储备了大量的技术。当年 Facebook 的主要平台就是传统的 浏览器 Web 服务器 数据服务 的组合，Web 服务器响应浏览器的请求，到数据服务那里提供出数据，然后再交给浏览器去显示。

8 月 11 号，Facebook 发布了 Relay 的技术预览版，你可以在 Github 还有 npm 上找到。

Relay 是什么

React 简化了开发复杂的用户界面的过程，不过留下了一个问题，就是怎么跟服务端去交互数据。客户端与服务端的松藕合会导致一些跟数据相关的问题，而且会让迭代更困难。另外，工程师们经常需要重新的实施一些复杂的 Async 逻辑，不能去专注应用本身。Relay 考虑到了这些问题，也从 React 那里学了不少，它为应用提供了一种声明式的，面向组件的提取数据的方法。

如果您是宁皓网的付费会员，又觉得我们做的还不错，可以把宁皓网推荐给您的朋友，我会请您喝杯咖啡。

方式

登录以后，在我的帐户（/user）下面，打开 会员中心，在这里你会看到一个 会员链接 ，数字部分是您的 ID 号，打开下面链接会跳转到宁皓网首页：

http://ninghao.net/affiliate/6

也可以使用后缀形式的链接，像这样：

http://ninghao.net/?a=6

您也可以推荐特定的页面，像这样：

http://ninghao.net/course/affiliate/6

或：

http://ninghao.net/course/?a=6

把上面这些链接中的数字，替换成您自己的用户 ID 号，然后把链接分享给朋友，可以通过 QQ，微信，微博，自己的博客或网站等等去分享。如果他通过这个链接订阅了宁皓网，我就会表达一下谢意，请您喝杯咖啡：）

最近看了一个采访 Matt 的视频，他是 WordPress 的创始人，Automattic 公司的 CEO 。他在视频里讲了自己当初做 WordPress 的起因，还有创建 Automattic 公司的故事，描述了跟投资人的关系，还有自己作为天使投资人的一些想法。下面跟大伙分享下，我不太清楚采访的具体时间。

WordPress 诞生

Matt 出生在休斯顿，毕业于休斯顿大学。有段时间他在华盛顿，估计是去旅游还是什么，拍了挺多照片，想跟家里人还有朋友分享一下。所以开始写博客，当时已经有了很多博客软件，最流行的应该是一个叫 Movabletype 的博客软件，Matt 也试了挺多。后来他发现了一个叫 B2 的博客软件，觉得挺不错，这是他第一次使用开源软件，B2 也是后来的 WordPress 的前身。

Matt 开始为 B2 贡献自己的代码，当时他大概十八九岁，并没有受过专业的程序设计训练。他写的一个小插件出现在 B2 里面，这让 Matt 非常兴奋 ，因为当时也有不少人在用 B2 这个博客软件了。那时候他是一名自由职业者，会为本地的音乐家还有小公司提供创建网站的服务。

React 是 Facebook 在内部用的一套创建用户界面的 JavaScript 框架。他可以让我们用一种极具表达的方式去创建界面上的组件，你可以重复利用这些组件，可以把不同的组件组合在一起用。创建好组件以后，当组件里的状态（数据）发生变化以后，组件会自动更新这些变化，而且速度非常的快。

ECMAScript 是一套规范，JavaScript 是实施了 ECMAScript 规范的一种语言。ES5 是这个规范的版本，也是现代浏览器普遍支持的一个版本，ES6 是这个规范的下一个版本，不过这个版本现在有个新名字叫 ES2015 ，也就是以后会使用年份去命名 ECMAScript 规范。

Babel 是一款 JavaScript 编译工作，比如它可以让你用新的标准去写 JavaScript 代码，然后 Babel 会把这些代码编译成现在的浏览器能懂的 JavaScript 。还有以后 React 也会用到 Babel 去编译它的 JSX 。

安装 Babel 命令行

确定你已经安装好了 npm ，然后打开命令行界面，Windows 用 Powershell，Mac 用终端，然后执行：

npm install -g babel

完成以后就可以使用 babel 命令行，创建一个 JS 文件叫 script.js，里面放点用 ES2015 标准写的代码：

'use strict';
let a = 'Hello World!';

进入到文件所在目录，然后执行：

最近了解下基于 Token 的身份验证，跟大伙分享下。很多大型网站也都在用，比如 Facebook，Twitter，Google+，Github 等等，比起传统的身份验证方法，Token 扩展性更强，也更安全点，非常适合用在 Web 应用或者移动应用上。Token 的中文有人翻译成 “令牌”，我觉得挺好，意思就是，你拿着这个令牌，才能过一些关卡。

文章先介绍了一下传统身份验证与基于 JWT 身份验证的方法，再理解一下 JWT 的 Token 的组成部分（头部，数据，签名），最后我们会在一个 Node.js 项目上实施签发与验证 JWT 的功能。练习的视频版本可以参考《JWT：JSON Web Token》这个免费的课程，项目代码在 Github 上可以找到。

Semantic UI 的 API ，也就是应用接口， 提供了一种简单的使用 Ajax 对服务端发送请求的方法。你可以去定义一些动作，这些动作对应服务端的地址，然后去把这些动作绑定给页面上的元素，比如一个按钮，一个文本框，或者一个表单，当特定的事件发生以后，API 会根据动作里指定的地址，向服务端发出请求，服务端收到请求，会作出响应，为我们的前端应用返回请求的数据，这样你就可以去使用这些请求回来的数据，比如把它们显示在页面上。

下面我们学一下怎么去使用这个 Semantic UI 里的 API 。先要做些准备。

服务端

我们可以使用各种服务端，比如 WordPress ，Drupal ，Laravel ，这些都可以作为服务端向前端应用提供数据，可以处理各种前端应用的请求。另外，有些专门的服务端服务，比如 Firebase ，这个公司被  Google 买了。

在服务端上就是定义了一些特定的地址，通过用不同的方法去请求这些地址，服务端可以去处理请求，并且根据请求的方法与地址作为不同的反应，比如可能返回一些文章内容给前端应用，或者把前端应用提供的数据存储在数据库里等等。

对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包，订阅宁皓网就可以学习全部课程了。

Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。它还提供了一套很方便的定制主题的方法，你可以用自己的想法去改变界面组件的样式。在这个教程里我们学习一下安装 Semantic UI 。

准备工具

你需要使用命令行去安装，Windows 用 Powershell ，Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。

安装 Semantic UI

先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：

Material Design 是 Google 在 2014 年 6 月的开发大会上发布的一套设计指南。这套设计指南是为 Android 准备的，它是一套视觉语言，统一用户在不同的设备之间的体验。具体信息可以参考 Google 的网站。

动画，包括动作，交互与过度，是这套设计规则的重要的组成部分 。在 Material Design 里面，动画不仅是为了好看，它可以让空间的关系，功能，还有系统的意图变得有意义。

动画在现代应用里非常的重要，不过要注意不能过渡使用它。你需要用更微秒的方式去使用它，而且必须让它有意义，这样才能增强用户的体验，不然就会有相反的作用。

很多设计师都开始使用这套设计规则，下面我收集了一些关于 Material Design 的动画的示例。