QCon 演讲：为什么前端工程师更应该掌握区块链 DApp 开发（上）

前言

魔法哥在 “QCon 全球软件开发大会” 2018 上海站的演讲广受好评。为让这个演讲发挥更大的价值，本文尝试以图文配合的方式还原现场讲解，尽可能为读者呈现原版体验。

图文混合排列，你不用分辨每段文字是配合上图还是下图的，只管顺序阅读即可。

大家好，很高兴在 QCon 的讲台上和大家见面！

首先自我介绍。虽然大家都叫我 “魔法哥”，但实际上我的完整网名叫 “CSS魔法”。在各大社交网络都可以找到我。

两年前，我翻译过一本书，叫《CSS 揭秘》。这本书堪称前端领域里的重量级著作，已经累计售出一万七千多册。我也很荣幸，能为中文的前端技术社区做出一点微小的贡献。

总的来说，我就是个 “写 CSS 的”。然而今天主题是关于区块链的，为什么一个 “写 CSS 的” 会来讲区块链？我也不知道。我并不想讲区块链，因为大家都不喜欢区块链，都说 “搞区块链的都是骗子”。所以我今天来是想讲故事的。

小明是谁？小明是一名前端工程师，也是一个足球迷。

他有一项神奇的技能：他对足球有很深的理解，能够在每届世界杯开赛之前准确预测出最终夺冠的球队。

比如，在 2010 年的那届世界杯，小明就预测出了正确的结果。大赛闭幕，小明难掩兴奋之情，想在女朋友面前显摆一下。

女朋友很自然地提出质疑，而小明并没有证据证明自己，只能哑口无言。

小明痛定思痛，决定写一个网站来提前记录自己的预言。

小明自己设计了网页界面。

找小伙伴帮忙写了一个后端服务，提供两个接口。

小明基于这两个接口，写了一个纯前端渲染的网站。

最终网站看起来是这个样子的：

列表页：展示所有已经发布的预言

发布页：可以发布一条新的预言

接下来，小明静静等待下一届世界杯的到来。

时间过得很快，转眼到了 2014 年。这一次，小明再次正确预测出了冠军得主。

有网站记录预言，小明心想，这次女朋友应该会相信自己了吧！

然而……

女朋友也是懂技术的，她这次仍然提出了一个合理的质疑。小明再次无言以对。

小明很受打击，从而再也不看足球了。

这是我听过的最优伤的故事。

当然我今天来并不是为了讲一个优伤的故事，这个故事其实还有一个完整版。

要讲清楚故事的完整版，我们需要把时间线倒回到 2009 年。因为这一年发生了一件影响深远的事情。

虽然我前面说 “并不想讲区块链”，但比特币和区块链的出现，确实是我们无法回避的事实。

对小明来说也是一样，他也在新闻报导里听说过 “比特币”。

当时让他印象最深的一篇报导是这的：

国外有个哥们儿，用一万枚比特币买了两盒披萨。

小明感觉比特币就是技术极客对这个世界开的一个玩笑。他并没有把比特币放在心上，很快就忘了这回事儿。

而当他再次听到 “比特币” 这个词，已经是八年后了。

仿佛一夜之间，所有人都在谈论比特币和区块链。

原来在此时，单枚比特币的价格已经突破了两万美元，世人无不惊叹。

小明显然错过了一个暴富的好机会。不过他也并不懊恼，毕竟当年的自己确实没看懂比特币的价值，错过也是必然。

真正让小明受到触动的是另一件事情。媒体报导，有一款叫 “加密猫” 的游戏火遍全球，而这款游戏是运行在区块链上的。

让小明震惊的并不是这款游戏有多么受欢迎、游戏内的交易额有多么巨大、游戏开发团队收到了多么巨额的风投，而是这款游戏完全颠覆了小明对于 “区块链” 的认知。

在小明的概念里，区块链就是比特币，比特币就是区块链。没想到区块链还可以运行游戏！

游戏也是一种应用程序，“区块链可以运行游戏” 意味着 “区块链可以运行应用”；而作为一名开发者，小明意识到：“我可以在区块链上开发应用”！

媒体的狂轰滥炸还让小明注意到区块链的另一个特性：不可篡改。

“不可篡改”？这听起来非常神奇。小明回想起自己 “记录世界杯预言” 的需求，说不定可以借助区块链得到很好的实现！

因此，小明暗下决心：

讲到这里，小明的故事终于迎来了重头戏。

小明关心的 “区块链应用”，其实有一个更专业的名字，叫 “DApp”。

DApp 全称为 “Decentralized Application”，字面意思是 “去中心化应用”。（“DApp” 这个词通常读作 “dee-app” 或 “dap”；当然如果你愿意，也可以读作 “D-A-P-P”。）

