EOS Development For Beginners: WebAssembly by skenan

View this thread on: hive.blog | peakd.com | ecency.com

eos · @skenan · Aug 4 '17

$3.40

EOS Development For Beginners: WebAssembly

Many guys are trying to learn how to develop smart contracts on EOS. However, those smart contracts are written by C++ and compiled into WebAssembly which seemed strange to most non-c++ programmers.  So before diving deep into the EOS, it’s better to learn some basic stuff about WebAssembly.

<b> What’s WebAssembly </b>

I don’t want to copy the definition from its [official website](http://webassembly.org/). You can take a look at it by yourself. Here you can think it as a file that can be loaded and run in the web browser.  It’s similar to the Javascript,  but it’s much faster, tinier and safer than JS.

<b> How to write  Webassembly </b>

Here is a work flow:
![](https://steemitimages.com/DQmRat5n75CXtGdEeiJDDazRmnMTjTPgEV282YQLnnj8Gbw/image.png)

Basically there are four steps, I will go though it by a very simple example.

* <b>1. Write the C/C++ code</b>
 
The following code is used to calculate the square root of a number.
```
#include <math.h>
float getSqrt (float num) {
  return sqrt(num);
}

```

* <b>2. Compile C/C++code into wasm (the format of Webassembly)</b>

There are [many ways](https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm) to compile the code. To simplify the process, I found a very [easy way](https://wasdk.github.io/WasmFiddle/?cvrmt) to do that.  
![](![](https://steemitimages.com/DQmcmZr9fa6Yi55ckaL7f7GsCpB3mT2Sh4oDVUYpZzEMxhS/image.png))

Copy your code to that website and click the build button, you can find complied file in the below.

![](https://steemitimages.com/DQmcz9SmQh9oR43dd2r2Ar56jMXSXZmPMCga5xbtKkyNVuC/image.png)

Then download the program.wasm file to your local box.

* <b>3. Load the wasm into browser with JavaScript </b>

Create a test.html using the following code, put it in the same fold as program.wasm
```
<!doctype html>
  <title>WASM Test</title>
  <script>
    fetch('./program.wasm')
    .then(res => {
      if (res.ok)
        return res.arrayBuffer();
      throw new Error(`Unable to fetch WASM.`);
    })
    .then(bytes => {
      return WebAssembly.compile(bytes);
    })
    .then(module => {
      return WebAssembly.instantiate(module);
    })
    .then(instance => {
      window.wasmSqrt = instance.exports.getSqrt;
    });
  </script>
```  

* <b>4. Run the method in Web browser </b>

To work around the website cross-origin issues, we need to run a local web server in that folder. With Linux or Mac, let's do
```
python -m SimpleHTTPServer
```
Then open our Chrome browser, go to this page: http://localhost:8000/test.html. In the console, try the following method.

![](https://steemitimages.com/DQmfEDJkxCTgEKTmEcdqjZ1tq3NkD7PgoViCL2y23ZuybBq/image.png)


## Done

Through this tutorial, you get familiar with WebAssemply, but for the advanced study, please check [eos-example-exchange-contract-and-benefits-of-c](https://steemit.com/eos/@dan/eos-example-exchange-contract-and-benefits-of-c
) written by @dan

If you are interested in how to build EOS on mac, please check my [previous tutorial](https://steemit.com/eosdev/@skenan/eos-build-guide-on-mac-os).

👍 trogdor, hkjn, nationalpark, kxp, skenan, tinh, kevlar42, pandorasbox, anne-arkey, viterbo, coinchain.world, peb35, delans, k-omer, fureweb, nugob, will.remor, itsfitts, hisea, phial, fabiovalentino, gwpl, rawzen, chiel, zenithin, jwerner, dmesquita

`author`	skenan
`permlink`	eos-development-for-beginners-webassembly
`category`	eos
`json_metadata`	{"tags":["eos","eosdev","webassembly"],"users":["dan"],"image":["https://steemitimages.com/DQmRat5n75CXtGdEeiJDDazRmnMTjTPgEV282YQLnnj8Gbw/image.png","![](https://steemitimages.com/DQmcmZr9fa6Yi55ckaL7f7GsCpB3mT2Sh4oDVUYpZzEMxhS/image.png)","https://steemitimages.com/DQmcz9SmQh9oR43dd2r2Ar56jMXSXZmPMCga5xbtKkyNVuC/image.png","https://steemitimages.com/DQmfEDJkxCTgEKTmEcdqjZ1tq3NkD7PgoViCL2y23ZuybBq/image.png"],"links":["http://webassembly.org/","https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm","https://wasdk.github.io/WasmFiddle/?cvrmt","http://localhost:8000/test.html","https://steemit.com/eos/@dan/eos-example-exchange-contract-and-benefits-of-c","https://steemit.com/eosdev/@skenan/eos-build-guide-on-mac-os"],"app":"steemit/0.1","format":"markdown"}
`created`	2017-08-04 00:59:09
`last_update`	2017-08-04 00:59:09
`depth`	0
`children`	6
`last_payout`	2017-08-11 00:59:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	2.839 HBD
`curator_payout_value`	0.556 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	3,068
`author_reputation`	8,219,510,746,132
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	10,699,983
`net_rshares`	860,488,873,417
`author_curate_reward`	""

properties (23)vote details (27)

voter	rshares	pct
trogdor	827,804,371,968	100%
dmesquita	0	100%
jwerner	0	100%
nationalpark	8,905,866,039	100%
kevlar42	599,737,605	100%
zenithin	0	100%
pandorasbox	499,128,376	100%
hkjn	13,493,867,746	100%
chiel	0	100%
kxp	6,736,614,965	100%
skenan	1,829,766,718	100%
tinh	619,520,000	100%
rawzen	0	100%
gwpl	0	100%
fabiovalentino	0	100%
phial	0	100%
hisea	0	100%
itsfitts	0	100%
will.remor	0	100%
nugob	0	100%
fureweb	0	100%
k-omer	0	100%
delans	0	100%
peb35	0	100%
coinchain.world	0	100%
viterbo	0	100%
anne-arkey	0	100%

@fureweb · Jan 24 '18

Thanks for your post.

properties (22)

`author`	fureweb
`permlink`	re-skenan-eos-development-for-beginners-webassembly-20180124t094852631z
`category`	eos
`json_metadata`	{"tags":["eos"],"app":"steemit/0.1"}
`created`	2018-01-24 09:48:54
`last_update`	2018-01-24 09:48:54
`depth`	1
`children`	0
`last_payout`	2018-01-31 09:48:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	21
`author_reputation`	79,277,691,714
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,880,405
`net_rshares`	0

@hkjn · Aug 4 '17

Thanks for the post! I like the focus on concrete steps and keeping it simple,  would love to see more EOS-specific examples intermediate in difficulty between this and @dan's posts.. :)

👍 skenan

`author`	hkjn
`permlink`	re-skenan-eos-development-for-beginners-webassembly-20170804t010634874z
`category`	eos
`json_metadata`	{"tags":["eos"],"users":["dan"],"app":"steemit/0.1"}
`created`	2017-08-04 01:06:33
`last_update`	2017-08-04 01:06:33
`depth`	1
`children`	1
`last_payout`	2017-08-11 01:06:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	186
`author_reputation`	1,420,329,207
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	10,700,428
`net_rshares`	1,857,631,186
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
skenan	0 B		1,857,631,186	100%

@skenan · Aug 4 '17

Yeah. I am learning step by step. Hope I can write more.

properties (22)

`author`	skenan
`permlink`	re-hkjn-re-skenan-eos-development-for-beginners-webassembly-20170804t011128857z
`category`	eos
`json_metadata`	{"tags":["eos"],"app":"steemit/0.1"}
`created`	2017-08-04 01:11:27
`last_update`	2017-08-04 01:11:27
`depth`	2
`children`	0
`last_payout`	2017-08-11 01:11:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	56
`author_reputation`	8,219,510,746,132
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	10,700,739
`net_rshares`	0

@pandorasbox · Aug 4 '17

This seems like content that is actually useful to people and deserves sharing. Upvoted.

properties (22)

`author`	pandorasbox
`permlink`	re-skenan-eos-development-for-beginners-webassembly-20170804t014653530z
`category`	eos
`json_metadata`	{"tags":["eos"],"app":"steemit/0.1"}
`created`	2017-08-04 01:46:51
`last_update`	2017-08-04 01:46:51
`depth`	1
`children`	0
`last_payout`	2017-08-11 01:46:51
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	88
`author_reputation`	6,724,880,351,404
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	10,702,969
`net_rshares`	0

@trogdor · Aug 4 '17

Hey, thanks for the post. Keep them coming!

properties (22)

`author`	trogdor
`permlink`	re-skenan-eos-development-for-beginners-webassembly-20170804t012231264z
`category`	eos
`json_metadata`	{"tags":["eos"],"app":"steemit/0.1"}
`created`	2017-08-04 01:22:30
`last_update`	2017-08-04 01:22:30
`depth`	1
`children`	0
`last_payout`	2017-08-11 01:22:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	43
`author_reputation`	22,905,182,177,434
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	10,701,365
`net_rshares`	0

@xiaoliang · Mar 1 '18

大神，有没有通俗点的讲解eos功能的文章？比eth强在哪里？

properties (22)

`author`	xiaoliang
`permlink`	re-skenan-eos-development-for-beginners-webassembly-20180301t045221215z
`category`	eos
`json_metadata`	{"tags":["eos"],"app":"steemit/0.1"}
`created`	2018-03-01 04:52:24
`last_update`	2018-03-01 04:52:24
`depth`	1
`children`	0
`last_payout`	2018-03-08 04:52:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	30
`author_reputation`	280,200,246,080
`root_title`	"EOS Development For Beginners: WebAssembly"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	41,290,578
`net_rshares`	0