Decentralizing the Web
with JavaScript
! "
!
@ianaya89
Decentralizing the Web with JavaScript - @ianaya89
Slide 2
Slide 2 text
!
Nacho Anaya
!
@ianaya89
• JavaScript Engineer @BloqInc
• Ambassador @Auth0
• Organizer @Vuenos_Aires
Decentralizing the Web with JavaScript - @ianaya89
Slide 3
Slide 3 text
!"
Decentralizing the Web with JavaScript - @ianaya89
Slide 4
Slide 4 text
Decentralizing the Web with JavaScript - @ianaya89
Slide 5
Slide 5 text
!
Boring Part
Decentralizing the Web with JavaScript - @ianaya89
Slide 6
Slide 6 text
Blockchain
!"
Cryptocurrency
Decentralizing the Web with JavaScript - @ianaya89
Slide 7
Slide 7 text
! "
Blockchain
Decentralizing the Web with JavaScript - @ianaya89
Slide 8
Slide 8 text
P2P
! ↔ # ↔
Decentralizing the Web with JavaScript - @ianaya89
Slide 9
Slide 9 text
!
Hash
hash('
!
') // d2d4e9ddd66e9ce4ee288aea24a345de
hash('
"
') // 23622db6154ea91d793647c9bd990824
Decentralizing the Web with JavaScript - @ianaya89
Slide 10
Slide 10 text
Decentralizing the Web with JavaScript - @ianaya89
Slide 11
Slide 11 text
!
Blocks
const genesisBlock = hash(null, data, metaData)
const currentBlock = hash(genesisBlock, data, metaData)
/* ... */
const newBlock = hash(prevBlock, data, metaData)
Decentralizing the Web with JavaScript - @ianaya89
Slide 12
Slide 12 text
!
Good!
Decentralizing the Web with JavaScript - @ianaya89
Slide 13
Slide 13 text
!
Bad!
Decentralizing the Web with JavaScript - @ianaya89
Slide 14
Slide 14 text
!
Ethereum
Decentralizing the Web with JavaScript - @ianaya89
Slide 15
Slide 15 text
Ethereum
!"
Ether
Decentralizing the Web with JavaScript - @ianaya89
Slide 16
Slide 16 text
!
Smart Contracts
“A set of promises, specified in digital form,
including protocols within which the parties
perform on these promises…” !" Nick Szabo
Decentralizing the Web with JavaScript - @ianaya89
Slide 17
Slide 17 text
!
Smart Contracts
“A piece of code that runs in the blockchain!!"”
!# Everyone else
Decentralizing the Web with JavaScript - @ianaya89
Slide 18
Slide 18 text
!
Uses Cases
Assets Exchange - Chain Control - Data Ownership
- Trust funds - Network Democracy
Decentralizing the Web with JavaScript - @ianaya89
Slide 19
Slide 19 text
♻
Life Cycle
Code
➡
Compile
➡
Deploy Interact
Decentralizing the Web with JavaScript - @ianaya89
Slide 20
Slide 20 text
!
Keys & Address
Decentralizing the Web with JavaScript - @ianaya89
Slide 21
Slide 21 text
!
TX
Decentralizing the Web with JavaScript - @ianaya89
Slide 22
Slide 22 text
!
Ether
Decentralizing the Web with JavaScript - @ianaya89
Slide 23
Slide 23 text
!
Gas
Decentralizing the Web with JavaScript - @ianaya89
Slide 24
Slide 24 text
!"⌚
DApps
Decentralizing the Web with JavaScript - @ianaya89
Slide 25
Slide 25 text
!
Flow
!
..........................
⬇
..........................
TX
➡
Confirmation New Block
Decentralizing the Web with JavaScript - @ianaya89
Slide 26
Slide 26 text
!
Philosophy
Decentralizing the Web with JavaScript - @ianaya89
Slide 27
Slide 27 text
!
Cool Projects
Aragon - IPFS - Cryptokities - Golem - GitCoin -
Decentraland - Open Bazaar - Bank Fish
Decentralizing the Web with JavaScript - @ianaya89
Slide 28
Slide 28 text
!
Why DApps?
Decentralizing the Web with JavaScript - @ianaya89
Slide 29
Slide 29 text
"People want to have a web
they can trust. People
want apps that help them
do what they want without
spying on them." !" Tim
Bernes Lee
Decentralizing the Web with JavaScript - @ianaya89
Slide 30
Slide 30 text
!
Web 3.0
Decentralizing the Web with JavaScript - @ianaya89
Slide 31
Slide 31 text
!
Funny Part
Decentralizing the Web with JavaScript - @ianaya89
Slide 32
Slide 32 text
!
Client
• geth
• parity
• ganache-cli
Decentralizing the Web with JavaScript - @ianaya89
Slide 33
Slide 33 text
!
Network
• Main
• Test (Ropsten, Kovan, Rinkeby)
• Private
• Local
Decentralizing the Web with JavaScript - @ianaya89
Slide 34
Slide 34 text
!
ganache-cli
$ npm i -g ganache-cli
$ ganache-cli # starts a local node with HTTP provider
Decentralizing the Web with JavaScript - @ianaya89
Slide 35
Slide 35 text
!
Solidity
pragma solidity ^0.4.24;
contract HelloCoin {
mapping (address => uint) public balance;
function mint (address receiver, uint amount) public returns(uint) {
balance[receiver] += amount;
return balance[receiver];
}
}
Decentralizing the Web with JavaScript - @ianaya89
Slide 36
Slide 36 text
!
Truffle
$ npm i -g truffle
$ truffle init # inits a new truffle project
$ truffle compile # compile contracts and generate ABI
$ truffle test # run test cases
$ truffle migrate # deploy/migrate contracts to the blockchain
Decentralizing the Web with JavaScript - @ianaya89
Slide 37
Slide 37 text
!
Web3
import Web3, { providers } from 'web3'
const provider = new providers.HttpProvider('http://localhost:8545')
const web3 = new Web3(provider)
Decentralizing the Web with JavaScript - @ianaya89
Slide 38
Slide 38 text
!
Truffle Contracts
import { providers } from 'web3'
import contract from 'truffle-contract'
import abi from './Contratc.json'
const provider = new providers.HttpProvider('http://localhost:8545')
const MyContract = contract(abi)
MyContract.setProvider(provider)
Decentralizing the Web with JavaScript - @ianaya89
Slide 39
Slide 39 text
!
MetaMask
Decentralizing the Web with JavaScript - @ianaya89
Slide 40
Slide 40 text
Decentralizing the Web with JavaScript - @ianaya89
Slide 41
Slide 41 text
!
https:!"cryptozombies.io
Decentralizing the Web with JavaScript - @ianaya89
Slide 42
Slide 42 text
!
Take Away
Decentralizing the Web with JavaScript - @ianaya89
Slide 43
Slide 43 text
!
Thanks!
!
Questions?
!
@ianaya89
Decentralizing the Web with JavaScript - @ianaya89