DApp 有一个核心概念叫 “智能合约”。小明看了很多新闻报导，都说智能合约很厉害、可以做很多事情；但它究竟是什么，这些报导都含糊其词。小明觉得有必要在实战中深入理解。

在动手之前，小明需要先选择一条公链来作为自己的开发平台。

公链

选链就是选平台，类似于我们在开发手机应用时需要选择 iOS 平台或安卓平台。

公链也称 “公有链”，是向大众开放的区块链——个人开发者可以在公链上开发应用，普通用户可以使用公链上的应用。与此对应的还有 “私有链”、“联盟链” 等概念。

小明经过一番调研，最终选择 “星云链” 作为自己的入门公链。这个选择主要基于以下考量：

功能完备

星云链上线的第一版本就已经具备了 “以太坊” 的所有功能。

以太坊

以太坊是第一个支持智能合约的公链，是 DApp 始祖。以太坊也是区块链领域的标杆。

前面提到的 “加密猫” 游戏正是运行在以太坊之上。

既然以太坊这么厉害，为什么小明不直接选以太坊？这是因为星云链还有其它突出的优势。

性能优良

星云链的吞吐量当前公链中处于第一梯队，远远优于以太坊。不太可能出现一个爆款游戏就把整条链拖慢的情况。

设计简洁明了

对小明这样的初学者来说，快速入门、快速做出成果是非常重要的。小明发现，尽管星云链功能齐全，但它的设计理念却相当简洁、符合直觉，对新手开发者相当友好。

采用 JS 作为合约语言

这可能是最重要的一点。这意味着，对前端工程师来说，在星云链上开发应用没有任何语言障碍。

星云链的智能合约就运行在 V8 引擎中，对小明来说，没有比这更熟悉的运行环境了。

小明在接下来的实践中，遇到一个又一个问题，也找到了各个问题的答案。

注意：目前各条公链的运行原理大体相同，但细节差异还是不少，因此以下所有内容均基于星云链的特性来讲解。

“智能合约” 这个概念听起来很神秘，但对开发者来说很容易接受——因为合约的本质就是一段代码。

比如上图的右侧就是一段最小化的合约代码（代码的具体内容在这里并不重要，为了避免听众盯着代码看，我给这段代码打了马赛克）。

智能合约的运作方式是这样的：

开发者在写好合约代码之后，需要把它部署到链上。部署成功后会得到一个地址。

地址

地址是链上资源的一种定位方式。每个用户在链上都会有一个独一无二的地址，类似账号的概念。

每个合约也有自己的专属地址。可以类比 IP 地址，我们通过地址就可以找到这个合约。

合约部署上链之后，即处于对外服务状态。合约代码提供若干接口，等待我们调用。

每个合约都有自己的独立存储区。

看到这里，相信大家就有一些画面感了：智能合约采用图灵完备的语言来编写，合约有持久化存储的能力——这意味着我们几乎可以用智能合约做任何事情。

智能合约在 DApp 中的作用是什么？要回答这个问题，也就相当于回答了另一个问题：“DApp 的架构是怎样的？”

我们先来看看传统 Web 应用的架构。就以小明做的这个网站为例吧：

传统 Web 应用通常会有一个服务端，负责业务逻辑和数据存储，并提供接口。

同时要有一个网页作为用户界面，便于用户使用。网页端通常以 Ajax 的方式调用服务端提供的接口。

我们再来看看 DApp 的架构是怎样的：

DApp 也需要有一个网页作为用户界面（当然也可以是其它的客户端形态，比如桌面应用或手机应用等）。

同样需要有一个部件来完成业务逻辑和数据存储的功能，并为网页端提供接口，这个职能在 DApp 中就是由智能合约来完成的。

网页端以 “合约调用” 的方式来调用合约提供的接口。具体实现方法后面会详细讨论。

这是展示的是星云官网的推荐 DApp。我们大致浏览一下，有很大一部分是游戏，还有一些工具类应用（比如百科、词典），和社交类应用（比如论坛、抢红包）等等。总的来看，DApp 在题材上与传统应用没有明显区别。

那么 DApp 在使用上有什么不同之处吗？我们来看一个实际的例子。

这是星云官方提供的 demo 应用，叫 “超级词典”。

这是一个简单的 demo，功能和界面都不复杂，我们可以用它来查词。

比如我们输入一个单词并查询，就可以得到这个词条的解释。

如果我们输入一个词库里没有词条，它会提示找不到解释，并允许我们把这个词条添加进词库。

我们填写好这个词条的解释，准备提交。

