okay hello I'm Fabien I'm the lead
developer
I'm also created the current mist and
the current wallet and I'm also worked
partly on web 3GS and other things I
want to talk today about what are that
because I think a lot of people have
this question general because it's a new
term we coined and also why you should
use meteor to build them so adapt like
in its simplest case it's just basically
an application talking only to a
blockchain so the main source program
okay information information basically
the main back-end is a blockchain
because this is trusted source of
information obviously this can be a
native tab also but this will be most
likely a JavaScript html5 based web
application because we have missed where
you can run it which automatically gives
you the access to the blockchain and
it's also extremely easy to build
interfaces in a JavaScript environment
in html5 based environment so what
basically makes it that so the main
three components and the main component
is obviously an interface build somehow
like in this case is JavaScript html5
CSS it has a local storage so the data
is kept locally which could be local
store it could be the process index to
be could be web SQL and it comes from a
place where you can verify that the app
is exactly what it's supposed to be so
this could be swarm ipfs any kind of
content content addressable storage and
obviously it needs the access to the CM
blockchain which is what we deliver the
web 3 of
so the web 3 object is basically like
the API for JavaScript applications to
interact with a blockchain and it will
be the object you will have missed
available and it's pretty simple to
install just I'm convinced our three or
meteor atmosphereum web 3 so now a few
people already probably had the question
why meet your so meet your act is a full
stack framework allowing cross client
reactivity of all the server
infrastructures on sun the reason why
meteor like this is not the main reason
what one reason is because I know it and
because I wrote a book about it and we
we build all our interfaces using meteor
but the main reason actually it is it is
ideal for Deb's because meteor is built
to purely build single page applications
single page applications doesn't mean
they have only one page it just means
that all the logic is contained in the
Java Script which will run in the
browser it also has a command-line tool
for like loading a development server
for package management and bundling so
currently if you would do this you would
have to learn a bunch of tools you would
have to learn crammed and gulp and
browser fry and whatever and it's a
pretty like step learning curve to get
into installing building web
applications so meteor makes is easy and
that's why we are recommending actually
using meteor because it is so easy you
basically just write one line of code
and you can already have something
visible you can change it and you
already see something happening another
major point is reactive template so this
basically means when your data sources
changes so anything you get from the
blockchain when this changes you have to
up your interface will update
automatically so this means your
interface will always be consistent you
don't have any kind of spaghetti code
where you try to keep track of things or
you have to write endless bindings to
get things right it's just always
displaced chord data
and the major point is it has mini
which is an in-memory database it's
basically exactly the same syntax as
DB but its basic just in your
memory in the browser and there are
packages like the package I have is
called persistent minimum which out
persists all of this either into local
storage or into the index to be a web
SQL in the browser so you're basically
just talking to this like database
you're writing things stands
automatically in your local storage
persisted and when you reload the
application it's it's just back there
and one major tool as well is the meteor
build client which allows you to
basically get purely declined part of
your application so you get a JavaScript
file a CSS file and index file which you
can in some static assets you had and
you can just put the wherever like
either on a server or later on swarm in
mist and we also provide some package
which we use to build our own tools you
can use them immature but some of them
you can even use without me cure for
some of the east tools which gives you
conversion with number formatting and so
on and some nice interface packages so
they need meteor because they use the
reactivity of meteor and we highly
encourage using the identical because
the identical is basically the user's
way of recognizing his address and his
accounts by his identities he uses a
mist so we use this in mist we use it in
all our depth we build build and with
other depths you said to it's easier for
the user to recognize so we saw this
example before of the smart contract
where somebody want to buy something
they all both put money on the smart
contract exactly twice the value of the
product and then when the package was
sent successfully and he is happy he can
initiate that the money goes back except
what he paid for the package so clever
nice interface you have can build this
in mist
and I will not live code right now
because that takes a little too long but
I will show you how it behaves it looks
oh that's okay so this is mist and I
will start mining here on my private net
to avoid any chances of no internet so
this is basically exactly the button
Alex was talking about the nice thing
about this is kind of like the Internet
of Things but it's the Internet of
components you could say because it's
kind of like the button is the escrow so
the button gets the money and the button
pastes the money out and all the rest
around and wherever it is but in this
place basically doesn't matter because
it's the button is the internet of thing
thing so we here and this is basically a
miss preview at its current state and I
selected that I want to be the buyer or
some random person who has money on his
account in this case is here the buyer
and the buyer can basically he sees the
button the contract or like this this
component sees automatically who is
there and what address he has and he
sees okay there's nobody I know so
probably somebody want to buy their the
item so if I want to buy the item I mean
it's just click on it
decrypt my password and sent this
magical comments duty and blockchain and
I bought the item basically so now I
would wait for the package from wherever
he sends it once I like it I would
actually press confirm and the money
would move to me back my deposit and the
price plus the two deposits of the
seller so the same thing would look
different the same pattern would look
different if I would be the seller so if
I'm now switching to be the seller it
would look actually different because
now the button recognizes that I am the
seller of the button and I now have a
different function I can do I can refund
the buyer if I think like whatever he
sent the package back
can whatever or if I'm somebody else I
would basically see the items already
sold so if you go ahead
so just to like to make that clear so
here we look our accounts we see there's
two by over a thousand either and the
seller has thousand either this is
actually correct it's actually good
question doesn't
yeah so we go back to the sales page and
we basically confirm that we got the
package and you also can see here in the
confirmation window what actually is
having under the hood so I'm the buyer
sending an action to the contract to the
patent itself here I'm sending no uta'
because I already sent ether and I'm
executing this function which is hex
encoded the function name with some gas
provided once it's done all the money
moves back to the people who which
should happen if my private network
works ok so now the item is actually
sold for both parties and that
everything works I lost I paid and this
fella got his money and the interesting
thing about this is it's basically this
is just the HTML here and you see it's
basically simple thing down here I know
not sure if you can see that right so
it's basically this simple thing here
it's the Buy button and a pass in a
contract so obviously when we are
building a real web shop we're not
having one contact her Buy and her per
sale and per product we would write a
contract which have multiple products
which can be bought X amount of times at
the same time so this is just to show
like a very simplistic approach here so
in this case we just give it the address
and the button itself looks simply like
a button which gets a specific text and
a specific class and a subtext here
and the whole cord itself so the
self-content thing is this snippet here
and I basically just have the avi of the
contract we are interacting with this is
readable I hope so this is the avi which
tells basically web 3 how to interact
with this contract then a function which
will check the states it will call all
these contracts function like example
who's the seller who's the buyer what's
the value and what's the current state
and then we have this object which is
the different states so if I miss the
seller and I'm state 0 then use these
classes and this text if I'm the instead
one use this and so on and basically
what happens if the country if the
template is initiated we just check the
state at the beginning reading from the
theorem blockchain and then we watching
all the events which come from this
contract and if there's an event coming
something happened and we will check the
state again so this will update the
state will update our reactive function
you're called template bar by our value
and so on and this will rerun all these
template helper functions we have here
which is only one the get state which
gets the state from this one state
object and returns the right text or the
right class or whatever does so busy
dysfunction we rerun if any of these
template bars you would change in the
same when I click the button I'm just
checking if I'm the buyer or the seller
or if there is buy or sell account and
then it will call the right functions
and once you call in websley web will
send transaction or whatever and you
pass the right data miss will pop up a
window asked to confirm this transaction
and there you go
this basically allows you to have the
Internet of web components
box so what you also see here is using
our little CSS framework we are building
which we will use for our tabs to pan
tabs we will build if you want to use
this framework you will always like a
look into our like similar like our
design which makes you look good by
default and it's rather simple it's like
simple HTML you write very simple
classes and then you immediately have
like a good-looking application but this
is still in the making or use of caution
so just check the cellar we see the same
stop mining yeah hello can we open can
we turn this on okay
I think it's him testing testing okay
okay yeah that's basically it so this is
the DEP you can try yourself if you just
go to this address and you have a local
node running and you start it on low
blows with the RPC started localhost
8545 you basically be able to do things
you would have to change in this case
you wouldn't be able to do anything
except buying if I would deploy it with
a write contract or you just like clone
the application yourself look how it
looks like and if you want to start
building gaps our wiki page I shifted it
a little bit around or this page here
actually gives you a good entry point on
where to look like building tabs on
meteor thank you
you