►
Description
The FUNdamentals to the basics of Angular to help you get started with Angular Material
Craig Stroberg (@ CraigStroberg)
Have you ever wanted to create an Angular Material website or you have been tasked to maintain one and you want to have fun whilst doing so?
We will get you through some of the basics of Angular going through some of the key concepts found in Angular that Material leverages. We will along the way explore components of Angular Material and how to make use of their documentation.
Building web apps in plain JavaScript
Toby Kurien (@tobykurien)
This talk, aimed towards beginners, walks through creating a modern web app using plain HTML, CSS, and JavaScript. The idea is to aim for simplicity, and to understand how modern browsers work (we will make use of Web Components too) , while learning a minimum set of tools and concepts that will allow you to build production-ready apps. We won't be using any frameworks, so no prior knowledge is needed, other than basic HTML and JavaScript.
❓Q&A: slido.com - #11530
📢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/271620720/
A
A
As
with
every
meetup,
we
have
a
code
of
conduct,
the
gist
of
it
is
be
nice
to
people
be
respectful,
be
constructive,
just
don't
be
mean,
that's
pretty
much
it
in
case.
There
is
anything
that
you
feel
offends
you
in
terms
of
our
code
of
conduct.
You
can
speak
to
any
of
these
people.
You
can
find
us
online.
You
can
find
us
on
the
latex.
A
A
A
C
C
I
am
mainly
working
on
java
based
projects
and
angular
is
my
hobby.
It's
a
bit
of
fun
and
I
find
it
entertaining,
as
you
can
see
on
over
here,
there's
a
little
picture
of
my
personal
website,
which
you
can
go
and
visit
later,
and
you
can
go
and
view
the
code
that
I'll
be
taking
you
through
on
github.
C
C
C
So
we've
got
our
two
little
people
here:
bob
and
wendy
and
they've,
because
bob's
the
builder
and
wendy
get
it
angular
material
cool.
What
foundation
do
they
need?
They
need
to
be
able
to
make
use
of
angular
their
browser
development
tools,
typescript
html
css,
and
we
can
fix
it
attitude
and
if
it
doesn't
work
we
try
again
what
tools
would
you
need?
You'll
need
your
favorite
browser,
node.js
angularcli
the
little
command.
There
is
the
command
to
actually
install
the
angular
cli
into
your
node,
your
favorite
ide
or
text
editor,
and
you
can
see
some
examples.
C
Now,
property
binding
can
be
done
in
three
ways:
there's
interpolation,
where
you
basically
are
just
sending
in
this
string
for
what
you
are
going
to
display
inside
of
that
image.
There
is
element
binding
as
you'll
notice.
Here
it's
got
square
faces
around
the
source
and
binding,
which
is
got
the
bind
source
in
front
cool.
C
C
C
C
C
As
you'll
see
from
here,
you've
got
a
template
from
a
template
event
binding
to
a
component
from
a
component.
There's
property
binding
back
to
a
template,
and
this
is
usually
done
within
angular
material
is
you've,
actually
not
really
gonna
leverage
material
there
you're
going
to
create
your
own
components,
you're
just
going
to
add
the
material
components
into
yours
templates.
C
This
is
what
the
user
sees.
They
usually
do
not
consist
of
html
tags,
body
tags
or
a
base
tag.
Data
is
injected
into
the
template.
Making
use
of
interpolation,
which
is
over
here
back
to
property
binding,
can
be
part
of
the
component
or
external.
So
that
would
be,
if
you
have
your
html
file
outside
of
your
component
or
if
you've
got
audio
html
file
file
or
your
html
inside
of
the
com
ts
file,
they
usually
have
the
same
name
as
your
html
or
your
typescript
file.
C
Cool
directives
are
components
are
directives.
Sorry
with
a
template,
you
get
three
type,
two
types:
you
get
structural
directives
which
change
the
dom
layout
by
adding
and
removing
dom
elements
you
get
attribute;
directives
which
change
the
appearance
or
behavior
of
an
element,
components
or
another
directive.
C
Http
call
to
do
to
get
the
your
data
table,
so
you
can
have
one
where
it
goes
and
retrieves
the
data
for
you.
They
are
created
as
reusable
classes
and
are
instantiated
by
making
use
of
the
injector
over
here
they
get
binded
into
a
component
and
then
served
out
the
data.
The
usages
is
not
limited
to
validation,
of
data,
storing
and
retrieving
very
cool
to
make
use
of
and
very
versatile.
C
C
C
C
C
C
So
let's
quickly
do
that
over
here,
you'll
notice,
if
we
click
it
overview,
very
clean
interface
to
make
use
of,
and
you
can
scroll
through
it
and
there's
everything
there
on
how
to
get
going
api
and
will
give
you
everything
that
you
kind
of
need
to
know
about
it.
There's
an
input
all
its
fields
and
methods
to
make
you
like
you'll,
be
able
to
get
through
everything
you
want
asynchronous
as
well
and
some
cool
examples.
C
C
Cool
and
that's
the
end
of
the
presentation,
but
there
is
some
examples
to
share
now.
We
went
through
the
properties
of
what
angular
material
leverages
from
angular
itself,
and
here
is
just
a
mere
example
of
it.
This
is
the
directives.
Now
I
mentioned
that
there
are
two
types
of
directives:
you
get
a
structural
directive
and
an
appearance
directive,
and
if
I
bring
the
code
over,
let's
actually
just
bring
it
over
here.
C
B
Something
awesome
thanks
a
lot
craig,
so
I'm
just
gonna
go
through
the
questions.
There
are
still
there's
still
time
for
people
to
ask
questions
on
the
stream
if
you
have
them
so
the
first
question
I've
got
for
you
here
is:
how
closely
does
the
angular
material
release
schedule
match
the
standard
material
design
stuff?
C
It's
a
good
question.
I
would
have
to
go
and
find
out
for
you.
However,
I
have
not
run
into
an
issue
making
an
angular
myth
or
making
use
of
angular
material
where
they'll
have
angular
has
not
already
supported,
or
they
have
not
supported
angular.
It's
it's
been
pretty
seamless
because
they
both
are
created
by
google
and.
C
C
A
B
D
B
D
Great
so
my
name
is
toby
korean
I've
been
coding
for
quite
a
long
time,
I'll
just
leave
it
at
that.
I
also
play
around
with
raspberry
pi's
and
stuff
at
house
for
hack,
which
is
a
makerspace
that
I
helped
co-found
and
I
also
work
at
ibm
research
in
bronfman.
Okay,
that's
enough
about
me.
So
my
talk
today
is
going
to
be
quite
code
intensive,
I'm
actually
going
to
quote
everything
from
scratch.
D
D
Unfortunately,
I
didn't
enjoy
the
experience
of
working
with
a
javascript
framework
because
I
typically
use
mostly
html
features.
So
I
had
a
look
at
the
homepage
and
I'm
like
what
kind
of
benefits
do
I
get
out
of
you
angulact?
So
it
turns
out
that
you
know
it's
decorative.
It's
fast.
It
gives
you
components
and
I'm
like
doesn't
html
already
give
you
all
this
doesn't
the
way
that
api
do
all
of
this
stuff
already.
D
So
I
wasn't
clear
on
what
the
problems
the
framework
was
actually
solving,
and
maybe
it's
that
you
know
those
kind
of
problems
did
exist
before,
but
they
don't
exist
anymore,
because
the
way
that's
caught
up
kind
of
like
with
jquery.
So
I
thought.
Okay,
let
me
find
out
so
before
I
you
know
obviously
just
jump
in
and
just
use
plain
old,
html,
javascript
and
css
that
set
some
goals
because
that
obviously
works.
But
but
what
do
I
actually
want
to
achieve
with
this?
D
So
one
of
the
things
is,
I
want
to
be
able
to
build
android
like
web
apps,
so
I
used
to
freelance
I
built
android
apps
for
like
six
years,
and
you
know
I.
I
noticed
that
most
of
those
apps
could
have
been
web
apps,
and
these
days
we
have
progressive
web
apps.
So
can
I
do
that
kind
of
work
now
with
just
plain
old
html-
and
you
know
it's
quite
a
freelance
friendly
job.
D
If
you
want
to
think
of
it
that
way,
and
then
the
things
I
want
to
be
able
to
do
is
like
compose
my
user
interface
using
components.
So
if
I
can
just
whack
some
components,
have
them
communicate
between
each
other
and
have
some
sort
of
like
architectural
pattern
that
I
can
just
sort
of
repeat,
for
example,
android
had
this
idea
of
fragments
and
you
could
put
components
and
fragments
and
you
can
move
the
fragments
around
and
you
can
insert
them
and
remove
them
and
stuff
like
that.
D
Could
we
do
something
like
that
with
plain
old
html
and
I'm
very
sticky
about
this
thing
can?
Can
I
have
a
fast
turnaround
time?
Can
I
make
a
change
and
instantly
see
the
result?
I
don't
have
to
go
through
some
sort
of
compiling
and
stuff
like
that,
which
was
a
pain
in
android,
of
course,
and
also
can
I
use
static
hosting
because
it's
easier
to
deploy
and
I
even
want
to
use
it
in
dev,
because
then
it
means
there's
no
magic
whatsoever
all
right.
So
these
are
kind
of
my
goals.
D
So,
let's
see
how
we
went,
I'm
gonna
do
a
whole
demo
using
a
hello
app.
So
this
app
I
mean
I'm
aiming
pretty
low
here.
It
basically
asked
for
my
name
and
then
it
just
greets
me.
That's
all
it
does,
but
as
you'll
see
we'll
we'll
introduce
some
complexity
and
see
how
that
goes.
So,
I'm
assuming
that
this
is
beginner
friendly.
So
I'm
gonna
probably
talk
about
some
of
the
things
that
you
might
already.
Some
of
you
might
already
know.
D
D
D
Board,
okay,
so
does
this
still
work?
So
what
I'm
going
to
do?
Is
I'm
going
to
open
that
up?
But
of
course
we
need
to
serve
this
and
remember
I
mentioned
I
kind
of
want
to
serve
this
statically,
so
I'm
going
to
use
a
python
server
because
it
I
know
that
this
is
pre-installed
and
it
is
it's
a
static
server.
It
doesn't
do
any
magic
it
just
you
ask
for
a
file,
it
gives
you
the
file,
so
that's
it.
D
D
So
now
I
need
to.
I
need
to
have
something
input,
my
name
here
right,
so
the
the
easiest
way
to
do.
That
would
be
just
to
put
an
input,
type
equals
text,
but
remember
I
said
that
I
want
to
have
components,
and
I
want
to
I
want
to
compose
them,
because
this
this
might
not
be
a
simple
component
right.
So
what
I'm
going
to
do
is.
D
So
let's
look
at
web
components,
because
this
is
the
thing
that
gives
us
components
now
that
we
didn't
have
before
so.
The
way
to
create
would
be
to
first
of
all,
I'm
going
to
create
a
source
directory,
and
hopefully
I'm
showing
you
a
bit
of
coding
guidelines
here
as
well.
These
are
sort
of
my
my
standards.
D
A
D
Right,
so
I
expect
something
like
that
to
work
right,
but
if
I,
if
I
load
that
up
I
get
this
error
x
is
not
defined
now,
wouldn't
it
be
nice
if
I
didn't
have
to
like,
actually
save
it
and
run
it
to
be
able
to
figure
that
out
to
do
that
we
use
a
thing
called
eslint.
Okay,
so
I
need
to
install
eslib
now.
D
First
of
all,
I
should
just
mention
that
I'm
using
visual
studio
code,
so
you
can
use
whatever
ide
you
want
to,
but
I'm
going
to
talk
about
visual
studio
code
because
it's
quite
popular
and
it's
kind
of
nice.
I,
like
I,
really
like
it,
so
I
just
want
to
show
you
some
of
the
plugins
that
I've
installed.
So
there
are
three
plugins
here.
One
is
called
eslint.
D
One
is
called
prettier
now
prettier.
Is
this
thing
that
formats
my
code
for
me
and
you
might
have
noticed
like
I
would
have
typed
something
and
it
would
be
out
of
alignment
and
it
might
not
even
have
a
closing
tag,
but
as
soon
as
I
save
it,
it
automatically
formats
it
nicely.
For
me,
this
is
nice
because
it
keeps
everything
consistent
as
well,
and
your
fellow
developers
will
be
quite
happy.
So
first
of
all,
this
project
is
actually
quite
blank
as
you've
seen.
D
D
D
D
It's
going
to
pick
up
that
I've
now
installed.
Eslint,
there's
one
more
thing
that
I
need
to
do,
though
I
need
to
run
esl
eslint
now
npx
is
a
is
a
as
an
executor
for
for
any
of
the
npm
packages.
You've
installed,
so
I'm
gonna,
npx
eslint
and
then
call
minus
minus
init,
and
this
will
install
or
at
least
create
a
config
for
us.
So
what
would
I
like
it
to
do?
Yeah?
D
I
would
like
it
to
check
and
find
problems
absolutely
what
type
of
imports
like
a
standard
javascript
which
I'll
show
you
now
we're,
not
using
view
angulact.
None
of
these
does
your
project
use
typescript!
No,
because
I
want
that
quick
turnaround,
time
and
stuff.
Where
does
your
code
run
in
a
browser
yeah,
my
config
file
can
be
javascript
no
worries
and
then
yeah
install
whatever
you
need.
D
D
D
Why
doesn't
it
tell
me
that
connected
callback
is
a
thing
we're
going
to
fix
that
just
now,
but
there's
a
thing
called
connected
callback
and
if
you
look
up
html
elements,
api
you'll
you'll
actually
see
it,
and
in
here
we
can
render
our
component.
So
we
can.
We
can
put
in
what
we
wanted
to
show.
So
we
can
do
things
like
this
dot
inner
html
remember.
This
is
an
html
element
like
every
other
html
element,
it's
standard,
so
you
have
in
html
and
you've
got
all
those
kind
of
dom
operations
and
stuff
like
that.
D
D
Rule
all
right,
so
what
do
we
expect
this
to
do?
Let's
see
we
run
this
guy
wow
check
that
out.
So
now
we've
created
a
component
in
just
a
few
lines.
We've
got
our
input.
Let's
have
a
look
at
what
this
looks
like
in
terms
of
the
dom.
So
we've
got
a
body
h1
we've
got
this
app
input
and
inside
is
exactly
what
we
said.
It
should
have
oops,
I
kind
of
modified
it
there,
but
that's
fine
cool.
This
is.
This
is
great.
D
D
Now
at
this
point,
you
might
be
jumping
into
some
other
libraries,
but
let's,
let's
do
things
as
simply
as
possible.
Let's,
let's
keep
things
as
pure
and
simple
as
possible.
So
what
template
is
going
to
be
is
a
little
function
that
returns
the
string
right
so
now
I
can,
in
my
inner
html,
just
call
template,
and
it
should
just
do
that.
So
so
that's
just
extracting
the
string
out
cool
and
it
still
works
righty.
So
the
next
thing
is,
if
I
go
into
my
main
file,
so
you
can
see
I've
got
my
app
input
here.
D
I
can,
I
can
start
adding
styles
now.
One
of
the
things
is
html
inside
strings
is
not
pretty,
unfortunately,
I'm
not
a
fan,
but
this
is
unfortunately
how
it
has
to
be,
since
this
is
a
javascript
file.
So
what
I
did
do
is
I
installed
a
plugin
called
template.
Literal
editor.
Now
what
template
literal
editor
does
is
it
allows
me
to
click
on
this
string
and
press
ctrl
enter
or
command
enter
and
pick
what
language?
It
is?
D
It's
html,
thankfully,
that's
the
default,
and
it
opens
it
up
to
the
side,
which
means
I
can
actually
start
editing
my
html,
and
it
keeps
them
in
sync
right.
You
can
see
it
there
on
the
left.
What
is
really
nice
about
this?
Even
though
it
looks
a
little
clunky,
the
fact
that
I've
got
a
side-by-side
window
is,
I
can
do
stuff
like,
let's
style,
a
p
and
give
it
a
background
and
you'll
notice.
I
get
full
code
completion,
so
this
is
not
just
syntax
highlighting
this
is
the
full
blown
wood
css
everything.
D
D
So
what
if
I
took
the
style
out
of
my
my
component
and
put
it
into
my
main
file
right,
so
I'm
just
going
to
stick
it
in
here
now.
Would
we
want
our
paragraph
here
to
change
or
not
so
initially
our
thought
might
be
yeah!
That's
exactly
what
I
expect.
I
expect
that
paragraph
to
change,
but
if
you
think
about
it,
your
whole
ui
is
going
to
be
composed
of
all
of
these
elements.
D
It's
going
to
be
like
millions
of
them
and
if
you
go
and
put
a
style
into
the
main
file,
it
could
just
mess
them
all
up
right.
So
that
is
why
we
we
try
to
keep
the
the
style
scoped.
So
we
want
this
element
to
have
its
own
style
unaffected
by
its
parents
or
the
rest
of
the
page
kind
of
like
the
video
tag
in
your
in
your
html.
If
you
put
a
video
tag
in
there,
you
can
put
whatever
styles
you
want.
D
It
doesn't
affect
the
actual
video
player,
so
we
want
to
encapsulate
it
and
the
way
we
do
that
is
we
create
this
thing
called
shadow
dom.
So
that
is
a
big
aspect
of
web
components
is
that
it
gives
us
a
dom
that
is
sort
of
encapsulated
and
separate
from
the
main
document.
So
to
do
that
in
my
constructor.
D
I
apologize
I'm
going
a
bit
quickly,
but
hopefully
you
can
review
this
on
on
youtube
or
you
can
ask
me
questions
afterwards,
so
in
my
constructor
I'm
going
to
attach
a
a
a
shutter
dom.
So
there's
a
method
called
attach
shadow
and
it
takes
a
mode.
Now,
I'm
not
going
to
go
into
the
different
modes.
There's
open
and
close
close
just
means
that
it
can't
be
modified
and
all
that
stuff,
but
most
of
the
time
you're
going
to
be
using
open.
D
So
let's
see
what
difference
that
makes
the
very
reload
first
of
all,
notice
that
the
styling
doesn't
affect
me
anymore,
and
if
I
go
into
my
inspector
and
have
a
look
at
this
element
notice,
it
now
has
this
thing
called
shadowroot
and
it's
open
because
of
mode
open.
So
if
it
was
closed,
I
wouldn't
be
able
to
inspect
this
and
inside.
There
is
what
I
expected
now.
I
can
see
my
p
tag
and
my
input
text
great,
so
I
hope
you
see
the
value
in
in
doing
the
in
html.
D
I'm
going
to
take
this
hot
pink
out
because
we
don't
need
it
anymore,
so
this
is
all
great,
but
how
do
I?
How
do
I
style
this
p
if
I
really
wanted
to
from
the
outside?
If
I
did
want
to
change
it
well,
I
can
use
css
variables,
I'm
not
going
to
go
into
what
these
variables
are.
You
can
look
that
up,
but
that's
one
way
to
do
it
right.
D
So
the
next
thing
I
want
to
show
you
is
slots,
so
this
is
this
is
a
component
that's
supposed
to
take
an
input,
so
it
should
really
be
asking
the
question:
what's
your
name
like
you
know,
whoever
is
using.
This
component
should
be
passing
this
in
right.
What's
your
name,
so
what
I'm
going
to
do?
Is
I'm
going
to
take
that
out
and
I'm
going
to
put
a
thing
called
a
slot,
and
this
will
make
sense
as
soon
as
I
do
this.
D
So
if
I
switch
back
to
the
main
file,
I
can
put
some
content
inside
the
tag
right
and
whatever
is
inside
the
tag
gets
put
into
the
slot.
So
if
I
reload
now
everything
looks
the
same
okay.
So
that's
that's
nice,
because
what
it's
done
is
it's
taken
this
p
and
stuck
it
into
that
slot,
which
you
can
see
there
right.
D
So
hopefully
that
makes
sense
the
reason
why
slots
could
be
very
useful
is
you
could
make
a
layout
component,
so
you
could
have
a
thing
called
app
two
column
layout
and
you
could
have
one
p
inside
one
slot
and
one
in
the
other.
If
you've
got
more
than
one
slot,
you
just
give
it
a
name
and
you
can
say
slot
equals
and
give
give
it
the
name
of
the
slot.
You
want
to
stick
that
into
okay,
but
I'm
not
going
to
do
that
now.
Let's
move
on
right
so
remember.
D
My
original
intention
here
was
to
create
android-like
applications.
Right
so
remember
we
saw
the
previous
talk
where
we
used
angular
and
material
design,
so
we
want
to
go
with
something
like
material
design.
I
want
something
high
quality,
so
if
I
go
to
something
like
webcomponents.org
you'll
see
that
there's
a
collection
of
elements
here
called
polymer
elements.
Now
I've
used
this
before
as
part
of
polymer's
library,
but
I'd
like
to
use
it
independently
of
polymer.
I
just
want
the
ui
elements.
I
want
the
button.
I
want
the
input
etc.
D
D
Paper
input,
for
example,
so
I
want
to
replace
my
input,
which
looks
kind
of
sucky
right
now.
This
guy
and
I
want
to-
I
want
to
have
like
this
whole
material
design,
with
ripple
effects
and
all
of
that
kind
of
cool
stuff.
I'm
not
going
to
write
that
myself,
but
I'd
like
to
import
it.
So
that's
what
I'm
going
to
show
you
how
to
do
so.
If
we
just
npm
install
polymer
paper
input,
then
afterwards
we're
going
to
be
able
to
import
it.
So
while
it's
busy,
let
me
start
typing
in
the
code.
D
D
D
Now
we
can
hard
code
a
label
here,
but
what
I'd
like
to
do
is
I'd
like
to
use
attributes,
so
I
need
to
pass
in
an
attribute,
so
I'm
going
to
take
an
object
as
a
parameter,
and
hopefully
that
object
has
an
attribute.
I
can
just
call
git
attribute
and
the
attribute,
let's
call
it
hint,
for
example,
right
all
right.
So
now
I'm
showing
you
some
string,
templating
like
I
didn't,
need
a
library
to
do
this.
D
I
just
use
a
straight
old
function,
so
that
means
I
need
to
pass
in
an
object
here
and
I'm
just
going
to
pass
this,
which
is
this
html
element.
So
html
elements
have
attributes
so
I'll
just
pass
in
an
attribute
called
hint,
which
means
I
can
just
go
into
my
main
file
here
and
say
hint
equals
your
name
keys,
okay
and
notice.
It
even
changed
my
single
quote
to
double
quote
for
me
that
was
prettier.
D
Okay,
so
the
problem
is
I've
just
had
imported
polymer
right.
So
if
I,
if
I
run
this
remember,
I've
got
a
static
hosting
here.
This
guy
doesn't
know
what
the
heck,
oh
first
of
all,
it
says,
import
declarations.
May
only
appear
at
the
top
level
of
a
module,
which
means
I
need
to
specify
that
I'm
using
type
equals
module
because
now
I'm
doing
imports
module.
D
D
Now
we
could
just
go
in
and
say:
okay,
I
know
what
it's
it's
inside
load
module,
so
I'm
just
going
to
go
and
stick
a
node
modules
in
here,
and
that
should
work
right
and
yes,
it
does
work
except
inside
that
html
inside
that
javascript
it
goes
and
imports
other
at
polymer
stuff.
So
now
we're
in
this
endless
loop
like
how
do
we
fix
this
and
that's
this
is
maybe
the
kind
of
the
crux
of
this
talk
is
how
to
fix
this
issue.
D
So
what
I'm
going
to
do
is
I'm
going
to
install
something
called
snowpack?
Unfortunately,
I
don't
have
enough
time
to
go
into
exactly
what
it
is
and
what
it
does,
but
snowpack,
essentially
so
I'm
going
to
install
this
guy
will
solve
this
problem
for
us
by
bundling
everything
together
from
node
modules,
into
a
new
directory
called
web
modules,
and
the
nice
thing
about
that
is
that
it's
quite
self-contained
and
it's
small
and
does
all
the
tree
shaking
and
stuff
like
that
that
you'd
expect.
D
So
every
time
I
have
an
input,
I
would
just
run
snowpack
to
bundle
that
in
for
me,
so
that
I
can
just
import
it
as
if
it
was
just
a
normal
javascript
file.
So
snowpack
kind
of
enables
a
lot
of
stuff.
It's
worth
checking
out
their
website.
Snopback.Dev
I've
got
it
in
the
presentation
which
will
be
made
available
afterwards.
D
So
now,
all
I
have
to
do
is
run
npx
snowpack
and
what
it
will
do
is
it
will
go
through
my
whole
thing:
okay-
and
it
says
nothing
to
install
that's
because
it
will
save
this
right.
So
now
I've
got
at
polymer.
I've
changed
it
back
to
the
normal
hat
polymer.
So
I'm
just
going
to
run
this
again,
and
it
sees
that
I
see
you're
installing
this
importing
this
from
probably
node
modules,
because
that's
the
standard
it
goes
and
figures
it
all
out,
and
then
you
will
see
it
generate
there.
We
go.
D
It
generates
a
file
directory
called
web
modules
and
it
sticks
just
one
file
in
there
paper
input.
Now,
if
we
had
a
look
at
node
modules,
I'm
actually
a
little
bit
afraid
to
go
into
that
directory
right
now,
because
it's
kind
of
huge
half
the
internet
is
in
there.
But
if
I
switch
to
to
web
modules,
there's
just
one
directory
with
one
file
called
paper
input.
Could
that
possibly
work?
Well,
let's
find
out.
D
Here
we
go
look
at
that
wow,
your
name,
please.
I
click
on
that.
Oh
there's,
a
little
bit
of
animation,
wow,
there's
even
more
animation.
This
is
fantastic
right
cool.
So
now
we
have
a
way
of
installing
our
material
components.
So
I
can,
I
can
put
an
entire
app
shell
in
and
you
can
go
to
town
so
so
that
problem
is
solved
for
us.
We
can
have
paper
buttons.
We
can
have
navigation
drawers,
header
bars,
tabs
the
whole
lot
all
right.
D
So
the
next
thing
I
want
to
show
you,
and-
and
this
is
the
second
big
part
of
my
talk-
is
how
do
we
structure
this
code
so
that
you
know
components
like
I
can.
I
can
basically
compose
an
entire
ui
out
of
many
components,
so
I've
got
one
component
at
the
moment.
I
need
a
second
component,
something
like
app
greater
right
and
the.
What
app
creator
should
do
is
take
the
name
and
say
you
know
like
hello
where
you
are,
and
so
I
can
go
and
create
a
new
app
creator
file.
D
D
So
what
we're
going
to
do
is
we're
going
to
create
a
new
folder
called
core,
and
the
idea
is
to
create
some
sort
of
base
class
where
all
of
our
reusable
code
can
go
into,
and
I'm
just
going
to
call
it
webcomponent.js
component
js
and
in
here
we're
gonna,
have
a
a
default
export
of
a
class
called
web
component.
So
we'll
we'll
derive
all
of
our
web
components
from
this
particular
class,
which
will
make
our
lives
easier,
you'll
see
which
extends
the
standard
html
element.
D
D
A
D
A
D
Some
of
you
are
screaming:
hey
you
made
a
mistake.
You
made
a
mistake.
Okay,
so
great
now,
now
notice
I
get
I
get
help
here.
It's
called
when
the
components
attach
they
don't.
This
is
fantastic.
So
a
few
more
things
that
can
help
here
is
to
split
out
your
code,
see
I'm
getting
close
to
time.
So
I'm
gonna
rush
a
little
bit
here.
So
I,
like
my
components,
to
have
some
sort
of
init
method
and
some
sort
of
reset
render
method,
which
is
where
these
things
will
draw
now.
D
The
reason
why
I'm
going
to
split
things
out
is
because
when
you
have
code
inside
a
constructor
or
a
callback,
it's
hard
to
reuse
it,
but
if
it's
inside
a
separate
method
you
can
always
call
it
from
wherever
you
need
to
so,
for
example,
you
can
call
render
when
it's
ready
to
render,
and
you
can
call
init
when
the
constructor
has
completed,
and
so
these
are.
These
are
methods
that
we
will
fill
in
so
initialize
init
your
state
and
render
will
render
my
components.
D
Okay
and
then
we
now
we
can
have
we
can.
We
can
actually
create
new
lifecycle.
So,
for
example,
if
we
wanted
to
do
a
reset
of
our
component
right,
like
it's
already
in
some
weird
state-
and
we
press
a
button,
it
must
reset
what
we
do
is
we
call
init
and
then
we
call
render
okay,
so
that
should
reset
our
state
and
render
it.
D
D
D
Okay,
okay,
great
yeah,
that's
fantastic!
Let's
let
me
just
show
you
what
I've
done
now:
okay,
so
I've
imported.
This
is
basically
just
a
standard
web
component
again
the
same
sort
of
template.
It
just
says:
hi
name
nice
to
meet
you
and
the
name
in
it.
We
define
as
undefined
and,
of
course,
with
some
something
needs
to
define
it
right.
Okay,
so
that
so
the
point
I
was
trying
to
make
here
is
you've
now
got
two
components
here
and
the
one
needs
to
communicate
with
the
other.
How
do
you
do
that
right?
D
What's
the
best
way
to
do
that,
so
what
I
figured
out
is
what
really
helps
in
terms
of
architecture
is
to
have
some
sort
of
parent
component.
So
let's
call
it
apple.
Welcome
and
app.
Welcome.
Has
these
two
children
right,
so
basically,
the
child
elements
are
quite
self-contained.
If
you
want
to
think
of
it
that
way,
app
input
doesn't
care
about.
Greeter,
greater,
doesn't
care
about
app
input.
The
app
input
is
like
type,
something
and
I'll.
Tell
you
what
it
is.
D
The
greeter
is
like
give
me
a
name
and
I'll
greet,
but
some
the
parent
is
the
one
that
coordinates
the
whole
thing.
So
if
we
have
something
like
app
welcome,
which
is
a
new
component,
we
can
create
that
takes
these
two.
So
I'm
going
to
turn
that
into
one.
What,
if
you
want
to
call
it
a
compound
component
right,
so
we
can
go
and
create
a
new
one
called
app.
D
Paypro
button,
so
every
time
you
want
to
use
a
component,
just
npm,
install
it
and
then
run
snowpack
and
you're
done.
In
fact,
you
can
put
snowpack
into
your
package.json
so
that
it
automatically
executes
after
you've
done
the
npm
install,
but
you
kind
of
have
to
be
using
it.
Otherwise
snowpack
won't
bother
putting
it
into
web
modules,
so
it
because
it
does
a
tree
shaking
type
of
thing.
D
D
D
Right
so
it's
plus
a
new
paper
button
and
what
I
do
is
in
my
render
method.
I
do
the
template
as
usual,
but
I
can.
I
can
use
things
like
query
selector,
so
remember
this.
This
shadow
is
actually
like
a
document
object.
You
can
query,
it
does
the
sub
components.
So
I
look
for
a
an
app
input
and
I
set
it
into
a
variable
called
this.input.
I
look
for
a
greeter
and
set
it
into
this.greater.
D
I
look
for
the
paper
button.
Of
course
you
might
want
to
give
it
an
id
if
you've
got
more
than
one
and
I
put
it
into
this.reset
now
I
can
start
doing
things
like
add
an
event
listener.
So
on
the
input,
I
add,
an
event
listener
called
change
and
events
bubble
up
the
the
dom
tree.
So
any
event
that
gets
created
like
in
in
the
case
of
app
input
paper
input
is
wrapped
around
the
standard
in
input
field.
D
So
if
you
press
enter,
if
you
make
a
change
and
press
enter,
then
it
bubbles
up
a
unchanged
event
so
that
you
can
catch
here.
Remember
this
parent
is
now
coordinating
between
the
two
children,
so
it
grabs
the
event.
It
says:
something's
changed,
give
me
the
input,
so
what
I
need
do
need
to
do
is
add
a
geta.
So
how
do?
How
does
the
parent
get
the
value?
That's
inside
paper
input
we
can
put
a
get
name,
for
example,
says
the
getter,
which
will
just
return
this
dot
shadow.
D
D
A
A
D
A
A
D
A
D
D
D
Okay,
so
I'm
just
gonna
wrap
up
so
basically,
what
I
just
want
to
summarize
here
is
that
we
used
npm
to
install
stuff.
I
had
vs
code
with
these
plugins
and
I
use
snowpack
to
import
web
components
right.
The
tech
stack
is
very
plain
and
simple
right.
I
didn't
use
any
libraries
that
use
any
frameworks
just
pretty
standard,
stuff,
css4
and
es6,
and
then,
in
terms
of
architecture.
D
I've
got
this
web
components
which
is
like
a
base
class
which
handles
most
of
my
life
cycles,
for
me
reduces
the
boilerplate.
I
then
have
these
standalone
child
elements,
which
have
public
methods
that
you
can
call
directly
from
parents.
You
can
do
call
backs,
and
you
can
also
emit
events,
but
I
would
be
quite
sparing
with
events,
because
events
can
be
difficult
to
debug.
You
can
have
something
spread
out.
An
event
gets
caught
here
through
another
event,
and
it
goes
into
a
loop
and
stuff
like
that.
D
So
don't
use
events
as
much
as
you
would
use,
say,
methods
and
callbacks
and
yeah.
I've
mentioned
what
the
the
container
does.
So
the
next
thing
is
like
so
you've
bought
this
thing.
How
do
you
deploy
it?
Well,
it's
static.
You
can
you
can
host
it
anywhere
the
static
hosting?
I
would
also
look
into
maybe
bundling
and
transpiling,
because,
as
you
can
see,
there's
lots
of
js
files.
They
all
have
to
load
yeah.
They
do
cache,
but
bundling
helps.
So
you
might
want
to
look
at
the
webpack
or
parcel
plug-in
for
snowpack.
D
Then
the
next
thing
would
be
to
look
into
progressive
web
applications.
So
what
you've
seen
here,
kind
of
gets
you
most
of
the
way
there.
If
you
add
a
little
manifest
file,
you've
already
got
a
progressive
web
app,
but
you
might
want
to
look
at
things
like
service
workers,
which
adds
a
caching
layer
and
a
cool
thing.
D
I
discovered
recently
pwabuilder.com,
if
you,
if
you
now
host
this
thing,
you
can
go
to
pwabuilder.com
put
the
url
in
there
and
it
will
generate
an
app
for
you
that
you
can
upload
to
the
app
store
right
and
then
I
showed
you
a
paper
elements,
but
you
can
use
other
stuff.
You
can
use,
for
example,
carbon
design
system.
D
They
also
have
a
complete
web
component
based
ui
toolkit
and
ioniq
also
has
a
complete
web
component
based
ui
toolkit,
so
you've
got
lots
of
options
in
terms
of
building
your
user
interface
and
then
in
terms
of
frameworks.
Like
I've
mentioned
a
lot,
I
didn't
enjoy
the
frameworks
and
stuff
like
that.
Actually,
without
a
framework,
there
are
some
things
that
are
difficult,
so
the
whole
point
of
this
exercise
was
to
ask:
what
does
the
framework
actually
give
you
and
updating
the
ui
when
you
make
state
changes?
D
You'll
understand
that
as
your
app
gets
complex?
Sometimes
that
can
be
tedious
but
honestly
frameworks.
Add
a
lot
of
complexity
just
to
solve
this
problem,
and
I
think
it's
a
trivial
problem.
You
can.
You
can
manually,
update
your
dom
when
the
state
changes,
but
if
you
want
dumb,
diffing
and
stuff,
there's
libraries
to
do
that
for
you
or
you
can
use
the
framework,
another
problem
with
frameworks
and
I've
used
them
a
lot
is
is
that
they
tend
to
go
out
of
date.
D
So
even
my
app
that
I
built
two
years
ago,
I
find
it
hard
to
update
now
because
all
of
that
stuff's
deprecated
right
html
imports
aren't
even
supported
anymore
and
stuff,
like
that.
So
frameworks
come
and
go
so
so
be
careful
about
just
jumping
into
a
framework
use
it
when
you
need
it
like
use
it.
When
you
understand
the
benefit
it
gives
you
and
the
trade-offs.
D
D
I
haven't
committed
it
yet
so
it's
blank
there
at
the
moment.
But
after
we're
done
here,
I
will
commit
I'll
fix
everything
and
commit
it.
And
then
please
read
this
article.
If
you
get
a
chance,
it's
a
great
article,
called
web
components
will
replace
your
front-end
framework
it'll
also
be
at
this
url.
So
you
can
check
that
out
and
finally,
for
some
for
some
guidelines
and
things
like
unit
testing
and
all
that
kind
of
stuff.
You
can
look
at
open
web
components,
openwc.org
open
dashbc.org-
and
these
are
my
contact
details.
So
thank.
B
You
great
talk
toby,
I
love
all
of
it.
I
agree
with
you
across
all
of
it.
It's
lots
of
fun
to
work
with
another
javascript.
I
think
a
lot
of
people
are
not
necessarily
honest
about
what
they
need
their
front-end
code
to
do
right,
you
just
yeah.
By
and
large,
you
need
to
change,
css
classes
and
take
input
and
save
it
in
a
database
somewhere
yeah.
D
I
think
you'll
be
surprised
that
a
simple
solution,
like
just
breaking
your
your
components
up
into
a
parent
and
children,
that
that
sort
of
do
it
to
do
this
sort
of
architecture
is
something
that
you
can
just
apply
over
and
over
again
and
no
matter
how
complex
your
app
gets.
This
is
just
a
simple
pattern
you
can
repeat,
and
it
works.
B
B
D
Sorry,
how
well
does
this
scale
with
sizes,
so
I'm
pretty
confident
with
it,
because
I've
recently
built
quite
a
big,
complex
app.
It's
not
it's
not
huge
by.
I
suppose
facebook
standards
or
something
like
that,
but
it
is
a
site,
that's
being
used
by
this
african
government.
It's
I
was
hoping
that
it
would
be
live,
so
I
could
show
you
it's
a
fairly
complex
app,
but
it
was
built
using
exactly
this
method.
Nothing
more
and
it
actually
scales
pretty
well
cool.
D
That
is
a
good
question
I
haven't
actually
tried.
I
I
think
you
have
to
pass
it
a
class
if
I'm
not
mistaken,
I've
always
just
used
classes.
I
also
find
that
the
classes
are
important
because
you
maintain
your
state
inside
the
class,
so
I'm
not
maintaining
state
inside
my
dom
elements,
although
you
could
but
remember
sometimes
you
re-render
your
dom,
but
you
don't
lose
your
state,
so
the
state
is
actually
inside
that
class
as
as
class
variables
and
sometimes
if
it's,
if
it's
like
a
state,
that's
related
to
the
dom.
D
D
I
believe
so,
I'm
just
not
sure
about
edge
edge
is
always
an
edge
case,
but
so
that
we've
the
the
app
that
I've
built
that
I
told
you
that
I
built
that
went
into
production
used
this
methodology
and
it
worked
pretty
much
in
all
browsers,
except
edge
and
because
I
don't
have
edge
to
test
with,
I
wasn't
able
to
get
to
the
bottom
of
it.
I'm
not
sure
I
think
it's
it's
supported,
but
it
might
be
that
I've
used
something
that's
not
working
in
it,
but
it
works
in
safari.
B
D
One
advantage
of
of
using
angular's
is,
you
might
find
components
that
angular
has
that
you
want
to
use
in
your
app
that
there
aren't
web
components
for,
and
you
don't
build
from
scratch.
I
found
these
paper
elements
to
be
really
high
quality
and
they've
been
around
for
a
long
enough
time
that
I'm
confident
that
I
can
build
most
of
my
apps
using
it.
The
other
aspect,
of
course,
is:
are
you
looking
for
a
job
like?
Do
you
want
to
work
for
a
company
that
uses
angular?
Then?
Then?
D
Maybe
you
want
to
do
that,
because
if
you
don't
use
angular
or
react
and
you
go,
you
just
use
this
method
and
then
they're
like
oh
we're
looking
for
angular
developers,
then
you
know
that
might
disadvantage
you.
So
I
think
it's
in
everyone's
interest
to
sort
of
learn,
or
at
least
try
out
all
the
different
frameworks
and
understand
how
they
work
so
that
you
can
at
least
put
it
on
your
cv
as
well.
D
I
would
not
do
that.
I
would
probably
start
a
new
project
with
with
this
method,
I
would
even
suggest
like
try,
building
a
side
project
or
something
just
so
that
you
get
your
feet
wet
too
and
try
and
understand
it.
I
mean
that
was
my
intention
with
this
whole
thing
right,
I'm
not
suggesting
that
you
throw
everything
out,
and
this
is
the
way
you
develop.
D
I'm
saying:
try
it
out
so
that
you
get
a
better
understanding
of
how
web
browsers
work,
what
they
can
do
and
then
make
an
informed
choice
right
you,
you,
probably
still
choose
a
framework
because
that's
what
they
use
at
work
or
it's
a
project
that
you're
already
busy
with
or
you.
You
know
you
have
some
components
that
you
want
to
use
that
are
only
supported
in
one
of
those
those
frameworks,
but
it's
all
about
learning
and
understanding
and
and
choosing
if
it
makes
sense.
D
I
I'm
not
sure
to
be
honest,
like
a
couple
of
weird
edge
cases
like
that
right,
like
like
script,
can't
be
a
self-closing
tag,
but
like
input
doesn't
even
need
a
closing
tag.
You
know
there's
a
couple
of
weird
things
that
I
kind
of
just
close
it
anyway,
but
I
don't
think
it
can
be
a
soft
closing
tag.
To
be
honest,.
B
D
B
D
B
D
D
Yeah,
I
was
expecting
that
question.
So
if
you
go
to
openws
opendash.dc.org,
they
give
you
some
guidelines
on
how
to
do
ui,
testing
or
testing
of
these
components.
My
personal
philosophy
is:
if
I'm
writing
a
ui
framework,
I
would
bother
to
to
do
the
testing,
so
I
would
get
a
for
example,
a
selenium
style
test,
which
would
you
know,
render
the
component
and
check
its
dom
against
some
acceptable
standard.
But
when
I'm
building
custom
apps
most
of
my
tests
are
visual
from
the
ui
side
and
the
things
that
I
really
need
to
test.
D
Like
the
the
you
know,
maybe
it's
a
calculation
or
something
like
that
that
can
be
extracted
into
a
function
that
can
be
tested
independently.
So
most
of
the
stuff
that
I
need
to
unit
test
are
things
that
are
non-ui
related
or
can
be
tested
independent
of
the
ui.
So
that's
kind
of
how
I
work
but
go
check
out
openwc.org.
If
you
want
to
see
other
methods.
D
Yeah,
so
I
think
that's
a
good
one.
There's
a
couple
of
methods
right
so
usually,
if
you
need
a
state
to
be
propagated
a
long
way
through
this
tree
it
it
can
either
either
be
something
that's
global
that
that's
been
my
experience.
It's
usually
something
that's
global.
So,
for
example,
I've
got
a
global
error
handler
or
a
global
progress
bar,
and
every
component
wants
to
tell
that
global
element.
Okay,
do
this
or
do
that
now
the
two
ways
of
doing
that
one
is
you:
can
you
can
do
a
global
event?
D
For
example,
you
can
go
on
to
the
document
element
itself
and
you
can
fire
a
custom
event,
and
then
anyone
can
listen
for
it.
That's
one
way
to
do
it,
but,
like
I
said
I
wouldn't
use
events
very
like
I
wouldn't
jump
to
using
events,
because
it
can
get
you
stuck
in
weird
situations.
The
other
way
to
do
it
is
is
just
set
it
as
a
variable
on
the
window
element.
If
you
want
to
like,
I
create
a
window.app
and
the
window.app,
I
can
go
into
my.
D
D
You
can
drill
all
the
way
down
this
tree
and
you
can
go
and
query
each
element
and
you
can
see
you
know
its
properties,
which
you
can't
do
in
some
other
other
frameworks,
because
they
have
virtual
doms
and
stuff
like
that.
So
you
have
full
power
right
there
in
your
browser
and
you
can
you
can
do
that.
And
so,
if
you
write
the
code
there,
you
can
copy
and
paste
that
straight
into
your
into
your
main
thing
and
and
it
would
work
so
yeah
use
use,
use
a
global
scope
on
the
window.
D
D
I
can
call
a
render
on
a
child
and
by
the
way
I
I
didn't
mention
it
earlier,
but
I
would
stay
away
from
using
attributes
like
attributes
can
only
be
strings
anyway
and
trying
to
manage
the
change
capture
capturing
the
change
of
attributes
using
you
know,
observed,
attributes
and
stuff
like
that,
gets
very
tricky
and
I
haven't
used
attributes
at
all
in
in
except
for
static
attributes.
I
haven't
used
attributes
like
dynamic
attributes.
In
my
application,
I
tend
to
just
use
methods
and
method,
calls
and
set
properties
and
read
properties
directly
from
the
class.
B
So
thanks
for
the
really
really
cool
talk
toby,
so
I
think
to
to
just
close
out
some
proceedings.
We
we're
going
to
be
back
next
month,
obviously,
and
if
anybody
has
any
burning
desire
to
submit
a
talk
or
wants
to
try
the
handed
speaking
or
has
some
great
ideas
please
reach
out
to
us,
we've
got
the
form
that
jerry
posted
earlier.
That's
in
the
link
somewhere
down
here,
yeah
and
stay
safe,
stay
warm
and
we'll
see
you
next
month
cheers
everybody.