在使用传统 Web 应用时，提交数据往往也就是在调用后端接口，并且可以很快拿到提交的结果（本次提交是成功还是失败）。但在 DApp 中，提交数据的过程会有些不同。

比如在这里，请注意，当我们点击 “提交” 按钮后，出现了一个弹窗。

这个弹窗并不是应用本身的一部分，它是由钱包插件提供的界面。

我们可以发现，当前这个 Chrome 浏览器安装了星云链官方提供的钱包插件：

浏览器插件我们都很熟悉，我们可以通过安装插件来扩展浏览器的功能。那 “钱包” 又是什么？

钱包

钱包主要有以下两个功能：

帮用户管理地址（前面已经提到过，地址相当于用户在链上的一无二的账号）。比如，在钱包里，我们可以看到自己的地址里还有多少 “钱”。

帮用户发起交易、查询交易、管理交易。

又来一个新概念，什么是 “交易”？

钱包

区块链的老本行就是记账，就是处理各种交易。

在区块链上，转账显然是一种交易；除此以外，在智能合约时代，我们往链上部署合约、调用合约的接口，也都是通过交易的形式来完成的。

好，我们回到这个弹窗界面。

由于提交数据需要调用合约的某个接口，我们需要发起交易来完成这次调用——这个弹窗界面展示的就是当前交易的信息。我们可以看到，在 “Contract args” 这个字段里有数据，表明本次交易是一次对合约的调用。

这个界面里的所有信息都不需要我们手动填写，只需要简单确认，然后点击 “Confirm” 即可。当然如果你想放弃本次操作，也可以点击 “Reject” 来中止。

确认之后，弹窗会再次提示我们确认，是否把本次交易发送到区块链网络。我们点击 “Submit” 按钮，发出交易。

随后，我们会进入一个等待界面。我们可以看到，当前的交易状态是 “Pending”，同时会有一个 15 秒的倒计时。

这个倒计时是什么？

这里就涉及到区块链的一个基本概念了。大家都知道，区块链采用了链式数据结构，整个链是由一个个的区块所组成的。不是完成一次新的转账，还是我们让合约更新自己的数据，需要由矿工把这些操作打包成一个新区块，并追加到链上。

矿工

矿工是区块链网络中有 “记账权” 的节点，记账权也意味着产生新区块的权力。

当我们把一笔交易发送到区块链网络中时，它会传播到矿工节点那里；矿工节点会逐个执行所有待处理的交易，生成新区块。生成新区块的过程俗称 “打包”，也叫 “出块”。

这个倒计时的 15 秒正是星云链出块的时间间隔。在这个间隔内，矿工需要出块并把新区块广播到网络中，其它节点在收到新区块之后，还需要完成校验和同步等操作。

这个出块周期有点像定点发车，如果你的交易赶上了这班车，就会被打包上链；如果你错过了这班车，或者这班车已经满了，就要等下一班车。

钱包插件会每隔 15 秒检查一下当前交易有没有完成。通常在等待 15 之后，我们就可以看交易的状态变成 “success” 了：

此时，我们就可以放心地关闭这个弹窗了。

回到页面，页面也提示我们刚才的提交操作已经成功了：

然后，我们再次尝试查询这个词条：

在上图中可以看到，刚刚提交的词条解释已经可以查询出来了。

经过这个 demo，我们可以总结出 DApp 在交互上的两大特征：

在不写数据的情况下，直接查询就可以获得结果。这个过程跟普通应用没有区别。

在需要写数据的情况下，需要发起交易来调用合约接口。当交易成功之后，即完成 “上链” 过程。

作为一个 DApp 开发者，至少要做好以下准备工作：

Chrome + 星云钱包插件。这是 DApp 网页端所需的运行环境

有自己的地址。我们可以用钱包插件来创建自己的地址。

地址里要有少量余额。原因在于每笔交易都需要向矿工支付少量手续费（术语称作 “gas”）。

Gas

Gas 的原意是汽油。就好像搭别人的车需要付 “油费” 一样，让矿工帮你处理交易也需要支付酬劳——这是区块链世界的生态设计。视交易的复杂度不同，收取的 gas 数额也不同。

星云链的 gas 计价极为低廉，比如价值 1 分钱的星云币足够我们支付数千或数万次交易的 gas。

在星云官网注册为开发者，即可收到官网空投的少量星云币；同时社区里也有不少热心网友无偿赠送星云币。

星云 Web 钱包。是一个网页版的工具集，后面实战环节会提到它。

小明在理清了这些基础知识之后，终于要动手实战啦！

待续：在文章的下半部分，我们将和小明一起做出自己的第一个 DApp。这个实战案例清晰简洁，覆盖完整的开发流程，带你轻松进入区块链应用开发的大门。

（题图来源：QCon 官方相册）