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 官方相册)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181107G0T61400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券