►
Description
Percy is a modular toolkit for building frontend web applications in Rust. It supports serverside rendering out of the box.
In this talk we’ll dive into how Percy works under the hood, starting with a look into its Virtual DOM implementation.
You’ll hopefully walk away with an understanding of the pieces that power Percy - as well as a good sense of how to get started with using Percy to build your own web apps.
---
My name is Chinedu Francis Nwafili and I’m a developer with a passion for the modularity and great tooling. When not chasing my unofficial goal of becoming a four star chef - you can find me working on open source modules, tweeting about graphics programming or blogging about building a 3d game in the browser.
A
All
right
stuff,
everybody
chinnu
Francesco
fili,
as
you
introduced,
we're
gonna,
be
talking
about
Percy,
which
is,
as
stated
a
library
for
building
isomorphic
web
apps
in
rust,
a
quick
warning
for
the
beginning.
A
lot
of
this
stuff
is
experimental.
There
are
areas
where
works
pretty
nicely
other
areas
where
it's
like
a
little
verbose,
a
little
inefficient,
still
working
on
that.
But
hopefully
this
sort
of
direction
is
somewhat
interesting,
and
so
we
talked
about
a
few
things,
one.
What
is
percy
today?
How
are
we
targeting
watch
them?
What
does
it
look
like?
A
How
does
it
feel?
And
since
this
is
a
press
conference-
and
I'm
assuming
a
lot
of
you
care
about
rust
and
rust,
details
we'll
talk
about
it
with
more
of
a
technical
focus
versus
sort
of
a
bird's-eye
view,
and
so
the
person
I
was
thinking
of
is
I
took
a
bunch
of
screenshots
of
a
bunch
of
different
code
that
compiles
webassembly
and
will
sort
of
just
talk
through
how
that
works.
A
Okay.
So
before
we
talk
about
percy,
I
have
to
shout
out
a
couple
crates
which
alex
is
here
somewhere
there.
You
are,
these
do
almost
all
the
work
and
then
I
just
kind
of
use
them.
So
thank
you.
So
it's
blossom
mine,
Jen
and
web
sis,
which
is
in
the
same
cargo.
Workspace
and
I,
won't
try
and
explain
all
the
technical
details,
because
the
person
that
wrote
is
actually
here,
but
in
short,
these
help.
You
generate
a
lot
of
the
bindings
that
allow
your
rust
code
to
talk
with
native
browser.
A
A
So
it
needs
to
know
what's
on
it,
and
nowadays,
I
can
kind
of
do
a
good
job
of
indexing,
things
that
aren't
rendered
on
the
server.
But
your
best
bet
is
to
have
the
server
send
down
the
content.
The
crawler
sees
that
it
can
index
it
just
fine,
and
so
we
needed
a
library
that
can
render
on
both
your
server
and
on
the
client
in
the
browser.
So
Percy
was
born
and
this
was
the
real
motivation.
That's
one
easy
rose,
so
this
is
just
a
screenshot
of
something
I'm
working
on
now
using
Percy.
A
It's
the
website
for
my
game,
so
HTML
CSS
generated
from
rust
and
it's
powered
by
sort
of
rearward
development,
where
my
time
we're
up
work
on
something
sort
of
run
into
issues
fix
them
as
we
go
right,
pretty
simple,
so
I
think
we're
gonna
get
the
code
soon
cool.
So
let's
start
diving
to
sort
of
the
pieces
that
power
this
right.
A
So
if
you've
written
HTML
before
it's
basically
similar
to
late
similar
to
XML,
you
define
some
node
and
then
this
node
can
have
child
nodes
and
then
based
on
the
attributes,
properties,
whatever
you
wanna
call
them,
you
specify
the
browser
will
interpret
this
into
graphics.
That
eventually
renders,
and
so,
when
writing
web
applications
in
rust.
While
you
could
sort
of
just
hand
code
the
data
structures
that
end
up
leading
to
these
HTML
strings,
you
probably
don't
want
to,
and
so
you
need
a
macro
to
do
that
right.
A
There's
these
weird
commas
everywhere,
which
I
will
need
to
talk
to
more
procedural
macro
experts
to
see
if
I
can
figure
out
a
way
to
get
rid
of
those,
but
for
now
they're
there,
but
it's
mostly
similar
and
you
sort
of
pay
a
little
trade
off
with
some
slight
unfamiliarity.
But
on
the
good
side,
you
get
all
the
type
safety
and
it's
really
hard
to
write
things
incorrectly
and
at
the
bottom.
A
A
So
we
saw
that
HTML
right,
but
what
does
that
create?
So,
at
the
end
of
the
day
that
ends
up
being
a
macro
that
generates
a
virtual
node,
and
so
a
virtual
node
is
a
tag.
So
a
div
span,
bold
its
properties,
so
ID
class
data
foo.
Whatever
sort
of
attribute
you
want
events
on
click
on
mouse-over
and
then
children.
So
a
child
is
another
virtual
node
and
you
know
Turtles
all
the
way
down
and
then
optionally.
It
can
be
a
text
node.
A
A
So
a
virtual
node
can
represent
either
text
or
a
regular
element
and
sort
of
based
on
what
set
here
will
know
how
to
eventually
turn
this
into
a
real
Dom
element
element
which
we
got
to
and
as
the
title
says,
this
is
sort
of
the
behind
everything,
and
so
your
HTML
generates
this.
The
deafening
patching
virtual
Dom
algorithms
useless
to
then
update
the
Dom
and
everything's
really
built
around
the
sort
of
virtual
node
comes
up
and
again
the
nice
part.
A
Here
is
it's
just
some
data
and
then
we
have
methods
later
to
use
that
data
to
render
in
the
browser
which
we'll
get
to
so
the
first
piece
of
it
is
the
diffing
algorithm.
So
if
any
of
you
are
familiar
with
react,
which
kind
of
popularized
this
concept,
you
will
have
two
different
virtual
trees
on
the
right.
There's.
A
You
know
a
bunch
of
test
cases,
maybe
a
div
and
a
span
on
top
and
then,
when
we're
dipping
those
what
we
generate
as
our
diff
is
a
vector
of
patches
that
will
get
applied
to
a
real
Dom
element.
For
something
simple
like
this
there's
only
one
patch,
which
is
a
replace
patch,
and
so
that's
saying
we're
going
to
replace
the
first
node
with
a
span
and
what
isn't
shown
here
is
the
test
that
sort
of
make
sure
this
works.
A
But
hopefully
you
can
assume
that
it
does
and
the
second
one
we're
replacing
the
second
or
the
second
node,
which
is
indexed
one.
So
a
bold,
the
b
/b
with
a
strong
right
and
so
on,
there's
replaces
you
can
append
children,
you
see
it
at
the
bottom
and
so
how
it
works,
and
this
might
be
familiar
to
you
if
you've
written
other,
maybe
JavaScript,
front-end
II
libraries
is
in
your
application
code
in
your
application,
crate.
You
are
generating
these
virtual
nodes.
A
Hopefully,
and
so
that's
the
dipping
piece,
the
patch
piece
is
again
just
powered
by
regular
dress
trucks
right,
you
can
append
children,
so
you
have
a
Dom
node
and
then
you
append
other
elements
to
it.
You
can
truncate
children,
so
you
have
a
Dom
node
with
some
children
and
let's
say
that
your
new
Dom
State
no
longer
has
those
children.
There
would
be
a
truncate
patch,
there's
a
replace
patch,
where
maybe
a
div
becomes
a
span.
A
So
you
would
replace
that
node
and
then
there's
adding
removing
attributes
and
setting
texts
and
so
effectively
every
single
thing
that
ever
changes
in
your
Dom
can
be
represented
in
the
different
mutations,
and
you
just
have
a
vector
of
them
and
you
apply
them
as
we
sort
of
go
farther
along
and
start
to
optimize
things.
The
underlying
implementations
of
how
we
handle
these
patches
will
probably
change
or
be
cached
in
certain
ways,
etc,
but
effectively
all
changes
to
the
Dom.
Look
something
like
this.
A
So
as
you
can
imagine,
when
you're
dealing
with
something
so
new
is
compiling
Russell
webassembly,
you
can
bang
your
head
for
a
while
things
might
not
work
as
you
expect,
and
it's
kind
of
very
important
that
you
have
high
test
coverage.
So
another
thing
that
I
didn't
write
but
I
get
to
talk
about
is
Watson
bind
gen
test.
We're
used
to
some
sorcery
that
I.
A
They
run
in
the
browser,
I'm
dipping
and
patching
real
Dom
nodes,
and
then
I
can
assert
to
make
sure
as
we're
doing
kind
of
on
the
left
here
that
I
get
some
node
in
the
Dom
that
matches
what
I
tried
to
patch,
and
so
it's
not
like
you
know
theoretical.
This
works
in
memory
and
I'm
hoping
it
works
in
the
browser.
We
can
actually
test
against
the
browser
using
the
awesome
tooling
that
exists.
A
Unit
testings
another
focus
where
oh
one
thing
that
I
quickly
found
is
waiting
a
few
seconds
for
your
code
to
recompile
and
then
refreshing.
Your
browser
is
incredibly
frustrating
and
makes
you
want
to
flip
your
laptop
over
and
so
that
quickly,
inspired,
testing,
tooling
and
so
what's
kind
of
highlighted.
Here
is
again
since
all
of
your
HTML,
your
entire
web
application
is
just
a
bunch
of
virtual
nodes
that
have
virtual
node
children.
A
You
can
define
methods
that
allow
you
access
to
some
different
virtual
nodes,
and
so
here
we're
like
rendering
some
view
we're
looking
at
the
children,
we're
asserting
that
there
is
a
child
at
index,
zero
with
certain
texts
and
sort
of
making
sure
that
all
the
rendering
works,
and
that
would
work
for
any
component
that
you're
working
on
and
so
because
it's
all
again
just
data
behind
it.
You
can
implement
whatever
method
you
want
and
test
against.
A
So
here's
a
highlight
of
it
before
we
sort
of
talk
about
the
underlying
implementation,
details,
which
are
probably
been
more
interesting
so
at
the
top
here,
is
like
a
quick
screenshot
from
some
like
very
simple
web
app
that
we'll
look
at
towards
the
end
and,
as
you
can
see,
there's
this
beautiful
gradient,
which
I
did
not
take
from
Yahoo
and
I
did
not
just
change
the
colors
and
at
the
bottom,
here's
sort
of
the
code
that
powers
it
right.
So
there's
this
CSS
macro
that
has
this
align
items.
A
A
If
you
can
kind
of
see
in
the
example
on
the
right
at
the
bottom,
the
test
cases
so
there's
a
class
called
CSS
RS
zero
and
that
will
then
have
all
the
CSS
that
you
defines
then
we'll
get
CSS
RS
one
that
will
have
CSS
and
we'll
add
sort
of
all
this
into
one
large
growing
string,
we'll
write
that
to
a
file
that
you
specify
with
a
environment,
variable
called
output,
CSS
and
so
at
compile
time.
A
procedural
macro
grabs
all
of
your
CSS
calls,
generates
a
bunch
of
classes
and
writes
them
to
a
file.
A
And
so
then,
when
you're
running
your
application,
you
are
only
sending
down
I,
guess
class
names
that
your
virtual
nodes
are
using
and
the
CSS
will
obviously
have
the
same
classes
of
names
and
it
works.
And
so
you
can
write
your
CSS
right
next
to
your
rush
views,
which
is
especially
useful
for
people
who
want
to
sort
of
publish
things
to
the
web.
But
you
don't
want
to
learn
a
bunch
of
stuff
like
less
or
sass,
or
all
of
these
tools
that
compile
down
to
CSS.
A
You
can
just
kind
of
write
a
little
CSS
block
right
next
to
what
is
using
it
and
it
works
using
this
in
production
right
now,
and
it
feels
very
nice.
The
reason
that
I
know
that
I
like
it
is
when
I
start
from
scratch.
I
still
go
in
this
direction
versus
sort
of
walking
towards
something
that
I'm
more
used
to
so
I'm
gonna
keep
exploring
that,
and
this
is
just
another
example
of
it.
Where
you
have
your
navbar
CSS
here,
which
will
eventually
just
get
turned
into
a
static
string.
A
Css
rs0
that
we
looked
at
before
and
then
here
you
have
a
div
with
a
class
that
has
that
same
static
string
as
the
class,
and
you
know
the
macro
will
parse
that
into
the
class
property
in
the
virtual
node.
And
so
then,
when
you
render
this
HTML
in
the
browser,
you
end
up
with
a
div
with
the
right
class
and
then
you're
sending
down
that
CSS
and
it
sort
of
hooks
up
together.
A
So
that
should
be
CSS
and
so
one
other
sort
of
piece
that
powers.
The
puzzle
that
we'll
look
at
it
at
the
end
is
the
router.
So
actually
for
this
piece
there
are
a
lot
of
routers
that
are
really
interesting.
That
are
being
worked
on
now,
but
they're,
mostly
for
back-end
applications
like
I
know
rocket.
Has
one
and
sort
of
other
back-end
frameworks
use
routers
the
not
necessarily
issue,
but
difference
is
that
front-end
routing
is
largely
similar,
but
it
also
has
very
different
concerns.
Like
there's.
A
If
maybe
some
of
you
do,
web
development
use.
Java
Script.
You
find
yourself
repeatedly
going
through
a
bunch
of
if
statement,
hurdles
to
make
sure
that
you're
matching
against
the
sort
of
right
input
that
you
want
and
handling
all
the
other
stuff,
whereas
do
to
rest
type
safety.
You
can
just
completely
trust
that
you
will
never
have
to
handle
anything
that
should
not
be
there,
not
a
security
expert.
Don't
trust
me
there,
but
you
will
usually
not
have
to
handle
anything
that
should
not
be
there.
A
A
Whenever
you
change
I,
don't
want
to
talk
too
deeply
into
sort
of
the
web,
but
in
your
browser
URL,
you
have
sort
of
the
path
that
you're
at
and
you'll
match
that
against
your
router
and
you'll
say
give
me
the
view
that's
associated
with
that,
which
is
an
option
against
the
box.
Sort
of
straight
object.
You'll
get
back
the
view,
you'll
render
that
view
and
then
you'll
display
to
the
user
what
they
should
see
and
then
sort
of
on
the
right
side.
A
You
might
have
a
string
for
another
parameter,
etc,
and
then
your
view
creator
function
which
takes
in
all
the
parameters
that
your
view
was
provided.
So
an
ID
with
an
unsigned
in
and
everything
else
and
then
generates
a
a
box
view
that
you
can
then
render
and
a
view
is
just
a
trait
that
percy
provides.
That
has
a
render
method,
some
other
niceties.
A
But
that's
kind
of
the
point
I
like
when
my
stuff
is
boring,
and
so
the
goal
here
is
to
be
sort
of
the
underlying
tooling.
That
can
power.
Other
frameworks
that
have
these
interesting
ideas
I
might
require
a
bit
more
of
an
investment
if
you
want
them.
But
if
you
don't,
then
you
just
use
the
underlying
tooling
or
swap
out
other
things
right.
A
Another
piece
of
it
is
to
have
this
be
heavily
trait
based,
and
so
one
of
the
beauties
of
rust
that
I
found
so
far
and
my
short
time
using
it
is
the
trait
system
where,
let's
say
the
virtual
node
right
now
is
its
own
struct.
So
you
kind
of
can't
really
use
a
lot
of
what
percy
offers
unless
you're,
using
that
virtual
node.
A
But
as
we
move
that
to
instead
be
a
trait,
then
someone
can
come
and
say,
wait
this
diff
patch
algorithm
that
even
piment
is
terrible,
we'll
have
a
better
one
and
then
you
can
just
go
and
use
that
without
having
to
rewrite
any
of
your
application,
because
it
implements
the
same
virtual
node
trait
that
you're
already
using
there's.
Also
the
percy
book,
which
we've
started
writing
using
md
book.
A
Another
shout
out
to
awesome
bind
gen
because
I
just
copied
your
Travis
yml
and
it
got
that
working,
pretty
quick
and
so
one
other
piece
before
I
think
we
dumped
it
to
the
right.
The
demo
is
contributing.
So
if
you're
interested
in
doing
more
web
assembly
stuff,
obviously
I'll
be
here,
and
we
can
sort
of
talk
about
how
more-but
works
under
the
hood,
but
the
best
way
to
sort
of
contribute.
A
Is
the
world
world
driven
development
way,
which
is
try
and
build
something
for
the
web
in
rust,
open
issues
about
the
stumbling
block,
so
you
run
into
what's
not
fun?
What
did
it
make
sense
and
then
we'll
sort
of
fix
those
one
by
one
and
eventually?
Hopefully
there
are
a
lot
of
options
out
there
for
you
to
build
real
web
applications
with
rust
and
demo
time
where's
my
police
claps
on.
A
Okay,
so
I
have
a
really
really
basic
web
app
that
I
threw
together
here.
What
you
kind
of
saw
in
the
screenshot
and
we're
gonna
add
a
piece
to
it
in
the
few
minutes.
We
have
right
so
I'll
zoom
in
a
little
bit
so
very
simple.
There's
that
navbar
that
we
rendered
yeah.
How
do
I
do
that
I'm,
also
working
on
a
PHP
to
Russ
compiler
good
enough
to
command
what
I'm
gonna
go
command,
help
search.
A
Nice
there
you
go
yes
perfect,
so
the
nav
bar
that
you
saw
sort
of
looks
like
this,
where
presentation
modes
a
little
weird
but
I'll
get
used
to
it.
You
have
a
nav
bar
struct,
which
has
an
active
page
and
some
reference
to
a
store
which
holds
our
state
and
that's
how
you
sort
of
get
access
to
different
state
and
implement
view
which
has
a
render
function
and
so
we'll
get
the.
A
And
then,
if
we
go
back
into
the
browser
you
see,
the
contributor
is
here,
which
is
just
that
component,
that
we
rendered
and
embedded
and
then
the
home
which
just
links
died
somewhere
for
web
app.
So
if
I
click
on
this,
as
you
saw,
it
said,
slash
contributors.
So
it
goes
like
the
contributors
are
out.
Like
pretend
that
looks
beautiful,
and
then
this
would
come
back
here
and
then
another
piece
of
it
is.
A
Yeah,
yes,
good
there
yeah
so
again,
since
you're
in
rush,
you
have
everything
that
you'd
expect
right.
So
there's
a
state
struct
which
for
something
that's
a
navbar
and
two
buttons
doesn't
have
a
lot
but
there's
a
click
count
which
is
a
reference
counts
itself
and
we
can
render
based
on
that
click
count.
So
if
we
go
to
the
home
page
view.
A
You
can
see
here
that
will
use
the
click
count
in
our
rendering
and
then,
if
we
increment
the
click
count
with
this
button,
the
click
count
will
increment
in
the
browser,
and
so
one
piece
that
will
quickly
add,
while
there
are
a
few
minutes
left,
is
the
special
friend
which
right
now
just
increments-
the
click
count,
but
instead
we'll
make
it
show
the
special
friend.
So
how
we'll
do
that
is
we'll
come
back
into
here?
I'll,
go
to
the
correct
project
and,
first
we'll
add
a
new
message
type.
A
A
So
we'll
add
this
and
I
left
a
comment
at
the
bottom
in
case
I
forgot,
but
we'll
add
this
show
special
friend
variant
right
and
then
we'll
go
to
where
we
handle
all
of
our
message
variants
and
if
you
haven't
written
something
like
react
before
or
if
you
have.
Rather,
this
is
kind
of
like
state
dispatch
where
you
have
messages
and
then
you'll
have
handler
for
them.
So
we'll
go
to
our
state
here
and
then
somewhere
in
this
blob,
we
handle
messages
right.
A
So
there's
this
incoming
message
for
showing
a
special
friends
and
that'll
call
I
also
threw
this
at
the
bottom,
because
I
forgot,
so
that'll
set
state
dot,
show
special
friend
to
true
so
we're
onto
something.
So
now,
whenever
we
send
a
show
special
friend
method,
our
state
store
will
grab
that
and
it'll
say
what
do
we
want
to
do?
Okay,
we
want
to
set
show
special
friend
to
true
so
now,
if
we
go
back
to
our
view
for
the
home
page
here
we
have
that
show
special
friend
button
that
we
saw
before
right.
A
You
see
the
text
show
special
friends,
it's
sending
a
click
message
to
our
store,
which
wraps
that
state
instead
we'll
make
it
send
a
show
special
friend,
message
and
I
will
grab
this,
so
I
don't
have
to
think
and
talk
paste.
It
here
delete
this
hit
a
little
that
and
then
we
are
setting
special
friend
to
be
a
different
component.
If
it's
true
so
you'll
see
there
on
line
33,
our
special
friend
is
just
an
empty
div.
A
A
A
A
So
that
is
here
where
we
have
just
some
HTML
file
that
it's
reading
from
disk
and
on
line
11?
It
will
insert
HTML
from
the
server,
so
it
will
render
the
application
to
a
string
on
the
back
end,
because
the
server
side,
rendering
it'll
inject
it
into
this
HTML
file
and
then
send
that
down
so
right
away.
A
Even
if
you
had
JavaScript
and
web
assembly
disabled
you'll
see
something
then
you'll
see
at
the
bottom
on
line
22
there's
this
bundle
j/s
script,
which
and
also
this
sort
of
isomorphic
line
script
which
effectively
these
two
scripts
run:
they'll
initialize
the
web
assembly,
and
so
the
client
gets
this
index.html
and
then
it
sort
of
stopped
writing
web
assembly
and
web
somebody
takes
over
from
there
right.
The
problem
is,
let's
say
that
yours,
as
you
saw
with
that
sort
of
a
knit
thing
that
we
did
right,
we
can
say
a
knit
mm.
A
A
They're
you
so
you
see
it
looked
at
the
query.
String
you've
got
the
anit
flag,
it
unwrapped
it
and
then
somewhere
over
here
ish.
It
will
create
an
application
with
that
initial
value
right.
So
then,
how
does
the
client
know
what
to
do
from
there?
How
does
it
not
just
start
from
zero
and
then
your
page
quickly,
flashes,
and
so
that's
where
an
index.html
there's
the
nice
part
of
the
initial
State
JSON.
A
So
on
the
server
we'll
replace
that
initial
State
JSON
with
just
a
JSON
string
of
the
initial
State,
you
could
also
use
any
other
serialization.
You
want
I'm
assuming
you're
using
sterday,
so
you
could
have
like
a
binary,
encoded
thing
or
something
and
then
on
the
client
side,
since
this
is
all
rest
code
running
we're
also
using
surday
to
deserialize
that
back
into
your
state,
struct,
and
so
all
you
do
is
just
send
down
what
you
want.
A
Here,
where
we'll
pass
in
that
initial
state
string,
that
we
read
from
the
browser
create
an
application
out
of
subscriber
so
that
anytime
state
changes,
you
can
do
something.
In
this
case,
we
call
some
update
method
to
update
the
Dom,
and
then
we
return
this
client
to
the
j/s
side,
and
then
the
j/s
just
starts
it
in
you're
done
and
that
should
do
it.