►
Description
Community call demo is taken from the SharePoint Framework Special Interest Group recording at 14th of February 2019. In this video, Eric Overfield (PixelMill) does an introduction for the custom React RSS Reader client-side web part built with SharePoint Framework.
Demonstrated web part is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-rss-reader
Presenter - Eric Overfield (PixelMill) - @ericoverfield
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
So
quickly,
Who
I
am
my
name,
is
Eric
oberfield,
Microsoft,
Regional,
Director,
Microsoft
MVP
as
well,
like
a
lot
of
you
who've
been
contribute
as
well.
Thank
you
all
very
cool
stuff
work
with
pixel
mill
got
all
the
information,
so
you
can
find
out
who
I
am
how
to
get
a
hold
of
me,
how
to
get
a
hold
my
company
all
that
great
stuff
all
right.
Thank
you
all.
So,
basically,
what
I
was
looking
at.
A
I
really
wanted
something
that
had
a
lot
of
demo
code,
a
lot
of
code
that
did
actual
extra
things
that
you
might
want
that
you
could
then
tear
apart
and
say
wow
that
was
really
cool
because
I
think
I,
like
many
of
you,
I'm,
taking
all
those
samples
out
I'm
taking
that
cool
little
piece
and
I'm
using
my
project.
This
Peeta
this
web
part
was
definitely
inspired
by
Oliver
carpenters,
RSS
reader
web
part,
a
part
of
his
40
fantasticks
component.
A
That
I
know
that
the
vessel
loved
so
much
there
was
the
the
major
issue
with
that
was
that
it
was
built
on
SharePoint,
framer
1.1
and
it
hadn't
been
updated.
The
other
aspect
was
that
the
the
technique
that
Oliver
used
to
grab
the
RSS
feed
was
using
a
yahoo
API
that
actually
got
shut
down
a
couple
months
ago,
so
we
really
needed
something
else
to
go
and
grab
an
RSS
feed.
So
what
I
wanted
to
do
was
not
only
have
just
one
way
to
go:
get
a
feed
as
an
using
one.
A
Api
I
wanted
to
be
able
to
get
a
feed
directly.
I
wanted
to
use
some
of
the
the
new
classes
available
in
SharePoint
framework
I
wanted
to
try
using
other
services.
Maybe
I
would
want
my
own
proxy
service
so
that
I
could
have
something
hosted.
An
azure
I
would
go
pick.
My
web
part
would
take
that
and
then
that
proxy
would
go,
get
that
or
using
a
popular
paid
service,
maybe
you're.
A
Looking
that
you
would
want
to
use
something
like
arsons
to
JSON,
which
is
a
service
you
can
pay,
for
that
will
help
be
that
inner
mirror
in
a
mediator.
For
you,
another
common
request
that
I'm
often
seen
and
that
I'm
using
a
lot
myself
is
when
I
ever
need
to
get
external
data.
Some
professions,
Airport
from
graph
from
external
API,
is
etc.
A
Maybe
the
URL
I
know
md5
is
not
considered
cryptic
liabilities,
cryptic,
cryptographically,
I
suppose
unsecure
for
this
particular
purpose.
I
think
is
completely
fine.
It's
super
fast
super
lean
and
quick
and
provides
a
reasonable
just
keen
mechanism,
let's
see
so
the
other.
That
last
thing
I
really
wanted.
A
de
baton
here
was
the
ability
to
allow
the
content
out
in
the
editor.
The
page
editor,
the
user
of
this
web
part
to
be
able
to
manipulate
the
the
way
that
the
results
would
get
rendered.
So
this
has
been
huge
big.
A
Second,
thanks
to
whoops
I'm
miss
bill
Frank
and
Mikhail
apart
the
work
that
they
did
over
in
the
react
search
for
finer
for
search
results.
Web
part
that
recently
became
a
solution
providing
those
links
for
y'all.
If
you
haven't
seen
it
just
that
is
definitely
one
of
the
cooler
web
parts
that
I'm
using
a
lot
for
clients
that
I
work
with,
because
it
really
makes
working
with
modern,
sharepoint
and
search
great.
So
I
basically
took
their
idea
of
how
to
work
with
handle
bar
template
if
they
got
it
from
someone
else.
A
Finally,
the
idea
was
about
what
I've
started
with,
which
is
I
really
wanted
to
throw
a
lot
of
little
things
together
that
I've
been
using
into
one
web
part
so
that
from
somewhat
selfishly
now,
I
can
go
grab
my
quota
more
easily
because
I
embedded
it
a
little
better,
hopefully
for
you
as
well.
I
really
hope
that
a
lot
of
you
takes
a
webpart
like
this
and
and
sure
we're
flying
out
on
the
box.
That's
the
great
part,
but
then
as
well
you'll
rip
it
apart
and
you'll
see.
How
did
he
do
that?
A
That's
an
interesting
way
to
do
that
and,
of
course,
I'm.
Always
looking
for
feedback
to
please,
if
you
think
it's
way
to
improve
it,
let's
get
those
PRS
in
and
let's
have
a
lot
of
fun
with
it.
Okay,
so
let's
go
ahead
and
let's
see
this
webpart
in
action,
so
I
had
just,
of
course,
the
demo
page
loaded
once
you've
got
it
all
on
star.
Install
is
just
gonna,
be
your
RSS
reader
web
part
by
default.
A
I've
got
a
bunch
of
settings
set
up
and
again
this
is
straight
out
of
Oliver's
I
used
his
demo
bloggers
I
want
to
give
him
credit
for
the
cool
work
that
he
did.
I
just
have
a
lot
more
settings
available,
though,
on
the
right
hand,
side
there's
different
ways
to
get
the
request.
So
the
three
that
I
talked
about
is
a
direct
request.
This
would
be
the
browser
making
a
direct
request
to
the
end
service.
The
second
one
is
using
this
feed
to
JSON.
A
The
code
itself
is
always
expecting
the
normalized
JSON
in
order
to
get
a
reliable
output.
A
reliable
rendered
output
and
I
have
a
service
to
do
that
within
the
codebase
so
but
feed
the
JSON
would
help
you
go
and
pull
the
makoto
service
and
it
will
return
you
JSON.
What
I
like
about
this
is.
This
is
an
open
source
solution.
They
do
provide
an
endpoint
that
you
can
ping
just
for
testing,
but
is
not
for
production.
The
catch
to
that
is
that
they
are
not
sending
back.
A
The
proper
course
request,
which
of
course,
response
which
is
a
real
shame,
so
that
actually
doesn't
work.
What
you
would
really
want
to
do
is
take
their
open
source
solution,
they'll
put
it
up
in
Azure,
and
you
could
then
ping
that
you
could
ping
your
own
service
in
production
and
then,
if
you
are
willing
to
is
a
paid
service,
there's
a
RSS
to
JSON
calm.
A
They
offer
up
a
free
account,
which
is
basically
you
can
10,000
requests
a
day
and
they
will
store
your
rssp
for
an
hour
and
a
half
they'll,
only
refresh
it
every
hour
and
a
half,
but
it's
pretty
cool.
I
mean
it's
nice
and
simple
for
a
non
production
environment.
Then
they
have
paid
services
which
is
pretty
reasonable.
A
This,
though,
is
the
easy
way,
because
it
is
that
they
are
sending
the
proper
of
course
response,
and
this
is
what
I
use
by
default
when
you
first
install
this
thing,
because
it
was
reliable,
I
could
always
make
sure
that
we
were
getting
a
response.
Assuming
your
corporate
firewall
doesn't
do
some
weird
proxy
stuff.
I
haven't
been
able
to
test
such
a
scenario.
A
You
can
change
the
maximum
count
for
the
direct
or
feeds
a
feed
to
JSON
or
org.
You
cannot
change
the
account
for
RSS
to
JSON
if
you,
unless
you're
paying
for
some
other
cool
things
so
I
have
that
caching
enabled
where
you
can
set
the
timeout
as
to
how
long
you're
going
to
store
something
in
local
storage.
You
can
change
some
loading
messaging,
but
then
there's
also
the
chorus
response,
so
that
you
can
say
do
I
want
to
disable
course
by
default.
A
I'm
gonna
have
the
cours
mode
enabled,
but
I
can
send
that
you
can
set
along
that
proper
header
message,
as
it
says.
No,
no.
The
header
requests
that
just
says
nil
course
or
use
of
course
proxies.
So,
let's
go
and
kind
of
see
some
of
this
in
action,
though
of
course,
and
I'll
show
you
the
next
screen
in
a
second.
A
So
let's
say:
I
want
to
make
a
direct
request
to
my
RSS
feed
and
if
I
click
apply,
I'm
gonna
get
an
error,
saying
that,
well
that
particular
RSS
feed
is
not
sending
the
proper
of
course
response.
That's
it's!
That's
it's
not
going
to
be
good,
even
if
I
disable
cours,
it's
still
not
going
to
work,
because
the
browser
now
is
saying
I,
don't
like
this.
A
This
isn't
cool,
but
you
can
use,
of
course,
proxy
and
I'm
using
a
this
cours
anywhere
another
open
source
project,
which
is
not
really
good
for
production,
but
it
does
work
if
I
go
ahead
and
I
apply.
That
what's
happening,
which
should
happen
here,
is
that
what
should
have
happened
is
the
let's
just
save
it
and
we
will
see
if
it
actually
loads.
A
Maybe
my
tenant
is
no
longer
being
responsive
up
there
we
go
that
was
working,
I'll
make
sure
it
is
I.
Don't
know
why
it's
not
right.
Now,
where
I
was
using
the.
Maybe
it
didn't
save
it.
Oh
no,
it
did
I
what
there
we
go.
Let's
try
request:
let's
try
apply,
oh
well,
build
demo.
Gods
doesn't
work
how
they'd
have
been
working
this
morning
when
I
tested
it
before
the
call
that's
such
as
life.
Let's
go
ahead
and
let's
turn
all
this
off.
Oh
I
think
I
was
disabling
hormoz.
A
Now.
Let
me
try
it
properly
perfect.
There
we
go
I,
just
had
it.
The
ass
off.
This
is
goodbye.
There
you
go.
I
was
disabling
quarters,
even
those
trying
to
use
a
coarse
proxy.
So
let's
go
ahead
and
turn
all
that
off.
Let's
go
ahead
and
do
one
more
thing
here
before
I
show
the
quick
rendering
and
then
and
this
if
you
go
ahead
and
you
set
caching
on
now,
let
me
go
ahead
and
turn
on
the
network.
Debugger
I'm
going
to
look
for
the
word
tech,
that's
being
loaded.
A
It's
not
probably
already
storing
it
in
local
storage.
So
if
I
have
the
cache,
you
turned
on
what's
gonna
happen.
What
you
actually
can
see
is
the
feed
loaded,
but
I
didn't
actually
load
anything
in
the
in
the
network.
Tab,
but
there's
nothing
actually
sent
across
the
wire.
So
what's
happening
is
that
there
is
a
I'm,
storing
the
results
in
local
storage
with
a
timeout
and
it
works
pretty
well.
So
if
I
go
ahead
and
I
delete
this,
let's
go
back
to
it
and
let's
go
ahead
and
refresh
that's
fine.
A
We
should
now
see
that
we
actually
had
to
go.
Pull
the
RSS
feed
I.
Think
I'm
am
storing.
If
I
refresh
it
yet
again,
we'll
see
now
that
local
storage
is
actually
been
used.
I
didn't
have
to
make
another
request,
so
I
thought
that
was
super
cool
the
last
little
demo
that
I
want
to
show
on
the
on
the
editing
side
before
we
quickly
flip
over
the
code.
For
just
a
few
minutes
here
is
on
the
rendering
aspect
of
it.
A
So
by
default
we're
using
a
react
component,
rendering
a
lot
of
things
that
you
can
change.
If
you
wanted
I
even
kept
in
some
Oliver's
color,
changing
kind
of
aspects
which
I
thought
was
kind
of
cool,
it's
just
a
cool
demo
for
me,
I,
don't
really
like
it
in
general,
like
I.
Don't
think
this
would
be
a
good
thing
that
you
would
typically
want
to
give
your
end-users,
but
I
thought
that
was
cool.
I
am
using
moment'
Jas.
So
for
my
European
friends,
we
wanted
to
change
the
day.
We
could
change
the
date.
A
They
format
got
change.
Maybe
I
want
to
turn
some
things
off.
I
want
a
lot
more
characters,
all
those
work,
but
the
other
really
cool
thing
that
I
liked
was
using
that
handlebar
template
approach.
So
by
default,
there's
a
template,
that's
enabled
for
you.
If
you
save
that
and
apply
it,
it
gives
more
about
cardstock
using
all
the
other
little
things,
the
cool
things
the
pnp
react
controls
as
well
for
something
like
the
web
part
title
using
all
of
that
really
cool
stuff
cool.
A
So
very
quick
demo
I
thought
that
would
be
fun
to
see
what
the
what
we're
going
on
on
what
we're
doing
on
the
front
end.
If
we
go
ahead
and
we
quickly
look
on
the
backend
code,
one
of
the
the
major
things
that
I
did
here
was
I
liked
the
idea
of
moving
everything
most
of
your
helpers,
most
of
your
controls,
your
modules,
etc
down
to
the
source
level.
So
they're
more
shareable,
totally
up
to
you
to
understand
that
you
know
some
people
like
doing
it
certain
ways.
A
I
was
able
to
pretty
much
modular
eyes
out
the
local
storage
service.
So
if
you
want
to
just
grab
that
I
think
you
can
I
try
to
comment
stuff
as
much
as
I
could
as
well
for
you,
but
I
have
some
some
interfaces
to
be
able
to
to
be
able
to
interact
with
the
local
storage,
there's
a
whole
RSS
reader
service
as
well,
that
that
allows
you
to
be
able
to
MIT
to
work
with
and
manipulate
the
RSS
feeder
I
created
a
simple
RSS
parser
as
well.
A
A
Oh
yeah,
that
the
client
service,
what
I
ended
up
doing
was
creating
multiple
services
for
interacting
with
different
types
of
RSS
feeds
and
then
I
had
the,
but
all
of
them
use
the
same
HTTP
client
and
what
they
basically
do
as
input
is
they
set
up
an
HTTP
client
from
context
and,
and
hopefully
ACS
cringing
a
little
bit.
He
always
taught
me
never
really
just
send
in
the
context
your
web
context
to
a
module
I
did
it
here
for
simplicity.
A
Typically,
the
recommendation
would
be
to
I
think
the
best
practice
is
really
to
send
in
only
the
specific
aspects
you
might
need
to
your
sub
sub
module,
sub
controls,
etc,
but
for
simplicity,
I
just
sent
in
the
entire
context,
and
that
allowed
me
to
grab
the
HTTP
client
that
I
needed.
So
thank
you
all
very
much
hope
that
demo
maybe
good
overview.
What
we've
got
there
if
you
want
that
URL
at
all?
It's
just
you
know
over
in
that
github
thing.
A
A
huge
fan
of
the
idea
of
creating
a
better
interface
for
that,
so
that
was
presented
a
few
minutes
ago.
Absolutely
agree
that
would
be
really
cool
to
help
promote
some
of
the
web
parts
that
are
almost
ready
for
life
instead
of
for
production,
rather
than
just
being
a
demo
of
maybe
how
to
make
cut
back,
read
request
which,
by
the
way,
that
is
a
cool
solution
as
well,
just
probably
not
something
that
you
would
use
on
a
live
portal.
So
thank
you
all.