►
From YouTube: Elasticsearch and Lighthouse - Jozi.js March
Description
Using Elasticsearch as a data store
Ryan Kotzen (@eXigentCoder)
In the past you may have used Elasticsearch to store your log messages with the good intentions of being able to search through them and help you debug issues but have you ever considered using Elasticsearch as your primary datastore? You may have heard that Elasticsearch can greatly speed up your full text searches and auto-completion in your website, but have you managed to set it up yet?
Come join us as we explore the amazing product that is Elasticsearch and show you how this can be done, and all in JavaScript of course!
How to Lighthouse
Mike Geyser (@mikegeyser)
Performance is a feature. It is arguably the most important feature of modern web experiences, but at times it can be a dark art. Complex build tools, confusing profilers and an abundance of metrics make it seem like one has to be a true web wizard to understand it all. It shouldn’t be hard and luckily isn’t - provided you use the right tools. Built directly into Chrome, the Lighthouse audit reports drive away from the darkness and shine a spotlight on the opportunities available to you, making it easy to improve.
This talk will provide a detailed walkthrough of optimising performance using the Lighthouse audit report. By way of a challenging application, we will identify and implement performance optimisations. We will make small, measurable changes to improving our web application, taking one easy step at a time.
❓Q&A: https://www.sli.do with event code: 86592
📄Feedback form: https://bit.ly/jozijs
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/269597572/
A
Okay,
apparently
we're
live
hi.
Everyone
welcome
to
the
first
ever
Joe
zjs
online
I
hope
this
is
going
better
than
me
just
staring
at
my
screen,
and
this
is
actually
airing
somewhere,
but
first
I'm
going
to
start
off
with
something
that
not
many
people
know
not
even
some
of
the
organizers
of
Joe's
EJ's
this
month
is
our
3-year
birthday.
We
started
in
April,
2017
and.
A
A
A
A
A
A
This
applies
to
all
of
our
chats
and
things
that
you
see
that
we're
going
to
try
using
now
as
well
as
this
little
survey
we
had
at
the
end,
if
you
feel
you're
being
attacked,
we
have
a
group
or
a
council
of
wizards
who
you
can
contact
for
help
twitter
handles
are
all
day.
Any
of
these
people
that
you
can
see
on
here
will
be
able
to
help
you
with
any
concerns
you
may
have
and
tweet
us.
A
Let
us
know
how
this
is
going,
how
dressy
JS
online
will
work
so
we'll
still
have
our
two
speakers
with
30
minutes
each
because
the
livestream
is
about
20
seconds
delayed.
That's
quite
a
long
time,
questions
immediate
questions
can't
really
be
answered
because
we
don't
erupt
the
speaker
halfway
through
something
else,
they're
saying
so.
Please
use
the
live
stream
chat
to
post
questions,
or
rather
actually
use
slider
to
post
questions.
So
slider
there's
the
link
over
there.
A
All
of
these
links
that
you
can
see
here
also
available
in
the
description
of
the
livestream
underneath
and
you
can
use
the
links
to
ask
the
questions
there.
It
would
be
better
to
ask
the
questions
there,
so
they
don't
get
lost
in
the
live
stream
chat
and
you
can
also
upload
other
people's
questions
and
we'll
go
through
all
of
the
slider
questions
at
the
end
and
ask
the
speakers
to
answer
them.
A
For
you,
that's
the
event,
ID
eight
six,
five,
nine
two
is
they
pinched
ID
and
yeah,
and
then
at
the
end,
we're
going
to
have
a
feedback
phone,
because
we
want
to
know
how
this
is
going.
We
want
you
to.
Let
us
know
what
we're
doing
right,
what
we're
doing
wrong
and
all
of
those
nice
things,
because
this
is
a
community
event,
so
we
take
advice
from
our
community.
And
lastly,
if
you
want
to
try
this
online
speaking
thing,
please
submit
a
talk
again.
A
This
link
is
also
available
in
the
description
at
the
bottom
of
the
live
stream.
So
go
check
it
out.
If
you
don't
have
any
ideas
on
the
talk
contact
us
and
we
can
help,
you
come
up
with
one
and
yeah
so
I'm
going
to
hang
over
to
our
first
speaker,
which
is
Ryan
and
he's
going
to
be
telling
us
about
elastic
as
a
data
store.
So
I'm
going
to
stop,
sharing
and
Ryan
is
going
to
start
sharing.
B
All
right
welcome
everybody.
It's
a
bit
weird
talking
into
a
screen
where
you
can't
actually
see
feedback
from
your
audience,
but
we're
going
to
give
this
a
go
and
see
how
we
can
move
through
with
this.
So
for
those
of
you
who
don't
know
me,
I'm,
like
Mike
I'm,
a
bit
of
a
JavaScript
net
and
yeah
I
tried
to
do
everything
in
JavaScript.
B
Was
we
needed
to
do
a
lot
of
full-text
searching
love,
autocomplete
functionality,
searching
through
big
blocks
of
paragraphs
of
text
to
try
and
find
matches
in
it
so
immediately,
since
it
was
a
proof-of-concept
system,
the
the
idea
of
using
elastic
search
as
the
primary
data
store
seemed
like
a
fun
adventure
for
those
of
you
who
might
not
be
familiar
generally.
What
happens
with
elastic
search?
Is
people
user
to
supplement
their
existing
data
stores?
So
you
might
take
the
logs
from
your
application
and
ship
them
into
elasticsearch.
B
So
for
those
of
you
who've
been
around
for
a
while
might
remember
something
called
Lee
scene
which
is
up
on
my
screen
at
the
moment,
still
around
still
kicking
made
by
the
Apache
foundation
when
he's
owned
by
the
Apache
foundation,
and
it's
a
way
it
is
the
main
engine
that
powers
elastic,
search
where
elastic
search
adds
a
whole
bunch.
Nice
wrappers
around
this,
you
can
usually
seen
directly
if
you
want
to
just
plug
it
into.
Let's
say
an
existing
sequel
instance
and
add
such
searching
on
top
of
that.
B
So
elastic
search
is
great
because
it
comes
with
a
lot
of
nice
ecosystem
components,
so
you
might
have
heard
of
the
elk
stack
now.
It's
called
the
elastic
stack
which
includes
elastic
search,
which
is
the
data
store
underneath
then
there's
logs
log
stash,
which
allows
us
to
take
our
logs
and
actually
pump
them
in
there's
the
beats
framework
which,
basically,
every
on
a
heartbeat,
will
send
information
to
the
server.
So
this
is
very
useful
if
you
want
to
check
metrics
around,
like
your
CPU
usage,
your
memory
usage
disk
space.
B
The
alerting
that
you
can
set
up
on
top
of
Cabana,
which
basically
will
tell
you
if
you're
running
out
of
this
space
or
send
you
emails
on
certain
conditions,
I
believe
that's
a
paid
for
service,
but
for
the
most
part
you
can
get
all
of
it
for
pretty
much
nothing
so
I
currently
have
it
all
running
in
a
darker
compose
file.
All
this
code
will
be
since
it's
all
open
source.
It's
on
github
feel
free
to
ask
questions,
leave
an
issue
or
use
it
in
your
in
your
up
to
you.
B
Basically
I
wouldn't
run
it
as
a
single
docket
instance
in
production,
though,
so
you
probably
want
to
set
up
more
of
a
clustered
environment,
even
if
you
are
going
to
use
darker
or
kubernetes,
because,
as
we
all
know,
that
solves
all
the
problems,
so
what
I've
got
running
in
this
compose
file
is
one
instance
of
elasticsearch,
and
this
was
pretty
cool.
Somebody
showed
me
this
the
other
day.
B
If
you
have
an
env
file,
you
can
actually
read
your
environment
variables
directly
into
your
compose
compose
file,
so
you
can
inject
those
in
there
very
useful
when
you're
diving
on
local
I
set
up
a
bunch
of
cores
options
and
stuff,
so
I
can
just
test
and
then
to
show
you
some
of
the
tooling
around
elasticsearch.
What
I've
got
is
a
few
of
the
UI's
on
top.
B
So
those
of
us
who
are
let's
say
from
the
Microsoft
sequel
background,
would
be
used
to
using
sequel
server
management
studio
if
you're
among
to
a
person
like
me,
you
used
to
row
by
you
know
at
the
end
of
the
day,
we,
if
we're
going
to
use
this
as
our
primary
data
store.
We
want
some
sort
of
visualizers,
so
we
can
see
what's
going
on
while
we're
busy
writing
our
code.
B
So
I've
got
a
few
of
these
that
we
can
use,
so
we've
got
elasticsearch,
HQ,
deja
vu
and,
of
course,
Cabana
all
right,
so
elasticsearch
itself
runs
as
a
bunch
of
rest,
ish
api's,
which
is
quite
interesting.
So
it's
not
like
you
know,
in
sequel,
where
you've
got
name
pipe
connections
or
anything
like
that,
you're,
basically
able
to
talk
to
the
database
using
basic
off
than
the
URL
if
you've
turned
it
on
and
you
can
hit
these
rest
api's.
B
So
this
is
what
it
looks
like
when
your
class
is
actually
up
and
running
and
you
hit
it
with
a
web
browser
now
like
with
any
data
store.
If
you
are
going,
you
do
not
want
to
expose
it
to
the
Internet.
If
you
can
help
it,
this
public
interface
should
not
be
public,
it
should
be.
You
know
in
your
own
sealed
data
center,
and
only
your
actual
API
should
be
able
to
talk
to
it.
B
B
So
you
can
play
around
see
how
it
goes
so,
one
of
the
things,
one
of
the
reasons
why
I
say
its
rest
dish
is
because
you
know
it
doesn't
follow
and
necessarily
the
traditional
rest
guidelines
that
you
would
use,
but
you
bet
you
interact
with
it.
Booth
gets
post,
puts
and
deletes
and
using
the
path
parameters
and
a
bunch
of
query
strings.
B
So
the
first
thing
we
can,
if
we
hit
the
same
endpoint
I
hit
in
the
browser
we
get
back
our
Jason,
and
this
is
basically
just
telling
us
some
information
about
the
cluster
itself
and
and
what
version
and
that
that's
running
another.
The
reason
you
don't
want
to
expose
this
to
the
public.
You
know
you
know
on
the
leak
information
about
your
underlying
infrastructure.
B
One
thing
we
can
do
you
like
the
normal
cat
command
in
terminal
is
we
can
find
what
indexes
actually
exist
inside
our
database
or
data
store.
So
an
index
is
kind
of
analogous
to
a
table
or
a
coach
and
in
earlier
versions
of
elastic
search
you
could
create
and
you
could
think
of
an
index
as
an
application
and
have
multiple
of
them
running
on
the
same
cluster,
and
you
could
then
do
custom
types
inside
each
of
those
indexes
and
those
types
would
be
your
collections.
B
That
approach
seems
to
be
heading
towards
the
deprecated
side
of
things,
and
it
seems
now
that
you
would
instead
create
a
cluster
per
application
and
use
the
indexes
actually
as
your
collection.
So
you
can
see.
I've
got
a
table
of
results
over
here.
I've
got
movies
manufacturers,
then
Cavanaugh's
created
its
own
index
in
here
for
managing
the
the
stuff
it
needs
and
there's
a
another
bunch
of
like
elastic
searches,
an
internal
one
and
I've
created
one
for
meetings
and
people.
B
I'm
gonna
show
you
how
we
can
just
use
these
rest
api's
to
directly
interact
with
the
database,
so
I
can
delete
the
index.
So
if
we
go
back
in
say,
get
a
list
of
indexes.
You'll
see,
movies
is
no
longer
there
and
so
yeah.
There
was
no
confirmation
dialog
on
that,
because
it's
just
a
rest
request,
so
you
want
to
be
careful.
Running
arbitrary
rest
commands
against
your
production
datastore.
B
So
the
the
following
movies
and
sorry
rest
calls
are
adapted
from
a
talk
which
I'll
send
a
link
are
to
which
was
on
udemy,
and
so
the
the
author
put
a
really
good
course.
Together
that
I
highly
recommend
it
seems
to
be
targeting
a
bit
more
of
an
older
version,
but
hopefully
he'll
update
it
soon.
So,
in
order
for
me
to
create
the
index,
all
I
need
to
do
is
send
an
empty
body
request
to
the
database
or
datastore
forward.
Slash
the
name
of
the
index.
I
want
to
create
and
we
will
get
back.
B
The
fact
that
it
was
a
command
was
acknowledged
and
because
it's
in
a
clustered
environment,
you
can
do
different
write
concerns.
So
you
can
say
when
executing
this
command,
I
want
to
make
sure
that
it
executes
on
at
least
50%
of
the
shards
or
all
of
the
shards.
So
you
can
set
all
of
those
on
the
way
in
on
your
request,
then
what
elasticsearch
is
is,
is
it
has
automatic
schema
type
of
things
that
happen
in
the
background,
but
you
also
have
the
ability
to
control
how
that
schema
looks.
B
So,
if,
for
those
of
you
who
are
familiar
with
JSON
schema
it's
fairly
similar
to
that
and
here
what
I
can
do
is
I
can
say
for
movies
I'd
like
to
set
up
the
mapping
or
the
schema
important
to
remember
is
these:
are
the
the
properties
I'm
explicitly
defining
any
properties
I
don't
put
on
here?
They
could
still
be
stored
in
the
data
store.
It's
just
not
going
to
index
them
in
the
way
that
you
define
it
might
choose
to
index
them
automatically.
B
I
believe
there
is
a
way
that
you
can
say
only
allow
these
properties,
but
in
general,
you're
gonna
want
to
enforce
your
schema
using
JSON
schema
on
the
API
side
of
the
world,
so
I'm
gonna
just
send
this
requester
and
acknowledge
true.
So
it
tells
me
yep
cool
I've,
set
up
that
mapping.
I
can
confirm
it
by
doing
a
get
to
the
same
end
point,
and
that
just
gives
me
back
the
fact
that
you
know
we've
got
genre
the
ID
of
the
the
movie,
the
title
and
the
year.
B
So
the
movie
I'm
going
to
create,
has
got
that
ID
doesn't
have
to
be
a
number
I've
said
it
as
integer,
but
you
could
have
it
as
a
good
or
a
string
and
I'm
gonna
post
through
multiple
genres
for
this
particular
movie,
and
that
gives
me
back
a
result
which
has
more
properties
on
it
than
that
posted
through
which
also,
when
you
start
off.
The
first
is
a
little
bit
weird.
B
The
interesting
thing
it'll
give
you
back
which
index
it
was
in.
We
know
this
because
we
posted
it
in
same
with
the
type.
So
this
refers
back
to
the
type
I
was
talking
about
earlier,
how
in
previous
versions
and
if
you
set
certain
options
in
this
version,
you
can
store
multiple
types
inside
the
same
collection
and
we've
got
versions
of
the
docs.
When
I
first
started
out,
I
thought
that
oh
wow,
this
is
really
cool.
B
It's
going
to
soul,
save
multiple
versions
of
my
dark
and
I
can
refer
back
to
earlier
versions,
but
that's
not
actually
how
that
works.
This
is
more
for
concurrency.
So
I'll
show
you
in
a
little
bit
how
that
works,
where
you
can
say,
go
and
run
this
replace
on
this
update,
but
only
where
the
version
number
is
actually
set
to
that.
We've
got
the
result
and
the
number
of
shards
that
have
worked
out
on
and
a
sequence
number
and
a
primary
term,
which
also
it
uses
internally,
because
version
is
now
deprecated
for
concurrency
control.
B
You
need
to
use
a
combination
of
these
two
factors
so
yeah.
It
seems
like
a
lot
of
active
dev
happening
elasticsearch
once
we've
created
it,
we
can
then
do
a
get
and
we
still
have
the
extra
properties
that
it's
storing
internally
on
there.
So
you
might
want
to
strip
those
off
in
your
API
or,
if
you're,
going
to
allow
for
optimistic
rights,
or
you
can
actually
do
that
using
the
properties
that
are
provided.
B
We
can
also
do
replaces
so
when
I
did
a
get
you'll
see
I
get
back
the
fact
that
the
sequence
number
is
0
and
the
primary
term
is
1.
So
if
I
pass
in
sequence
number
as
4,
if
sequence
number
and
if
primary
term
equals
2
which
don't
match
I,
should
get
back
an
area
telling
me
I've
got
a
version
conflict
which
is
quite
a
nice
because
then
you
get
your
optimistic
concurrency
but
built
in.
B
So
let's
set
that
I
think
it
was
0,
&,
1
cool,
so
now
I've
replaced
it
with
this
body,
which
says
interstellar
potato.
If
we
go
and
get
the
movie
again,
we
now
have
an
updated
title,
so
we
can
do
creates.
We
can
do
retrieves,
we
can
do
updates
and
we
obviously
want
to
be
able
to
do
deletes.
So
we
can
just
simply
do
that
if
I
go
back
to
the
get
movie-
and
it's
done
interesting
thing-
it
does
give
us
back
a
404.
Not
a
200
with
an
error
which
is
great.
B
You
know
the
good
stuff
that
you
want
now.
Let's
not
save
those
I,
don't
know
what
I
changed.
The
other
interesting
thing
is:
there's
a
bulk
API
that
you
can
post
to,
which
is
very
useful
if
you're
going
to
send
through
a
bunch
of
documents.
At
the
same
time,
the
format
is
weird,
though
so
you've
got
to
send
through
with
the
header.
You
know,
application
JSON.
So
we've
said
it
is
more
Jason.
But
if
you
look
host
man
is
complaining
because
there
is
no
commas
between
these
and
it's
not
nested
in
a
whole
whole
object.
B
What
it
does
is
it
uses
the
newline
characters
in
combination
with
the
JSON
object,
the
first
and
in
each
of
these
is
a
pair
so
in
the
index
movies,
with
ID
that
create
that
the
second
row
and
you'll
see
that
it
does
those
for
each
of
the
the
pairs
just
ignore
the
whites.
The
word
wrapping
cool
so,
if
I
send
those
through
I
get
a
result,
the
response
backs,
which
tells
me
how
long
it
took
if
there
were
any
errors
and
an
array
of
the
items
that
have
actually
created
one
of
the
most
important
things.
B
If
we're
going
to
use
this
as
our
primary
data
store,
we
need
to
do
some
basic
paging,
so
the
this
happens
with
a
get
request,
but
the
paging
data
and
the
sorting
data
is
actually
in
the
body
not
in
the
query
string
and
that's
because
you
can
do
all
sorts
of
advanced
queries
which
just
wouldn't
be
feasible
in
the
query
string.
So
you
use
from
in
size
to
get
your
Skip
in
your
take
and
then
we
we
can
pass
in
an
array
of
sort
options,
and
this
will
allow
us
to
sort
by
your
ascending.
B
B
So
now
we
got
paging
and
sorting
one
of
the
things
that
we
want
to
do
is
we
want
to
use
this
great
engine
to
do
our
searching,
so
what
we
can
do
is
we
can
do
exact
matches
so
find
us
all
of
the
the
items
in
our
database
where
the
title
has
the
word
star
in
it,
and
we
do
that
and
we
get
back
to
results.
Sorry,
the
fact
that
it
took
two
units
of
time
what
shards
have
hit
and
then
we've
got
some
information
about
our
hits.
B
Another
interesting
thing
we
can
do
is
we
can
query
the
array
so
we've
got,
we
had
a
shun
row
array.
We
can
simply
find
all
the
items
it
doesn't
mean.
We
need
to
treat
it
any
different
but
finance
the
genres
that
include
sci-fi.
So
we
can
do
that
and
we've
got
interstellar.
We've
got
Star
Wars
again
Star
Trek
and
that's
it
cool.
B
The
very
cool
thing
that
you
might
have
seen
is
you
know
in
a
website.
You
might
want
to
search
through
a
bunch
of
documents
for
something
and
on
your
webpage
highlight
those
results
in
the
actual
data.
We
can
do
that
by
specifying
highlight
on
the
actual
query
that
we
send
in
which
is
pretty
awesome.
B
We
get
this
out
of
the
box
for
free,
so
if
I
search
for
star
and
I
ask
for
it
to
bring
me
back
the
highlights
it
not
only
brings
me
back
the
source,
but
also
the
highlight,
and
by
default
it
will
put
the
e/m
tags
in
there.
You
can
actually
customize
that,
if
you're
doing,
let's
say
XML
instead
of
HTTP
HTTP
HTML,
you
could
do
Jason
formatting
in
there
that
sort
of
thing
yeah.
So
that's
pretty
much
it
for
using
the
REST
API
I'm
doing
15
minutes
cool
all
right.
B
So
it's
all
great
and
well
being
able
to
query
our
data
store
using
REST,
API
and
postman,
but
in
production
we're
probably
going
to
want
to
use
some
sort
of
server
and
because
it's
me
we're
going
to
be
using
a
node
jsapi.
So
I've
got
an
example
here
of
how
we
can
actually
do
that
so
I've
put
some
fairly
straightforward
boilerplate
in
here,
there's
no
authentication
or
anything
like
that.
B
What
I've
got
is
this
app
is
for
helping
us
to
calculate
how
expensive
meetings
actually
are.
For
those
of
you
who
have
been
able
to
work
from
home
you'll
probably
have
noticed
a
massive
spike
in
the
number
of
virtual
meetings
that
you
sit.
You're
in
it's
almost
like
people
want
you
to
be
on
Zune
Skype
for
business
teams
calls
whatever
it
is
24/7
if
you're
not
collaborating
it's
not
real
work,
so
we've
gone
a
bit
too
much
on
the
other
side.
So
we
need
to
illustrate
this
to
people.
B
So
we've
got
people
over
here
and
I've
made
a
generic
elasticsearch
service
which
we
can
reuse.
We
use
the
standard,
elasticsearch
NPM
package
that
exists
I
just
pass
it
in
some
credentials.
The
changed
me
password
I've
got
a
function
over
here
which
will
give
me
the
client
which
will
basically
proxy
my
rest
requests.
B
I
mean
you
could
always
use
X,
EOS
or
fetch
or
whatever,
to
do
them
yourself,
but
the
client
comes
as
with
some
decent
typescript
definitions
built-in,
so
you
get
some
decent
and
tele
sense,
while
actually
working
with
it,
and
then
I've
got
my
generic
service
over
here
where
the
typescript
is
complaining,
but
it
works,
which
is
another
reason
why
I
don't
really
like
tax-rate
typescript.
So
we
can
create
our
service
and
that
will
give
us
back
an
object
at
the
bottom
with
all
these
methods
on
so
I've
kind
of
made
like
a
generic
version.
B
So
it's
got
a
function
to
ensure
that
I've
deleted
an
index,
because
what
I'm
doing
is
every
time
I
boot
up
my
API,
wipe
out
the
index
and
recreate
my
static
data
and
then
I've
got
to
create
replace
refresh,
which
will
actually
go
and
rebuild
the
indexes
because
if
you
just
add
something
into
a
collection,
but
you
don't
refresh
the
index,
the
search
is
not
gonna
have
been
optimized,
so
you
might
not
actually
get
that
result
back.
So
your
going
to
do
a
bunch
of
bulk
operations,
it
does
add
an
extra
layer
of
complexity.
B
Then
what
I've
done
is
I've
added
an
autocomplete,
because
I
find
that
very
useful,
a
get
method,
a
search
method,
remove
the
client
itself
and
some
mapping
logic
cool.
So
when
the
app
boots
up
it
will
go
and
it
will
create
some
static
data.
For
me
now,
I
just
wanted
to
show
you
something
very
cool
which
is
fake,
a
J
s,
so
I
needed
to
create
a
whole
bunch
of
fake
data
and
I
didn't
feel
like
manually
typing
in
it.
So
this
library
is
really
really
cool.
I
think
I
still
have
it
open
yeah.
B
So
you
can
generate
all
sorts
of
fake
data
in
these
categories.
So,
for
example,
you
can
generate
names
and
data
births.
You
know
because
it's
always
better
to
actually
when
you're
playing
around
with
the
system
have
data
that
looks
similar
to
what
production
data
would
actually
be.
But
the
nice
thing
about
this
is
there's
no
risk
of
actually
violating
any
gdpr
or
a
pop.
Both
I
suppose
that
there's
a
one-in-a-million
chance
of
actually
generating
a
real
person
where
all
the
fields
match
up.
But
you
know
it
is.
B
All
the
yeah
are,
are
the
meetings
actually
fake
doesn't
doesn't
matter
so
what
I
do
is
I've
got
a
basic
for
loop
with
a
min
of
100
and
a
max
of
500
and
it'll
call
generate
fake
person,
which
basically
does
all
of
this
stuff,
so
I
create
a
property
called
first
name
which
uses
first
faker,
not
name
dot.
First,
take
it
up
named
Atlas
I
create
some
geo
locations
for
them.
I
create
a
salary
which
I
used.
B
B
In
minutes,
then
I
pick
a
random
number
of
people
between
1
and
8
to
add
the
meeting
then
I
take
the
people
and
their
salary
and
I
use
a
reduce
function
to
calculate
what
that
person
actually
cost
and
keep
a
track
of
the
running
total
of
the
meeting.
Then
I
calculate
using
the
very
set
Zarah
exchange
rate
that
I
saw
just
before
this
and
then
I
set
the
attendees
and
I
actually
save
them
into
our
data
store.
So
let's
go
back
to
postman
and
see
what
that
looks
like
cool.
B
B
Added
support
for
skip,
take
and
then
further,
like
I
can
pass
in
exact
matches
by
the
query,
string
and
you'll
see
we
get
back
the
top
ten
results
for
people,
and
we
know
there's
between
what
was
at
fifty
and
a
hundred
I
can
then
take
somebody
like
Jamison
over
there
and
do
a
search
on
that
and
I
can
find
where
there.
This
is
an
exact
math
search.
So
it's
not
an
autocomplete,
so
just
be
aware
of
that,
but
it
is
very
useful
to
do
a
lot
of
the
time.
I
can
also
use
the
autocomplete
functionality.
B
B
B
But
if
this
autocomplete
works,
we
will
see
you
just
cut
out
the
query
string
that
we
need
the
query
string.
Let's
just
actually
get
some
meetings,
so
we've
got
a
meeting
here
with
impactful
engineer
functionalities.
So
impactful
is
a
word
that
I
saw.
It
comes
up
pretty
often
and
I've
actually
now
rehydrated
my
people
on
the
actual
query.
So
we
can
see
this.
This
meeting,
which
lost
at
18
minutes,
will
cost
$60
roughly
or
a
thousand
rent
for
a
short
meeting.
B
We
can
also
set
the
fuzz
factor
which
basically,
the
fuzziness
factor,
which
will
use
the
levenshtein
distance
algorithm
to
basically
allow
for
changes
in
letters
or
substitutions
or
deletions
of
letters.
So
if
we
spell
if
we
set
fuzz
to
zero-
and
we
spell
impactful
with
an
eye
instead,
we
should
get
nothing.
If
we
set
fuzz
to
one
error,
we
should
get
our
impactful
meeting,
so
that's
cool
because
you
can
actually
set
that
by
the
UI.
B
If
you
have
time
series
data,
this
is
very
useful
for
logs,
then
you
can
actually
choose
a
time
field
on
there
and
it
will
index
it
by
by
that
so
I'm
gonna,
say
I,
don't
want
to
index
by
time,
and
this
is
this
dashboard
is
kind
of
way.
You
can
actually
see
a
lot
of
things
about
your
elasticsearch
cluster.
One
of
the
most
powerful
things
you
can
do
is
create
visualizations.
You
can
actually
create
dashboards.
That
then
use
the
visualizations
you've
created
and
you
can
I
frame
them
into
your
existing
apps.
B
Obviously
you're
going
to
want
to
make
sure
that
you
do
set
up
some
mats
and
security
on
the
gateway,
so
that
you
don't
expose
your
whole
cluster
and
just
the
kubernetes
sorry
give
an
instance.
So
we
have
people
with
latitudes
and
longitudes
that
were
randomly
generated,
so
this
should
be
fairly
interesting.
So
what
we
can
do
is
over
here
zooms
in
the
way
one
sec.
So
we've
got
a
world
map.
We
can
add
a
layer
using
our
documents
that
we've
stored
on
the
index.
B
B
So
this
is
how
you
can
very
easily
do
a
bunch
of
maps.
What
we
can
also
do.
That's
leave.
The
page
can
go
back
to
our
indexes.
Nice
loading
bar,
let's
add
an
index
for
our
meetings
themselves.
Let's
create
a
new
index
patent
on
meeting
you'll,
see
it's
a
really
good
expression,
so
don't
have
to
be
too
accurate,
create
that
we
can
go
again
to
our
visualization,
because
visualization
is
always
very
cool,
create
a
new
one.
B
Let's
do
a
bar
chart
this
time
using
meetings,
so
the
y-axis
is
currently
set
to
the
count,
let's
bucket
it
along
the
x-axis,
we'll
use
a
histogram
on
the
african
rand
value
of
the
cost
and
let's
split
it
up
into
buckets
of
a
thousand
rand.
You
can
hit
the
little
play
button
over
there
to
see
how
how
it
looks
so
once
again
just
move
away.
B
So,
if
I
look
here
on
the
x-axis,
we
can
see
that
there
are
three
meetings
that
cost
between
zero
and
a
thousand
rand,
and
if
we
look
at
our
most
expensive
meeting
cost
that's
8,000
Rand.
So
if
you
think
about
how
many
meetings
are
happening
in
parallel
in
the
average
office
or
at
the
moment
on
zoom
Skype,
all
of
those
things
and
we
we
ignore
the
electricity
cost,
you
know
there
because
people
always
want
to
talk
about
crypto
and
how
much
that
cost
electricity
wise.
B
B
Dejavu,
so
deja
vu
is
kind
of
like
the
closest
thing
that
I've
found
to
the
sequel
management
studio.
Here
we've
got
the
people,
collection
and
I
can
actually
drill
down
and
I
can
edit
data
and
there's
a
date
picker
and
there's
also
a
nice
bulk
import
over
here.
So
you
can
use
CSVs
and
that
sort
of
thing
all
right,
Jerry,
I,
guess
I
should
stop
sharing
my
screen
and
we
can
answer
some
questions
or
should
I
keep
sharing
thumbs
up
or
down
sure.
A
You
can
leave
your
screen
shade
if
you
want
to
because
I
don't
know
if
you
might
need
it
for
answering
questions,
but
let
me
start
with
the
questions.
Okay,
as
I
said
earlier,
for
those
of
you
who
may
have
joined
the
bit
later
and
missed
it,
the
live
stream
is
a
little
bit
delayed.
So
please
post
your
questions
on
slider
and
we
will
try
to
answer
them.
If
we
miss
any
of
them
for
Ryan
now
we
will
answer
them
at
the
end
yeah.
So.
A
B
You
it's
not
all
my
work.
I
will
properly
attribute
the
lady
on
Twitter,
who
basically
put
together
a
Twitter
stream
of
how
to
set
it
up,
which
was
about
an
hour
long
when
all
I
really
wanted
was
a
file
that
I
could
just
copy,
but
I
said
third
and
it
turned
out
to
be
quite
an
enjoyable
talk.
I
will
also
set
up
links
for
that.
So
it's
currently
it's
sinful
wave.
B
That's
a
CEO
VM,
it's
synth
wave
times
Flora
machine,
but
I've
added
a
bunch
of
customizations
in
the
stylesheet.
So
if
I
go
to
settings-
and
we
view
the
JSON,
if
I
can
see
the
button
when
zooms
on
the
way
so
formatting
syncing
navigation,
look
and
feel
so
I
customized
the
stylesheet
a
bit
so
I
can
I'll
put
all
of
that
in
a
get
up.
Just
for
you
and
said
to
that.
B
Questions
so
you'd
think,
like
you
know,
you've
got
to
hop
from
your
your
web
server
or
you
wet
your
browser
to
your
API
server,
because
you,
you
might
actually
you're,
probably
doing
some
sort
of
REST
API
on
your
site.
Then
the
hop
from
your
API
server
to
your
datastore-
and
you
know
your
gut
feel-
would
be
like
hey
well.
This
is
actually
gonna
take
quite
a
while,
but
it
it's
actually
very
well
optimized
for
this.
What
I've
found
is
as
long
as
it's
in
the
same
data
center.
It
works
really
really
fast.
B
Even
with
big
volumes
of
data
I
mean,
if
you
think
about
it,
you're,
probably
not
going
to
pull
like
a
hundred
thousand
records
back
to
your
front
end.
If
you're
going
to
pull
data
back
to
your
front
end
you're,
probably
trying
to
do
some
sort
of
graph,
in
which
case
you
could
use
Kabana
or
you
might
want
to
actually
aggregate
it
on
your
API
itself
before
sending
it
back
to
your
browser.
But
as
long
as
you
do,
paging
in
that
I
found
with
even
big
numbers
of
data,
it's
it's
great.
A
A
B
So
that
is
in
fact,
yes,
it's
part
of
elastic
such
I
thought
it
was
low
for
a
second.
So
if
you
look
for
elastic
search
mapping,
it
actually
documents
all
of
the
different
parameter
types
that
you
can
actually
set
up
on
a
mapping.
So
we've
got
the
data
types
text
in
the
key
word.
So
text
is
if
it's
a
long
paragraph
of
text
keyword
is
if
it's
more
of
a
short
thing
like
a
genre,
we've
got
dates
and
then
the
number
data
types
IP
addresses
geo
locations
as
well
as
shape.
B
B
A
C
C
So
hi
I'm
here
to
talk
to
everyone
about
how
to
light
us.
So
for
those
of
you
that
don't
know
me,
I'm
Mike
and
the
Google
developer,
expert
and
web
technologies
and
I've
been
one
for
a
few
years
now.
I'm,
not
sure
why
they
enjoy
keeping
me
around
I
think
it's
my
propensity
to
apologize
for
things
particularly
JavaScript
weirdnesses,
but
I
mean
it's
relatively
open-ended.
C
So
if
you
need
to
blame
anyone
for
anything,
I'm
prepared
to
take
it
on
I
am
also
a
core
contributor
of
the
HTTP
archives
web
Almanac,
which
is
an
incredible
resource
talking
about
the
state
of
the
web
and
over
the
course
of
the
year.
Some
really
really
smart
people
have
written
some
very
insightful
stuff
about
all
of
important
trends
on
the
web.
I
am
NOT
one
of
those
smart
people.
I
am
the
guide
that
looks
after
the
plumbing,
so
yeah.
That's
me
and
oops.
C
You
may
also
know
me
from
here
from
Jersey
jeaious,
where
I'm
a
Corgan
Isaac,
and
we
are
we
missile
our
physical
venue
and
you
miss
seeing
all
of
you
in
in
mid-space
and
we're
really
trying
to
make
this
all
work,
and
thank
you
for
being
on
this
journey
with
us.
So
as
Jerry
alluded
to
we're
here,
to
talk
about
performance
right
and
the
thing
about
performance
is
as
much
as
it
has
such
a
massive
impact
on
how
we,
our
software
operates
and
how
it
gets
used
and
how
it
gets
perceived.
C
It
often
doesn't
get
prioritized
very
much.
It's
very
difficult
to
talk
about
with
business
and
so
to
start
off
with
I'm
gonna
go
through
a
very
brief
and
a
couple
points
on
trying
to
convince
people
we'll
give
people
arguments
about
why
you
should
care
about
performance,
and
so
perhaps
the
first
reason
why
you
should
care
about
performance
is
for
competitive
advantage
in
business
right.
C
There's
been
research
done
talking
about
the
idea
of
just
notable
difference
of
20%
in
terms
of
your
if
you're
20%,
faster
than
your
competitor
people,
that's
significant
enough
that
people
recognize
it
and
it
becomes
a
thing
that
sticks
in
their
mind.
Conversely,
if
you're
20%
slower
than
your
nearest
competitor,
they
also
remember
that.
So
maybe
you
can
use
that
to
convince
people
that
they
should
care
about
performance
of
web
applications
because
we
get
a
benefit
from
it.
C
Maybe
it's
because
of
search
engine,
optimization
or
any
kind
of
Google
page
ranking
where
first,
the
first
priority
is
obviously
content.
But
the
second
thing
that
gets
looked
at
in
terms
of
ranking
pages
is
speed
and
speed
and
mobile,
especially,
and
if
you
care
about
any
kind
of
search
engine
optimization,
maybe
don't
hire
the
expensive
snake-oil
peddlers
and
just
make
your
site
faster
and
or
maybe
you
are
somebody
who's
developing
for
our
context.
C
Right,
we
don't
have
the
most
amazing
internet
ubiquitously
and
we
are
an
emerging
market
and
there's
a
lot
of
compelling
research
that
indicates
that
speed
is
a
key
differentiator
for
building
for
any
kind
of
developing
ecosystems.
Now
maybe
I
can
also
feel
to
something
more
bass
in
us
as
programmers
now
I'm
going
to
talk
about
Larry
walls,
three
great
virtues
of
a
programmer
and
laziness,
which
is
wanting
to
limit
and
duplicate
work
or
wasted
effort
in
patience
when
a
computer
is
being
slow
and
you
have
to
certain
wait.
C
But
the
third
virtue
of
a
programmer
I
think
is
the
most
relevant
that
one
being
hubris,
because
maybe
you
just
don't
want
people
to
say
bad
things
about
your
website,
because
it's
slow
right,
I,
don't
know
whatever.
Let's
roll
with
it
now
to
get
started
with
this
journey,
I'm
going
to
talk
to
you
about
a
lighthouse
which
I
feel
is
a
very,
very
important
central
point.
That
brings
a
whole
bunch
of
performance
stuff
together.
Okay,
so
what
is
lighthouse
exactly?
C
Well,
it's
a
whole
bunch
of
best
practice
guidance
that
has
been
rolled
up
into
a
very
simple,
easily
actionable
set
of
audit
responses.
It
sees
a
thing
and
it
tells
you
how
to
fix
that
thing
well
as
close
as
possible,
and
it
then
takes
those
responses
and
it
generates
heuristics
for
you
in
terms
of
simple
aggregated
scores.
C
Now
those
scores
are
really
easy
to
understand
and
really
easy
to
see
or
make
maybe
less
easy
to
understand
and
far
easy
to
see,
and
it
becomes
something
that's
very
easy
to
share
with
business
importantly
light
us
is
not
just
tooling
for
you.
It's
also
something
that
gets
used
in
PageSpeed
insight,
insights
and
and
the
whole
bunch
of
other,
very
important
speed
tooling
across
the
web.
Okay,
now,
when
we
try
and
understand
what
that
score
means,
we
need
to
look
at
a
whole
bunch
of
key
metrics.
C
These
metrics
are
sort
of
timing
points
in
the
lifecycle
of
your
page
from
first
content
for
paints.
First,
meaningful
paint,
CPU
idle,
interactive
speed
index,
an
estimated
input
latency
before
we
talk
about
the
specifics
of
what
we're
measuring
there.
Let's
take
a
look
at
how,
though
waiting's
effect,
the
lighthouse
for
now
from
the
documentation.
It
says
well,
first,
content
for
painters,
three
parts
of
the
score
and
time
to
interactive
as
five
parts
to
the
score,
and
it
sounds
like
we're.
C
We're
going
to
talk
about-
and
at
this
point
in
time,
like
I,
feel
like
I
need
to
give
you
a
caveat,
which
is
to
say
that
these
performance
scores
change
continually
over
time
as
they
try
and
mutate
people's
behavior
and
understand
how
to
best
measure
one's
life
high
school.
So
if
you
go
in
two
weeks
time
and
they've
changed
the
scoring
again
and
just
don't
blame
me,
okay,
so
the
first
important
timing
event
that
we
care
about
is
first
content
for
paint
and
that's
basically,
the
time
from
when
a
page
starts
loading.
C
So
the
the
blank
screen
to
in
any
part
of
the
pages
content
is
visible.
Now,
that's
really
important,
because
that's
that
flash
of
white
screen
that
you
see
when
you're
like
well
I,
don't
know.
What's
happening,
is
the
page
loading
or
isn't
it?
And
so
it's
a
really
important
user
facing
metric
speed
index
is
a
little
bit
harder
to
nail
down
and
explain.
C
You
react
it
shows
or
what
helps
highlight
when
the
page
looks
like
it
should
be
interactive,
but
it
actually
isn't
really
responding.
Yet,
okay,
now
another
way
of
visualizing.
It
is
using
the
three
questions
from
those
three
questions
being
like
first
paint
and
first
contentful
paint
is
there?
Is
it
in
the
is
it
happening
phase?
So
is
something
happening?
Can
the
visual
user
get
the
sense
that
the
page
is
doing
stuff
and
now
first
meaningful
paint
is
in
there?
Is
it
useful
stage?
Can
I
start
reading
some
content?
C
Is
there
anything
I
can
engage
with
just
from
an
interest
perspective
before
I
can
do
stuff
with
it
and
then
the
important
one
being
time
to
interactive?
Isn't
it
isn't?
Is
it
usable
stage,
so
the
user
is
expecting
to
be
able
to
smash
on
buttons
and
not
wait
any
further,
all
right,
but
I'm
a
farm
or
a
show,
don't
tell
kind
of
person.
C
Lord
of
the
Rings
means
for
any
appropriate
situation
and
I
think
it's
important
that
you
know
that
I
believe
that
there's
a
lot
of
the
Rings
mean
for
every
situation,
and
but
there
is
this
little
app,
and
this
is
just
dev
tools
open
to
the
right-hand
side,
but
I
think
everyone
can
see.
Let
me
just
zoom
in
a
little
bit
more,
and
so
this
is
the
pain
that
you're
normally
used
to
seeing,
and
you
may
have
scratched
back
here
and
seen
a
pain
like
this,
which
is
the
audit
report.
C
C
D
C
D
D
C
There
we
go
now
I
broke,
it
I
think
for
whatever
reason,
because
I
was
tasting
stuff
just
beforehand,
it
must
have,
must
have
cached
it.
You
can't
see
them,
but
everyone
is
busy
laughing
at
me
on
the
zoom
call
okay.
So
thanks
thanks
everybody
thanks
for
the
country.
Okay,
so
for
this
super
simple
and
little
react
application.
C
We
have
a
really
poor
score
comparatively
at
66,
and
it
says:
well,
here
is
our
first
Continental
paint
and
meaningful
paint
and
speed
index
and
time
to
interactive
and
they're
all
really
similar,
which
means
that
there's
this
logjam
before
things
are
in
there.
Okay
and
now
down
here
you
can
see.
There
is
a
whole
bunch
of
opportunities
for
things
that
can
fix,
like
images
can
be
changed,
text
compression
can
be
enabled.
C
Now,
that's
not
going
to
be
there
because
I'm
running
locally
and
and
there's
also,
this
keep
request,
count
slow
and
transfer
sizes,
small
and
I'm,
delivering
a
monolithic,
2
megabytes
worth
of
content,
of
which
700
kilobytes
is
JavaScript
right,
which
is
far
too
much
for
this
tiny
little
app
and
now
I'm
just
quickly
going
to
go
into
tracer,
because
this
is
a
high-level
report
on
it.
But
you
can
go
into
the
super
in-depth
trace
report.
That
shows
like
the
CPU,
timings
and
events,
and
you
can
see
the
progression
of
frames
here.
C
So
there's
this
little
screenshots
thing
and
as
you
go,
you
can
see
there
is
our
a
Dom
content
loaded
event,
a
loaded
event.
Our
first
paint,
our
first
contentful
paint,
and
here
when
it
starts
showing
the
images
it
records
first
meaningful
paint,
ok,
which
is
quite
cool
and
and
then
there's
all
this
timings
and
main
stuff
and
there's
GPU
time
and
a
whole
bunch
of
stuff.
Then
maybe,
when
I'm
big
I
understand
this,
but
for
the
moment
I'm
just
gonna
close
this
panel
because
it's
confusing
ok
so
for
us
mere
mortals.
C
We
need
a
little
bit
more
guidance
to
try
and
start
and
picking
listing
now.
Knowing
what
I
know
I've
got
a
distinct
suspicion
that-
and
this
is
stuff
that
I
want
to
take
a
look
at,
but
for
our
time
too
interactive
score
to
reduce
we're
going
to
have
to
reduce
how
much
JavaScript
we
execute
right
and
to
do
that.
We're
going
to
need
to
and
scratch
around
now
there's
this
little
bone
feature
in
chrome,
dev
tools,
which
is
that
you
can
run
a
code
coverage
report.
C
So
if
you
go
into
more
tools,
coverage
right
and
then
you
push
this
little
refresh
button,
it
will
for
all
of
the
stuff
that
our
downloads
for
the
page
it'll
figure
out
how
much
of
it
you're
using,
and
you
can
see
that
50/50
6.5
percent
of
their
JavaScript
bundle
is
completely
unused
right
and
which
is
pretty
awful
now.
The
nice
thing
about
this
is
that
it
also
sure
and
use
CSS,
and
that
kind
of
thing.
C
So
it's
a
very
useful
little
tool,
and
it
also
will
go
into
this
JavaScript
and
you
can
see
while
the
red
lines
and
stuff
that's
unused.
But
unfortunately,
it's
all
bundled
and
minified
so
not
very
useful
to
us
right
and
I
mean
I,
don't
know
what
that's
even
doing
so
yet
again
we
have
to
dig
a
little
bit
further.
Ok,
but
we've
at
least
got
a
good
idea.
C
Javascript
is
something
that
we
can
take
a
look
at
now
for
this
I'm
going
to
include
in
a
package
something
called
web
pack
bundle
analyzer
now,
if
I've
installed
it
already
and
and
just
so
that
we
didn't
wait
for
that
as
well.
And
if
we
look
at
running
web
pack
with
this
dash
dash
profile
and
Jason
command,
we
can
generate
the
stats
that
Jason
and
which
is
just
going
to
be
the
build
output
of
the
web
pack
package,
and
then
we
can
go
to
web
pack.
Bundle.
C
Anna
layers
are
unless
that's
the
jason
file,
and
then
we
end
up
with
this
view,
which
is
completely
unhelpful
and
you're
like
yes.
Yes,
that
is
my
big
bundle,
but
what
you
can
do
is
you
can
go
into
the
side
here
and
pick
the
stats
and
then
show
content
of
concatenated
modules
and
then
suddenly
web
pack
bundle.
C
C
So
what
I'm
gonna
do
is
I'm,
going
to
just
simply
break
it
up
into
separate
bundle
and
lazy
load
it
which
sounds
complicated,
but
it
actually
really
isn't
so
for
that
all
I'm
going
to
do
is
I'm
going
to
create
a
new
constant.
U
that's
going
to
represent
a
new
and
then
we're
going
to
call
react,
not
lazy
and
pass
it
a
function
and
that
function
is
going
to
use
a
dynamic
import
and
out
of
that
dynamic
import.
C
It's
going
to
be
for
this
component
over
here,
just
copy
and
paste
that,
in
here
and
and
webpack
is
going
to
know
that
the
dynamic
import
is
going
to
result
in
a
new
bundle
for
this
and
that
it
needs
to
lazy
load
it,
and
this
is
just
a
component
that
react
and
understand
that
we
can
use
further
down
below
and
and
it
would
be
nice
if
this
worked
just
like
this,
but
unfortunately
it
doesn't.
We
additionally
have
to
import
something
called
suspense
and
around
our
new
method
at
the
bottom.
C
So
that's
my
fallback
douve
and
then
at
the
bottom
here
I'm
going
to
create
the
suspense
object,
reformat,
stuff
and
and
unless
I've
made
any
typing
mistakes
that
should
just
work.
Now,
if
we
go
back
and
we've
got
NPM
Rheingold
we're
just
going
to
run,
whoopsie
NPM
run
ball.
Just
gonna
run
our
web
pack
bolt.
C
C
And
we
see
a
pretty
smart
jump
far
too
much
of
a
jump
actually
think
I
might
have
broken
it
again.
Is
that
supposed
to
be
the
funnel
but
I'm
just
gonna
roll
with
them?
It's
a
pretty
smart
jump
in
terms
of
bundle
size
and
it
was
supposed
to
be
about
86%.
So
the
rest
of
the
demo
is
not
gonna
make
a
big
difference,
but
if
we
go
to
web
pack
again
so
let's
rebuild
that.
C
The
multiple
modules-
okay,
there
we
are
there-
we
can
see,
there's
now
the
two
modules
index
and
index
dot,
one
and
they're
roughly
of
equal
size
right.
So
this
is
the
first
one
that
gets
loaded
and
then
index.
Third,
one
will
be
lazy,
loaded
in
when
you
click
the
button
and
just
to
convince
you
that
I
haven't
broken.
Anything
like
I
have
broken
stuff
something's,
not
working
exactly
right.
I
must
have
mistyped
something.
Oh.
C
Dear
anyway,
okay,
so,
let's
move
on
with
that.
So
that's
a
big
part,
but
there
was
also
other
stuff
that
we
could
take
a
look
at
now.
A
common
mistake
that
gets
made
and
in
terms
of
web
conflicts
is
that
here
we
are
doing
this
babel
preset
in
the
preset
react,
which
essentially
means
that
we
are
rendering
some
of
the
oldest
versions
of
javascript
right,
we're,
rendering
es5
javascript,
typically,
and
but
we
can
do
some
smarter
stuff
for
smarter
browsers,
because
chrome
has
far
more
modern
versions
of
JavaScript
available
to
it.
C
Okay,
and
so
for
that
we're
going
to
want
to
do
something
called
differential
loading
of
JavaScript.
So
we're
going
to
say
well,
full
older
legacy
browsers
will
ship
es5
code
and
but
for
more
modern
browsers
like
Firefox
and
Chrome
in
edge
and
that
kind
of
thing
and
we
are
going
to
generate
a
modern
bundle
and
how
you
do
that
is
pretty
simple.
So
we're
going
to
create
this
base
where
pet
conflict
and
we're
basically
just
going
to
smash
all
of
this
stuff
to
start
into
the
base.
C
Okay,
then
we're
going
to
create
Const
legacy,
web
pack,
config
and
the
modern,
with
pack
conflict
okay,
and
to
generate
these
we're
going
to
use
some
shared
based,
stuff
and
then
merge
in
and
modern
changes.
So
for
that
we're
going
to
use
something
called
web
pack
merge
and
we're
just
going
to
use
webpack,
merge
and
then
for
our
legacy.
We
get
to
merge
in
face
with
something
and
then
for
modern.
It's
just
do
it
like
that.
We
get
to
merge
in
base.
C
To
make
up
some
time,
I'm
just
going
to
overwrite
ease,
so
the
Babel
stuff
is
the
important
bits
and
pieces
that
I
don't
really
care
about
in
the
base
anymore,
because
that's
going
to
be
different
between
the
two,
so
I'm
going
to
strip
out
the
Babel
config
will
leave
the
CSS
loader
on
figured
best,
leave
the
copy
image
plug
it
and
then
for
our
legacy.
It's
actually
going
to
look
something
like
this.
C
D
C
Whatever
I
did,
others
are
twice
consecutively
been
a
long
week.
Okay,
all
right.
So
what
you're
going
to
do
is
we're
going
to
configure
preset
env
to
say
well,
we
want
any
browser.
That's
got
more
than
0.25
percent
market
share
and
not
Internet
Explorer
level.
So
we
can
use
modules,
okay
and
then
to
export
it,
we're
going
to
say
we're
going
to
what
legacy
modern
and
and
exporting
it
as
an
array
rather
than
as
a
simple
object
where
PAC
understands
and
when
PM
round
ball
and.
C
It
will
generate
two
separate,
bundles
and
I'll.
Take
a
look
at
that
in
the
public
directory.
Now
it's
going
to
generate
two
separate
bundles,
one
that
exists
inside
legacy,
which
is
index
one
and
two
and
then
one
and
that
exists
inside
Martin,
which
is
index
one
and
two.
If
we
take
a
look
at
the
disk
usage
of
that.
So
if
we
look
at
what's
addy
you
eh
public
jeaious,
we
can
see
that
the
primary
index,
the
jas
so
that
one
in
Legacy
is
236
kilobytes
and
in
terms
of
modern,
is
156
kilobytes.
C
So
we
showed
orphan
neat
100
extra
kilobytes
of
JavaScript,
just
fire
that
and
but
this
is
not
enough
to
be
able
to
and
load
it
up
in
the
browser
to
load
it
up
in
the
browser.
We
need
to
go
into
an
index
that
HTML
that's
responsible
for
loading
up
the
script.
Okay.
So
this
is
the
thing
that's
responsible
for
loading
up
an
application,
and
then
here
we
can
do
the
following:
ok,
so
on
our
script,
type
text/javascript
we'll
say:
well
we're
going
to
put
no
module
directive
on
it.
C
Okay,
which
says
that
only
executes
this
of
no
module
is
available
and,
on
our
other
director,
we're
going
to
say,
script
type,
equals
equals
module
and
we're
gonna,
say:
source
equals
Jas
the
legacy.
So
in
modern
modern
index,
like
Jas
close
that
up
and
then
we're
gonna,
add
legacy
in
here
now,
browsers
that
don't
read
the
no
module,
don't
understand
script
type
module,
so
they
ignore
this
directive.
So
if
you're
running
Internet,
Explorer
11,
it's
gonna
hit
this
line
of
code
and
run
the
old
JavaScript.
Okay,
browsers
that
do
understand.
C
C
Like
Jason,
don't
know
my
packages
Jason
sorry,
my
folder
structure
and
I'm
going
to
create
something
called
lighthouse,
RC
dot,
JSON
file.
If
I
can
spell
lighthouse
at
us.
That
sounds
like
something
completely
different:
okay,
a
lighthouse
I
see
JSON
file
and
inside
that
file,
I'm
just
going
to
copy
and
paste
in
some
Jason
and
that's
gonna,
say
well.
Our
collect
URL
for
the
CI
is
localized
2001
ford,
slash,
public
and
I.
C
Okay,
then
I'm
going
to
go
to
my
package
Jason
and
I've
already
installed
the
lighter
CI
and
dependencies
and
I'm
going
to
create
this
light.
I
toss
task
and
for
my
lighthouse
task,
I'm
going
to
do
light,
RCI,
auto,
run
and
just
double
check
that
I
type,
that
name
right
lighthouse,
our
CEO,
Jason,
great
and
now
I
can
npm
run
light
and
this
will
take
a
while.
And
so
basically
what
it's
going
to
do
is
its
use.
The
default
configuration
which
is
going
to
run
light
us
three
times
consecutively
and
then
report.
C
A
C
A
C
So
webpack
Bible
analyzer
is
the
only
web
pack
specific
optimization
and
the
reason
why
I'm
not
sure
why
this
is
taking
long
I
know
it's
like.
No,
because
it's
not
running
the
site
needs
to
run
and
the
reason
why-
and
this
is
impact
specific-
is
because
it's
the
de
facto
standard
but
there's
nothing
that
prevents
you
from
using
a
lighthouse
and
on
conventional
site
or
anything
that
uses
parcel,
jeaious
or
roller
or
anything
else
right
and
you
can
use
it
anywhere.
Is
that
answer
that
question.
A
D
C
Well,
lighthouse
is
tooling
to
measure
the
speed
of
websites
right
and
I'll.
Give
you
an
example
for
that:
let's
put
up,
Internet
I'll
put
some
resources
at
the
end
that
I'll
talk
about
okay,
so
it's
it's
finished
and
for
whatever
reason
it
picked
up
a
ninety
nine
percent
pass
score.
So
it's
succeeded.
Now
this
takes
quite
a
long
time.
You
shouldn't
run
it
like
this
necessarily
yourself
constantly,
but
the
point
behind
light.
Our
CI
is
to
be
used
in
the
context
of
continuous
integration
server
so
like
every
commit.
C
C
Great,
so
in
conclusion
and
I
think
it's
really
important
for
us
to
understand
the
key
performance
events
of
that
page
like
how
does
the
browser
see
these
things
happening
and
fitting
together
and
I?
Think
it's
really
important
to
develop
a
deep
understanding
of
our
tuning
and
the
options
that
are
available
to
us
and
and
to
keep
a
razor-sharp
eye
on
what
is
the
critical
path
for
our
users,
like
what's
the
least
amount
of
content
that
they
need
to
have
visible
and
cut
every
single
way?
The
plan
Occam's
razor
very
carefully
there
and
I
didn't
didn't.
C
Do
it
today,
for
whatever
reason
and
because
the
demo
fails,
but
you
should
make
small
measurable
changes
and
take
each
one
and
make
sure
and
validate
that
it
works
before
making
the
next
one
so
that
you
know
what
changes
are
happening.
Otherwise,
it's
very
easy
to
gloss
over
some
things
that
degrade
performance
that
end
I
feel
like
automation
and
monitoring
should
be,
should
be
essential
for
this
performance
and
I
can
recommend
light
RCI
and
some
of
the
tooling.
But
there
are
other
options
like
speed,
curve
or
PageSpeed
insights
itself.
C
Education,
information
about
making
your
site
fast
and
as
well
as
being
the
coolest
URL
name
on
the
Internet
and
they've,
got
this
measure
tab
as
well.
This
is
lighthouse
where
you
can
sign
in
and
you
can
say
well.
This
is
a
URL
that
I
care
about,
monitor
that
over
time.
So
here's
a
here's
an
example
of
lattice
embedded
into
a
page
and
then
the
last
one
is
Smashing
Magazine,
front-end
performance
checklist
and
I'll
post.
These
links
into
the
live
chat
in
a
bit.
C
This
is
a
super
super
super
long
read,
but
everything
that
you
need
to
know
about
the
state
of
the
art
of
performance
is
in
this
one
article.
So
don't
listen
to
me.
I
know
it's
too
late,
but
don't
listen
to
me.
Go
and
read
this
article
and
you'll
understand
everything.
Okay
and
I.
Think
that's
me
done.
Are
there
any
other
questions.
A
C
So
the
ideal
answer
to
that
is
obviously
before
you
start
shipping
any
code
right
so
determine
what
your
performance
metrics
look
like
before
you
have
an
MVP
and
then
you
can
never
regress.
You
can
always
stay
fast
and
we've
seen
that
work
very
successfully,
but
I'm
also
going
to
ask
it
or
I'm
gonna
answer
it
with
something
that
you
didn't
ask,
which
is
that
it's
never
too
late
to
start
looking
at
performance
stuff.
So
don't
think
that
oh
man,
my
sites
are
slow.
This
I'm
never
gonna
be
able
to
unpack
this
stuff.
C
B
So
I
am
going
to
post
on
Twitter
the
link
to
the
udemy
course
that
I
used
I
see
he
has
updated
it
from
version
5,
which
is
what
I
I
bought
back
in
the
day
to
version
7,
which
I
would
recommend
you
start
with
now.
So
I
will
post
that
on
Twitter
and
in
the
in
the
question-and-answer
program
that
we're
using.
A
And
that's
actually
a
potential
idea
of
anyone
who
is
online.
Who
knows
you
lastik
search?
He
has
a
talk
for
you
to
submit
he'll
meet
up
awesome,
so
I
don't
know.
If
there's
any
more
questions,
we
can
wait
like
an
extra
20
seconds
and
just
talk
about
JavaScript,
because
the
live
stream
is
delayed
and
I
mean
like
we
can
talk
for
more
than
20
seconds
about
JavaScript
I.
Think
between
the
seven
of
us.
We
could
probably
take
talk
for
hours
about
JavaScript,
but
maybe
we
shouldn't
because
people
need
to
do
other
things
with
their
lives.
D
C
D
D
A
A
D
And
we
are
constantly
looking
for
people
who
would
like
to
share
their
knowledge
on
anything
web
related.
So
if
you,
if
you'd
like
to
give
a
talk
similar
to
the
one
that
you've
seen
today
or
even
if
it's
something
could
be
different
but
with
related
he's
feel
free
to
comment
and
if
you
would
like
some
help
beforehand,
maybe
preparing
or
getting
some
tips
on
how
to
do
this
online
speaking
thing
and
we've
got
a
panel
of
really
experienced
speakers
here.
Who
would
be
more
than
willing
to
assist
you
to
get
ready?