►
From YouTube: WebPerfWG call 2022 06 09 Managed Components
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Hey
I'm
yuav
calling
joining
from
amsterdam
I'm
working
for
cloudflare
since
10
months
ago
I
joined
as
part
of
an
acquisition
of
a
company
called
zaraz,
and
I'm
going
to
talk
about
one
of
the
things
we
started.
There
called
manage
components
so
just
one
moment
I'll
share
my
screen.
A
A
Yes,
all
right,
okay,
so
manage
components,
and
please
do
stop
me
because
I
can't
see
you
so
if
I'm
talking
too
fast
or
if
something
isn't
clear,
just
feel
free
to
stop
me
manage
components
is
what
we're
trying
to
push
now
as
a
way
to
redefine
how
third-party
tools
are
working
online
and
also
not
online.
A
So
we'll
touch
on
that.
This
is
basically
this
script
tag
that
we're
seeing
on
the
top
right.
This
is
how
usually
third
party
tools
are
implemented
online.
Now
you
have
your
website,
you
put
a
script
tag
that
somebody
told
you
to
copy
paste,
maybe
using
some
tag
management
software,
but
even
then,
usually
we
just
add
some
custom
html,
and
then
you
would
paste
that
there
and
then
the
tag
management
software
will
paste
that
into
your
page.
A
It's
pretty
bad
for
obvious
reasons,
but
just
to
touch
on
them
slightly
so
for
performance
I
mean
there's
another
server
we
need
to
connect
to
this
script
can
do
literally
anything
like
you
have
no
idea
what
it
does.
That's
also
a
problem
in
terms
of
security,
and
it
can
also
collect
things
that
it's
not
supposed
to
collect
from
the
page
and
that
could
cause
like
serious
privacy
issues.
One
of
the
most
common
examples
we're
seeing
with
that
is
how
very
often
your
page
would
include.
A
Even
the
url
itself
would
include
some
user
identifying
information
and
then
it
would
get
collected
to
some
analytics
tool
as
part
of
the
url,
and
you
really
can't
know
because
these
things
just
don't
go
at
all
through
your
systems,
if
you're
the
website
owner.
It
all
goes
through
from
the
browser
directly
to
some
remote
server.
A
With
zaraz,
we
tried
solving
this,
and
this
was
about
two
years
ago
when
we
started
the
company
and
our
initial
attempt
was
basically,
we
literally
reverse
engineered
all
of
these
well
about
50
different
tools.
So
we
went
script
by
script
and
their
minified
version,
and
we
tried
to
figure
out
what
is
it
that
they're
doing
what
information
they're
collecting
from
the
browser?
A
How
are
they
packing
it
all
together
into
a
request
and
where
is
it
sending
it
to
and
we
replicated
all
of
that
server
side?
We
happened,
then,
to
build
it
on
cloudflare
workers,
but
it
doesn't
really
matter
for
the
sake
of
this
discussion.
We
literally
just
collected
that
information
once
so.
If
you
have
20
different
tools
running
on
your
website
and
the
average,
for,
I
think
the
top
5000
websites
in
the
united
states
is
21
different
tools,
so
20
isn't
isn't
at
all
a
lot.
A
So
if
you
have
20
different
tools
and
they're
all
collecting
the
screen
resolution,
the
current
page,
the
page
title
and
a
lot
of
other
things
like
this,
instead
of
each
of
them
running
their
own
javascript
code
and
then
sending
another
request,
we
collected
all
these
things
once
sent
it
to
our
server
side
software
and
then,
like
manipulated,
created,
like
a
schema
for
every
different
vendor,
sent
a
request
there
and
everything
worked
just
the
same,
like
all
the
tools
kept
working
without
running
any
javascript
inside
the
page.
A
This
worked
really
well
until
we
joined
cloudflare
and
then
things
got
complicated
because
we
moved
from
100
users
to
now
we're
almost
9000
websites
running
xeros
and,
as
we
are
running
on
more
and
more
websites,
one
of
the
things
we're
hearing
more
is:
can
you
add
support
for
this
tool
and
that
tool?
And
it's
getting
well
impossible
to
maintain
and
yeah.
We
realized
we
needed
something.
Some
other
way
to
do
this.
A
A
The
thinking
is
that,
with
the
old
way
I
mean
when,
when
we're
talking
about
these
scripts,
this
is
really
what
is
available
for
tool
vendors
now
and
it's
just
it's
very
powerful,
but
you
can't
really
make
it
good
because
you're
even
before
you
even
started
you're
already
like
demanding
the
browser
to
do
to
make
one
additional
network
request
to
a
new
server
you
never
saw
before,
and
so
we
need
to
come
up
with
this
new
standard,
and
this
is
where
we
started
manage
components
and
the
managed
component
in
this
slide
I'll.
A
Just
read
it:
it's
an
open
format
for
defining
third-party
tool,
behaviors
on
a
website
or
an
application,
managed
components
can
execute
code
outside
and
inside
the
user
agent.
It
can
present
interfaces
in
a
parent
application,
can
establish
network
connections
and
can
provide
custom
apis,
managed
components,
require
a
runtime
environment
to
work
and
I'll
touch
on
this
runtime
environment
in
a
second,
but
just
to
talk
a
bit
about
the
benefits
of
writing
a
managed
component.
A
Comparing
to
this
script,
we
saw
earlier
so
first
all
managed
components
running
in
the
sites
they're
connecting
to
one
centralized
event
system.
So,
instead
of
if
previously,
you
have
to
have
something
like
ga
send
to
send
an
event
to
google
analytics
and
then
fbq
track
to
send
an
event
to
facebook
and
each
and
every
tool
have
their
own
event
collection.
Api.
Often
here
all
the
components
can
hook
into
the
same
event
system
and
then
the
website
only
need
to
trigger
one
event
and
it
will
get
dispatched
everywhere.
A
A
They
can
even
introduce
server
logic,
so
they
can
register
a
specific
route
under
the
domain
and
really
define
programmatically
what
happens
when
a
request
hits
that
route
we'll
see
an
example
of
that
in
a
moment,
server-side
draining
of
embeds.
This
is
my
personal
excitement
in
this
project
is
where,
if
you
have
an
article
now
on
some
newspaper
website-
and
it
has
a
twitter
embed,
for
example,
what
would
usually
happen
is
that
the
website
would
like
the
page
would
load.
The
whole
article
appears.
Suddenly,
the
browser
noticed
the
script
at
the
bottom.
A
It
goes
to
twitter,
it
fetches
their
the
tweet
fetches,
all
the
assets
that
it
requires.
A
The
whole
page
jumps
because
suddenly
there's
this
thing
in
the
middle
of
the
page,
and
then
you
you
see
that
tweet
inside
the
page,
with
south
side,
training
of
embeds,
all
of
this
thing
can
happen,
while
the
response
is
being
streamed
to
the
browser,
meaning
that
the
tweet
will
be
embedded
already
and
twitter
will
be
connected
already
before
the
browser
even
seen
the
request,
meaning
that
it
all
appears
to
be
100
first
party,
nothing
jumps
like
there's
no
layout
shifts
and
the
browser
never
needed
to
even
connect
with
the
twitter
server.
A
Client
event
is
where
we're
trying
to
standardize
well
different
types
of
events
like
scroll
view,
click
different
things
like
this,
but
in
a
way
that
would
be
not
only
across
browser
but
also
cross-platform.
A
So
that's
why
I
said
earlier
that
it's
for
well
the
web
and
also
outside
the
web,
we're
trying
to
create
a
set
of
events
that
you
can
also
then.
Well
once
you
listen
to
them,
your
manage
component
can
also
run
on
a
mobile
application
or
on
a
desktop
application,
and
all
those
events
will
actually
work
exactly
the
same
prepaid
ranging
of
actions.
This
is
this
has
to
do
with
the
fact
that,
because
managed
components
run
inside
the
server.
A
Well,
if
you
run
an
analytics
tool,
for
example,
today
your
the
website
would
load
and
then
it
would
load
the
analytics
tool
and
then
a
page
view
would
be
sent
with
manage
component.
You
actually
know
about
the
page
view,
as
the
request
hit
the
server
so
before
the
browser
even
rendered
anything,
you
can
already
collect
some
information
and,
lastly,
the
whole
system
is
very
much
intertwined
with
a
permission
system
that
we're
also
utilizing
in
order
to
manage
consent.
A
Better
touch
on
that
later,
if
we
have
time
this
is
a
tiny
example
of
a
component
that
all
it
does
is
whenever
there
is
a
page
view,
it
just
puts
this
event
listener.
It
asks
the
manager
actually
to
put
the
event,
is
in
our
own
page
view,
and
whenever
it
happens,
this
event
gets
dispatched.
The
tool
runs
this
code,
which
means
that
we're
sending
a
post
request
to
this
tool,
endpoint
in
in
this
case
we're
folding
the
url,
that's
currently
being
seen
in
the
ip
again.
This
is
a
tiny
example.
A
It's
you
can
implement,
obviously
many
more
much
more
complex
things
here,
but
the
cool
thing
about
this
example
in
analytics
tool
is
that
it
runs
zero
javascript
at
all
in
the
website,
like
literally
not
even
one
line,
and
you
can
collect
a
lot
of
information
already
here.
We
have
a
small
example
of
some
of
the
server
side
capabilities.
A
I
mentioned
that
you
can
introduce
your
own
routes,
so
here
we're
doing
this
with
the
slash
ping,
and
you
can
also
sell
static
assets
or
literally
proxy
a
whole
other
domain,
and
then
it
appears
under
as
if
it
came
all
from
one
domain
now
I
said
earlier
that
managed
components
require
some
kind
of
runtime
environment
to
run,
and
this
is
because
they
generally
they
don't
have
to
run
in
the
browser.
A
The
manager
is
the
one
that
runs
these
components,
because
because
these
components
we
saw
before
they're
just
an
exposed
function,
that's
just
a
javascript
module.
Somebody
needs
to
import
them
and
execute
them.
This
is
the
manager,
so
the
manager
is
the
one
that
actually
well
dispatches
all
the
events
to
the
different
components.
It
provides
all
those
server-side
capabilities,
so
it
registers
all
those
endpoints.
A
A
Second,
the
manager
also
enforces
everything
that
has
to
do
with
the
user
configuration
and
I'm
saying
the
user.
I
mean
the
website
owner,
so
the
website
owner
can
decide
what
modules
to
load
like
what
components
to
load
when
to
load
them.
Only
under
these
pages
only
for
this
user
agent
only
for
people
from
these
countries,
which
events
should
be
passed
to
the
different
components.
A
But
this
is
what
we
consider
like
the
root
permission.
So
if
you
want
to
execute
the
javascript
code
inside
the
browser
in
the
top
frame,
this
is
the
root
permission,
because
it
means
literally
that
you
can
do
everything
and
we
are
working
now
with
quite
a
few
vendors
and
with
all
of
them
were
very
much
discouraging
them
from
asking
for
this
permission.
A
But
there
are,
if
all
the
tool,
if
everything
that
you're
doing
is
completely
serve
aside
and
if
you're
not
asking
for
any
piis,
then
your
tool
will
usually
not
need
to
ask
for
any
permissions.
But
as
you
as
you're
asking
to
do
more
things
inside
the
browser
or
as
you're
asking
to
get
more
information
into
well
visitors
information,
then
you
the
tool,
needs
to
ask
for
these
permissions
and
the
manager
has
to
be
this
piece
of
software.
Where
this
is
enforced.
A
This
manager
can
be
implemented
in
many
different
ways.
We're
really
building
this
to
not
be
only
yeah
a
one-way
thing.
A
Now
we
are
trying
to
work
on
these
specs
for
managed
components
together
with
vendors.
This
is
what
we
have
right
now
again,
I'm
from
cloudflare,
and
I
think
we
have
nowadays
about
six
different
vendors,
we're
working
with
it's
very
much,
a
collaborative
effort
so,
like
some
vendor
comes
and
say,
we
also
need
this
this
event.
And
how
do
we
handle
this
and
we're
trying
to
really
think
about
these
things
better?
A
But
I'm
personally
and
we
as
a
team,
would
love
to
have
more
inputs
here
and
to
yeah
just
make
sure
that
this
standard
can
work
for
more
and
more
for
more
types
of
tools.
Essentially,
one
of
the
things
that
we're
really
pushing
forward-
and
this
is
going
to
be
released
very
soon-
is
webcm
and
webcm
is
our
open
source
implementation.
A
It's
a
reference
implementation
of
manage
of
a
component
manager
that
you
can
take
today
and
put
it
on
your
website.
It
works
as
a
proxy,
and
then
you
can
run
managed
components
on
your
site
now
and
because
there
are
no
yet
any
managed
components
outside
in
the
wild.
We
are
taking
10
different
components
that
we're
running
inside
zara's
and
we
are
open
sourcing
them
too.
So,
hopefully,
by
the
end
of
this
month,
everybody
on
the
internet
can
take
one
cm
and
can
take
our
10
managed
components.
A
It
includes
yeah
facebook,
pixel,
google
analytics
linkedin
twitter.
I
can't
remember,
but
quite
a
few
and
run
them
on
the
website
completely
independently
of
cloudflare
or
anything.
It's
all
100
open
source
yeah.
So
this
is
how
we're
trying
to
push
this
forward.
This
is
more
like
just
a
general
vision.
A
A
Recording
tools
are
light
and
they're,
not
just
making
the
browser
die
as
they're,
recording
everything,
complex
widgets
that
you
can
put
into
your
website,
but
they're
coming
without
any
security
concerns,
because
they're
sandboxed
migration
between
web
to
mobile
and
desktop
of
components
this
audited
and
controlled
execution
environment,
so
that
people
would
know
what
they're
actually
running
on
the
website
and
just
a
standard
and
safe
way
to
deploy
third-party
tools
online.
A
What
we're
seeing
with
about
the
tours-
and
maybe
I
should
have
started
with
this-
is
that
I
mean
we
scanned
the
top
5000
websites
in
the
united
states,
and
we
saw
that
yeah.
The
average
was
21
different
tools
and
the
slowdown
like
the
the
well,
the
reduce
in
the
lighthouse
score
for
websites
was
of
41
when
you
measured
the
yeah.
The
impact
of
third
party
tools
like
when
you
loaded
them
or
blocked
them.
So
we're
seeing
a
lot
of
potential
here
and
yeah
trying
to
bring
this
to
everybody.
A
So
I'd
be
super
happy
to
hear
what
you're
all
thinking
and
yeah
how
we
can
make
this
better
together,
I'll
stop
sharing
with
you
now
yeah.
Let
me
stop
the
recording
and
we
can
discuss.