►
Description
We started learning WebAssembly from scratch with AssemblyScript, following the tutorial with TypeScript with add() and our own functions to manipulate HTML DOM: fib() for numbers, hello_from() for strings, sort() and format_arr() for array sorting. The whole experience was done in Gitpod in the browser.
Demo project: https://gitlab.com/everyonecancontribute/dev/learn-wasm-assemblyscript
Blog: https://everyonecancontribute.com/post/2022-07-12-cafe-53-webassemply-assemblyscript-first-steps-gitpod/
AssemblyScript: https://www.assemblyscript.org/getting-started.html#setting-up-a-new-project
Wasm Cooking with Golang book: https://k33g.gumroad.com/l/wasmcooking
A
A
C
D
A
A
B
There
is
in
nc,
plus
plus,
I
guess,
20
or
70.
There
is
this
module
stuff
in
in
c
plus.
C
A
A
B
A
A
B
A
Seems
like
that,
but
it
doesn't
tell
me.
A
B
D
B
B
A
C
A
B
C
B
B
A
A
This
is
me,
writing
javascript,
no
chess
code
and
then.
C
A
A
Yeah,
potentially
we're
documenting
this
in.
Why
I'm
using?
Why
I'm
I'm
so
used
to
write
code
on
the.
A
On
the
terminal,
npx
rs,
init,
dot.
A
B
B
A
Hello,
this
is
like
the
the
export
which
you
which
you
get
from
the
pod,
oh
and.
D
A
Here
it
also
says
that
something
has
opened.
You
can
open
the
preview
actually
so
now
everything
is
in
here.
C
D
B
A
Okay,
but
this
this
initializer
command
provided
us
with,
like
a
cookie
cutter
skeleton
for
the
structure,
which
should
be
best
practice:
the
entry
file,
okay,
interesting
and
now,
if
we
have
this
here,
we
can
modify
this.
Let
me
quickly.
A
Too
many
things
added
if
we
modify
the
index.html
and
say.
A
Potentially
we
can
just
call
fibonacci
and
well
that's
not
the
complete.
To
be
honest,
I
don't
remember
how
fibonacci
is
calculated,
but
let's
try
10.
A
Okay,
no.
A
Yeah,
it's
I
I
need
to
I'm
not
good
today,
I
need
to
kind
of.
I
don't
know
how
this
exactly
works.
Can
I
import
multiple
functions
yeah.
It
should
like
this
because
I
don't
want
to
like
we
write
that
every
time.
A
Now
we
are
back
to
self.html,
1.0,
diff
id,
add.
A
Fancy
autocomplete
fib.
B
A
Eh
no
at
and
if
e.
A
A
Oh,
it's
not
a
good
day,
I'm
a
little
tired.
A
A
B
B
A
Okay,
this
is
typescript.
It's.
B
A
So
articulate
ignore
hasn't
been
updated.
Actually,
so
build
needs
to
be
added
to
get
ignore.
A
What
is
just
tests
is
whatever
no
more
deals.
A
They
get
something
new.
Yes,
let
me
quickly
add
this
and
commit
it
the
assembly
with
our
own
fib
watch
in
typescript
nope.
C
A
A
Maybe
we
could
maybe
we
could
like
calculate
the
then
the
values
after
the
comma
of
p
p.
I
will
just
generate
a
buffer
overflow.
B
A
A
A
A
A
Have
no
idea
how
to
write
typescript,
let's
mimic
this
one,
hello
from
gitlab.
A
A
A
Must
return
because
I'm
not
returning
a
value
yeah
have
fun.
Oh
fix
that
later
we
need
to
have
a
temporary
string
out.
Is
hello
rom,
let's
drink
card
card
work.
B
B
It
in
the
chat,
so
you
can
write
something
like
this
name-
is
the
variable
n.
A
B
B
It's
named
and
the
name
the
parameter.
B
B
A
Yes,
famous
last
words:
in
theory:
it
works
in
production.
A
Trademark
no
and
I
want
I
need
to
import
that.
A
Hello
is
it
me
you're
looking
for
this
is
leon
and
richie.
A
On
no,
I
was
wondering
if.
C
A
But
I
want
to
oh.
D
A
A
The
mm1
and
countries
cafe
meetup
and
we
need
the
hot
beverage
this
one.
Okay,
oh
and
I
was
editing
the
wrong
field.
A
B
B
The
the
the
symbol
right
next
to
the
url
right
this
one
yeah
when
you
have
a
full
page,
maybe
devtools,
is
working.
A
B
A
A
A
B
A
I
think
it's
not
an
english
word
run
start.
A
B
I
think
it
just
cannot
allocate,
so
it
makes
a
new
call,
I
guess
in
some
kind
of
runtime,
where
they
don't
have
the
the
random
environment
itself,
the
sandbox
or
whatever.
It's
called
interesting
that
it
is
not
by
default
in
this.
Isn't
it
because
I
guess,
when
you
start
with
this
stuff,
would
be
helpful.
A
This
is
the
steel
bolt.
Okay,.
A
A
Okay,
okay
yeah!
This
is
basically
the
same.
We
are
seeing
here.
Okay,
we
have
passed
some
strings
to
something
else.
We
can
do
write
the
game
import
output
games.
We
can
also
write
a
sorting
algorithm.
B
B
So
I
think
you
can
write
string
or
brackets.
A
A
But
now
I
understand
the
let
whatever
syntax,
because
I've
seen
that
on
twitter
often-
and
I
didn't
know
which
language
that
is.
A
Yeah,
the
question
is:
am
I
calling
an
type
function
so,
like
writing?
Just.
B
A
B
C
A
B
C
A
B
Oh,
that
could
be
the
reason
yeah.
I
guess
that
yeah
did
they
do
it
with
with
less
less
or
more
than
try
the.
A
Maybe
this
works,
let's
see
what
it
does
and
then
we
need
to
modify
this
one.
B
A
Which
function
did?
How
did
I
call
that
function.
B
If
the,
if
the
first
argument
is,
is
less,
then
you
need
the
minus
one,
if
it's
at
least
minus
minus
value,
if
it's
greater
than
you
need
the
positive
value,
and
if
it's
now
it
should
stay
in
the
position.
B
A
B
A
One
other
thing
I
was
wondering,
since
this
is
just
like
compiled
binary
code.
One
could
upload
that
to
the
gitlab
object
registry
or
package
registry
is
a
generic
object.
A
C
A
A
Print
would
imply
that
there's
actually
like
an
a
print
inside
the
function
which
it
which
isn't.
A
Yeah
I
wanted
to
verify
that
it
reverses
the
order
of
this
and
just
keeps
the
order
of
this,
because
I
changed
changed
how
it
works.
Actually.
A
D
Yeah
this
is
interesting
because
yeah,
like
I
said
I
I've
messed
around
with
this
before
as
well,
and
so
I'm
also
interested
from
just
like
you
know,
you
would
think
they
would
make
it
easier
to
or
like
there
would
be
a
better
kind
of
like
tutorial
on
like
how
to
do
this
without
having
to
like
jump
over
all
the
various
you
know
roadblocks,
but
this
is
this-
is
cool.
B
D
A
D
All
right,
I
gotta
run
though,
but
nice
seeing
you
guys
again
I'll
see
you
later.
A
C
B
I
guess
you
can
service
workers
what
the
searcher
always
could.
This
rate
called
in
the
browser.
A
Yeah,
but
this
is
called
this
is
called
web
assembly
and
assembly
script.
Why
does
a
document
process
if
it
cannot
be
used.
B
A
C
B
C
C
A
B
A
I
haven't
really
like
looked
into
it.
I
only
saw
like
this
is
the
first
release,
the
first
two
0.0.0
release
and
it's
also
a
cncf
sandbox
project.
A
The
policies
are
portable
as
web
assembly
modules,
which
is
interesting
because
I
also
I've
also
seen
it
the
other
way
around,
where
ebpf
modules
are
being
transported
as
containers
oci
containers,
which,
which
is
a
different
like
distribution
format.
Trying
to
steer
like
where's.
A
C
A
A
Yeah,
okay,
at
least
this
is
like
an
example.
A
C
A
B
B
A
This
is
super
complex.
I
mean
it's
super
interesting,
but
I
now
understand
when
chris
from
cncf
wrote
a
while
ago
that
web
assembly
developer
experience
needs
a
lot
of
love
because
it's.
A
A
C
A
Don't
recall
it
correctly?
Yes,
where
is
the
book.
C
A
Can
optimize
things
yeah,
potentially
it's
for
someone
who
wants
to
try
it
out
right
now,
there's
not
much.
They
can
do
rather
than
learning
and
looking
forward
what
is
possible,
not
trying
things
out
and
also
reporting
like
feedback
on
what
can
be
improved
for
the
getting
started
documentation.
A
A
Maybe
we
could
just.
We
could
also
do
a
web
assembly
in
in
gitlab
cicd
and
then
generate
some
met,
some
attestation
metadata
from
the
artifacts
we
are
generating
and
we
could
try
distributing
web
assembly
in
the
registry
and
see
what
else
we
can
do
with
it.
Security
scanning
would
also
be
interesting,
yeah
and
where's.
The
project
which
I
created
the
project
is.
A
A
A
Almost
quite
quite
some
files
yeah,
but
this
is
like
this
is
public,
and
this
will
also
be
linked
in
the
blog
post
and
recording.
So
everyone
can
like
learn
what
we
tried
to
do
in
the
past
hour,
and
with
that
I
would
say:
let's
call
it
a
day
for
today
and
have
a
great
vacation,
whoever
is
taking
vacation
now,
and
we
will
see
each
other
in
august.
At
some
point.