cssmagic / blog

CSS魔法 - 博客
http://blog.cssmagic.net/
2.8k stars 274 forks source link

QCon 演讲:为什么前端工程师更应该掌握区块链 DApp 开发(上) #97

Open cssmagic opened 5 years ago

cssmagic commented 5 years ago

摘要

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

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


slide-p01

大家好,很高兴在 QCon 的讲台上和大家见面!

slide-p02

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

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

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

slide-p03

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

slide-p04

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

slide-p05

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

slide-p06

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

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

slide-p07

  1. 小明自己设计了网页界面。
  2. 找小伙伴帮忙写了一个后端服务,提供两个接口。
  3. 小明基于这两个接口,写了一个纯前端渲染的网站。

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

slide-p08

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

slide-p09

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

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

然而……

slide-p10

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

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

slide-p11

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

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

slide-p12

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

slide-p13

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

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

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

slide-p14

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

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

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

slide-p15

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

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

slide-p16

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

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

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

slide-p17

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

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

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

slide-p18

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

因此,小明暗下决心:

slide-p19

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

slide-p20

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

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

slide-p21

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

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

💡 公链

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

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

slide-p22

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

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

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

slide-p23

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

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

slide-p24

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

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

slide-p25

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

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

slide-p26-1

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

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

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

slide-p26-2

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

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

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

slide-p27

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

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

slide-p28

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

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

slide-p29

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

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

slide-p30

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

slide-p31

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

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

slide-p32

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

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

slide-p33

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

💡 钱包

钱包主要有以下两个作用:

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

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

又来一个新概念,什么是 “交易”?

💡 交易

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

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

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

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

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

slide-p34

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

slide-p35

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

slide-p36

这个倒计时是什么?

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

💡 矿工

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

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

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

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

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

slide-p37

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

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

slide-p38

然后,我们再次尝试查询这个词条:

slide-p39

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

slide-p40

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

slide-p41

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

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


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


相关阅读


© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

jincdream commented 5 years ago

我理解下,比如秒杀场景的话,是不是在抢的时候需要上链->广播->得到反馈,才秒杀成功。? 其实所有的秒杀场景都算是区块链运用了吧?

cssmagic commented 5 years ago

@jincdream

比如秒杀场景的话,是不是在抢的时候需要上链->广播->得到反馈,才秒杀成功。?

是的。当你发起的交易被处理完成(交易状态为 “成功”)之后,这次请求才算完成。

另外在日常表述中,“上链” 一般是指交易完成的整个过程,而不是指交易的第一步(发起交易)。

其实所有的秒杀场景都算是区块链运用了吧?

这要看网站具体的实现是怎么样的,理论上可以用区块链来做。但由于目前区块链的 TPS 还不够高,秒杀这种大并发高流量的场景,目前可能还不适合用区块链来做。

hkongm commented 5 years ago

手动赞一个