►
Description
In this PnP Web Cast we concentrated on showing how to get use external JavaScript libraries in your SharePoint Framework client-side web parts. SharePoint Framework provides easy way to build client-side web parts, which reference external libraries, like React, Angular or for example Knockout. There are few considerations which should be taken into account, when you reference external libraries, which directly impacts the overall size of your customizations. This webcast shows how to reference external libraries and also covers different optios and considerations to optimize your customizations.
You can download used presentation from https://doc.co/4xUTat
A
Welcome
everybody.
This
is
to
SharePoint
Patterson
practices,
webcast,
also
known
as
the
office
365
developer
webcast
and
this
time
we're
gonna
talk
about.
How
can
you
reference
and
use
external
javascript
libraries
from
a
SharePoint
framework
client-side
web
part?
My
name
is
Lissa.
You
wanna
I'm,
a
Senior
Program
Manager
from
Microsoft
or
chef
and
engineering
in
general,
and
with
me
we
have
the
BMP
core
team
member
wall
deck.
Will
you
do
the
quick
intros
as
well.
B
A
Indeed,
indeed,
so,
we're
gonna
go
through
a
few,
some
slides
and
what
its
gonna
do.
The
demo
around
the
exact
steps
to
make
things
happen.
Obviously,
the
the
when
you're
writing
a
client-side
web
part
within
a
SharePoint
framework.
You
quite
often
reference
external
libraries
like
angular
or
react
or
knockout
or
whatever,
and
you
need
to
kind
of
an
understand
the
chosen
or
what
I
did
the
models?
How
do
you
reference
those
external
libraries
within
your
web
part
before
we
actually
go
to
the
the
exact
material?
A
Let's
quickly
have
a
look
on
what
the
SharePoint
B&B
is
all
about,
so
we
always
do
this
as
I
clarification,
so
that
people
are
not
highly
confused
on
what
is
a
SharePoint
PNP.
So
the
SharePoint
BMP
is
really
a
community
driven
initiative
where
the
community
shares
code,
examples,
guidance,
documentation
and
learnings
between
each
other.
The
SharePoint
PNP
is
not
just
about
the
advanced
super
super
academically
correct
way
of
doing
stuff.
A
It's
also
contains
a
lot
of
getting
started
material
because
we
actually
want
people
to
have
a
stepping
stones
to
learn
these
things
and
learn
to
technologist
and
how
to
do
development
within
your
SharePoint.
The
themes
within
the
SharePoint
patterns
and
practices
are
obviously
around
SharePoint
framework,
which
is
the
new
stuff
which
is
currently
in
the
Developer
Preview
when
this
video
is
recorded,
but
also
it
contains
a
lot
of
guidance,
existing
guidance
from
a
SharePoint
add-ins,
also
around
how
to
use
much
of
craft
office.
A
365
api's
and
the
classic
themes
have
been
remote,
provisioning
and
client-side
development.
We
do
have
a
few
different
customer
case
studies
and
akms
SP
B&B
is
the
easiest
at
rest.
It's
a
one
single
page
where
you
can
find
all
of
the
resources,
the
webcast,
the
videos,
the
samples
and
all
of
that
stuff
for
you
to
consume
now,
moving
back
onto
today's
agenda.
So
how
do
we
actually
reference?
An
external
library
within
the
client-side
web
part
in
a
SharePoint
framework,
and
this
is
quite
easily
doable,
but
we
want
to
make
sure
that
we
talk
about.
A
Let's
say
the
considerations
within
the
within
this
presentation
as
well.
So
when
would
you
bundle
those
libraries
in
when
not
and
what
are
the
exact
steps
to
make?
These
things
happen
since
the
top
tooth,
without
the
Developer
Preview
and
again,
slightly
bent
veneer
when
you're
watching
the
video
and
this
capability
has
been
changed,
so
the
original
drop
which
were
started,
the
dev
preview?
A
There
were
some
issues
around
the
process
of
referencing
external
libraries,
and
that
has
been
now
fixed
and
while
we've
had
to
head
down
to
the
production
and
the
worldwide
usage,
obviously
these
things
will
be
working
accordingly.
But
what
you
need
to
do
is
that
within
your
client-side
web
part
solution
or
in
a
project
you
go
to
that
config
JSON
file,
where
we
reference
individual
JavaScript
libraries,
and
you
essentially
make
a
definition
of
an
external
library
in
that
config
Jason
project.
A
Then
you
install
the
Taipings,
for
example.
Angular
typings
and
typings
are
really
for
your
typescript
development,
so
you're
able
to
then
take
advantage
of
the
of
the
intelligence
and
all
of
that
development.
Goodness,
within
the
typescript
development
and
after
the
Taipings
have
been
installed,
you
import
the
actual
types
to
your
client-side
web
part
file
and
start
using
them
within
your
code.
Anything
I'm
missing
there
well
deck.
A
A
So
what
well
that
has
done
is
that
wanaka
has
already
prepared
the
client-side
web
part
so
created
an
in
the
client-side
web
part
using
the
yeoman
template
and
the
scaffolding
has
been
completed
because
that
takes
a
while
and
then
the
follow-up
step
is
that,
okay,
how
do
we
know
reference
an
external
javascript
library
in
the
client-side
web
port
and
to
make
sure
that
sure
that
we're
able
to
develop
using
that
library
functionalities?
So,
let's
jump
onto
the
demo
and
we'll
get
back
on
the
slides
in
a
second.
B
So
here
you
see
two
references
to
them
and
then
the
I,
what
I
also
do
is
I,
create
simple,
audio
and
and
bootstrap
the
app
and
using
the
angular
is
not
trickier
right.
The
idea
is
that
I
I
reference
angular
and
that
we
have
a
reference
to
it
in
a
code,
so
that
bundling
will
not
remove
the
reference
as
an
unused
reference,
because
we
wear
any
when
you
include
scripts,
that
you
don't
don't
use,
they
are
not
included
in
the
bundle.
B
So
with
that,
let's
build
the
project,
so
we
go
to
command
line
and
we
call
call
bundle
and
let's
have
a
look
when
it's
done
at
the
size
of
our
bundle.
Remember
the
web
part
that
we
have
here
is
this
plain:
her
hello
world
head
part.
It
wasn't
exactly
the
same
as
you
would
do
when
you
create
a
new
project,
so
the
bundling
is
done
and
now
let's
go
to
our
Explorer
and
to
the.
Let
me
zoom
in
on
that.
B
B
So
with
that
we
will
run
an
optimized
build
that
will
also
minified
scripts,
remove
all
tab
spaces
and
all
that
and
let's
have
a
look,
how
that's
going
to
influence
the
size
of
our
bundle
right
so
whether
that
will
remove
even
more
of
it
or
what's
doing
the
win?
Is
there
so
now
the
build
is
done
now,
let's
have
a
look
at
the
bundles
and
they
are
located
in
temp
and
deploy,
and
here
we
can
see
that
it's
still
300k
right.
So
imagine
that
you
would
have
few
of
these
on
one
one
page.
A
A
So
on
that
one
that's
just
kind
of
a
clarified,
the
bundling
and
what
does
that
actually
mean
if
people
are
not
familiar
with
the
term.
So
what
what
happens
here
is
that
we
actually
get
the
ng
UI
office
fabric
and
angular
inside
of
that
javascript
file
right,
so
we're
not
kind
of
reference
in
that
right
now
from
anywhere
else,
and
that's
the
reason
why
it's
still
300.
B
So
let
me
still,
let
me
run
and
an
optimized
build
so
that
we
can
actually
see
that
both
angular
and
energy
office
UI
fabric
are
included
in
a
code
yeah
right,
so
bundling
is
done,
and
if
we
go
here
to
dist
and
to
the
bundle-
and
here
we
search
for
angular,
so
you
can
see
it's
here.
So
here's
our
angular
1
point,
5,
5,
point
8
and
then
ng
of
this
UI
fabric
is
here
as
well.
Yeah
all
right.
B
So
with
that
you
can
see
that's
a
proof
that
all
of
that
code
is
included
in
our
code
as
well
right
and
every
single
time.
We
will
build
a
web
part
that
way
it
would
contain
all
of
that
code
by
itself.
So
all
of
that
code
is
only
available
to
web
part.
It's
not
available
to
to
another
one
right.
So
what
if
we
could
ensure
that
we
don't
and
bad
all
of
the
angular
and
Energy
Office,
you
guys
brick
inside
the
web
part
obviously
load
them
from
an
external
site
right.
B
So
the
way
you
can
do
it
is
really
easy,
and
the
great
thing
about
it
is.
It
doesn't
require
you
to
change
anything
about
your
your
code.
The
only
thing
that
you
could
you
have
to
do
for
that
is:
go
to
config
configuration
and
then
in
externals
add
entries
for
all
of
the
libraries
and
scripts
that
you
want
to
load
from
external
URL.
As
the
name
says
externals.
B
So
here
I
have
your
URL
for
angular
and
ng,
obviously,
wife
spirit,
let
me
copy
them
and
as
a
mere,
and
what
you
can
see
here
is
that
we
load
angular
from
this
URL
and
ng
office.
You
I've
read
from
from
from
this.
They
are
both
located
on
a
CDN,
but
that's
not
a
requirement.
It
can
be
your
own
internet.
It
could
be
a
SharePoint
document
library.
A
B
With
the
fact,
this
relates
to
the
format
of
the
script
that
you
are,
you
are
trying
to
load
so
in
in
our
case
or
when
you
build
us
us
a
script,
you
can
package
it
just
as
a
script
or
you
can
package
it
as
a
AMD
module,
common
J's
module
or
you
and
then
basically,
the
module
type
that
determines
how
it
can
be
used
and
loaded.
In
our
case
here,
angular
is
just
plain
script.
B
However,
the
web
parts
that
we
build
in
SharePoint
press
aim
work
are
all
UMD
modules
right,
so
everything
is
scoped
and
itself
on
on
paint.
So
with
that,
we
are
encouraged
not
to
mix
anything
or
actually
not
to
to
add
too
much
stuff
into
the
end.
The
root
scope,
because
imagine
that
you
would
have
two
airports
or
three
of
them
on
a
page
and
if
every
single
one
added
something
root
scope,
it
would
be
there's
a
risk
that
one
web
part
would
overwrite
another
right,
so
so
using
modules
architecture.
B
B
That
would
just
run
on
a
page
registered
itself
to
window,
and
it
would
just
be
there
available
for
everyone
on
a
page
with
the
risk
that
if
there
was
was
another
script,
that
would
load
that,
let's
say
angular
1.4
that
would
override
angular,
that
we
loaded,
initially
and
obviously
wife
fabric,
on
another
hand,
is
a
UMD
module
as
well.
So
with
that,
the
only
thing
that
we
have
to
do
is
actually
provide.
Only
the
URL
and
SharePoint
frameworks
take
takes
care
for
us
for
everything
in
in
in
else
right.
So
so
that's
the
trick.
A
B
A
B
Right
so
with
that,
let
me
save
that.
Let
me
now
go
back
so
with
that
we
haven't
changed
anything
about
our
code
right.
So
now,
let's
go
back
to
our
code
and
let's
do
a
gar
bundle.
There's
the
ship.
So,
let's,
let's
create
release
build
of
our
script
and
to
see
how
does
reference
in
angular
and
NGO
facility
fabric
from
from
external
place
affects
the
size.
So
if
you
now
go
back
to
our
Explorer
and
zoom
in,
we
can
see
that
new
bundle.
B
So
this
is
the
old
one
that
we
had
was
336
k,
the
new
one
where
we
load
both
scripts
from
an
external
place.
It's
only
six
K
yeah.
So
does
that
mean
that
we
have
330
kwin
per
head
part?
Well,
yes,
and
no
I
mean
we
still
need
those
scripts.
So
whenever
you
go
to
a
page,
there
will
still
be
that
that
that
initial
hit
right.
But
if
you
think
about
it
from
the
point
of
view
of
a
whole
intranet,
it
could
be
that
these
scripts
are
already
in
the
local
cache.
B
A
B
B
A
Cool.
Thank
you.
What
like
for
this
one,
let's
switch
back
on
the
slides
and
talk
about
few
considerations
when
we're
building
when
we
are
referencing
external
javascript,
libraries
within
client-side
web
parts
cute
and
coming
back
on
the
slides.
We
wanted
to
go
through
one
kind
of
a
summary
slide
on
the
considerations
on
this
client
side
on
when
you're
referencing,
an
external
library,
there's
few
things
kind
of
a
to
consider.
A
Obviously,
when
you
aren't
doing
a
web
stack
development,
one
of
the
considerations
is
that
do
we
actually
won
a
bundle,
an
external
javascript
library
to
your
client-side
web
part,
javascript
files
or
not,
and
and
just
to
clarify
that
term.
The
bundling
actually
means
that
if
you
wanna
bundle
the
for
example,
jQuery
to
your
client-side
web
part
code,
you
will
actually
get
that
jQuery
included
within
their
client-side
web
part
javascript
file
as
well,
and
if
you're
referencing,
for
example,
this
kind
of
a
generic
life
or
a
life
check
area
or
a
specific
version.
A
That's
not
necessarily
the
thing
what
you
want
to
do,
because
if
you
would
develop,
let's
say
a
multiple
client
side,
web
parts
and
all
of
them
are
our
preference
in
the
same
JavaScript
jQuery
version,
you
would
actually
duplicate
the
JavaScript
file
or
the
the
content
to
all
of
the
individual
JavaScript
ones,
and
that's
not
necessarily
what
you
want
to
do.
Maybe
there
would
be
what
would
be
provide
like
scenarios
where
we
would
actually
then
bundle
an
external
javascript
library.
B
Imagine
that
you
are
an
ISV
right
and
you
build
solution
that
should
work
on
every
internet,
that
you
don't
really
know
how
it's
built
right.
So
you
deploy
the
web
part
and
you
don't
know
what
else
is
on
the
page
in
order
for
that
to
work
to
ensure
that
your
your
web
part
works.
The
way
it's
supposed
to
be.
A
A
good
point,
and
maybe
another
one
if
you
well,
the
client-side
web
part
and
the
SharePoint
framework,
will
kernel
and
so
on,
premises
as
well
on
Chabon
2016
platform,
and
what,
if
you
wouldn't
have
an
external
internet
connectivity,
because
we
knew
do
you
know
that
there
are
enterprise
customers
who
are
running
SharePoint
locally
within
their
intranet
and
they
are.
They
do
not
have
internet
connectivity.
That
means
that
you
are
unable
to
reference
the
javascript
file
from
this
centralized
location.
If
it's
somewhere
in
the
Internet
right.
A
Absolutely
that
it's
a
great
option,
and
no
doubt
and
most
likely
you
would
set
up
kind
of
a
centralized-
let's
say
infrastructural
site
collection
where
you
host
all
of
this
JavaScript
libraries,
and
then
you
always
reference
them
from
that
location.
And
obviously
you
can
do
that
if
you
are
doing
in-house
or
enterprise
development
towards
that
particular
deployment.
But,
like
you
Bal
declination
around
the
is
VA
scenario,
that's
a
kind
of
a
slightly
separate
thing.
A
If
you
want
to
truly
package
the
whole
thing
as
a
one
file
which
can
be
used
across
the
world
regardless
attendees,
if
it
has
an
internet
connectivity
that
makes
a
lot
of
sense
the
kind
of
a
maybe
the
second
point
which
we
have
on
the
slide.
So
there's
this
different
consideration
based
on
the
user's
library.
So
as
an
example
natively
within
a
ship
on
framework,
we
in
Microsoft
we
use
react
for
a
lot
of
people
are
always
asking
that.
Well,
is
it
then
the
recommendation
that
you
should
be
doing
react?
A
Well,
not
necessarily
we
needed
to
choose
some
choose.
The
library
and
react
was
to
chosen
one
after
careful
considerations
which
is
aligned.
Then
within
our
development
process
you
can
absolutely
use
other
libraries
as
well,
but
what
it
means
is
that
the
react
is
already
loaded
for
you
within
the
within
the
framework.
So
you
don't
actually
need
to
kind
of
a
bundle
that
or
a
reference
that
in
as
part
of
your
clients,
art
web
part,
because
it's
already
there
angular
as
an
example,
you
need
to
explicitly
cover
within
your
customization.
A
So
you
need
to
make
sure
that
that's
in
the
config
Chasen.
So
you
have
that
reference
available
for
you
within
the
code
and
then
there's
the
additional
consideration.
The
format
of
the
library
impacts,
our
actual
implementation
style.
So
it's
the
library
using
kind
of
at
the
module
style,
but
the
modern
libraries
when
you're
doing,
but
when
you
are
importing
individual
modules,
for
example,
for
your
type
screen
or
then
it
is
it
just
a
JavaScript
library.
B
And
I
guess:
we've
seen
that
already
print
the
demo,
where
we
load
angular
lar
as
a
nun,
AMD
module
because
that's
a
non
AMD
module.
So
we
have
to
load
that
script
differently.
Then,
for
example,
the
other
script
that
we
blow,
that
which
is
the
engi
office
UI
fabric
and
which
is
available
as
a
UMD
module
right
so,
depending
on
the
type
or
on
how
the
script
that
you
are
trying
to
load
is
billed
you
have
to
adjust
the
way
you
load
it
in
your
sharepoint
frame
or
client
side.
With
that
part.
A
B
A
Absolutely
and
and
all
those
are
kind
of
the
final
pinpoint
or
final
consideration
on
the
on
the
slide
as
well.
Is
that
the
way
we
then
load
this
files
and
if
we
bundle
or
not
that
absolutely
impacts
the
overall
page
size?
And
this
this
is
really
kind
of
a
big
discussion
point
as
well,
not
just
for
my
library
loading
perspective,
because,
obviously,
if
you
have
multiple
client-side
web
parts
within
your
intranet
front
page
and
all
of
them
are
using
an
alternative
life
arias
and
they're
loading,
their
stuff
or,
however,
they
are
doing
your
page.
A
Size
actually
might
get
pretty
big.
So
there's
a
few
considerations
on
this
one.
So
obviously
you
probably
don't
want
to
bundle
unless
you
actually
need
to
bundle
to
do
other
reasons
so
that
the
JavaScript
libraries
are
referenced
from
one
centralized
location.
You
just
have
that
reference
to
that
external
location.
A
For
example,
one
is
referencing
knockout
one
is
referencing
react,
one
is
referencing
angular,
it
works
and
that's
fine,
but
the
bait
size,
the
overall
bait
size,
which
is
getting
loaded
whenever
somebody
requests
a
page
Crow's
enormously,
so
having
a
kind
of
a
consistent
way
of
doing
development
and
the
consistent
library
within
a
single
deployment
absolutely
makes
sense
and
well
obviously,
that's
not
a
black
and
white
discussion.
That's
really
kind
of
a
well
with
water
library.
It
is
then
and
discussion
and
that's
something
what
everybody
needs
to
decide
by
themselves.
We
Microsoft
black
nation.
A
A
You
cool
but
I
think
that's
it.
That's
it
for
this
particular
weapon
webcast.
We
really
wanted
to
kind
of
a
walk
truth.
How
do
we
reference
the
client-side
as
additional
libraries
from
internet
or
what
are
the
options
of
referencing,
an
external
javascript
library
and
then
have
a
discussion
around
those
considerations?
These
things
are
never
black
and
white
and
that's
something
what
I
personally
want
people
to
learn
to
think
we
quite
often,
actually
we
see
seminars
and
we
say
questions
where
somebody's
saying
the
best
practices
for
doing
whatever
well,
the
best
practice
is
always
depends.
A
It
absolutely
depends
on
a
particular
use
case,
particular
objectives
on
and
requirements,
and
is
it
the
best
practice
to
reuse
angular?
Is
it
the
best
practice
to
bundle
it's
not
a
black
and
white
discussion?
It
significantly
depends
on
the
objectives
of
the
web
part
and
especially
with
the
PNP
guidance
and
this
kind
of
webcast.
We
want
to
make
sure
that
people
have
the
understanding
of
the
chosen
path
and
that's
really
important
not
about
the
fact
that
do
you
consider
some
best
practice
or
not,
or
rather
making
a
decision
by
knowing.
B
Yeah
I
would
encourage
everyone
to
try
SP
facts
and
they
actually
try
and
see
how
that
would
work
with
the
framework
that
you
guys
use
and
whether
you
can
all
oh
hold
it
and
it
works
the
way
it's
supposed
to
right,
because
there
are
many
frameworks
available
and
there
is
no
way
for
anyone
to
test
all
of
them
and
I.
Guess
that
that
if
we
try
doing
that
together,
it
will
give
us
a
better
view
of
what
does
work
and
what
does
not
work.
A
Yes,
please
use
the
github
repos
and
the
detect
community
of
Microsoft
come
and
stock
exchange
forums
to,
let
us
know
in
the
Microsoft
side
as
well,
if
you're
running
into
random
issues
and
also
sharing
your
learnings.
It's
it's
not
a
bad
idea
to
code
that
it's
tech
community,
that
night
Microsoft
comm,
underneath,
for
example,
the
SharePoint
developer
code
and
just
pinpoint
at
a
I
tested
this
one,
and
it
works
perfectly
using
follow
up
setup
because
all
of
that
is
getting
indexed
by
the
search,
crawlers,
the
Bing
and
Google
Search
chorus.
A
And
then,
whenever
somebody
is
looking
into
hey,
how
would
I
use
whatever
random
library
with
SharePoint
client-side
web
parts
or
SharePoint
framework?
They
would
find
that
topic
and
that's
really
the
key
point
sharing
your
learnings
with
others
will
benefit
others
as
well,
and
then
the
other
ones
will
share
their
learnings
and
you
will
benefit
out
of
them
as
well.
It's
the
classic
story
of
of
sharing
is
caring
in
the
PNP,
yes,
cool
I!
Think
that's
it!
Thank
you.
Everybody
for
watching
and
we'll
come
up
with
a
a
new
webcast.
Sooner
or
later.