►
Description
61 736D: An Introduction to the Binary Magic of WASM - Divya Mohan, SUSE
2022 is the year of WebAssembly (or atleast is touted to be)! A quick google search throws up a plethora of blogs, sessions, videos, and podcasts about the basics and the advantages. However, what NOBODY talks about is the binary magic behind-the-scenes that makes WASM the powerful tool it is. There is a textual component that is more human readable & accessible to those who aren't computers, but the binary matrix is where the real magic happens. With an extremely simple byte-by-byte walkthrough of the generated .wasm code referencing the documentation, this talk aims to offer the audience an understanding of the WASM binary while also demystifying its syntactic building blocks with a demo. A sample outline of the session is as below: - Hello, WASM! - A brief introduction to the state of WASM in 2022. - Writing a simple WASM program (demo) - Generating the binary (demo) - Walkthrough of the entire binary code referencing the documentation - Next steps.
A
So
today,
I'm
sure
you
know
to
speak
about
the
textual
and
the
binary
formats
of
webassembly,
and
I
know
you'll,
think-
and
I
definitely
thought
of
it
as
a
more
theoretical
and
conceptual
sort
of
a
thing
rather
than
something
that
is
to
be
presented
at
a
conference.
But
I
hope
I
can
change
the
perception
for
you
all.
A
So
before
I
go
ahead,
I
ought
to
introduce
myself
because
this
is
my
very
first
session
at
my
very
first
in
person
conference
in
nearly
two
and
a
half
years,
so
I'm
divya
mohan,
as
I
afore
mentioned,
and
I
work
as
a
technical
writer
with
rancher
labs-
that's
now
acquired
by
susa,
but
over
and
about
the
documentation,
work
that
I
do
at
my
day.
Job
I'm
also
one
of
the
documentation
maintainers
for
the
kubernetes
and
the
litmus
kiosk
projects.
A
I
also
do
a
bunch
of
community
stuff
as
part
of
my
roles
of
the
cncf
ambassador
and
the
you
know,
being
an
aws
community
builder
and
I'm
extremely
excited
about
you
know,
helping
future
generations
of
technologists.
Take
their
very
first
steps
in
the
open
source
as
well
as
the
cloud
native
ecosystem.
A
So
that's
a
bit
about
me
and
I
won't
go
really
deep
into
it,
but
coming
to
today's
topic,
who
is
it
really
for
because,
like
I
mentioned
before,
this
is
an
extremely
theoretical
conceptual
topic,
pretty
boring,
if
I
can
put
it
that
way
and
why?
Why
would
anyone
speak
or
speak
about
this
at
a
conference?
A
A
This
session
might
be
of
interest
to
you,
and
why
am
I
talking
about
this
right
now
is
another
question
that
probably
might
get
thrown
my
way,
because
this
has
been
around
for
five
years
like
even
if
you
go
right
now
onto
the
webassembly
website.
The
version
two
of
the
draft
will
be
there.
So
why
am
I
talking
about
this
right
now
now?
A
Webassembly
as
an
ecosystem
is
just
getting
started,
and
the
a
lot
of
newcomers
are
stumbling
upon
the
specification
and,
unfortunately,
when
I
did
back
in
november
2021
a
lot
of
it
wasn't
clear
because
of
my
lack
of
programming
knowledge.
Webassembly
specification
was
really
difficult
for
me
to
navigate
through
as
a
person
who
came
from
a
non-coding
background,
and
I
basically
knew
only
the
bare
bones
of
programming
and
did
not
really
understand
a
lot
of
it.
So
I
want
to
make
this
accessible,
and
this
is
purely
a
selfish
motivation.
A
I
understand
that,
but
in
the
you
know,
spirit
of
making
this
ecosystem
a
more
welcome
and
accessible,
welcoming
and
accessible
space.
I
want
for
more
content
or
want
for
more.
You
know
stuff
to
be
out
there,
that's
equally
accessible
to
people
who
are
from
any
career
level
or
any
level
of
knowledge.
A
So
that
being
said,
how
do
I
plan
to
go
about
this
session,
like
with
everything
in
this
universe,
whether
you're
learning
a
programming
language,
whether
you're
learning
cooking,
whether
you're
learning
you
know
any
musical
instrument?
You
first
start
off
with
the
building
blocks
and
then
you
probably
add
on
structure.
A
So
if
you
take
a
language
for
example,
what
you
typically
do,
is
you
start
off
with
characters
or
alphabets,
and
then
you
sort
of
build
upon
words,
then
sentences,
then
essays
or
whatever,
but
there's
a
slight
difference
here,
the
difference
being
that
when
we
speak
about
the
webassembly
program,
the
we
know
the
end
result.
We
know
that
it
is
going
to
be
a
program,
albeit
in
a
different
format.
A
It's
not
going
to
be
something
that
is
apparently
readable
to
us
because
we
are
not.
You
know.
All
of
us
are
not
assembly
level
program,
assembly
level,
programming
enthusiasts,
but
we
definitely
do
know
that
it
resembles
a
program
in
one
format.
So
what
I
aim
to
do
at
this
point
is
to
take
a
web
assembly
program
deconstructed
a
deconstructed
structure
into
the
various
building
blocks
and
walk
you
through
it.
As
though
you
know,
we
were
talking
about
a
regular
program
in
a
normal
language
that
we
probably
write
programs
in.
A
A
A
So
a
module
basically
is
the
base,
a
fundamental
unit
of
a
webassembly
program
and
all
of
us,
you
know,
know
that
so
I'm
not
going
to
repeat
it
and
in
the
binary
context,
if
you
look
at
it
on
the
far
right
side
of
the
screen,
you
will
see
that
that's
that's
exactly
what
it
translates
to
now.
The
module
on
this
slide
is
empty,
so
basically
it
does
not
do
anything.
It
is
just
it's
not
going
to
take
any
input.
It's
not
going
to
throw
any
outputs.
A
It's
it's
basically
just
there,
but
this
is
a
perfectly
valid
program
and
basically,
if
you
could
liken
it
to
a
normal
program,
it
would
be
the
hello
world,
but
I
would
I
don't
want
to
say
that
out
explicitly,
because
then
that
would
be
very
simple
for
anyone
to
write.
So
this
is
an
empty
module
and
there's
a
perfectly
valid
web
first
webassembly
program
that
you
could
write.
A
But
when
we
speak
about
modules
in
real
life,
that's
not
how
it's
going
to
look
like
in
real
life,
because
we
do
have
to
have
some
sort
of
inputs.
We
do
have
to
have
some
sort
of
output.
Otherwise,
there's
no
point
of
writing
software
in
the
very
first
place.
So
what
does
a
webassembly
module?
Essentially
look
like
this
is
a
very
poorly
drawn
webassembly
module
structure
that
I
managed.
A
A
A
So
why
is
there
a
difference
between
the
various
sections
and
what
exactly
is
the
thing
that
differentiates
them
so,
except
for
the
coloring?
The
fundamental
differentiator
here
is
that
the
known
sections
which
are
in
green
are,
you
know
supposed
to
be
arranged
in
that
exact
order
and,
honestly
speaking,
we
should
all
be
thankful
for
the
fact
that
we
don't
have
to
write.
A
We
have
compilers
to
actually
do
this
because
remembering
another
sequence
of
sections
would
probably
have
been
hard,
so
this
sequence
has
to
be
maintained
across
all
web
assembly
modules
and
this
if
it
is
not
maintained.
Obviously,
the
validation
does
not
happen,
and
you
know
your
program
is
not
allowed
to
go
further
and
you
in
case
of
the
red
red
boxes
or
sections.
A
But
I
digress.
I
was
here
to
speak
about
a
webassembly
program
and
section
it
in
you
know
deconstruct
it
for
you
all.
So
we've
gone
about
looking
at
how
a
module
looks
like
in
general,
without
delving
too
deep
into
its
different
sections.
Now
in
a
typical
program.
What
can
you
think
of?
As
you
know,
potential
things
that
you
would
incorporate?
One
is
you
know
the
input
or
maybe
you
know
some
sort
of
variables
or
constants
that
you'd
like
to
pass.
Then
you
obviously
have
the
output.
A
Then
you
have
instructions
that
possibly
would
be
required
to
act
upon
those
inputs
and
outputs,
and
you
probably
might
need
libraries
to
you
know
run
that
whole
program
and
obviously
this
program
needs
some
memory
because
mem
there's
nothing
that
runs
without
memory
these
days.
So
I
think
that's
a
no-brainer
and
last
but
not
the
least.
You
will
need
data,
maybe
not
for
initialization,
maybe
not
for
any
other
purposes,
but
just
general
data
to
sort
of
test,
your
program
or
whatever.
A
So
that's
exactly
how
we
are
going
to
look
at
this
webassembly
program
as
well.
So
the
first
section
that
we're
going
to
look
at
is
the
operand
section.
Now
this
is
not.
You
know
the
specification
related
language
and
I've
tried
to
drill
it
down
as
far
as
possible,
so
the
operands
are
basically
the
supported
types
within
web
assembly,
and
this
section
after
the
section,
rather
what
we,
what
I
sort
of
want
people
to
walk
away
with
is
what
kind
of
types
that
are
supported
in
web
assembly.
A
So
where
exactly
do
we
define
these
specific
types?
Because,
as
we
saw
in
this
program
that
that
I'll
just
bring
up
here,
as
we
saw
in
this
program,
we
do
not
have
any
specific
you
know
in
in
the
anatomy
bit
we
we
don't.
We
don't
know
where
we
place
this
particular
thing.
So
in
the
type
section,
what
sorry
in
the
type
section
in
the
anatomy
module
anatomy
of
the
module
is
where
we
would
place
the
function
signatures,
the
reason
being
typically,
what
tends
to
happen?
A
A
A
So
what
is
the
wasm
equivalent
of
that
I
mean
I
don't
mean
to
say
that
we
have
to
exactly
write
the
same
thing
and
what
would
be
ex?
What
would
be
we
expected
to
do
if
we
were
to
write?
You
know
export
and
import
statements
in
web
assembly
so
for
that
there
is
the
next
section
that
is
the
import
section
and
the
syntax
is
pretty
much
up
on
the
screen
as
well,
and
the
best
part
about
this
is
that
you
don't
have
to
remember.
A
The
hash
include
stdio.h,
which
probably
gave
me
nightmares
for
longer
than
I
can
remember,
coming
to
instructions
which
obviously
are
required,
because
instructions
form
the
structure
that
we
sort
of
not
structure.
Maybe
they
are
required
so
that
you
know
the
machine
knows
what
to
do
with
the
values
you
pass
to
it.
So
there
are,
there
are
as
many
or
probably
more
or
type
of
instructions
as
the
num
as
the
number
of
types.
A
So
can
we
actually,
you
know,
amend
the
memory
being
allocated
to
us
because
web
assembly
is,
you
know
following
a
binary
instruction
format
and
what
are
the
different
kinds
of
memory
now?
As
we
all
know,
there
is
the
the
linear
memory
that
I
won't
go
deep
into
because
it's
allocated
with
every
module
and
in
fact,
if
you,
if
I
can
just
switch
back
to
the
slide
for
the
anatomy,
you
see
that
it
is
allocated
within
the
module
itself.
A
So
there
is
a
section
dedicated
to
memory
and
in
fact,
within
the
within
the
actual
sorry,
within
the
actual
pro
program
itself.
If
you
see
memory
is
sort
of
allocated
via
offsets
and
over
and
about
this
we
also
have
the
intermediate
stack
from
which
values
are
pushed,
and
you
know
values
can
be
pushed
into
and
popped
out
of.
A
So
that's
a
bit
about
the
memory
aspect
of
it
and
last
but
not
the
least.
We
have
data
now,
data
doesn't
need
to
be.
You
know
it
doesn't
need
to
necessarily
relate
to
actual
initialization
or
actual.
You
know
requirement
for
any
other
functions,
but
you
might
need
to
just
pass
data
for
the
processing
to
actually
happen.
A
So
how
does
that
get
declared?
So
this
particular
section
sort
of
defines
that
and
the
grammatical
syntax
here
is
also
pretty
straightforward.
So
I
don't
think
I
need
to
go
very
deep
into
that,
but
yeah.
I
think
that
was
all
from
my
side
and
summing
it
all
up.
I
think
that
we
are
at
a
pretty
sorry.
We
are
at
a
pretty
nascent
stage
here
and
as
the
specification
sort
of
evolves,
we
will
have
more.
A
You
know,
flourishes
coming
into
the
textual
and
binary
format
and
it's
upon
us
to
actually
keep
it
as
relevant
and
as
fresh
for
the
newcomers
as
possible,
because
a
lot
of
the
content
out
there
is
sort
of
jargony.
If
I
might
add-
and
newcomers
might
not
exactly
be
able
to
understand
it.
If
you
come
from
a
standpoint
of
you
know
just
listing
stuff
down,
so
I
hope
this
was
helpful
and
I,
like
I
like
to
wrap
up
the
presentation
for
today.
Thank
you.