►
Description
Recording of SPFx and JavaScript development in SharePoint Community Call from 31st of January. Topics include updates from SharePoint engineering on SPFx, latest on PnP JS Core, Office 365 CLI, Reusable SPFx controls and PnP SPFx Yeoman extension.
Detailed covered content from SharePoint Dev Blog at http://aka.ms/spdev-blog.
Demos:
- Yannick Plenevaux – How to use Office - UI Fabric panels in your SPFx solutions?
- Andrew Connell – Simplify SPFx - Testing config with Jest Presets
You can download an invite to this bi-weekly call from https://aka.ms/spdev-spfx-call.
A
Hello
and
welcome
to
the
SharePoint
framework
in
JavaScript
special
interest
group
bi-weekly-
sync,
it
is
January
31st
2019
already
one
month
down
in
2019.
Time
is
just
flying:
let's
go
ahead
and
get
started
with
our
meeting
today.
As
always,
we
start
with
a
quick
description
for
folks
that
might
be
new
to
the
call
or
new
to
watching
the
recordings
that
what
is
this
call
all
about?
Well,
we
are
part
of
the
larger
SharePoint
patterns
and
practices
program,
and
this
call
was
set
up.
A
The
focus
on
SharePoint
framework,
the
PJs
library
is
the
office
365
CLI,
the
reusable
controls
and
the
community
yeoman
generator,
because
we
just
didn't
have
enough
time
and,
for
example,
the
monthly
calls
to
really
cover
out
on
all
the
topics
we
really
wanted
to
review.
So
we
started
these
special
interest
group
calls
and
we
got
in
this
was
the
first
and
we
also
have
on
alternating
weeks
a
powershell
and
see
ssam
call
so
real,
free,
of
course,
to
join
both
or
either
of
those
calls.
A
We
always
appreciate
everybody
attending
the
calls
and
getting
the
great
feedback
from
the
conversation
here.
Two
links
down
there
at
the
bottom.
Aka
MSS,
P,
P
and
P
community
will
take
you
to
the
SharePoint
section
of
the
Microsoft
tech
community.
It's
a
great
place
to
ask
general
development
questions,
things
that
are
not
necessarily
related
to
any
of
the
particular
libraries
that
might
be
more
architectural
or
more
design
related
or
more
just
sort
of
general
questions,
so
tech
community
a
great
place
for
that
second
link.
A
There
akms
SP,
dev
Doc's,
takes
you
to
the
all
up,
SharePoint
developer
documentation,
so
that
includes
all
of
the
seesaw
manage
code.
Wsp
deployment
documentation
as
well
as
the
docs.
If
you're
looking
to
get
started
with
SharePoint
framework,
you've
got
all
the
tutorials
there
and
then
sorry
folks,
folks
can
see
the
slides
looks
like
some
folks
can.
If
you
can't
see
the
slides,
maybe
drop
and
read
your
sometimes
that
helps
so,
hopefully
folks
are
seeing
those,
and
so
the
documentation
is
the
all
up.
Sharepoint
developer
documentation.
A
So
if
you
see
gaps
see
holes,
please
report
that
there
should
be
links
there
for
reporting
issues
or
making
comments
right
on
the
documentation
is
a
great
way
to
do
that
and
then
so
no
audio
I
feel
like
some
folks.
Can
hear
me:
okay,
yep,
okay,
great
just
get
nervous,
so
I
think
we've
covered
out
that
slide,
so
our
agenda
for
today
I've
got
the
engine
up
date
on
SharePoint
framework.
As
always,
we
got
our
patterns
and
practices
program
updates.
A
So
the
four
area
is
there
and
then
we
got
two
great
demos,
the
first
from
Yannick
on
how
to
use
office,
UI
fabric
panels
and
your
SPF
X
solutions,
very
cool
demo,
and
then
andrew
has
a
simplifying
SPF
X
testing
with
jest
presets
another
great
demo,
showing
two
fantastic
capabilities.
You
can
start
using
in
your
project
so
excited
to
see
those
later
in
the
call
and
then
likely
we'll
have
a
little
bit
of
time
for
Q&A.
A
A
If
you
have
something
cool,
you're
working
on
you'd
like
to
demo
it
whether
it's
a
SharePoint
framework
demo
that
could
be
a
web
part,
an
application
customized
or
something
around
provisioning-
something
you
might
have
created
around
you
know
really
anything
SPF,
X
and
then
and
of
course,
anything
involving
any
of
the
at
PNP
way
of
libraries,
so
p.m.
PJs,
the
CLI,
the
reusable
controls
or
the
community
yeoman
generator,
and
then
any
combination
of
these
things.
A
So
using
those
things
inside
SPF
X
at
such
a
love
to
see
those
demos
love
to
see
what
folks
out
there
in
the
community
are
coming
up
with
it's
really
exciting
and
I,
know
and
I've
said
it
before
and
will
continue
say
it
I
think
it's
one
of
the
most
valuable
parts
of
these
calls,
because
I
I
always
learned
something
new
from
the
demos
and
hopefully
you
all
do
as
well
other
ways
to
get
involved,
contributing
on
github.
You
got
AZ
report
issues,
submit
pull
requests
and
help
as
well
with
issues
and
questions.
A
You
know
somebody
just
being
upset
with
one
of
the
libraries
and
one
of
the
controls
or
something
like
that
and
us
not
hearing
about
it,
so
appreciate
all
that
feedback
and
then
in
general,
always
appreciate
feedback
on
the
calls
the
documentation
needs.
In
other
other
ways,
we
can
generally
improve
the
patterns
and
practices
program.
So
I
will
always
say
it's
not.
A
We
can't
always
act
on
every
piece
of
feedback
immediately,
so
please
don't
get
discouraged
if
you
give
us
some
feedback
and
we're
not
able
to
change
things
right
away,
but
we
do
definitely
take
all
that
feedback
to
heart.
We
definitely
talk
about
that
feedback
in
the
team
and
we
do
our
best
to
adjust
the
program
and
adjust
what
we're
doing
to
better
fit
everybody's
needs.
So
we
appreciate
that
feedback
and
it
really
drives
what
we
do
and
drives.
You
know
how
we're
trying
to
grow
the
program.
B
When
you're
traveling
is
a
different
computer
than
color
okay,
so
so
let's
actually
get
moving
on
this
one.
So
if
you
know
updates
so
just
to
recap
on
our
resources,
SharePoint
document,
okay,
this
SP
abducts
sharepoint
of
videos
where
this
recording
will
be
provided
as
well.
So
if
you
don't
have
time
to
watch
the
whole
thing
live
or
you
want
to
go
back
and
watch
any
of
the
previous
demos
community
most
or
compare
recordings.
B
Everything
is
available
in
here
just
and
chip
on
their
issues
for
anything
related
on
sharepoint
developments,
api's
things
which
might
run
into
in
on-premises
or
sharepoint
online,
now
a
few
things,
but
I
wanted
to
actually
go
to
run
from
a
sharepoint
framework
perspective.
First
of
all,
just
a
reminder
for
everybody:
we
do
have
this
updated,
chiffon
framework,
developer
training,
but
it's
available.
I
will
we
schedule
promotions
on
this,
one
in
in
the
sharepoint
and
office
staff,
twitter,
tweets
and
social
media
later,
but
just
a
reminder
on
this
one.
B
This
is
a
great
resource
with
the
videos
and
hands-on
labs
and
demo
material.
If
you
want
to
learn
for
yourself
or
if
you
want
to
deliver
a
training
for
every
anybody
else,
so
it
includes,
for
example,
and
what
you're
related
on
using
works
of
craft
and
third
party
API
switch
open
framework
or,
if
you're,
just
looking
into
getting
started
guidance
and
how
do
what
does
the
sharepoint
framework
actually
means?
And
there
is
a
great
videos
and
guidance
on
that
one
as
well.
A
came
SSP
FX
training
is
the
is
the
URL.
B
We
will
most
likely
update
that
a
KMS
at
rest
at
some
point,
when
we
can
create
a
more
let's
say,
fanciers
starting
point
for
the
training
package.
Now
we
have
already
plans
for
improving
this,
so
it
will
be
extended
by
three
additional
modules
which
are
currently
in
development,
and
those
modules,
for
example,
include
the
specific
module
on
creating
microsoft,
teens
tabs
using
sharepoint
framework,
because
that's
one
of
the
things
which
will
GA
go
general
availability
relatively
soon
so
within
weeks,
rather
than
in
months
as
far
as
1.8.
B
Please
now
moving
on
things,
quick
updates
on
things
just
showing
you
the
the
metrics
as
well.
We
are
one
big
milestone
earlier
today,
which
is
a
great
thing
which
I
I
can't
really
share
the
exact
numbers,
but
the
growth
is
unheard
of.
So
this
is
we
at
this
point.
We
have
no
way
of
even
predicting
what
will
be
the
end
result
within
this
calendar
year,
because
the
the
growth
is
exponential,
as
you
can
see,
from
the
user's
chart.
So
this
is
basically
showing
the
third-party
SPF
X
usage
in
SharePoint
Online.
B
You
can
see
the
Christmas
impact.
Obviously
there
was
a
massive
dip
on
the
on
the
Christmas
and
holidays,
which
is
completely
understandable
and
then
after
holidays,
it's
back
on
track
on
that's
a
exponential
growth
and
it
just
how
would
I
put
this?
We
have
never
seen
this
kind
of
a
growth
on
any
development
Moodle
in
our
sites,
so
people
are
adapting
SharePoint
framework
and
that's
also
actually
one
of
the
reasons
why
we're
now
looking
into
extending
the
SharePoint
framework
usage,
obviously
because,
clearly
you
as
a
developer
and
the
community
is
gonna
impress
this
model.
B
It
has
taken
a
while
for
people
to
accept
that
it's
a
new
model.
If
you
come
from
a
farm
solution
site
and
it's
it
does-
has
a
learning
curve,
but
after
you
learn
that
you
are
no
longer
specific
developer
for
SharePoint,
so
you
can
actually
do
development
in
any
other
industry
standard
ways
of
doing
web
stack
development
and
now
we're
kind
of
extending.
B
Then
the
SharePoint
framework
development
also
the
marks
of
teams
so
creating
lots
of
teams
tabs
using
SharePoint
framework,
but
not
only
that
so
and
that's
the
one
thing
what
I
wanted
to
actually
talk
about
today
as
well
after
the
road
looks
like
now
in
1.8.
I
cannot
give
you
the
exact
dates,
because
I
don't
want
to
promise
you
a
date
which
might
still
sleep
so
at
this
point
we're
looking
into
sleeping
for
a
few
days
or
one
week.
So,
but
it's
it's
it's
coming
relatively
soon,
so
we're
talking
about
1.8
release
to
ring
this
quarter.
B
This
quarter
means
by
end
of
March,
so
we're
basically
gonna
release
1.8
within
weeks
rather
than
in
a
months,
and
that's
gonna
then
contain
a
general
availability
of
max
of
team's
development,
which
happened
framework.
It's
kind
of
contained,
a
single
part.
At
page,
you
support
isolated
reports
and
provided
hosted
solutions
in
SharePoint
site.
So,
if
you
have
a
team's
application,
you
can
actually
run
them
in
SharePoint
site
now,
other
bubbling
under
which
we
are
currently
and
then
planning
already,
because
1.8
is
is
looked
already.
B
Of
course
we're
not
gonna
shut
down
things
by
a
snap
of
a
finger,
but
we
obviously
the
SharePoint
framework
is
the
future
of
the
SharePoint
development,
so
we're
looking
into
now
than
enabling
SharePoint
framework
in
store,
enabling
is
this
or
system
integrators
or
a
smaller
companies
to
actually
provide
their
services
and
customizations
from
a
centralized
marketplace.
So,
basically
she
open
store
or
app
source
or
both
in
this
case
and
there's
a
interesting
set
of
plans.
B
This
now
SharePoint
framework
library
package
supporting
third-party
developers
is
under
development,
actually
as
a
person
which
a
room
I
stole
today,
and
it's
not
actually
working
here
to
this
week.
So
he's
working
on
that
one
currently
and
then
the
interesting
thing
here
is
the
last
bullet
point
so,
and
this
is
something
which
want
to
have
your
input,
and
this
is
why
I
requested
people
to
call
I
hinted
on
the
future
direction
on
SPF
X
in
in
Twitter
as
well.
B
So
what
if
you
could
implement
office
client
audience
using
SharePoint
framework,
so
we
aren't
releasing
the
Mike's
of
teamstepps
development
using
a
SharePoint
framework
as
1.8.
So
now
we're
looking
into
potentially
have
at
least
a
preview
of
the
office
earnings
development
using
SharePoint
framework
in
1.9
and
again
I
can't
give
you
an
exact
date
but
I.
B
You
can
estimate
that
1.9
comes
out
on
a
second
quarter
of
this
calendar
year
and
that's
actually,
then
that
what
it
means
is
that
well,
the
SharePoint
framework
is
no
longer
than
specific
on
SharePoint
framework,
and
this
was
one
of
the
slides
which
I
had
in
my
presentation,
graphics
and
then
somebody
already
jumped
on
Twitter
saying
at
some
point.
What
do
you
mean?
Are
you
really
renaming
SharePoint
framework?
Well
we're
looking
into
that
potentially,
because
Shepherd
framework
is
being
used
not
just
in
SharePoint,
so
it's
gonna
be
then
renamed
for
something
else.
B
B
So
when
you
run
a
SharePoint
framework
whatever
that
would
be
call
at
that
point,
let's
call
it
patchwork
framework
that
probably
would
be
good
Patrick.
So
so,
whatever
you
run,
the
yeoman
generator
you've
been
then
asked
whether
you
want
to
surface
and
this
customization,
and
that
will
then
make
sure
that
it's
it
has
the
right
settings,
so
you
can
actually
then
choose.
Is
it
a
SharePoint
web
part?
Is
that
amount
of
teams
web
part?
B
So
you
would
use
the
exact
same
development
experience
across
all
of
this
platforms
and
now
to
ask
what
I
would
have
for
this
one.
It's
actually
collect
your
input
on
this
one.
So
I
do
have
a
quick
survey
if
you
would
have
time.
So
this
is
like
three
to
five
minutes
max.
It
is
basically
select
all
you're
interested.
Does
it
sound,
interesting
and
then
few
free
text
boxes,
which
we
would
appreciate
your
input
on
basically
asking
Stan
as
well.
B
It
I'm
just
curious
them,
no,
never
mind
okay,
but
so
please
give
us
feedback.
There
was
also
no
that's
already
comments
in
I
window.
A
lot
of
those
could
be
actually
added
on
the
server,
so
we
get
them
stored
because
me
going
through
the
video
after
this
is
the
recording
and
then
collecting
the
team,
but
from
the
ion
window
is,
is
relatively
hard
on
and
whatever
the
naming
by
the
way
will
be
that,
let's
let
the
marketing
people
to
decide
that.
So,
let's
see
how
that
actually
goes,
but
please
answer
the
survey,
its
release.
B
B
A
A
But
that's
why
I
don't
need
it
to
answer
your
question:
yeah
interrupting
and
well
now.
Here
we
are
yeah
PP,
client-side
libraries.
This
would
be
a
quick
update
through
the
parts
of
the
P
and
P
programs,
so
the
PP
j
s
client-side
libraries,
a
quick
update
here,
we're
doing
the
one
nine
release
that's
scheduled
for
next
Friday.
The
beta
releases
continue
generally
on
Fridays,
but
sometimes
middle
of
the
week.
A
Yet
I've
got
some
some
ideas,
I'm
working
all
that
I'm
excited,
hopefully
to
share
with
everybody
soon,
but
not
quite
ready
to
share
them
yet
definitely
want
to
encourage
folks
feedback
on
the
the
issues
list.
So
we've
got
some
items,
tagged
there
or
labeled
there,
as
roadmap,
so
really
encourage
you
get
your
feedback
there.
We
want
to.
You
know
major
releases
so
like
going
from
102.
2.0
is
a
real
opportunity
to
make
some
big
changes
to
the
library
and
some
big
changes
to
the
structure
of
the
library.
A
A
Every
time
we
talk
about
this
I
get
I
know
exactly
what
everybody
is
going
to
say,
but
I
want
to
preface
all
that
with
the
idea
that
that,
just
because
to
ATO
doesn't
support
ie11
doesn't
mean
that
the
one
dot
X's
go
away.
Those
are
still
there
and
would
be
usable
for
folks
that
have
that
supports
profile
that
they
need
or
required
to
do.
So
it's
not
the
end
of
the
world
and
we're
also
realistically
at
least
I'd,
say
six
months
from
2.0
coming
out
and
then
generally
in
the
past.
A
We've
supported
continue
to
support
prior
versions
for
at
least
another.
You
know
three
to
six
months,
so
you
know
it's
another
year
of
support,
at
least
for
the
1x
stuff,
if
not
longer
so
don't
freak
out,
but
do
start
to
think
about.
There
will
come
a
day
when
ie
11
is
no
longer
supported
across
office.
365
so
start
to
think
about
that
a
little
bit
now,
just
sort
of
mentioning
that
out
there
and
then
I
want
to,
of
course,
always
thank
everyone
again.
A
Thank
you
to
all
the
contributors,
we're
getting
some
great
feedback,
great
issues
and
great
pull
requests
from
everybody
out
there
in
the
community.
So
very
much
appreciate
all
of
that
from
folks
link
down
there
at
the
bottom.
Pnp
github
got
I
of
/p
and
pjs
gets
you
the
documentation
for
all
the
PMP
J's
libraries,
and
you
can
follow
the
hashtag
p.m.
PJs
on
Twitter
and
love
to
get
your
feedback
and
things
there
updates.
Now
on
the
office
365
CLI,
a
new
beta,
was
released.
A
113
zero
with
commands
for
getting
list
views
getting
list
site
scripts
listing
sites
associate
with
hub
sites
and
support
for
SPO
D
in
progress
are
some
more
commands,
of
course,
but
this
is
also
a
place
in
the
CLI
great
place
to
contribute.
Each
of
the
commands
is
fairly
atomic
to
write.
You
don't
have
to
learn
necessarily
all
the
details
of
every
other
command,
so
a
great
way
to
contribute
there
and
as
well
wall
deck
and
the
folks
who
contribute
and
help
out
there
are
very
interested
in
hearing
what
commands
would
be
helpful
to
you.
A
So
I
very
much
want
to
hear
that
feedback
as
well.
You
can
always
install
the
latest
beta
from
NPM
install
G
at
P
and
P
slash
office.
365
CLI
at
next
always
gets
you.
The
latest
beta
you
can
find
more
information
at
a
kms
through
65
CLI
will
take
you
to
the
documentation
and
other
resources
to
help
you
get
started
as
well.
There
is
a
git
er
channel,
gator,
IM,
slash
office,
365
CLI
and
the
hashtag
office
365
CLI
on
twitter
is
what
you
can
follow
for
the
latest
updates
on
the
CLI.
A
Excuse
me
updates
around
the
reusable
SPF
X
controls.
There
are
just
a
reminder
to
separate
packages,
a
package
of
property
controls,
property
controls
are
used
in
the
Edit
pane
of
your
webparts
and
those
allow
you
to
have
a
very
rich
editing
experience
and
then
the
content
controls
are
used
in
the
body
of
your
webparts.
A
To
give
you
a
very
nice
and
rich
presentation
experience
both
of
these
libraries
are
styled
with
the
office
UI
fabric,
so
you're
gonna
get
a
very
nice
out-of-the-box
integrated,
look
with
your
controls
and
it's
gonna
save
you
a
ton
of
development
time
on
both
your
application,
customizers
and
your
webparts
and
your
web
part
edit
panes.
So
really
take
a
look
at
these.
A
If
you
haven't,
if
you're
doing
a
SharePoint
framework
development
lot
of
great
stuff
in
there
lots
of
great
capabilities
to
really
enhance
the
the
projects,
you're
writing
and
to
bring
some
extra
capabilities
there
without
you
having
to
roll
that
functionality
yourself
and
then
some
recent
highlights
property
field,
Enterprise
term
picker
control,
there's
a
map
control
which
is
very
cool,
uses
a
map
you
can
obviously
enter,
coordinates
and
show
different
things
of
the
map,
a
chart,
control
and
a
constant
improvements
to
the
existing
controls.
And
again
all
of
that
I
keep
harping
on
this.
A
A
Add
an
issue
to
the
SharePoint
github
repository
issues
list
and
that's
the
kind
of
feedback
that
Elio
and
the
folks
working
on
those
things
really
love
to
hear
and
would
encourage
you
to
submit
your
feedback
there
and
you
know
we'll
definitely
absolutely
see
what
we
could
do
to
get
that
added
in
so
more
information,
sharepoint,
github,
io,
/,
SP,
dev,
FX,
property
controls
and
then
controls
react
gets
you,
the
property
controls
and
the
Konkan
content
controls
respectively.
So
that
would
be
the
documentation
for
those
and
getting
started
there.
A
Okay,
cool
in
that
case,
so
for
those
of
you,
this
is
one
of
the
newer
additions
to
the
PNP
family
of
solutions
for
SPF
X,
and
this
is
an
open
source,
yeoman
generator
that
has
been
developed
again
as
part
of
the
the
program
here.
It's
built
on
top
of
the
out-of-the-box
SharePoint
framework,
yeoman
generator.
A
So
if
you
use
this
generator
you're
going
to
get
a
standard,
SharePoint
framework
project
with
all
the
same
dependencies
and
all
the
same
backing
code,
but
with
a
few
extras
added
in
on
top,
so
you
have
the
some
enhanced
choices
around
frameworks
to
use
for
example.
Example,
handlebars,
angular,
elements
of
UJS,
so
so
those
are
some
ones
not
included
in
the
standard,
SharePoint
framework
generator
and
then
as
well.
You
have
some
additional
configuration
options.
You
can
add
in
the
PJs
libraries
and
just
with
the
new
release,
one
six,
one
that
just
came
out
I.
A
Think
yesterday,
the
day
before,
there's
now
just
just
testing
framework
support
for
the
no
framework
projects,
as
well
as
a
new
command
that
gets
added
in
to
the
the
set
of
available
gulp
commands,
gulp
dist
that
handles
kind
of
rolls
up.
Those
multiple
commands
you
generally
had
to
run
for
production
builds
so
bundling
and
packaging,
and
so
forth
is
now
rolled
up
into
that
gulp
dist
command
and
as
well,
some
of
the
dependent
or
some
of
the
packages
you
can
choose
to
add,
updates
on
view
handlebars
and
then
as
well.
A
So
the
I've
got
this
a
typo,
so
I've
got
SPF
X
property
controls
there
twice
the
property
controls
and
the
conch
content
controls
have
been
updated
to
the
latest
version.
So
apologies
for
that
typo.
That's
my
fault
on
that
and
then
in
prod
in
progress.
What
what's
being
worked
on
is
adding
features
to
existing
projects,
so
the
ability
to
come
back
with
this
yeoman
generator
for
projects
and
add
in
things
like
that,
gulp
disk
command
or
the
jest
support
to
your
existing
projects
that
may
or
may
not
have
been
created.
A
A
C
Thank
you
so
just
a
little
bit
of
introduction
before
so.
My
name
is
Sandeep
and
oh
I'm,
fine
enough
this
v65
architect,
I
recently
founded
my
company,
so
I'm
doing
more
and
more
Sherpa
in
love,
physics
5,
but
I
really
like
to
do
so.
It's
good.
The
my
demo
today
is
about
using
official
fabric
panel
within
a
sharepoint
framework
solution
and
more
especially,
within
this
view,
comments
and
extensions.
So
a
panel
in
official
fabric
is
a
component
that
you
can
use.
C
It
is
a
react
component,
so
you
have
to
react,
set
up
in
your
solution
and
you
can
use
it
and
to
display
this
kind
of
thing
like
here.
You
can
see
on
the
official
forum
Rick
site
so
for
small
I
will
show
you
how
it
is
down
in
webparts
or
in
a
regular
webparts
solution.
It's
really
really
easy
to
do
so,
yeah
what
part
in
the
workbench
and
when
I
click
the
open
panel
open
button
opens
a
new
button.
I
have
a
panel
showing
up
so
in
the
code.
C
It
looks
like
this,
so
that's
good,
my
what
part
so
I
have
a
react
component
here
in
the
render
method.
I
have
the
things
that
displays
in
the
word
path
and
I.
If
the
panel
here,
okay
and
the
this
open
probability
of
the
panel
actually
tells
the
pound
was
a,
it
should
go
or
or
hide
so
when
I
click
the
button
and
it
calls
the
open
panel
method,
update
the
state
of
the
rear
component
and
the
sharpener
property.
C
So
we
execute
the
render
the
method
and
display
panel
because
the
show
panel
property
is
set
to
true.
It
is
the
react
component
in
the
the
class
of
the
work
part
itself.
It
is
I'll
just
render
the
the
the
react
component,
so
it
it
sent
she
ate
component
and
then
called
the
reactive
render
method.
With
the
element
instance
and
the
Tama
element,
the
element
in
the
Dom,
the
the
react
component
will
be
inserted
in
so.
C
If
you,
for
example,
like
this
I,
have
a
list
here
simple
and
when
I
select
an
item,
I
have
a
comment:
I
command
a
comment
in
the
ribbon
here
in
the
in
the
command
bar
really
appearing.
So
if
I
click
the
button,
it
opens
up
the
panel
on
the
side
with
this
full
custom
UI
and
for
custom
business
logic
that
I
would
like
to
implement.
So
here
nothing
really
fancy
just
to
update
the
title
of
the
list
item
when
I
click
the
apply
it
calls
using
the
PNP
ejs.
C
C
That
is,
if
you
come
in
said,
casts
and
when
you,
the
list
view
come
inside
extension.
Actually
you
don't
have
anything
related
to
reacts
because
you're,
not
you,
maybe
don't
want
to
ever
UI
at
all.
So
you
you
don't
have
anything
with
react
or
any
other
framework.
So
the
first
thing
you
have
to
do
is
actually
to
add
the
dependencies
to
the
react
and
also
the
official
fabric
package.
So
in
the
package
that
Jason
here
you
see
that
the
dependencies
I
have
added.
Actually
in
that
case,
I
scaffolded
the
project
pic
with
a
webpart.
C
B
C
C
This
react
component
that
I
have
here
I
added
in
a
component
folder
that
I
created
and
created
a
custom
panel
that
56
file
was
the
custom
panel
react
component
here
and
this
one
actually
it
in
the
render
method
of
the
react
component
as
the
root
component
I
render
a
panel
with
all
the
contents
in
it.
Okay,
and
also
the
is
open
value
that
comes
from
the
component
property.
This
property
I
pass
it
in
here
in
this
case,
so
here
or
here,
and
the
single
bit
I
would
say
each
shree
yellow.
C
It
is
that,
in
the
context
of
a
listview
comments
that
you
don't
have
actually
any
reference
to
a
dominant
in
the
in
the
web
part,
you
would
have
f
here
at
this
stuff,
dumb
element.
But
here
you
see
that
we
don't
have
it
okay
and
we
don't
have
either
place
over
provider
like
we
would
have
in
the
application
customizer
context.
So
we
are
really
in
that
we
have
to
pass
it
in
nature,
element
that
we
created.
C
We
create
to
post
the
the
react
component.
So
how
could
we
do
that?
Simply
because
we
are
in
JavaScript
we
can
do.
We
can
create
a
limb
and
we
can
actually
do
some
kind
of
dumb
injection.
It
is
some
kind
of
a
simple
injection.
Actually
we
are
creating
creating
a
div
element
and
we
append
it
to
the
body
of
the
Dom.
We
keep
the
riff
the
the
reference
to
this
element
and
we
use
it
when
when
we
need
it
in
the
render
method
of
the
reactor.
A
Great
stuff,
very
cool
and
very
great
usage
of
the
office,
you
have
fabric
components
so
really
good
to
see
that,
hopefully,
a
lot
of
folks
can
take
that
example
and
roll
with
it.
A
lot
of
the
components
work
very
similar,
so
it's
a
great
way
to
get
started
with
any
and
all
of
them.
So
at
that
oak
make
Andrew
a
presenter
and
now
I
think
we're
ready
to
switch
over
to
Andrew.
Thank
you
very
much
appreciate
the
demo
you're.
C
D
D
Cool
so
I'm
ugly
across
the
country
now,
alright.
So
thanks
a
lot
for
the
time
today.
Hopefully
we
won't
take
up
the
entire
20
minutes
that
we
have
here,
but
I
guess
this
is.
This
is
Andrew
Connell
I
got
some
contact
information
about
me
there
on
the
slide
and
I'm
going
to
talk
to
you
a
little
bit
about
testing
in
the
SharePoint
framework
coming
to
you
from
absolutely
cold
Florida,
where
it's
actually
colder
here
than
it
is
in
Alaska
all
right.
D
Why
I
like
it
so
out
of
the
box,
the
SharePoint
framework,
yeoman
generator
scaffolding-
is
going
to
generate
your
project
in
the
project
that
you
get
is
really
going
to
be
initially
to
work
with
mocha
and
chai,
which
mocha
is
a
test
runner
and
test
library
that
you
can
use
to
write
unit
tests
and
chai
is
an
assertion.
Library
kind
of
goes
hand
in
hand.
D
You
think
mocha
and
chai
is
the
tea
and
coffee
and
anyway,
so
the
way
that
this
is
how
things
were
when
they,
when
sharing
framework
originally
shipped
and
when
it
first
came
out
I,
want
sympathy,
Stephanie
the
the
way
that
things
originally
shipped.
We
were
using
these
these
tools
primarily
for
testing
internally
Microsoft
they
actually
switched
over
and
they
use
a
different
tool.
D
It's
a
slow
process
to
get
your
tests
going
and
on
a
default,
SharePoint
install
on
a
relatively
new
laptop
pass
machine
and
on
an
out-of-the-box
experience,
you're
outta
box
project.
It
could
take
up
to
10
seconds
just
to
get
your
first
test
to
start
running
so
that
that
was
a
little
too.
That
wasn't
really
a
great
experience
for
me.
So
I
was
trying
to
find
something.
That's
be
a
little
bit
faster
and
there's
another
tool
out
there.
Another
testing
tool
out
there
called
jest,
which
is
by
the
Facebook
team.
It's
originally
done.
D
It
was
originally
done
for
those
of
us
who
are
working
with
web
pack,
but
it
works
or
something
out
web
pack
with
react,
but
it
works
just
as
good
with
non
react
projects
as
well.
So
what
I
would
recommend
it
to
try
and
take
that
you
consider
is
to
get
rid
of
mocha
and
chai
for
your
testing
solution
and
your
Java
Script
projects
and
instead
be
couple
them
and
use
Jess
and
then
also
D
couple
your
test
from
the
SharePoint
framework
build
process.
D
Now,
in
order
to
get
this
to
work,
it
does
require
a
little
bit
of
setup
work.
So
let
me
kind
of
walk
through
a
little
bit
of
this
is
and
don't
worry,
I'm
gonna
give
you
the
bad
story
and
then
the
better
story
so
the
way
you're
gonna
do
this.
The
way
you
set
up
your
projects
for
working
with
Jess?
Is
you
get
a
multi-step
process,
so
you
don't
have
to
do
the
very
first
one,
but
to
keep
it
clean.
You're
gonna
want
to
remove
mocha
and
chai,
specifically
the
typescript
type
declarations
from
your
project.
D
You
can
see
that
the
first
line
a
little
code
snippet
you
see
down
there
at
the
bottom,
then
you're
gonna
install
the
gist
tool,
which
is
just
a
little
runtime
utility.
That
includes
not
only
the
test
Runner
and
the
harness,
but
it
also
includes
everything
else
that
you
used
to
get
with
both
mocha
and
chai.
So
again,
mocha
was
a
test
runner
and
a
test
library.
We
get
that
as
two
and
one
and
jest
and
then
chai
was
an
assertion
library.
D
So
when
you
run
your
tests
for
a
test
to
fail,
you
would
have
to
generally
throw
a
an
exception
or
throw
an
error
and
what
an
assertion
library
does.
It
allows
you
to
say
things
like
I
expect
this
variable
to
equal
one,
and
if
it
doesn't
then
write
this
error
message
out
and
then
it
just
makes
it
a
little
bit
cleaner
to
write
your
test.
Just
has
an
assertion
library
in
it
already,
so
you
don't
need
you
don't
need
two
things.
D
You
just
need
the
one
for
everything,
because
we're
using
typescript
and
just
is
by
default.
It
kind
of
expecting
JavaScript.
You
have
to
add
in
a
preprocessor
that
tells
just
to
compile
all
the
typescript
down
to
JavaScript
first
and
then
you're
also
going
to
want
to
install
some
type
declarations
to
making
working
with
the
assertion
libraries
a
little
bit
easier
now.
D
The
last
thing
you
end
up
having
to
do
is
you're
going
to
end
up
creating
some
sort
of
adjust
configuration
and
what
this
does
is
it
tells
you
can
do
all
this
on
the
command
line.
Every
time
you
run
it,
but
that's
a
pain.
So
you
can
create
a
configuration
object
that
lives
either
in
the
package
JSON
file
or
is
going
to
live
in
a
separate
config
file,
and
what
that
does.
D
The
last
thing
you
do
is
that
I
would
recommend
you
do
at
least
is
to
update
your
test
script
that
you
have
in
the
package
JSON
file,
that
you
can
just
run
npm
test,
and
it
will
do
all
the
stuff
that
it
needs
to
run
just
and
to
plug
in
the
configuration
file
and
make
your
life
a
heck
of
a
lot
easier.
You
can
see
there
from
the
code
at
the
bottom.
That's
a
lot
of
stuff
to
do,
though.
D
Now
that's
one
thing
that
we
want
I
wanted
to
look
at,
but
the
next
thing
is
what,
if
you're
going
to
be
using
react.
So
when
you
are,
when
you
want
to
test
your
react
components,
you
generally
want
to
test
the
rendering
of
these
and
when
I
say
rendering
I
don't
mean
like
the
way
it
shows
up
on
the
screen.
I
mean,
let's
see
the
resulting
markup
that
comes
out
that
would
be
rendered
by
the
browser.
D
I,
don't
care
how
its
rendered
I
just
want
to
make
sure
that
the
mark-up
is
correct,
because
well,
that's
really.
The
only
thing
that
I
can
really
test
for
in
a
really
easy
and
fast
way,
just
by
default
includes
something
called
the
react
test
render
and
what
that
is.
Is
it
just
allows
you
to
give
it
a
react
component
and
it
can
render
out
the
component
and
spit
out
the
HTML
and
do
the
test,
for
it
has
a
concept
called
shallow
rendering.
D
So
if
you
have
nested
components,
it's
only
going
to
render
out
the
one
that
you're
telling
it
you
want
it
to
render
so
other
nested
components
inside
of
it
won't
be
rendered
out
as
well.
So
you
don't
get
a
whole
tree.
You
just
test
the
one
that
you're
looking
at
has
a
concept
of
snapshots,
which
is
basically
going
to
say:
here's
where
the
HTML
should
look
like
and
if
it's
not
then
throw
an
error.
Now
this
renderer
is
nice,
but
it's
pretty
simple.
D
D
So
the
OP,
the
identity
object.
Proxy
is
just
saying:
don't
do
anything
with
this,
just
treat
it
as
an
inert
thing,
just
kind
of
bypass
it.
Otherwise
you
get
these
weird
things
that
show
up
all
right.
So
that's
just
some
of
the
other
configuration
you
do
when
you're
doing
your
your
testing
here.
Currently,
it's
turned
into
a
weather
weather
update
in
the
chat.
So
then
you
say
well:
I
want
to
go
on
to
the
next
level.
Here.
D
I
want
to
do
something
a
little
bit
more
with
the
rendering
and
there's
a
company
called
Airbnb
everybody's,
probably
heard
of
it.
What
they
did
is
they
created
a
better
rendering
engine
than
what
we
get
out
of
the
box
in
react,
and
this
engine
is
called
enzyme
and
what's
so
cool
about
this?
Is
that
it's
designed
to
kind
of
sit
on
top
of
the
out-of-the-box
renderer,
but
it
gives
us
a
lot
of
really
cool
capabilities
and
makes
things
a
lot
easier.
D
For
example,
it's
very
easy
to
get
access
to
a
component,
that's
been
rendered
and
then
simulate
the
clicking
of
a
button
and
reacting
to
those
different
events
in
order
to
use
it,
though,
you've
got
to
have
this
other
thing
installed
and
you
guys
may
be
looking
at
this
and
rolling
your
eyes
going.
Jesus
telling
me
all
this
stuff
that
I
have
to
do
to
get
this
to
work.
I
mean
trust.
Me.
Things
are
going
to
get
better
in
just
a
minute.
So
how
do
you
set
up
enzyme?
D
You
know
look
at
all
this
stuff
at
the
bottom
I'm
going
to
install
enzyme
and
I've
installed
the
enzyme
engine
first
and
then
I
have
to
install
an
adaptor,
because
the
engine
works
with
all
versions
of
react,
but
I
might
need
one
for
react.
15
or
I
may
need
one
for
react,
60
and
that's
where
we
have
adapters
to
do
that
and
then
oh
yeah
I'm
in
typescript,
so
I
need
type
declarations.
D
I
need
this
thing
called
enzyme
to
JSON
to
make
snapshots
a
little
bit
easier
and
then
I'm
gonna
need
this
thing
called
a
polyfill
called
the
request.
Animation
frames,
polyfill
RAF!
It's
to
simulate
the
fact
that
there's
a
special
API
in
a
browser-
that's
not
in
the
headless
browsers
that
just
is
using
and
then
I
got
to
go
through
and
set
it
up.
D
All
of
this
stuff
and
you're
going
with
enzyme
and
I
do
that
by
initializing
enzyme
and
then
initializing
the
adapter
and
then
wiring
those
two
together
and
then
go
into
the
configuration
file
and
say:
hey
Jess
when
you
run
go
run
that
setup
file
that
sets
up
enzyme.
It's
a
lot
of
stuff
to
do
and
then,
let's
throw
a
little
bit
more
complexity
onto
it.
There
are
two
different
versions
of
react
that
a
lot
of
our
SharePoint
framework
projects
are
using
today.
D
It
wasn't
until
just
recently
that
the
SharePoint
framework
version
1.7
came
out
that
read
support
for
react
16.
Prior
to
that,
we
were
on
react.
15!
Well,
there's
a
bit
of
a
challenge
here,
because
when
you
look
at
the
tools
that
we
use
for
react,
16,
some
of
those
tools
are
expecting
us
to
use
the
latest
version
of
typescript
which
we're
not
doing
today
in
the
SharePoint
framework.
D
There
was
a
thing
in
the
chat
discrete
minutes
ago,
where
we
may
see
that
change
in
1.8
but,
for
example,
the
TS,
the
typescript
preprocessor,
expects
you
to
be
using
typescript
version
3
and
we're
still
on
2.4.
So
you've
got
all
these
special
versions.
You
gotta
keep
track
of
and
everything
and
it's
a
royal
pain,
but
things
are
easier
alright.
So
this
is
where
the
good
story
kicks
in,
so
what
I've
done
is
I
went
ahead
and
I
created
these
things
called
presets
and
what
it
does
is.
D
These
things
get
expensive,
and
so
you
need
the
profit
to
be
able
to
pay
for
all
the
food
that
these
things
are
gonna
use.
If
you
want
to
learn
more
about
it,
I've
got
a
blog
post.
That
explains
it,
but
here's
the
easy
part
I'm
gonna
do
a
demo
in
just
a
second.
If
you're
not
using
react,
it's
very
simple,
you
just
go
say:
NPM
install
or
in
my
case
I'm
using
yarn
yarn.
D
So
let's
take
a
look
at
this.
So
if
I
jump
over
here
to
my
machine,
what
I've
got
is
a
just
a
standard,
SharePoint
framework
project
that
is
using
react,
so
you
can
see
I'm
using
react.
16
now
notice
a
little
bit
farther
down
that
in
the
dev
dependencies
I
don't
have
any
mention
of
react,
we're
sort
of
just
anywhere
and
in
addition
over
here
in
my
test,
you
see
I'm
using
built
tests.
So
this
is
just
a
standard.
Out-Of-The-Box
SharePoint
framework
webpart
done
as
react.
D
So
what
I'm
going
to
do
is
I'm
going
to
set
this
thing
up
for
working
with
just
and
are
just
preset
that
I've
talked
about
just
a
few
minutes
ago.
So
I'm
gonna
do
that
by
saying
you,
darn,
add
or
NPM
install,
install
jest
and
then
I'm
gonna
install
the
preset
called
jest
preset.
Spf
X
react
sixteen
dash
D
from
across
the
fingers,
and
the
demo
work
just
fine
this
morning
before
the
session.
So
we'll
double-check
it
looks
good.
Now
everything
should
have
been
cached.
It
should
go
nice
and
quick.
D
Once
it's
on
zero
of
2100,
that's
always
fun
there
we
go
the
better
when
the
2100
turns
into
4900
and
then
3300
shut
up.
We're
done
all
right.
So
what
did
that
just
do
to
our
project?
It
did
a
couple
things.
So,
first
of
all,
I
scroll
down
you'll
see
that
I
have
just
installed
and
I
had
this
preset
installed,
and
what
did
that
do
so
under
the
covers
here?
What
that
did?
Is
it
added
in
this
preset
that
you'll
find
right
here?
D
So
this
added
in
this
preset
and
this
packaged
our
JSON
installed
all
the
necessary
dependencies
and
stuff
that
we
needed
in
order
for
this
thing
to
work
alright,
so
it
has
all
the
right
version,
numbers
and
all
the
stuff
that
we
need
for
this
to
work.
It
also
has
the
configuration
here
for
using
this
enzyme.
D
It
even
has
what
my
mouse
co
come
back.
Where
is
my
mouse
come
back
there
we
go
see,
so
we
did
that
and
has
everything
else
all
said
that
you're
gonna
need
with
this
I've
even
gone
through
and
in
these
examples
here,
I've
even
set
up
a
couple
examples
here.
So
if
we
copy
these
guys
copy
and
let's
come
over
to
my
project
and
if
I
go
into
source
and
let's
just
drop
them
into
the
root
here
paste
there
we
go
so
you
can
see
here,
I've
got
my
sample.
D
D
D
Did
it
inside
of
a
VM,
so
things
were
a
little
bit
slower,
but
you
can
see
everything
ran
within
eight
seconds
with
these
tests
of
not
only
testing
a
testable
service
but
also
testing
an
actual
component
with
the
rendering,
and
you
can
see
here
to
even
generate
a
snapshot
so
the
next
time
I
run.
It
should
go
a
little
bit
faster,
but
it's
gonna
match
that
snapshot.
D
Three
four
five
six
come
on
go
before
eight.
There
we
go
two
seconds
faster.
We
can
see
that
the
snapshot
was
balanced.
If
I
go
back
and
look
at
the
code
here
and
open
this
up
and
look
in
the
source
and
my
projects
a
little
messy
now
as
I
just
threw
those
files
into
wherever
we
have
it.
Here's
the
snapshot
using
the
enzyme
to
JSON
or
not
enzyme
enzyme
to
JSON
snapshot
as
well.
So,
let's
make
sure
like
the
hell
of
a
lot
easier.
D
If
you
want
to
use
these
again,
you
just
check
out
the
blog
post
that
I
mentioned
a
second
ago
here
in
the
slide.
Excuse
me,
where
horses,
where
you
have
something
to
do
here,
move
well,
we'll
just
do
it
like
that
there
you
go
David
warrior
just
post
it
in
the
chat.
So
you
take
a
look
at
that.
If
you
want
to
learn
more
about
how
this
stuff
works
and
what
you
know,
understanding
how
the
thing
how
the
pieces
are
set
together,
the
one
thing
that
I
will
I
will
tell
you
when
you
use
this.
D
D
All
right
so,
let's
say
worse
at
home,
so
go
to
the
project,
so
you're
gonna
run
in
just.
You
may
run
into
something
with
your
project
here
and
if
you
look
at
the
issues,
you'll
see
this
you'll
see
this
the
same
command
where
people
keep
mentioning
the
same
thing
of
a
challenge
here,
where
they
talk
about
they're,
getting
like
a
something
or
think
the
things
are
not
running
because
of
your
it,
not
importing
stuff
correctly,
and
the
reason
for
this
is
under
the
covers.
Just
is
ignoring
all
of
the
stuff.
D
It's
not
processing
any
of
this
stuff
or
transpiling
anything
from
the
node
modules,
folder
all
of
the
packages
or
most
a
lot
of
the
packages
that
are
done
by
for
the
sharepoint
framework
and
are
done
and
other
related
packages
aren't
all
done
using
es6
or
all
the
transpiled
down
to
es6
and
ship.
That
way,
just
by
default,
is
not
expecting
that
it's
expecting
them
to
be
as
es5
and
so
you'll
start
to
see
these
errors.
That
pop
up
with
things
like
I
don't
understand
what
the
word
import
is
because
that's
not
an
es5
term.
D
It's
me
a
six-term
when
you
see
these
kinds
of
things,
keep
take,
take
a
second
and
think
about
what
are
you
trying
to
do,
because
what
I
see
most
of
the
time
is
that
you're
really
going
to
want
to
mock
these
ever
you
want
to
ignore
these
things,
and
if
you
look
in
the
issues
here,
I
actually
give
you
a
couple
examples
of
how
you
get
around
it,
trying
to
find
a
cleaner
solution
to
it,
but
effectively.
What
you're
going
to
do
is
like,
if
you're
doing
your
testing,
you
shouldn't
be
testing
it.
D
You
shouldn't
be
running
a
unit
test
that
checks
to
see
what
the
current
value
of
my
SharePoint
environment
is
in
my
in
localhost
room
in
a
live
environment,
you're
testing
that
doesn't
matter
right
that
doesn't
matter
it's
irrelevant
in
fact,
because
you're
not
in
either
one
of
those
environments.
You
really
want
to
mock
that
up
and
have
that
have
a
hard-coded
value
get
returned
back
to
you.
D
When
you're
testing
of
just
testing
the
system
under
test
your
code,
you
don't
want
to
test
Microsoft's
code,
you
don't
want
to
test
some
other
web
service
or
anything,
that's
not
stuff
that
you
can
impact,
and
even
if
it
was,
you
don't
need
to
be
filing
a
bug
in
your
project
for
a
broken,
whatever
a
broken
widget,
that's
coming
from
somebody
else's.
You
know
UI
components
in
this
case
here:
I'm,
not
I'm,
not
referring
to
the
patterns
and
practices
project
you
want
to.
You
want
to
keep
them
separate.
D
So
that's
everything
that
I
want
to
cover
with
this
I
hope.
This
was
useful
to
to
you
those
those
libraries
where
those
packages
are
out
there
for
anybody
to
use.
If
you
want
to
use
them,
they
are
also
part
of
the
patterns
and
practices
generally
that
Stefan
Bower
has
done.
So.
If
you
want
abusing
react
in
there,
we
are
using
those
pieces
as
well
so
make
sure
like
the
hell
a
lot
easier.
Now
you
don't
remember
all
these
different
birds.
A
Thank
you.
Thank
you.
Thank
you
great
demos
today,
thank
you,
Andrew
really
fantastic
stuff
to
see
really
I.
Think
I'll
call
it
an
enhanced
testing
experience
with
just
a
great
way
to
test
out
your
components.
Great
stuff
from
Yannick
on
the
panel
control,
really
excited
to
see
that.
Thank
you,
everybody
for
attending.
This
call
reminder.
Do
please
check
out
that
survey.
We
appreciate
your
feedback
I'd
love
to
hear
from
as
many
of
you
as
possible.
A
Our
next
SPF
X,
JavaScript
specialist
group
meeting
will
be
February
14th
2019
and
in
our
next
general
dev
specialist
group
meeting
will
be
next
Thursday
February
7th,
so
look
forward
to
seeing
all
of
you
at
both
of
those
meetings
and
everybody
have
a
great
rest
of
your
week
have
a
great
weekend
and
have
fun
talk
to
you
soon.
Bye,
bye-bye.