►
Description
Recording of the SharePoint - SPFx and JavaScript (client-side) development Special Interest Group community call from December 5, 2019.
Topics covered: Updates on SharePoint Framework from Microsoft SharePoint engineering, latest on PnPjs Client Libraries, Office 365 CLI, SPFx Reusable Controls, and on the PnP Yeoman Generator. Three demos were delivered: 1) PnPjs v2 - new features, 2) Office 365 CLI command to suggest an external configuration and 3) React Teams Tabs web part.
This call was hosted by Patrick Rodgers (Microsoft).
The first two demos reduce page load times. Optimization.
• Demo: PnPjs v2 new features | Patrick Rodgers (Microsoft) | @ mediocrebowler
• Demo: Office 365 CLI command to suggest an external configuration | Vincent Biret (2toLead) | @baywet
• Demo: Microsoft Teams channel and tabs web part | Federico Porceddu (Avanade) | @FedericoSPDev
Additional details on topics covered during this call may be found in the SharePoint Developer Blog post for this call at: http://aka.ms/spdev-blog
All previously recorded SharePoint SPFx & JS Dev SIG community calls: https://www.youtube.com/playlist?list=PLR9nK3mnD-OXdcwfcHGsGr78nHWLRsv1x
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
SharePoint PnP Developer Community channel on YouTube: https://aka.ms/spdev-videos
More information on SharePoint Framework library components is available at: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/library-component-overview
You can download an invite for this bi-weekly community call at: https://aka.ms/spdev-spfx-call.
For details around the open-source work being done by the SharePoint PnP Development Community, visit http://aka.ms/sppnp
A
A
Likewise,
you
can
contribute
on
github
and
you
can
provide
us
feedback
through
any
number
of
means
so
contribute
on
github.
You
can
report
issues,
pull
requests
as
well
as
help
others
with
their
questions
or
issues
they
might
be
having.
So,
if
you
see
someone
with
the
question-
and
you
might
happen
to
know
the
answer
and
you
can
jump
in
and
help
them
out-
that's
always
very
much
appreciated
by
all
of
us
and
just
a
note.
A
If
you're
gonna
report
an
issue
to
us,
we
love,
we
don't
love
to
get
issues,
but
we
always
appreciate
getting
issues.
But
if
you're
gonna
mention
that
some
piece
of
code
throws
an
exception,
please
do
include
the
exception
that
is
thrown.
That
really
helps
us
understand
what
might
not
be
working
and
then.
Finally,
we
always
love
to
hear
feedback
on
what
we're
doing
so
feedback
on
these
calls
feedback
on
the
documentation.
We
provide
feedback.
Where
else
we
can
provide
help
to
those
of
you
in
the
community
and
of
course,
positive
feedback
is
okay
too.
A
So
if
you
have
something
nice
to
say
about
the
work,
we're
doing
it's
okay
to
share
that
as
well.
These
are:
are
your
links
to
get
to
various
things
so
to
get
to
the
developer,
documentation
all
up
in
AMS,
SP,
dev
Docs,
and
you
also
have
SharePoint
dev
videos
as
PDF
videos
that
will
take
you
to
our
YouTube
channel,
which
has
all
of
our
videos.
A
So
all
of
these
calls
the
special
interest
group
calls
the
monthly
calls,
as
well
as
a
lot
of
great
tutorials,
on
getting
started
with
provisioning
on
modernization
on
various
other
things,
so
definitely
check
out
those
for
a
lot
of
wonderful
resources
across
all
kinds
of
SharePoint
development
topics
and
as
well.
The
SP
dev
issues
list
is
a
great
place
to
report
all
issues
with
the
SharePoint
modern
project
so
check
that
out
and
if
you
find
issues
with
a
SharePoint
framework
or
with
modern
pages
or
anything
around
SharePoint
modern.
A
So
you
can
see
you
know,
usage
and
adoption
continues
to
climb.
So
if
you
wonder,
if
it's
worth
investing
in
learning
or
worth
investing
developing
for
SharePoint
framework,
the
answer
is
absolutely
yes.
You
can
definitely
check
those
out,
and
you
know
it's
certainly
a
technology
that
is
continuing
to
grow,
continuing
to
be
invested
in
both
by
the
community
and
by
the
product
group
teams
as
the
method
forward
for
developing
on
SharePoint
framework
and
something
that
we've
been
hinting
at
for
a
while
learning.
A
These
techniques
learning
these
patterns
that
exist
in
SharePoint
framework
are
really
a
great
way
to,
or
are
going
to
be,
a
great
way
to
develop
across
all
of
Microsoft's
through
65
in
the
future.
So
we've
talked
about
that
a
little
bit
on
this
call,
but
so
learning
in
in
this
space
is
really
not
gonna.
Go
to
waste.
A
So
reminder
we
got
a
video
out
on
the
preview
capabilities
for
SharePoint
framework
1.10,
so
you
could
check
that
video
out,
that
is
on
the
YouTube
channel
and
that
is
hosted
by
Visa
and
it's
got
the
new
features
that
have
gone
to
GA
as
well
as
some
of
the
preview
features
that
are
in
there
so
check
out
that
video
on
the
YouTube
channel,
the
sharePort
framework
110
released,
what's
included.
Looking
for
new
features,
there's
going
to
be
extensions
with
the
pre-allocated
placeholders
SPF
X
for
teams,
SPF
X
for
teams.
A
Actually
those
are
the
same
thing
but
personal
apps
support
and
then
support
for
mobile
apps
and
then
lists
notification.
Api
has
moved
to
GA
so
excited
to
see
that
stuff
looking
or
getting
into
the
GA
space
and
then
preview
features
in
110.
Query
suggestions
as
a
new
extension
preview
feature,
as
well
as
support
for
office
add-ins,
starting
with
o
W,
so
Outlook
web
client
so
definitely
check
out
those
preview
features
and
they
wrote
ahead.
A
So
native
support
for
fluid
framework
is
underway,
as
in
process
is
being
worked
into
SharePoint
framework
as
well
as
support
for
the
store.
I
know,
that's
been
a
long
asked
for
need
from
the
very
first
days
of
SharePoint
framework,
so
making
some
real
progress
on
getting
the
store
out
there,
as
well
as
a
unified
tool
chain.
A
So
those
will
be
coming
across
calendar
year.
2020,
amazing,
to
think
we're
already
into
are
just
about
into
2020.
So
flying
cars
are
just
around
the
corner
and
as
well.
We
are
introducing
train
certification
and
tooling
for
developers,
so
you
can
sort
of
show
off
your
your
knowledge
by
taking
and
getting
these
certifications
and
training.
So
you
can
do
the
training
and
then
go
become
certified
through
these
exams.
A
So
this
is
very
much
the
Microsoft
certification
program,
but
now
supporting
SharePoint
framework
and
Microsoft
365
development
with
a
specific
exam
targeting
that
so
giving
you
a
little
bit
of
a
way
to
demonstrate
your
knowledge
and
show
your
knowledge
to
your
company
and
your
customers
and
what
you've
done
there
and
then
as
well.
You
can
join
the
new
developer
program,
which
gives
you
an
e5
dev
subscription,
as
well
as
a
lot
of
great
sample
content
and
some
other
great
tooling.
A
So
if
you
haven't
checked
that
developer
program
out
I
highly
encourage
you
to
getting
a
free
shot
at
the
e5
SKU
is
pretty
pretty
big,
pretty
big
advantage
and
gives
you
the
ability
to
try
out
and
develop
for
a
lot
of
the
very
advanced
features,
including
a
lot
of
the
security
features,
see
what
you
can
do
with
that
stuff.
So
definitely
check
that
out
excited
to
see
that
offering
that
developers
are
now
allowed
to
use
the
e5
SKU
free
of
charge,
so
definitely
a
great
benefit
for
everybody
out
there.
A
So
updates
on
the
PMP
client
side,
libraries,
the
the
v2
beta,
is
now
available.
You
can
help
us
test
that
out,
there's
a
pin
to
issue
at
the
top
of
the
issues
list.
We're
definitely
interested
in
all
feedback,
but
specifically
feedback
around
bugs
meaning
something
is
broken
or
not.
Working
or
something
that
was
working
in
v1
is
not
working
in
v2.
We
definitely
want
to
hear
about
that.
We're
not
looking
other
than
our
identified
breaking
changes,
not
looking
to
break
anybody's
existing
code.
Doc's
we've
put
a
lot
of
time
and
energy
into
improving
our
documentation.
A
You
can
now
view
the
v2
Doc's,
there's
a
link
at
the
in
the
top
header
bar
there
on
the
official
documentation
or
the
v1
documentation.
So
if
something
in
there
is
unclear
or
missing,
I
know,
there's
still
a
few
things
that
are
missing
or
articles
that
aren't
complete.
But
if
you
find
stuff
please
do
let
us
know,
Doc's
can
always
be
better.
We've
put
a
lot
of
time
into
making
them
better
for
this
v2
release
and
hope
to
to
meet
that
goal,
but
also
get
your
feedback
there
and
then
as
well.
A
The
transition
guide,
so
as
you're
transitioning
your
v1
solutions
to
v2.
What
steps
have
we
missed?
What
details
can
we
add
to
make
it
easier,
definitely
want
to
hear
feedback
there
and
then,
of
course,
in
all
cases,
please
do
note
your
issues
related
to
v2,
the
beta
that
would
really
help
us
understand
and
track
it
and
fix
it
correctly
and
avoid
any
confusion.
Support
plan
I
mentioned
this
last
time
for
v2
we're
gonna,
maintain
feature
parity
between
v1
and
v2
as
best
we
can.
A
So
if
we
add
a
feature
to
v2
or
add
a
method
to
v2,
we're
gonna
go
back
and
add
it
to
v1
for
three
months,
that's
gonna!
That
clock
is
gonna
start
in
January,
so
January
March
support
for
v1
for
an
additional
three
months
after
that.
So
if
only
June
and
then
after
that,
official
support
will
end
for
v1.
A
But
if
folks
out
there
in
the
community
find
something
or
want
to
submit
a
PR
targeted
2v1
will
of
course
accept
that
and
and
merge
it
in,
but
that's
not
where
I
or
the
core
team
will
be
focusing
our
energy
after
that
second
three-month
period.
So
it's
about
six
months,
total
support
for
v1
after
the
v2
release
and
then
we'll
be
really
encouraging
folks
to
transition
to
v2.
After
that,
so
aiming
for
release
on
December
20th
and
that
would
like
I
said
we're.
A
Gonna
start
the
support
clock
so
to
speak
on
the
v2
v1
parity
in
January,
just
because
that's
nice
and
easy
to
track.
David
has
dropped
the
link
in
the
chat
for
the
getting
started,
helping
out
with
v2
testing.
So
I
encourage
you
to
check
that
out
and
if
you
have
you
know,
issues
or
comments
or
ideas
certainly
excited
to
hear
those
and
then
v1
continues
to
be
maintained
and
released
as
before
for
six
months,
so
targeting
the
next
v1
release
for
December
6th.
That's
actually
tomorrow.
A
So
because
of
my
schedule
that
might
get
pushed
a
little
bit
into
next
week.
I've
had
a
particularly
busy
week
this
week
so,
but
we
will
get
that
v1
release
out,
if
not
tomorrow,
early
next
week.
So
we
will
have
that
out
very
shortly
for
the
December
release,
their
official
documentation,
PNP
github,
Dino,
slash,
P
and
PJs.
You
follow
that
hashtag
PJs
on
Twitter
as
well.
You
can
follow
me
at
mediocre,
bowler
on
Twitter
and
pretty
much
just
post
about
PJs,
so
you
won't
get
a
lot
of
spam
or
other
things
there.
A
So
moving
in
office365
CLI.
If
you
haven't
checked
out
the
CLI,
it's
a
really
fantastic
cross-platform
tool
that
allows
you
to
manage
not
just
sharepoint
settings
but
really
office,
365
settings
and
features-
and
you
know
you
can
actually
query
things
and
add
things
and
manage
your
subscriptions.
It's
a
great
way
to
script,
building
your
development
environments,
so
definitely
a
fantastic
tool
to
have
in
your
toolbox.
The
new
release
for
externalizing
dependencies
in
SharePoint
framework
projects.
A
The
CLI,
as
well
as
PNP,
GS
and
and
the
controls
and
yeoman
generator
I'll
mention
here
in
a
second
all,
really
have
benefited
from
all
of
you
contributing
back
to
the
projects
and
really
encourage
you.
If
you
want
to
get
involved
either
with
the
CLI
or
any
of
these
offerings,
we
all
have
solutely
welcomed
and
encouraged
pull
request.
Reporting
issues
use
the
tools.
Let
us
know
what
you
think
of
the
tools
and
how
they
can
be
better.
So
next
one
update
on
usable,
SPF,
SPF
X
components.
So
these
are
two
separate
libraries.
A
One
is
a
set
of
property
controls
designed
to
be
used
within
your
SharePoint
framework
webparts
in
the
editing
pane.
So
to
give
you
a
really
great
out-of-the-box,
edit
an
experience
there
styled
with
the
office,
you
have
fabric
blend
right
in
a
sharepoint
and
really
give
you
a
jumpstart
on
your
sharepoint
framework
development
and
save
you
a
lot
of
time
and
creating
a
very
rich
editing
experience
and
then
as
well.
A
The
SP,
FX
or
SP
dev
effects
controls
react
is
a
great
set
of
content
controls
for
use
in
the
body
of
your
web
parts
to
really
present
information
very
well,
the
folks
and
it
give
you
again
a
nice
out-of-the-box
layout.
Those
would
work
in
webparts
or
of
course,
it
could
also
work
in
application.
Extensions,
so
either
way,
but
those
are
a
great
way
to
present
information
to
your
users,
a
lot
of
great
controls
there
and
a
lot
of
great
contributors
again
to
this
project.
A
So
there's
some
names
listed
there
I'm,
not
gonna,
not
gonna,
read
them
all,
but
this
has
been
great
to
see
the
growth
of
this.
This
started
I
want
to
say
about
a
year
and
a
half
ago,
and
it's
already
a
fantastic
set
of
controls.
Save
you
a
ton
of
time
and
effort
and
give
you
a
great-looking
and
easy
to
manage
experience
right
on
the
box
for
your
SharePoint
framework
projects.
A
So
again,
if
you
haven't
checked
those
out
check
those
out
another
great
tool
to
have
in
your
toolbox
and
SharePoint
framework
development
in
the
last
PP
offered
I'm
going
to
mention
before
we
get
into
the
demos
today
is
the
SharePoint
framework
community
yeoman
generator.
We
just
had
the
one
10.2
release,
and
that
includes
some
improvements
to
the
azure
devops
pipeline
and
then
as
well.
Lodash
integration
for
smaller
builds
and
bundles,
and
this
is
a
great
tool
built
on
top
of
the
out-of-the-box
SharePoint
framework.
A
As
you
start,
your
SharePoint
framework
project
so
definitely
check
out
the
generator.
This
is
another
place
that
has
had
a
ton
of
great
community
contributions
to
grow.
It
very
quickly
love
to
see
that
love
to
see
folks,
jumping
in
and
getting
involved,
so
I
absolutely
encourage
that
so
and
onto
the
demos.
Of
course.
Today
is
the
day.
I
have
a
demo
to
do
when
I
have
no
voice
for
it,
but
so
one
of
today
about
something
for
PJs
so
want
to
show
this
idea.
So
in
p.m.
A
PJs
v2
we
very
much
we
have
this
idea
of
selective
imports
and
selective
imports
is
the
idea
that
you
can
choose
which
parts
of
P
and
PJs
you
want
to
import
into
your
project.
So
this
is
the
benefit
of
giving
you
much
smaller
bundle
sizes
and
limiting
what
you
include
to
just
what
you
need
so,
for
example,
in
v1
everything
is
attached
to
the
web
object.
A
Basically,
so
you
imagine,
web
has
lists
and
content
types
and
everything
else,
and
that
tree
of
stuff
means
that
your
bundle
gets
all
that
stuff,
even
if
you
just
want
to
do
some
simple
operations
around
webs,
for
example,
or
lists,
you
still
end
up
with
the
entire
bulk
of
PJs
in
your
project,
which
you
know,
isn't
horrible,
it's
not
going
to
end
the
world,
but
we
could
do
better.
So
in
v2
we
took
a
lot
of
time
to
come
up
with
these.
A
This
idea
of
selective
imports
and
we
restructured
the
entire
internals
of
the
library
around
that,
and
so
what
this
project
is
showing
is
this
idea
that
it's
great
that
we
can
selectively
import
just
the
pieces
we
want,
but
that
could
be
sort
of
annoying
if
we
have
to
do
that
across
every
file
in
our
project.
So
we
might
have
a
project
that
has
six
different
web
parts
and
if
I
have
to
have
12
different
imports
for
PJs
in
six
different
files,
that's
kind
of
annoying.
A
We
can
do
better
right,
so
this
pattern
that
I
want
to
share
today
is
this
idea
of
creating
a
pre
what
I'm
calling
a
preset
file
within
your
project.
So
in
one
spot
you
can
include
everything
you
need
from
p.m.
PJs,
so
we're
gonna
include
our
extend
factory
method.
We're
gonna
include
the
SP
rest
class.
Then
we're
gonna
do
our
selective
imports
so
we're
importing
webs
items
list
sites,
fields,
we're
importing
a
couple:
the
objects,
we're
gonna
need
and
we're
importing
this
URL
format
type
and
then
this
sample.
A
We
want
to
show
how
to
extend
the
type
beans,
how
to
extend
the
declarations.
So
so
you
get
nice
and
tell
a
sense
with
the
things
you're,
adding
via
extensions
and
I'm,
not
going
to
spend
a
lot
of
time
on
extensions,
because
that's
not
what
this
demo
is
exactly
about.
But
we've
got
articles
on
extensions,
and
this
is
actually
a
sample.
I'll
show
you
where
to
swear
to
find
this
in
just
a
second,
but
this
is
actually
out
there
and
available
for
you
to
have
a
look
at
after
the
call.
A
A
Sorry,
we're
gonna,
send
the
web
factory
so
that
every
web
we
create
within
our
project
will
have
our
new
method.
So
we
can
have
our
insurer
special
list
method.
You
know
defined
here
and
it's
a
method
that
takes
a
couple
of
parameters,
and
this
is
just
something:
I
define
it's
a
title
in
a
description.
It
gives
us
back
a
promise
and
what
we're
actually
doing
is
then
using
P
and
pjs
to
say
this
dot
list
and
we
can
type
the
lists
in
typescript
using
the
this.
A
You
know,
syntax
I
think
about
not
familiar
with
that.
It's
a
way
to
type
this
object
in
a
function,
though
you
do
have
to
define
it
as
a
function.
Arrow
functions
have
no
concept
of
this,
so
we're
using
a
function
here.
We're
saying
this
is
a
non
web
instance
and
we're
gonna
say
we're
gonna
ensure
this
list
and
then
we're
gonna
say
the
first
time.
A
That's
it.
We've
created
our
list,
we're
happy
and
then
the
other
thing
we
could
do
at
a
preset
is.
We
can
actually
export
some
of
this
stuff.
We
might
need
in
our
projects,
so
we
don't
have
to
import
them
from
p.m.
PJs
directly.
We
import
them
here,
one
time
and
then
we
can
export
them
from
here.
So
we
can
use
them
easily
and
then
we're
going
to
export
this
SP
const.
A
So
what
this
this
is
actually
creating,
essentially
the
root
of
our
fluent
API
and
there's
no
difference
from
exporting
it
here
versus
importing
the
one
from
p.m.
PJs,
but
the
idea
here
and
that
what
I
want
to
show
you
is
we
then
in
our
project,
so
I've
jumped
over
to
now
my
web
part
code
in
my
project-
and
this
is
just
an
out-of-the-box
SharePoint
framework
web
part
you
built
using
no
framework
and
then
added
just
this
p.m.
A
PJs
example
code,
so
we're
just
gonna
import
SP
from
our
preset,
so
we're
not
importing
at
this
point
from
at
P
and
PJs
we're
importing
directly
just
the
SP
object
from
our
preset
we're
gonna
come
in
here.
We
still
have
to
do
our
setup,
but
you'll
note.
In
v2
we
have
a
much
simpler,
set
up
model.
We've
added
you,
you
can
now
just
say:
SP
set
up
the
stock
context,
so
you
don't
have
to
put
that
sort
of
object
structure
in
anymore.
You
still
can
put
this
object
structure
in
if
you
have
additional
configuration.
A
The
signature
of
the
set
up
method
has
just
changed
to
accept
the
context,
so
you
don't
have
to
update
any
of
your
existing
code,
but
this
is
the
nice
quick
way
to
get
the
context,
since
this
is
a
very
common
function.
Folks
are
performing
many
times
so,
as
we
set
up
this
TOC
context
gives
us
the
setup
we
need
to
have
the
context
we
need
and
then
I'm
doing
so
again,
no
framework
so
I'm
just
creating
elements
manipulating
them
directly,
adding
event
listeners
and
then
appending
those.
A
This
is
something
I
like
to
do
in
demos,
because
I
think
sometimes
folks
get
very
focused
on
including
certain
frameworks
and
frameworks.
This
is
better
than
that,
but
sometimes,
if
you
have
a
very
simple
web
part
or
a
very
simple
application,
customizer
doing
direct
Dom
manipulation
can
be
a
little
bit
cleaner,
a
little
bit
easier,
a
little
bit
faster
and
you
don't
have
the
weight
of
saying,
including
react
or
view
or
any
of
these
other
frameworks
for
something
where
I
just
want
to
have
a
button.
A
That
does
something
right
and
then
so
you
can
see
now
in
our
button
action
we're
just
calling
our
custom
method
we've
added
to
web.
So
our
extension
method,
we've
added
we're
going
to
call
it-
and
this
gives
us
very
clean
code
here
in
this
example
or
in
this
button.
But
you
could
say
if
this
was
a
method
you
had
to
call
three
or
four
times
across
your
project.
You
had
like
four
webparts
with
a
common
function:
you've
bottled
all
that
functionality
into
that
preset
file.
A
A
This
call
I
can
search
in
that
box,
which
I
think
is
amazing.
So
here's
my
beautiful
web
part
with
my
very
fancy
button,
I'm,
gonna
click
that
button
and
I'm
gonna,
assume
stuff
is
happening,
and
it
now
says
the
list
should
now
be
there
and
now
we're
gonna
come
in
here
and
refresh
this
page
and
and
oh
there.
It
is
for
a
second
there.
I
thought
I
had
somehow
screwed
this
all
up,
so
we
can
see,
but
we've
got
our
list
and.
A
If
I
get
a
gear
here
in
a
second
get
a
gear
here
in
a
second,
we
can
go
list
settings
library
settings
rather
and
we
can
see.
I've
got
my
very
cleverly
named
text
field
and
URL
field,
so
this
is
just
a
fairly
simple
example,
but
it's
a
powerful
example
in
the
way
that
it
shows
you
how,
with
a
preset
file,
we
can
import
all
the
things
we
need
to
once
you
can
extend
P
and
pjs
to
include
our
custom
functionality.
It
can
be
used
easily
across
our
entire
project.
A
We
can
export
just
the
things
we
need.
So
if
we
need
to
import
stuff,
we
can
do
it
within
our
web
part
and
they
like,
for
example,
what
we
could
import
web
directly
from
our
preset
and
then
we
can
call
very
easily
our
extension
methods
write
directly
as
part
of
our
fluent
method.
Chaining
in
the
library
so
really
excited
for
these
capabilities.
I
think
they
add
a
lot
to
what
we
can
do.
You
know
with
PPG
sv2
and
what
you
all
can
do
with
PP
jsv.
A
So
we'll
show
you
real
quick
I'm
in
the
PM
pgs
repository
now
I'm
in
the
dev
v2
branch.
There's
a
folder
here
for
samples
and
I
can
go
to
the
project
preset
sample.
That's
the
sample.
I
just
showed
you
all
today
and
as
well.
There's
two
other
samples
for
creating
custom
bundles
with
roll-up
or
with
web
pack.
So
you
could
feel
free
to
check
these
out.
I
did
just
want
to
mention.
These
are
gonna,
be
samples
that
are
very
specific
to
pee
and
PJs
they're,
showing
very
isolated
techniques
for
using
with
p.m.
PJs.
A
If
you're
doing
samples
around
SharePoint
framework
and
all
those
things,
those
should
all
still
be
targeted
towards
the
main
samples
gallery.
So
we're
not
trying
to
move
stuff
here
or
compete,
or
anything
like
that.
These
are
going
to
be
samples
focused
strictly
on
showing
things
we're
talking
about
in
our
documentation.
So
these
will
be
samples
really
around
demonstrating
new
pjs
features.
A
But,
of
course,
if
you
have
ideas
for
samples
that
might
be
appropriate
for
this
for
PNP
jsv
and
that
tie
in
very
tightly
to
our
documentation,
reach
out,
let
us
know
if
it's
appropriate,
we'd
love
to
those
added
here.
I
just
want
to
be
clear:
we're
not
trying
to
just
split
the
world
and
create
two
separate
places
for
people
to
submit
samples,
so
SPF,
X
samples,
you
know,
dev
samples-
should
still
go
in
the
SP
dev
samples
repositories
there.
A
B
B
Before
we
begin
hi
everyone,
I'm,
Vincent,
VRA
nice
to
meet
you
I'm,
an
office
dev
MVP
and
I
work
at
two
toledo,
canadian-based
consulting
company
as
an
azure
and
office
365
developer.
If
you
know
reach
out
to
me
here,
is
my
twitter
and
github
handle
my
blog
and
yeah.
You
can
always
contact
me
I'll,
be
happy
to
answer
any
of
your
questions
with
that.
Well,
Patrick
already
pointed
to
a
a
problem:
an
existing
problem.
B
Sharepoint
pages,
they
already
load
a
lot
of
things,
but
already
out
of
the
box,
what
part
the
UI,
the
data
and
so
on
and
so
forth
right
and
each
additional
SPF
X
component,
whether
it's
Oh,
a
part
or
an
extension
or
anything
else,
adds
up
to
that.
The
page,
size
and
page
load
time
and
well
degrades
performances
and
experience
for
the
users
right
and
optimizing
for
performance
is
time
consuming,
and
it
requires
a
lot
of
knowledge
and
we'll
see
what
what
techniques
we
have.
B
B
But
as
soon
as
you
have
your
bad
browser-
or
you
are
on
a
limited
connection
like
right
now
at
Conference
Center,
it
might
not
be
so
great
right
and
then,
if
you
start
adding
a
few
extensions
and
what
parts
and
so
on
and
so
forth
and
you're,
not
careful
about
what
you're
doing
well,
the
number
of
requests
and
the
size
of
a
page
can
go
up
quite
quickly.
So
you
want
to
avoid
that
in
order
to
provide
good
performances
and
good
experience
early
and
users,
what
solutions
do
you
have?
B
Well,
you
have
the
one
that
Patrick
just
shown
the
selective
import,
meaning
that
you'll
be
really
careful
at
the
import
time
to
import.
Only
what
you
need-
and
this
is
great
when
you
this-
is
actually
the
probably
the
best
solution.
If
you
want
a
net
new
project
and
you
don't
need
to
refactor
tons
and
tons
of
code,
so
the
problem
with
that
is
developers
need
to
be
super
well
disciplined,
and
if
you
need
to
know
about
that
and
do
it
across
resolution
or
otherwise,
you
need
to
do
big
refactoring
existing
solutions.
B
The
other
pattern
we
see
and
which
works
quite
well
is:
let's
say
you
have
a
couple
of
different
web
parts.
They
all
depend
on
the
PNP
controls
and
in
order
to
save
space
and
loading
time
and
so
on
and
so
forth.
Well,
you
create
separate
chunks,
separate
modules
that
you
load
and
synchronously.
So
this
is
a
great
technique
as
well.
It
involves
refactoring
lots
of
testing
to
make
sure
it
loads
properly
at
the
right
sequence
at
the
right
time
and
pretty
high
technical
knowledge.
You
can
all
use
library
components
if
you
want
with
those.
B
Lastly,
you
have
a
third
option,
which
is
called
externals,
so
webpack
and
michelle
phan
framework
have
this
notion
of
hey.
This
is
a
dependency
I,
don't
want
it
as
part
of
my
bundle.
I
will
load
it
from
a
fourth
party
CDN
instead,
so
don't
include
it
in
my
bundle
and
load
the
URL
I'm
going
to
provide
you
from
the
CDN
instead
during
the
runtime.
B
So
everything
is
on
the
page
and
that's
a
great
way
to
decrease
the
size
of
your
bundle
and
make
sure
you
hit
good
performances
and
so
forth,
and
it
does
not
require
any
refactoring
or
any
big
discipline
for
developers
or
any
kind
of
advanced
technical
knowledge.
So
this
is
again
one
of
the
solutions
to
do
that
and
I'll
show
how
you
can
improve
that
experience.
So,
let's
jump
into
the
demo
here,
you'll
see
that
I
have
a
straight
communication
site,
but
I
do
also
have
here
on
the
top.
B
You
know
custom
navigation,
because
everyone
knows
that
Italy
I
also
have
on
the
footer
a
custom
footer
bar
with
just
the
logo
of
a
company
and
learn
more
and
if
you
have
real
components
right.
This
is
great.
But
if
we
look
at
the
performances
we'll
see
that
in
the
network
traffic
tomorrow
on,
if
we
reload
that
everything
is
being
loaded
from
from
SharePoint,
we
don't
have
anything
being
loaded
from
a
CDN
and
it
can
actually
take
quite
some
time
because
again
I'm
on
a
conference
Wi-Fi
at
the
moment.
Right.
B
If
we
look
at,
for
example,
the
header
component
here,
we'll
see
that
if
I
find
the
right
one,
it's
pretty
heavy
right,
we
for
the
header,
we
just
have
a
few
links.
Well,
they
look
nice.
We
have
a
proper
CSS
classes
and
the
proper
icons-
and
we
don't
even
have
a
search
bar
here
available,
but
still
like
just
for
that
we
are
paying
a
cost
of
153
kilobytes
and
the
reason
is
because
again
we
do
have
a
lot
of
fir
dependencies
in
our
bundle.
And
how
can
you
investigate
that
and
what
your
bank
will
contain?
B
Well,
there
is
a
great
documentation
already
available
on
the
SharePoint
dev
Doc's
you'll
find
a
article
around
about
web
pack,
bundle
analyzer.
That
will
help
you
understand.
What's
in
your
bundle
now,
if
we
look
at
my
project
here,
for
my
header,
for
example,
my
header
is
1.5
megabyte
before
compression
and
so
on
and
so
forth,
but
a
big
part
of
that
is
actually
the
module.
1.4
35
megabytes
is
in
the
module.
So
most
of
the
weight
of
my
bundle
at
the
end
of
a
today
is
my
modules
and
my
dependencies
clean.
B
Not
my
actual
code,
so
how
do
you
do
that?
Well,
if
you
look
at
your
SharePoint
framework
solution
here,
you
see
that
you
have
a
config
dot,
JSON
file
available
and
you
have
this
entry
external.
So
this
is
where
you
will
tell
the
shop
on
from
work.
Hey,
don't
include
those
dependencies
in
the
bundle
you're
creating
instead
at
runtime
load
those
from
the
CDN
but
but
can
be
pretty
tedious.
You
know
to
scan
for
all
the
modules
all
the
dependencies
know
if
there
are
valid
or
not
how
to
include
them
properly.
B
B
You
can
run
it,
it
will
take
a
few
seconds
and
what
that
does
it
automatically
for
you
is
it
will
scan
all
the
dependencies
you
have
in
the
package
of
JSON
see
on
unpackage
EECOM,
which
is
one
CDN
that
works
well
out
there
if
this
is
available
test,
the
dependency
kind
thanks
to
the
rancor
api,
the
script
checkpoint,
core
API
and
then
success
to
you
have
a
proper
entry
for
the
external
configuration,
so
this
is
gonna
run
for
well.
Actually,
it's
already
finished.
B
Let's
look
at
the
report
here
and
you
will
see
that
you
will
get
automatically
if
I
get
this
out
of
the
way
and
that
out
of
the
way
as
well,
you
get
automatically
that
markdown
report.
That
tells
you
all
right
here
is
your
external
configuration
that
you
should
put
and
additionally,
if
you
need
to
make
other
changes
like,
for
example,
TMP
GS
v1,
if
you
want
to
externalize
the
dependencies,
you
also
need
to
I
blind
require
statements
here.
So
here
is
what
we
think
you
should
do
and
that's
implement
it.
B
So,
of
course
it's
not
going
to
be
perfect.
It's
only
going
to
do
85.
90
percent
of
a
job
you
might
need
to
do
some
adjustments
so
here
to
save
time,
I
will
see
I'll
check
out.
Another
branch
emitting
I
verified
that
I
made
a
small
adjustments
that
were
required
and
if
we
look
at
our
config
dot
JSON,
we
can
see
that
now
in
under
externals,
we
have
all
the
configuration
we
need
for
all
the
different
packages
right.
So
if
now
we
do
the
and
I
hopeless.
This
is
going
to
execute
fast.
B
B
I'll
move
on
and
come
back
to
that,
come
back
to
that
when
this
is
finished,
so
basically,
what's
gonna
happen,
we
will
have
our
solution.
That's
going
to
be
much
smaller
with
all
those
external
dependencies
outside
of
a
package.
Well,
it's
doing
that
and
we
will
then
be
able
to
upload
that
so
new
solution
in
that
new
package
to
our
SharePoint
tenant
and
deploy
that
new
package
and
what
we
will
see
effectively
when
we
see
these
finishes
is
that
our
package
is
first
much
smaller
and
second,
that
it
pulls
dependencies
from
package
II.
B
B
It's
it's
actually
runs
left
bundle
period.
It's
when
you
bundle
your
solution.
This
is
when
web
pack
puts
all
the
bits
and
pieces
of
JavaScript
together
and
that
will
generate
file
for
you.
So
you
need
to
in
order
to
get
that
report,
you
need
to
run
the
command
I'm,
just
running,
which
is
first
built
and
then
bundle-
and
this
is
how
you'll
get
the
new
report
and
I
don't
know.
B
Thank
you
for
the
great
question.
I,
don't
know
West
but
question.
So
if
we
look
at
that
now,
if
we
reveal
this
in
the
Explorer
and
if
we
go
back
to
ship
online
here,
I
can
go
to
my
catalog
here
drop
my
solution
and
what
you'll
see
is
it's
in
French,
of
course,
because
I
forgot
to
change
the
language,
but
besides
that
it
will
tell
me
hey.
Do
you
want
to
replace
that
solution?
Which
I
would
say?
Yes,
now
it's
saying
hey,
you
have
dependencies
coming
from
an
EKG
comm.
B
B
Alright,
fresh.
That
we'll
see
that
here
we
should
see
network
activity
coming
from
an
EKG,
for
example.
Yes,
so
you'll
see
that
now
I
have,
for
example,
low
t
asleep
and
a
few
other
things
like
pee
and
PJs
being
loaded
from
our
city
and
instead
and
if
we
look
at
our
header
again
here,
our
header
component,
which
is
here
now
instead
of
being
150
K,
it's
only
36
case.
B
So
the
performances
and
the
experience
for
the
end
users
will
be
much
better
and
much
greater
and
with
that
before
I,
finish,
I'll
just
recap
and
then
hand
it
over
back
to
you
to
you
Patrick.
So
what
this
command
does
for
you.
First,
it
checks
all
the
dependencies
on
the
package.json.
Then
it
ensures
that
we
have
a
CDN
version
of
that
available
somewhere
on
back
AG.
B
It
tests
the
module
automatically
for
you,
easy
to
the
name,
D
D,
6,
global
package
and
so
on
and
so
forth,
and
thanks
to
the
rain
cores,
API
so
again,
big
thanks
to
to
rancor
and
it
tries
to
obtain
automatically
the
minified
version,
because
package
II
might
have
multiple
versions
of
the
same
library.
So
we
are
trying
to
make
sure
that
we
get
the
smallest
version
possible.
B
Then
it
checks
that
that
file
actually
exists
on
the
CDN.
We
make
sure
that
we're
not
suggesting
you
any
dependency
that
well
doesn't
exist
at
the
end
of
the
day
and
it
generates
the
external
and
three
configuration
as
well
as
we
offer
valid
suggestions
that
we
might
have
for
you,
big
thanks
to
Waldeck
and
valine,
who
helped
me
through
the
pull
requests
and
reviewing
the
code
and
making
suggestions
and
so
on
so
forth.
Without
then,
it
will
not
have
been
possible.
It's
a
great
demonstration
of
the
great
community
effort
and
coming
to
work.
B
A
C
Everybody,
my
name
is
federico
porter
nice
to
meet
you
buddy,
I'm
a
senior
developer
in
Avenel
italy,
italian
visit
in
cali
in
sardinia
at
the
oven,
advanced
technology
center.
You
here
you
can
find
my
email
contacts
if
you
want
to
talk
with
them.
Let's
start
today,
I'll
show
you
an
SPF
expert,
the
user
uses
to
show
directly
on
the
side
the
arrow
key
of
channels
in
Topsham
on
all
the
team
connected
to
their
should
point
more
than
team
side.
C
Let's
see
together,
general
needs
general
is
to
enable
people
to
access
team
stop
without
necessarily
having
to
open
my
suit
Maxo
teams
up
our
web
application.
There
were
the
first
serving
the
step
or
having
to
find
the
team
and
as
I'll
channel
the
result
is
saw
a
fast
track
to
towards
the
team
stops.
So
access
is
having
quickly.
Surely
this
sample
is
more
interesting
for
a
learning
and
study
point
of
view,
because
they
wanted
to
learn
more
understand
the
power
of
p
mpg
gas
fabric.
C
You
are
integration
with
microsoft,
obviously
in
a
client-side
solution,
but
you
could
also
be
user
to
offer
an
alternative,
bruising
experience.
That
in
today
is
the
model
team
sites
and
microsomes.
Let's
see
what
the
spatters
are
should
be
obviously
landing
into
the
page,
the
weber
we
show
the
list
of
channel
of
the
multi-site
linker
teams
and
nested
inside
journalist,
you
will
find
tops,
link.
No
one
or
interests
aside.
C
This
sample
is
that
the
web
per
count
as
far
as
you
serve
on
the
current
site,
going
to
return
formation
through
the
Microsoft
graph
graph
API
with
Val
feature
in
the
sample.
The
web
participate
fully
concept
on
top
of
a
shopping
framework,
for
instance
the
use
of
OPP
graph
teams
package,
how
to
configure
point,
align,
tenant
and
spiffy
and
SPF
fix
solution,
talamarko
sub
graph
call
course,
and
finally,
the
fabric.
You
are
enough
component,
that
is
simple
and
nice
to
use.
C
This
is
a
short
dive
and
our
model
team
site
are
connected
to
Microsystems.
There
is
basically
a
property
back
now
name
it
Group
D
inside
sure,
point
inside
you
can
easily
file
using
a
traineeship
point
on
to
model
powershell
or
sharepoint
online
client
browser.
So
with
this
group,
ID
group
ID
is
the
unique
ID
of
the
outlook
trace.
If
a
group
associated
to
the
short
point
modem
team
sites-
and
they
also
represent
the
market
teams
ID,
we
will
use
it
to
make
our
course
to
Microsoft
our
travel
information.
We
need
okay.
What
about
the
solution?
C
We
always
say
that
the
web
per
contest
was
itself
on
the
current
team,
but
what
about
micro
so
graph
API,
because
they
are
rapid
from
the
PMP
package
the
PPG
has
peak
is
because
internally,
they
use
to
specific
calls
to
graph
get
all
channel
from
from
a
team
using
group
ID
this
one
and
get
two
tabs
from
a
channel.
Okay,
obviously
we
need
a
pretty
school,
obviously
before
I
being
able
to
make.
C
C
C
C
All
channel
include
the
general,
obviously
for
every
channel
there
is
the
count
of
the
the
tabs
that
are
linking
to
these
particular
channel
is
a
really
simple
and
easy,
but
when
you
click
in
one
of
the
this
link,
for
instance
fiscal
year
budget
okay,
so
there
is
a
navigation
and
you
can
open
directly
without
waiting
with
our
search
inside
the
team's
okay.
Here
you
can
find
a
small
number
of
teams,
but
in
a
real
scenario
we
know
use
teams.
There
are
a
lot
of
teams
a
lot
or
channel,
and
a
lot
of
team
stops.
C
So
if
you
are
working
on
this
show
go
beside
this,
it
could
be
useful.
Have
this
link
directly
from
this
Web
part?
Let's
get
let's
get
and
sin
in
the
code,
this
webpart,
okay,
let's
start
from
generic
helper
and
realize
using
can
PGS.
There
is
its
missile
guide
group
ID
that
get
all
properties,
so
priority
back
and
drive
group
with
the
property.
There
are
also
two
methods,
good
channels
and
get
tabs
from
china's
that
use
internally.
C
Graph
teams
get
pi
d
and
china's
get
or
GAF
teams
get
pity
china's
get
me
the
drive
all
tabs
from
china.
I
love
p
mpg-us
because
it's
pretty
easy
and
clean
make
cause.
We
^
react
and
ties
with
thai
script,
so
this
is
the
alper
and
they
use
these
outer.
Obviously,
in
the
component,
this
one
of
the
purport
component
is
really
a
simple
isms
of
genetic
message
and
the
now
I
use
just
the
group's
property
and
set
the
state
and
in
the
component
is
mount,
haven't
or
making
the
complaint.
C
First
of
all,
the
group
ID
sorry
I
can
tie
my
mega
PT,
which
on
us
and
obviously
all
tabs
from
each
channels,
then
I
push
inside
on
an
array
and
the
barbecue
I
component
now
use
this
property.
So
if,
for
first
level,
link
I
use
only
key
and
sorry
only
only
name
and
links
are
generic
array
and
for
internal
link,
so
tabs
use
a
key
name
and
URL,
and
obviously
the
target
about
account
is
just
count
of
the
or
length
of
the
array.
C
C
C
Okay,
we
have
a
permission.
I
just
specified
the
resource
is
micrograph
and
the
scope
grouped
readwrite
all
so.
With
this
setting
I
wanted
the
problem
of
a
part.
I
can
go
to
the
sharepoint
online
admin
center
and
in
the
api,
my
husband,
I
need
to
trust
so
approve
or
rejected
permission
make
as
a
proof
in
order
to
make
this
call
and
trask
oratory
graph.
Api
amigos
from
I
should
point
framework
web
part
so
from
a
side
is
a
zone.
Thank
you.
A
lot
for
your
attention.
Great.
A
Demo
exciting
to
see
that
I
think
yeah,
maybe
you
have
a
few
questions
there
in
the
window,
but
we're
gonna
jump
back
to
the
slides,
real,
quick
and
close
out
the
presentation,
so
I
want
to
thank
Vincent
and
Frederico
for
some
great
demos
really
excited
to
see
that
it
really
shows
off
some
amazing
capabilities
and
hopefully
as
well.
The
PJs
demo
I
did
will
provide
a
little
bit
of
value
to
folks
as
well.
The
next
SPF
XJS
meeting
December
19th
2019.
A
We
will
have
a
meeting
that
day
and
then
the
next
general
cig
meeting
will
be
on
December
12th,
so
that's
next
Thursday
and
then
to
Thursdays
from
now
for
the
next
SPF
X
special
interest
group.
So
thank
you
all
very
much
for
attending
appreciate
everybody's
time.
Remember,
learn,
reuse
and
share,
and
look
forward
to
talking
to
you
all
soon
have
a
great
weekend.
Thanks
bye.