Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cssmagic opened this Issue Nov 7, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@cssmagic
Copy link
Owner

cssmagic commented Nov 7, 2018

摘要

魔法哥在 “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

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

  • 功能完备

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

    💡 以太坊

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

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

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

  • 性能优良

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

  • 设计简洁明了

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

  • 采用 JS 作为合约语言

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

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

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

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

slide-p23

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

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

slide-p24

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

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

    💡 地址

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

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

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

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

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

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 开发者,至少要做好以下准备工作…………

……

……


完整文章已收录到 “CSS魔法” 微信公众号,微信扫码即可阅读全文:

weixin-qrcode


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

@cssmagic cssmagic added the DApp label Nov 7, 2018

@jincdream

This comment has been minimized.

Copy link

jincdream commented Nov 8, 2018

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

@cssmagic

This comment has been minimized.

Copy link
Owner Author

cssmagic commented Nov 9, 2018

@jincdream

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

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

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

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

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

@hkongm

This comment has been minimized.

Copy link

hkongm commented Jan 21, 2019

手动赞一个

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.