►
Description
WebAssembly is a new standard which can be used to speed up heavy computations in the browser. But what is a “heavy computation”? How it may affect your users and your business? I will show several examples of heavy computations in React + three.js app. We will compare performance of JS and Rust. Then I will share our story of introducing Rust and WebAssembly to the app. How to write the code, how to build and publish npm module, and how to finally load it with webpack. We will discuss how wasm-bindgen library can help you to communicate with the JS world and reduce the boilerplate. In the end we’ll talk about quality control tools and tests.
Find slides here: https://github.com/ibaryshnikov/beijing-talk-2019
Follow us on Twitter: https://twitter.com/RustConAsia
A
A
So
in
online
technology
we
use
rust
with
web
assembly
and
what
do
we
exactly
do?
There
are
two
major
products
in
the
company:
the
scanner
and
the
aligners.
So
a
patient
can
come
to
a
doctor.
I
can
scan
the
teeth
and
then
the
doctor
can
see
the
result
and
we
provide
web
tools
for
doctors
and
also
I
really
or
something
that
we
can
preview
the
results
of
the
treatment.
A
A
A
A
A
A
B
A
A
A
A
A
A
And
let's
talk
about
performance,
we
already
seen
there
were
three
arrays
in
two
arrays
out
like
60,000
items
in
well,
actually
numbers
and
30,000
out
and
what
I
measured
in
JavaScript.
It's
only
time
to
compute
the
result
and
in
women
sembly.
We
still
need
to
pass
the
data
to
webassembly
memory
and
to
copy
it
back.
So
it
is
actual
computation
and
data
transfer.
Overhead.
A
A
And
when
I
started
to
murder,
I
started
with
the
development
bills,
so
in
a
buck
there
are
several
profiles
like
profile
development,
Hank,
profiler
ease
and
development
produce
like
stuff
like
cultural
art
and
used
a
lot
of
a
wall.
So
it's
the
JavaScript
is
slower
and
I
was
using
web
assembly
release
built
because
in
web
assembly
tools,
release
is
the
default
mode.
So
most
of
all
the
developers
are
happy.
They
have
more
performance
benefits
and
when
it's
reached
later
to
production,
build
I
was
not
that
happy
with
the
performance
boosts
well,
but
there
is.
A
So
in
most
of
the
browsers
it's
like
1.3
and
we
also
support
Safari
on
iPod
and
probably
evap
assembly
on
the
far
e
on
iPod
is
the
same
as
JavaScript,
but
we
still
have
this
data
transfer
of
our
head.
So
it's
a
little
bit
slower
because
of
this
and
surprisingly
in
edge,
even
in
production
built,
it
was.
It
was
like
six
times
faster.
It
was
a
little
bit
surprised,
maybe
didn't
notice
something,
but
well
in
production
is
the
Oh.
A
And
how
to
improve
the
station?
The
first
obvious
thing
is
to
eliminate
data
transfer
overhead,
so
there
is
a
need
to
keep
the
state
on
the
web
assembly
side
in
our
line
of
memory,
and
the
most
problem
here
is
that
it
involves
a
lot
of
changes.
As
I
was
doing
the
prototype
I
needed
to
show
that
it
works.
We
can
trust
it.
It
will
not
break
our
application,
so
I
just
decided
not
to
change
the
thing.
Ok,
let's,
let's
keep
our
overhead,
it's
still
a
little
bit
faster.
We
can
build
things
on
top
of
it.
A
A
A
So
the
next
thing
I
decided
to
to
improve
this
part,
why
it
is
important
when
we
have
WebGL
and
renderers,
we
have
limits,
we
have
if
you
want
to
render
60
frames
per
second,
we
have
only
16
milliseconds
per
frame
and
selection
in
each
frame
took
four
milliseconds,
so
it's
25%
of
our
time.
It's
a
lot
of.
We
can
actually
start
improving.
It.
A
A
A
Let's
assume
we
are
going
to
render
a
frame,
and
there
is
a
lot
of
garbage
and
garbage
collector
tells
us
hey,
wait,
wait,
I
meant
I
need
to
clean
the
garbage
and
we
wait
and
the
user
receives.
There
is
a
stop
because
the
garbage
collector
was
cleaning
the
stuff
and
with
webassembly
there
is
no
garbage
collector.
A
A
A
A
Well,
it
also
brings
some
problems.
We
have
higher
complexity
and
we
have
to
think
about
browser
support,
and
the
second
thing
with
browser
supports
there
is
a
wasn't
2gs
tool.
It
helps
us
we
can
generate
in
JavaScript
from
our
new
assembly
binary
the
problem
with
it
is
when
I
tested
it.
It
was
2
times
slower
than
handwritten
JavaScript.
A
A
Webassembly
we
have
to
allow
it
8i
synchronously
by
design
here's
an
example
of
loading
with
the
verb
pack.
It
is
compatible
and
supported
out
of
the
box
with
the
web
assembly
experimental
order
and
later
on
line
seven
the
year
Lord
fall
back
either
handwritten
or
generated,
and
then
imagine
we
want
to
start
using
the
function
immediately
or
in
any
browser,
and
we
check
if
there
is
a
web
assembly,
we
calculate
with
assembly
stuff.
A
A
Is
it
supported
at
the
moment
or
not
with
this
if-else
and
the
complexity
with
the
Cobra
can
be
solved
with
Java
scripts
and
snippets
Joe
skips
local
snippets
is
a
new
feature
which
was
recently
added
to
or
wasn't
Benjen
and
I
can
encourage
you
to
check
it.
It
can
really
help
to
reduce
the
boilerplate.
A
A
From
cargo
test
output-
and
there
is
also
a
cargo
audit
to
check
that
there
are
no
vulnerabilities
in
your
dependencies.
Finally,
if
there
is
a
headless
Chrome,
it
is
for
integration
testing.
The
whole
pipeline
looook
looks
like
we
have
to
build
our
robe
assembly.
Then
we
have
to
build
a
bundle
with
a
park.
Then
we
have
to
solve
the
statics.
Then
we
have
to
use
a
headless
browser
to
navigate
to
the
statics
load.
A
A
Well,
when
it
goes
to
was
invention,
it
is
quite
low
level,
it's
some
times
painful
to
work
with,
and
there
is
an
initiative
go
model
our
web
toolkit,
which
will
provide
a
better,
more
high-level
libraries.
So
you
could
just
do
your
things
without
thinking
about
low-level
stuff.
It's
just
any
initiative.
It
was
just
created
and
if
you
have
any
ideas,
just
come
and
comment
there
and
there
will
be
a
link
in
the
end.
A
Well
also,
there
is
STD
web
draw
script
bindings
and
a
lot
of
libraries
uses
TD
web
I
said
as
for
Vogue,
girl
or
endurance,
and
overall,
a
lot
of
people
use
this
to
develop,
and
previously
they
were
not
compatible
with
wasn't
binding,
and
even
someone
started
to
rewrite
from
mr.
debate
was
invention,
but
recently,
like
three
or
four
days
ago,
there
was
a
religious
support
of
compatibility
between
STD
web
and
must-buy
engine.
You
can
use
both
and
it
is
really
awesome
it.
Just
initial
support
expect
bugs,
but
I
highly
encourage
you
to
try
it.
A
A
Bindings
and
finally,
again
new
thing
or
y'see:
it
is
a
system
interface
for
things
like
file
system
or
well.
Currently,
in
webassembly
there
is
no
Esther
diode
support.
You
cannot
just
print
something
which
Bazzi
you
will
be
able.
It
is
already
on
nightly.
You
can
test
it
well
and
that
that's
oh,
thank
you
very
much.
B
B
A
When
I
had
troubles
with
JavaScript
and
Russ
incompatibility,
I
could
specifically
in
float
the
handle
floats
a
little
bit
differently.
I
just
compiled
my
rust
natively
to
native
then
the
packet
and
then
well
so
usually
I
don't
do
back.
But
if
well
I
I
read
code.
There
is
a
hard
hard
story
with
the
bug
in
people
work
on
it.
They
want
to
generate
JavaScript,
then
generate
source
maps
to
web
assembly,
and
then
the
back
is
through
it.
But
it
is
an
idea.
It
is
not
in
implemented.