►
Description
JavaScript Will Let Your Site Work Without JavaScript - Sarah Meyer, BuzzFeed
What does your site look like without JavaScript turned off? Are your users waiting for all your JavaScript to be delivered and rendered before they see anything interesting on your pages? Is your site heavy and slow, especially on mobile devices? Isomorphic JavaScript with Node can help. No matter what server-side language you currently use, you can render your HTML with JavaScript on the server before sending it down to your client. We will discuss how to seamlessly build serverside-rendered content into stacks using popular frameworks like React and Ember and the performance, stability, and UX benefits that come with it.
A
Yes,
JavaScript,
JavaScript,
plus
Star
Wars,
yeah
who's
excited
for
rogue
one.
Anyone
new
I,
don't
know
if
you
can
tell
but
I
really
love
Star
Wars.
My
name
is
Sarah
Meyer
I'm,
a
software
engineer
with
a
BuzzFeed
in
New
York,
and
my
Twitter
is
right
here.
If
you
want
to.
If
you
disagree
with
this
and
want
to
fight
me,
so
why?
Why
even
bring
Star
Wars
into
this?
Actually
because
the
first
time
I
gave
this
talk,
was
the
force
awakens
release
night
and
I?
A
Didn't
want
to
choose
between
dressing
up
in
a
costume
and
giving
a
talk
about
JavaScript,
my
two
favorite
things
so
and
I
started
working
BuzzFeed
since
I
went
here,
so
this
is
gonna.
Have
some
listicle
elements
like
three
reasons,
Star
Wars
helps
us
understand.
Web
development-
let's
go
through
them
together,
reminds
us
to
use
our
powers
for
good,
opens
up
a
vast
world
of
magic
and
adventure,
and
isn't
it
kind
of
crazy
that
we
do
this
instead
of
working
on
spaceships
web
development,
you
know
Star
Wars.
A
Gotta
have
your
priorities
in
order
right,
so
I
think
we're
not
gonna
have
any
audio
for
this,
but
I'm
pretty
sure
I
can
once
you
start
down
the
dark
path
forever.
Will
it
dominate
your
destiny
and
he
dies
I
mean,
but
who
knew
that
you
would
have
had
so
much
to
say
about
technical
debt,
really
all
right
so
for
everyone
here,
I
have
a
mean
question:
does
your
website
work
without
JavaScript?
A
So
this
is
the
public
shaming,
volunteer
hour
it
would
anyone
like
to
raise
their
hand
and
tell
me
the
URL
of
a
website
could
be
urs
could
be
somebody
else's
just
a
website
for
us
to
check
out
and
see
if
it
works
without
JavaScript?
Yes,
my
friend
dog
vacate
outcome.
Well,
that
sounds
great.
Those
aren't
like
interesting
things.
So,
first
of
all,
let's
turn
off
JavaScript.
Oh
my
god!
This
is
really
scary.
Look
we're
going
into
a
whole
new
world
here,
so
dog,
vk.com,
nice.
Oh.
A
B
A
Yeah
that
that
button
doesn't
work,
does
it
all
right?
Oh
no!
Oh
my
god.
Hey
look
at
this.
Everyone
I'd,
like
a
round
of
applause
for
the
gentleman
in
the
front,
okay,
anyone
anyone
else.
Anyone
else
want
to
do
a
website
you
know
could
be
yours
could
be
somebody
else's.
No,
no
okay,
I'm
gonna
do
one
of
my
favorite
ones,
then,
so
anyone
no
bustle,
probably
not
Oh.
Actually
they
improved
it.
They
don't
work
without
JavaScript.
Okay,
I
got
a
link
from
one
of
my
friends.
A
Recently
it
was
a
site
that
she
was
sent
to
now,
never
mind.
Okay,
anyone
one
more
one,
more
website,
anyone
from
the
crowd,
one
more
Mary
Sue,
the
Mary
Sue,
okay,
yeah
I,
like
the
Mary
Sue.
Oh
that's
a
good
one
too,
because
you're
a
Content
site
right,
okay,
looks
good
at
the
blog.
These
links
work,
yeah
I
can
still
get
to
the
links
okay.
So
why
should
any
of
this
matter
right?
These
are
sites.
You
know
we
have
JavaScript
enabled
on
them.
A
The
percentage
of
people
who
actively
have
JavaScript
turned
off
in
their
browsers
is
I've
seen
an
estimated
by
the
BBC's
tech
team
and
around
like
1%.
So
why
would
you?
Why
would
you
care
about
that?
Well,
I
started
thinking
about
this.
After
seeing
some
some
anger
from
some
friend
of
mine,
maybe
we
can
just
turn
down
the
JavaScript
and
hard
to
put
into
words
how
utterly
broken
JavaScript
first
web
development
is,
so
what
would
JavaScript
web
first
web
development
mean?
Well,
it's
probably
something
that
you
might
have
been
doing
around
like
2012.
A
A
I
should
have
done
some
more
there's
like
Google
Groups,
for
instance,
is
still
this
way
so
well
then,
with
JavaScript
first
web
development
be
I
would
describe
it
as
a
site
that
is
intent
that
only
works
as
intended
with
JavaScript
enabled
and
functioning
I
used
to
work
at
an
e-commerce
company
while
I
was
there.
I
was
doing
stuff
similar
to
that
first
site
we
saw
we're.
Filtering
was
sort
of
the
main
thing.
A
A
So
in
that
sense,
working
at
BuzzFeed
is
a
great
opportunity
for
me
to
focus
on
what
I
consider
to
be
the
essentials
of
web
development,
which
is
delivering
content
as
fast
as
possible
to
as
many
as
people
as
possible.
It
has
been
it's
felt
like
awakening
to
the
force
and
becoming
suddenly
super
powerful.
So
here's
a
question:
have
you
ever
seen
something
like
this
watch
that
scroll
bar
on
the
right
there?
Hopefully
you
guys
can
all
see
it.
So
this
is
scrollbar.
A
It
kind
of
looks
like
a
normal
scrollbar,
but
it
is
styled
very
slightly
differently
for
this.
Whoever
made
the
adidas
website
has
thrown
away
the
ability
to
scroll
with
the
spacebar.
They
have
thrown
away
the
ability
to
scroll
with
anything
that
isn't
touched.
Mouse
controls
doesn't
work
on
touch
devices
anymore
and,
although
I
haven't
verified
this
because
I
am
not
personally
a
user
who
needs
assistance
to
read
websites.
I
am
pretty
sure
that
this
is
completely
inaccessible.
There
is
no
way
to
interact
with
these
elements
without
a
mouse
and
the
ability
to
use
it.
A
So
here's
also
something
that
I've
started
seeing
on
website
since
I
want
to
say,
since
tumblr
did
away
with
their
old
reblog
interface
and
started
using
modal's,
then
Twitter
started
doing
it
too,
very
often
on
websites.
If
you
click
on
something,
it's
not
a
real
link,
you
just
have
functionality
that
pops
up
with
JavaScript
right
and
that's
fine
cuz
your
JavaScript
works.
You
wrote
it.
You
didn't
mess
up,
your
JavaScript
did
you
you
would
never
do
that.
Would
you
so?
A
Why
again,
is
this
bad,
well,
I'm,
going
to
show
you
another
example,
this
from
a
site
that
I
used
to
work
on
this
was
something
that
you
know
in
the
usual
way
of
product
managers
chasing
engagement.
They
want.
They
want
more,
more
clicks,
more
conversions,
so
they
come
up
with
a
cute
idea:
we're
gonna!
Let
people
create
new
short
short
lists
of
products
that
they
want
right.
A
So
this
was
where
that
functionality
lived.
Did
he
see
it?
That
was
it.
This
is
functionality
that
we
considered
to
be
important,
but
the
only
place
that
it
lived
was
on
a
page
that
was
not
its
own
and
the
only
way
to
access
that
functionality
was
by
showing
and
hiding
an
element
with
JavaScript.
So
well,
that's
fine.
Now,
right
again,
everything
is
working.
A
So
here's
another
beautiful
quote
from
what.
What
do
you
think
the
only
hope
is
for
a
user
getting
to
a
part
of
you
our
site?
Does
anyone
have
an
idea?
How
do
people
get
to
parts
of
your
site
links?
So
what
what
is
a
link
is
a
URL
right
or
a
way
of
accessing
a
URL?
If
functionality
on
your
site
does
not
have
its
own
dedicated
URL,
then
you
have
created
an
accessibility
nightmare,
not
just
for
your
users,
but
for
yourself.
A
The
only
way
to
access
that
functionality
is
to
spin
up
an
entire
instance
of
the
app
which
created
it
and
then
to
have
that
execute
error
free.
If
you
do
not
have
a
URL
by
which
you
can
access
this
functionality,
then
in
the
future,
as
requirements
change
as
perhaps
other
supplementary
parts
of
that
app
get.
You
know
closed
off,
you're
going
to
have
a
extremely
difficult
time,
literally
finding
that
again.
A
So
that
is
the
Sarlacc
pit
of
web
development
is
when
you
don't
have
any
URLs
uh.well,
so
we're
getting
at
least
modestly
technical
here,
but
there's
somebody
much
more
technical
than
I
could
ever
be.
There
are
robots
reading
your
website
right
now.
Some
of
those
robots
are
not
under
your
control.
They
belong
to
the
search
engines
or
other
people
who
might
be
trying
to
read
your
website.
Some
of
them,
though,
do
belong
to
you
when
you
have
an
integration
test.
A
Run
that
is
being
run
on
like
capybara
is
something
you
have
a
robot
that
basically
crawls
your
site
to
try
to
access
it.
If
that
is
very
difficult
right
now,
if
you
find
yourself
implementing
a
lot
of
like
Ajax
like
timeouts
you'll,
if
I
each
access
and
Ajax
requests
in
your
in
your
acceptance,
s,
that
probably
is
a
sign
that
your
site
is
not
very
accessible
to
the
robots.
A
They
don't
understand
human
behavior.
They
do
not
have
hands
like
us.
They
do
not
have
eyes
like
us.
They
are
like
robots,
are
both
flaky
and
easily
confused,
but
we
still
have
to
treasure
them
because
they
are
doing
work
that
we
don't
want
to
do
on
our
own
websites.
Have
you
really
scraped
one
of
your
own
websites?
It's
a
lot.
It
can
be
a
lot
easier.
So
how
do
we
actually
solve
these
problems?
A
A
Everyone
is
very
familiar
with
the
notion
of
server-side
JavaScript,
but
I
still
see
people
asking
how
they
can
actually
achieve
isomorphism,
especially
if
you
don't,
if
you're
not
coming
from
place
that
has
an
existing
node
stack,
maybe
you're
on
Python
you're
on
PHP
you're
on
Ruby,
you
have
no
prospects
of
being
able
to
do
a
total
day.
Tomato
ttle,
codebase
migration
in
any
reasonable
amount
of
time.
Well,
there
are
solutions.
Nonetheless,
the
the
most
important
thing
to
do
is
to
create
a
mapping
between
the
page
state
and
the
URL
a
mapping.
That
goes
both
ways.
A
If
you
have,
if
you
are
you,
if
the
URL
is
updated
constantly
in
response
to
changes
on
the
state
of
the
page,
then
you
will
be
able
to
respond
either
to
HTML
requests
with
brick,
HTML
requests
of
that
page
or
you
can
respond
to
xhr
requests
for
that
same
URL.
In
that
case,
what
you
can
do
is
conditionally
render
either
HTML
or
JSON,
depending
on
the
request
headers.
So
one
thing
that
can
look
like
is
a
little
bit
like
this.
A
This
is
a
very
small
code
sample
that
basically
splits
into
two
paths:
the
this
initial
state.
This
is
a
react,
a
application,
that's
being
discussed,
but
it's
my
understanding
that
server-side,
rendering
nice
and
morphism
are
well
ripped
out
for
ember
as
well,
at
least
so.
All
that
this
is
doing
is
that
if
it
is
an
xhr
request,
all
that
the
request
gets
back
is
the
initial
state
in
JSON
form.
A
If
it
is
not
Nick's
HR
request,
then
we
take
that
same
initial
state
within
the
page
data
and
we
send
them
send
down
the
wire,
the
full
HTML.
So
this
is
like
what
single
this
is
the
best
of
both
worlds.
Then
right,
so
we
get
the
fast
response
times
of
single
page
web
apps,
where
you
don't
have
to
do
a
full
reload.
A
Every
time
we
want
new
data
like
this
is
why
we
started
using
Ajax
for
everything
in
the
first
place
anyway
right,
but
you
also
get
sites
that
load
at
least
to
a
certain
minimum
standard
of
viability
on
first
page
load
on
like
in
response
to
HTML
requests,
so
we
tried
server-side,
rendering
and
couldn't
believe
the
speed
gains.
Obviously,
your
implementation
may
vary,
but
without
having
to
do
the
initial.
Without
so
you
have
two
options
right.
A
You
can
either
get
full
HTML
and
then
start
to
kick
off
more
rendering
and
stuff
later
for
optional
components,
or
you
can
get
skeleton
HTML
bunch
of
script.
Tags
start
asking
for
JSON
render
that
response
into
the
page.
That
is
the
second
option,
is
much
slower
in.
We
found
it
to
be
ooh.
I
can't
do
this
math
back.
What's
50
percent
faster,
but
in
slower
terms
a
live.
Talk
is
no
place
for
rithmetic.
A
So
here
is
something
else
that
this
is
one
of
my
favorite
websites
in
the
entire
world,
the
New
York
Times
website,
but
watch
this
very
bad
bad
thing
as
it
loads.
Oh,
my
god
that
late
loading
ad
with
a
that
pushes
down
the
content
as
it
goes
now,
this
video
is
actually
slowed
down,
but
one
of
the
things
that
I
find
most
irritating
personally
as
a
user
is
when
I
click
on
some
content
and
I
expect
it
to
be
there.
A
But
it
isn't
because
something
else
has
taken
its
place
faster
than
I
as
a
human
can
react
to
so
I
have
clicked
on
the
wrong
thing.
You
guys
ever
clicked
on
the
wrong
thing
on
the
internet,
ooh
what
a
bad
feeling
and
you
hate
those
nasty
web
developers
who
made
you
do
that
right,
like
yeah,
don't
be
that
web
developer.
You
know
who
else
is
really
fast.
Has
fast
fingers
han
Solo,
he
shot.
First,
let
your
users
be
as
fast
as
han
Solo
and
they
will
be
happy.
A
Here's
another
question:
do
you
know
when
you
have
a
JavaScript
error
now
this
question
may
be
a
little
bit
more
complicated
than
it
seems
yeah
you
have.
You
have
reporting
for
your
errors,
but
if
javascript
is
handling
the
reporting
of
your
JavaScript
errors,
well,
something
could
definitely
go
wrong
there
right.
So
you
have
to
be
very
responsible
about
wrapping
those
your
error,
handling
in
in
a
reporting
mechanism.
That's
going
to
continue
to
work
for
you,
server-side
stack.
Traces
are
a
lot
more
fun.
A
A
If
you
are
have
pages
that
cannot
be
rendered
at
all,
due
to
some
something
that
you've
done
wrong.
That
is
an
all-hands-on-deck
kind
of
alert
situation,
so
server-side
rendering
again
it's
so
good,
it's
so
cool.
But
what
should
we
render
on
the
server?
Do
we
render
the
whole
page
on
the
server?
Well,
certainly
not
if
that
page
has
any
customization
involved
in
it,
you're
not
gonna,
be
able
to
cache
it
right,
can't
cache
that
full
HTML.
If
there's
any
personal
personalization
in
it
whatsoever.
A
You
also
may
have
a
lot
of
trouble
with
a
caching
strategy
that
is
reliant
on
both
server-side
rendering
and
timely
content,
such
as
comments,
so
at
BuzzFeed,
which
obviously
is
a
company
that
has
a
lot
of
thoughts
about
the
timeliness
of
our
content.
But
this
is
broken
down
into.
Is
a
strategy
we're
different?
We
have
we
always
load
the
majority
of
a
page
first
or
whatever.
The
page
is
supposed
to
do
for
us.
It's
really
easy
to
know
what
a
page
is
supposed
to
do.
A
A
You
still
want
the
benefits
of
personalization
or
again
comments
because
they
they
are
updated
so
frequently
you
don't
want
to
have
such
an
absurd
time
to
live
on
the
page
itself,
so
six
surprising
tips
for
saving
yourself
from
JavaScript.
A
You
may
you
might
want
to
try
a
golden
path.
Integration
test
case
that
runs
without
JavaScript
enabled,
if
you
have
infinite
scrolling,
you
could
still
have
a
more
link.
This
is
actually
true
for
links
in
general.
Anything
like
pagination
links
forms
all
of
these
can
still
work
with
if
you're,
if
you're
thinking
about
the
HTML
first
instead
of
the
JavaScript
first,
if
you
have
a
modal,
it
should
have
a
URL.
If
you
have
forms
a
remember
that
you're
still
writing
HTML
forms,
even
if
you
are
handling
the
running
of
them
with
Ajax.
A
A
It
still
got
eight.
It
so
sent
valid
data
to
the
server
and
got
back
a
valid
response.
Never
reimplantation,
ality
that
browsers,
implement
better
I,
mean
I.
Don't
can't
see
anyone
having
a
web
strategy
that
actually
involves
like
just
sending
out
big
amounts
of
content
like
statically
generated
content
to
users.
A
You
only
have
one
job
as
a
web
developer,
which
is
to
render
comprehensible,
HTML
quickly,
I
think
console
it's
not
at
you.
Javascript
can
make
your
life
easier.
It
is
certainly
not
the
best
tool
for
every
job
that
you
are
faced
with,
and
you
know
if
you
disregard
all
of
this.
This
is
a
it's
a
really
dangerous
path
to
go
down.
You
are
going
to
create
accessibility
problems,
you're
going
to
create
maintainability
problems.
A
For
one
thing,
we
exist
in
a
world
where
JavaScript
is
so
much
the
default,
but
if
you're
really
only
hiring
for
for
JavaScript
you're
going
to
fruit,
like
client-side
JavaScript
you're,
going
to
cut
yourself
off
I
think
to
even
some
of
the
better
talent
that
can
be
found
out
there.
But
you
know
what
maybe
none
of
that
matters
to
you.
Maybe
I'm,
having
a
read
more
link
that
only
works
with
JavaScript
enabled
is
how
you
ensure
that
users
are
still
getting
tracked
by
your
analytics.
A
Maybe
if
they
don't
want
to
have
your
there,
your
analytics
on
their
page,
they
don't
get
to
read
your
content,
maybe
your
Google
Maps
and
it's
not
2009
anymore,
and
they
have
dropped
a
lake
non
JavaScript
friendly
alternative
for
for
that,
for
that
product
only
assist
deals
in
absolutes.
There
are
exceptions
to
every
rule,
including
everything
that
I've
said
here.
But
what
I
would
really
like
to
encourage
you
to
do
is
to
turn
JavaScript
off
on
your
site
anyway.
A
A
For
instance,
like
so
I've
been
running
this
talk
in
chrome,
but
if
I
do
it
in
Safari?
Does
anyone
notice
something
missing,
yeah,
the
stars
cuz?
How
did
I
do
those
stars?
I
made
10,000
tiny
white
divs
with
JavaScript.
A
Yep
yeah
well
I'm,
not
ashamed,
I'm,
not
ashamed!
So
mobile-first,
something
you
say
a
lot:
yep
yep,
yep
JavaScript
last
wait
where
you
lie
so
laughing
at
that.
Alright
mobile
first
JavaScript
last
come
argue
with
me
online.
Ask
me
any
questions.
Thank
you
very
much.