Up next in 10
Join us at the React Virtual Conference to learn about the latest updates and free hands-on sessions from speakers around the globe.
Timings below are in Eastern Time US (New York)
• 09:50 AM - 10:00 AM : Welcome Note
Stephen SIMON
• 10:00 AM - 10:50 AM: Books Store app using MERN Stack
Viswanatha Swamy
• 10:50 AM- 11:40 AM: Useful NPM React Libraries in SPFx
Siddharth Vaghasia
• 11:40 AM - 12:00 PM: Scaling WordPress with Next.js
Colby Fayock
• 12:00 PM - 12:50 PM: Building reliable applications with React, C#, and Azure
Maurice de Beijer
• 12:50 PM - 01:00 PM : Closing Note
Show More Show Less View Video Transcript
0:04
[Music]
0:42
so
0:45
so
0:45
so [Music]
1:52
bye
1:55
[Music]
2:06
so
2:09
so
2:09
so [Music]
2:20
[Music]
2:20
[Music] is
2:25
[Music]
3:04
[Music]
3:04
[Music] hi everyone uh welcome to react virtual
3:07
hi everyone uh welcome to react virtual
3:07
hi everyone uh welcome to react virtual conference i'm your host stephen simon
3:09
conference i'm your host stephen simon
3:09
conference i'm your host stephen simon and we are back with another conference
3:11
and we are back with another conference
3:11
and we are back with another conference if you're someone who is joining us for
3:12
if you're someone who is joining us for
3:12
if you're someone who is joining us for the very first time
3:14
the very first time
3:14
the very first time um c-sharp corner is a community of
3:16
um c-sharp corner is a community of
3:16
um c-sharp corner is a community of software developer
3:17
software developer
3:17
software developer software and data developers uh and if
3:20
software and data developers uh and if
3:20
software and data developers uh and if you check the recent prank deciding part
3:22
you check the recent prank deciding part
3:22
you check the recent prank deciding part is we
3:22
is we
3:22
is we crossed we are now top 2500 websites
3:26
crossed we are now top 2500 websites
3:26
crossed we are now top 2500 websites across the globe so that's the exciting
3:28
across the globe so that's the exciting
3:28
across the globe so that's the exciting thing so welcome everyone to this react
3:30
thing so welcome everyone to this react
3:30
thing so welcome everyone to this react virtual conference as i say i'm your
3:32
virtual conference as i say i'm your
3:32
virtual conference as i say i'm your host evan simon and
3:34
host evan simon and
3:34
host evan simon and this is gonna be a really exciting power
3:36
this is gonna be a really exciting power
3:36
this is gonna be a really exciting power pack three hours of conference i would
3:37
pack three hours of conference i would
3:37
pack three hours of conference i would say it's a mini conference
3:39
say it's a mini conference
3:39
say it's a mini conference where you'll get to learn from speakers
3:41
where you'll get to learn from speakers
3:41
where you'll get to learn from speakers across the globe and
3:42
across the globe and
3:42
across the globe and we have very exciting giveaways to give
3:45
we have very exciting giveaways to give
3:45
we have very exciting giveaways to give so if you are commenting anything
3:47
so if you are commenting anything
3:47
so if you are commenting anything in the live chat please make sure that
3:50
in the live chat please make sure that
3:50
in the live chat please make sure that you use
3:51
you use
3:51
you use uh react c sharp corner hashtag in the
3:54
uh react c sharp corner hashtag in the
3:54
uh react c sharp corner hashtag in the comments and with me
3:55
comments and with me
3:55
comments and with me and we'll draw we'll do a lucky draw
3:59
and we'll draw we'll do a lucky draw
3:59
and we'll draw we'll do a lucky draw after every session and you get a chance
4:02
after every session and you get a chance
4:02
after every session and you get a chance to win some exciting giveaways
4:03
to win some exciting giveaways
4:03
to win some exciting giveaways having said that please let us know from
4:05
having said that please let us know from
4:05
having said that please let us know from which location you're joining it's
4:06
which location you're joining it's
4:06
which location you're joining it's always pretty interesting from
4:08
always pretty interesting from
4:08
always pretty interesting from which location if you're joining i'm
4:10
which location if you're joining i'm
4:10
which location if you're joining i'm joining from delhi india
4:12
joining from delhi india
4:12
joining from delhi india and i already see some people uh just
4:15
and i already see some people uh just
4:15
and i already see some people uh just says he is joining from uh
4:17
says he is joining from uh
4:17
says he is joining from uh switzerland so hi just thanks for
4:19
switzerland so hi just thanks for
4:19
switzerland so hi just thanks for joining in and drop your location in the
4:21
joining in and drop your location in the
4:21
joining in and drop your location in the comments it's always very interesting
4:22
comments it's always very interesting
4:22
comments it's always very interesting from which location before i joining
4:24
from which location before i joining
4:24
from which location before i joining you never know someone is joining from
4:25
you never know someone is joining from
4:26
you never know someone is joining from your location so a couple of
4:28
your location so a couple of
4:28
your location so a couple of announcements before we go ahead and
4:29
announcements before we go ahead and
4:29
announcements before we go ahead and actually get started with
4:31
actually get started with
4:31
actually get started with today's conference is that a few
4:33
today's conference is that a few
4:33
today's conference is that a few important things
4:35
important things
4:35
important things i'm gonna drop in the comments that this
4:37
i'm gonna drop in the comments that this
4:37
i'm gonna drop in the comments that this is uh
4:38
is uh
4:39
is uh globaltechconferences.com so that we
4:41
globaltechconferences.com so that we
4:41
globaltechconferences.com so that we couldn't bring it
4:42
couldn't bring it
4:42
couldn't bring it on these slides yeah that's it
4:45
on these slides yeah that's it
4:45
on these slides yeah that's it so definitely go ahead and keep visiting
4:47
so definitely go ahead and keep visiting
4:48
so definitely go ahead and keep visiting this platform
4:49
this platform
4:49
this platform this is this is the website where we and
4:51
this is this is the website where we and
4:51
this is this is the website where we and all the upcoming conferences
4:53
all the upcoming conferences
4:53
all the upcoming conferences we've scored on we plan to do many many
4:55
we've scored on we plan to do many many
4:55
we've scored on we plan to do many many conferences this year we have already
4:57
conferences this year we have already
4:57
conferences this year we have already done close to eight to nine conferences
4:59
done close to eight to nine conferences
4:59
done close to eight to nine conferences in the first half of this year and we'll
5:01
in the first half of this year and we'll
5:01
in the first half of this year and we'll do 10 15 more
5:02
do 10 15 more
5:02
do 10 15 more we have today happy track virtual
5:04
we have today happy track virtual
5:04
we have today happy track virtual conference followed by we have code
5:06
conference followed by we have code
5:06
conference followed by we have code quality
5:07
quality
5:07
quality and women data summit id security arvr
5:10
and women data summit id security arvr
5:10
and women data summit id security arvr azure summit uh c-sharp from the united
5:13
azure summit uh c-sharp from the united
5:13
azure summit uh c-sharp from the united states conference
5:14
states conference
5:14
states conference and many more conference scheduled and
5:16
and many more conference scheduled and
5:16
and many more conference scheduled and if you look back what we have done in
5:18
if you look back what we have done in
5:18
if you look back what we have done in the past of 2021
5:19
the past of 2021
5:19
the past of 2021 we have had annual react angular virtual
5:21
we have had annual react angular virtual
5:21
we have had annual react angular virtual conference i your cosmos tv conference
5:23
conference i your cosmos tv conference
5:23
conference i your cosmos tv conference this is actually the official conference
5:25
this is actually the official conference
5:25
this is actually the official conference and we also have full stack
5:27
and we also have full stack
5:27
and we also have full stack we did iot global ai and
5:30
we did iot global ai and
5:30
we did iot global ai and three more many more sql server content
5:33
three more many more sql server content
5:33
three more many more sql server content so
5:33
so
5:33
so definitely go ahead and keep yourself
5:35
definitely go ahead and keep yourself
5:35
definitely go ahead and keep yourself updated at global
5:37
updated at global
5:37
updated at global globaltechconferences.com that's where
5:38
globaltechconferences.com that's where
5:38
globaltechconferences.com that's where we
5:38
we
5:38
we add all our uh the upcoming conferences
5:42
add all our uh the upcoming conferences
5:42
add all our uh the upcoming conferences so herman says see shaffer i'm joining
5:44
so herman says see shaffer i'm joining
5:44
so herman says see shaffer i'm joining from punjab thanks
5:46
from punjab thanks
5:46
from punjab thanks um thanks for tuning in uh i have
5:49
um thanks for tuning in uh i have
5:49
um thanks for tuning in uh i have dropped that link in the comments so
5:51
dropped that link in the comments so
5:52
dropped that link in the comments so you can definitely pick up that there
5:53
you can definitely pick up that there
5:53
you can definitely pick up that there okay siddharth is from pune
5:55
okay siddharth is from pune
5:55
okay siddharth is from pune he's one of our speakers so thank you
5:57
he's one of our speakers so thank you
5:57
he's one of our speakers so thank you i'll just get to host him
5:58
i'll just get to host him
5:58
i'll just get to host him in about 15 minutes joining from noida
6:08
so quite a diverse location i would say
6:11
so quite a diverse location i would say
6:12
so quite a diverse location i would say and uh mahesh is joining from philly
6:14
and uh mahesh is joining from philly
6:14
and uh mahesh is joining from philly police village
6:15
police village
6:15
police village definitely uh they have nice weather
6:18
definitely uh they have nice weather
6:18
definitely uh they have nice weather it's pretty hot here in india actually
6:20
it's pretty hot here in india actually
6:20
it's pretty hot here in india actually so uh without any further ado let's go
6:22
so uh without any further ado let's go
6:22
so uh without any further ado let's go ahead and
6:24
ahead and
6:24
ahead and talk about our very first speaker of the
6:26
talk about our very first speaker of the
6:26
talk about our very first speaker of the day he is a c-sharp
6:28
day he is a c-sharp
6:28
day he is a c-sharp mvp and
6:31
mvp and
6:31
mvp and he is going to talk about how you can
6:32
he is going to talk about how you can
6:32
he is going to talk about how you can actually go ahead and develop
6:35
actually go ahead and develop
6:35
actually go ahead and develop a book application i'm not sure of a
6:38
a book application i'm not sure of a
6:38
a book application i'm not sure of a bookstore application using burn stack
6:40
bookstore application using burn stack
6:40
bookstore application using burn stack and i have seen his other talk he's an
6:42
and i have seen his other talk he's an
6:42
and i have seen his other talk he's an absolutely amazing speaker
6:44
absolutely amazing speaker
6:44
absolutely amazing speaker and i'm really excited to host him today
6:46
and i'm really excited to host him today
6:46
and i'm really excited to host him today as he's inaugurate the react virtual
6:48
as he's inaugurate the react virtual
6:48
as he's inaugurate the react virtual conference
6:49
conference
6:49
conference 201 edition and let's go invite our very
6:52
201 edition and let's go invite our very
6:52
201 edition and let's go invite our very first speaker
6:53
first speaker
6:53
first speaker aka swami
7:10
[Music]
7:32
[Music]
7:32
[Music] hi swami welcome to react virtual
7:33
hi swami welcome to react virtual
7:33
hi swami welcome to react virtual conference
7:35
conference
7:35
conference hey steven thank you so much for hosting
7:38
hey steven thank you so much for hosting
7:38
hey steven thank you so much for hosting me
7:40
me
7:40
me i'm more excited and little nervous
7:43
i'm more excited and little nervous
7:43
i'm more excited and little nervous i hear you as i say uh for someone who
7:46
i hear you as i say uh for someone who
7:46
i hear you as i say uh for someone who is tuning in for the very first
7:48
is tuning in for the very first
7:48
is tuning in for the very first time at swami's session i i always say
7:51
time at swami's session i i always say
7:51
time at swami's session i i always say just pour on your seat belts because his
7:53
just pour on your seat belts because his
7:53
just pour on your seat belts because his session is going to be
7:54
session is going to be
7:54
session is going to be very very fast but i promise that he's
7:57
very very fast but i promise that he's
7:57
very very fast but i promise that he's gonna share some of the really amazing
7:58
gonna share some of the really amazing
7:58
gonna share some of the really amazing resources
7:59
resources
7:59
resources especially swami is gonna drop his
8:00
especially swami is gonna drop his
8:00
especially swami is gonna drop his github url
8:02
github url
8:02
github url where you can definitely download all
8:04
where you can definitely download all
8:04
where you can definitely download all the resource projects that he builds
8:06
the resource projects that he builds
8:06
the resource projects that he builds so uh swami what exactly you're going to
8:08
so uh swami what exactly you're going to
8:08
so uh swami what exactly you're going to cover in today's session i do know it's
8:10
cover in today's session i do know it's
8:10
cover in today's session i do know it's a bookstore it's going to be one stack
8:12
a bookstore it's going to be one stack
8:12
a bookstore it's going to be one stack right so what exactly what are the
8:13
right so what exactly what are the
8:13
right so what exactly what are the topics that you're going to cover in
8:15
topics that you're going to cover in
8:15
topics that you're going to cover in next 50 minutes
8:16
next 50 minutes
8:16
next 50 minutes wow uh it's pretty good question thanks
8:19
wow uh it's pretty good question thanks
8:19
wow uh it's pretty good question thanks so much
8:20
so much
8:20
so much the first thing we'll spend five to ten
8:22
the first thing we'll spend five to ten
8:22
the first thing we'll spend five to ten minutes on uh
8:24
minutes on uh
8:24
minutes on uh seeing this uh mongodb there are
8:26
seeing this uh mongodb there are
8:26
seeing this uh mongodb there are multiple options we can
8:28
multiple options we can
8:28
multiple options we can create our the installation we can have
8:31
create our the installation we can have
8:31
create our the installation we can have it
8:31
it
8:31
it on our laptop or we can host it in
8:35
on our laptop or we can host it in
8:35
on our laptop or we can host it in uh atlas atlas and use it from
8:37
uh atlas atlas and use it from
8:37
uh atlas atlas and use it from there
8:38
there
8:38
there or from the docker so this time i'm
8:41
or from the docker so this time i'm
8:41
or from the docker so this time i'm going a little bit different i'm using
8:43
going a little bit different i'm using
8:43
going a little bit different i'm using docker instances
8:45
docker instances
8:45
docker instances it's a local docker so very lightweight
8:48
it's a local docker so very lightweight
8:48
it's a local docker so very lightweight very lightweight and uh on flash of a
8:51
very lightweight and uh on flash of a
8:51
very lightweight and uh on flash of a second
8:51
second
8:51
second it boots up and also how can
8:54
it boots up and also how can
8:54
it boots up and also how can how can we dig deep into the docker
8:57
how can we dig deep into the docker
8:57
how can we dig deep into the docker container
8:58
container
8:58
container and play play around that that's
9:00
and play play around that that's
9:00
and play play around that that's fantastic thing
9:01
fantastic thing
9:01
fantastic thing uh that few few minutes whatever we are
9:04
uh that few few minutes whatever we are
9:04
uh that few few minutes whatever we are spending is
9:05
spending is
9:05
spending is really really great i i really enjoy
9:07
really really great i i really enjoy
9:07
really really great i i really enjoy that getting deep into that
9:08
that getting deep into that
9:08
that getting deep into that docker container and okay and
9:11
docker container and okay and
9:12
docker container and okay and next to 10 minutes yes
9:16
next to 10 minutes yes
9:16
next to 10 minutes yes next 10 minutes we'll spend on uh node
9:19
next 10 minutes we'll spend on uh node
9:19
next 10 minutes we'll spend on uh node express
9:20
express
9:20
express api and see how we can
9:23
api and see how we can
9:23
api and see how we can hit this api endpoint to go and fetch
9:27
hit this api endpoint to go and fetch
9:27
hit this api endpoint to go and fetch the data or do the cred operations
9:29
the data or do the cred operations
9:29
the data or do the cred operations whatever we are going to do through the
9:30
whatever we are going to do through the
9:30
whatever we are going to do through the app
9:31
app
9:31
app uh we do it through the postman so we'll
9:33
uh we do it through the postman so we'll
9:33
uh we do it through the postman so we'll know the nitty-gritties between
9:35
know the nitty-gritties between
9:35
know the nitty-gritties between uh excluding our in the month stack
9:38
uh excluding our in the month stack
9:38
uh excluding our in the month stack we'll touch
9:39
we'll touch
9:39
we'll touch all those three and next 30 minutes will
9:42
all those three and next 30 minutes will
9:42
all those three and next 30 minutes will be like an express train again
9:45
be like an express train again
9:45
be like an express train again you'll see this i'll just create a shell
9:48
you'll see this i'll just create a shell
9:48
you'll see this i'll just create a shell of the application and from there we'll
9:50
of the application and from there we'll
9:50
of the application and from there we'll we'll fly uh all right
9:53
we'll fly uh all right
9:53
we'll fly uh all right i'm always excited by the atlas right i
9:56
i'm always excited by the atlas right i
9:56
i'm always excited by the atlas right i i really love atlas
9:57
i really love atlas
9:57
i really love atlas i think one of my favorite i recently
9:59
i think one of my favorite i recently
9:59
i think one of my favorite i recently explored and i also loved express
10:01
explored and i also loved express
10:02
explored and i also loved express for for uh node.js apis i also love that
10:05
for for uh node.js apis i also love that
10:05
for for uh node.js apis i also love that so again a quick reminder to everyone
10:07
so again a quick reminder to everyone
10:07
so again a quick reminder to everyone that please whenever you drop a comment
10:09
that please whenever you drop a comment
10:09
that please whenever you drop a comment if you want to ask
10:10
if you want to ask
10:10
if you want to ask uh anything whenever you drop a comment
10:13
uh anything whenever you drop a comment
10:13
uh anything whenever you drop a comment please use the react c sharp comment in
10:15
please use the react c sharp comment in
10:15
please use the react c sharp comment in the comments
10:16
the comments
10:16
the comments and after this session we're going to do
10:18
and after this session we're going to do
10:18
and after this session we're going to do a lucky draw
10:19
a lucky draw
10:19
a lucky draw and some of you will get an opportunity
10:21
and some of you will get an opportunity
10:21
and some of you will get an opportunity to consider ourselves twice
10:23
to consider ourselves twice
10:23
to consider ourselves twice having said that swami feel free to go
10:24
having said that swami feel free to go
10:24
having said that swami feel free to go ahead and share your screen
10:26
ahead and share your screen
10:26
ahead and share your screen and uh yeah we'll do then we can get
10:28
and uh yeah we'll do then we can get
10:28
and uh yeah we'll do then we can get started
10:29
started
10:29
started mai says swami loves speaking and his
10:32
mai says swami loves speaking and his
10:32
mai says swami loves speaking and his presentations are
10:33
presentations are
10:33
presentations are thumbs up thanks thanks
10:36
thumbs up thanks thanks
10:36
thumbs up thanks thanks for your comment thanks my sir
10:41
for your comment thanks my sir
10:41
for your comment thanks my sir and i still remember c sharp corner was
10:45
and i still remember c sharp corner was
10:45
and i still remember c sharp corner was the first uh
10:46
the first uh
10:46
the first uh people who started hosting me seven or
10:48
people who started hosting me seven or
10:48
people who started hosting me seven or eight years ago
10:50
eight years ago
10:50
eight years ago and uh yeah yeah
10:53
and uh yeah yeah
10:53
and uh yeah yeah uh it's a long journey so prakash three
10:55
uh it's a long journey so prakash three
10:55
uh it's a long journey so prakash three party and mohit sabra
10:57
party and mohit sabra
10:57
party and mohit sabra i consider them as my gurus because they
10:59
i consider them as my gurus because they
10:59
i consider them as my gurus because they introduced me to
11:00
introduced me to
11:00
introduced me to this community service if i tell this
11:03
this community service if i tell this
11:03
this community service if i tell this statement enough
11:04
statement enough
11:04
statement enough them they'll start shouting at me
11:05
them they'll start shouting at me
11:05
them they'll start shouting at me they'll say no no
11:07
they'll say no no
11:07
they'll say no no we are not yogurts but i uh they're not
11:10
we are not yogurts but i uh they're not
11:10
we are not yogurts but i uh they're not here but i'll still say that prakash and
11:12
here but i'll still say that prakash and
11:12
here but i'll still say that prakash and mohit thanks for introducing me to this
11:15
mohit thanks for introducing me to this
11:15
mohit thanks for introducing me to this community service
11:17
community service
11:17
community service yes sir i am all set once you move to
11:20
yes sir i am all set once you move to
11:20
yes sir i am all set once you move to your slides or your views to your code
11:23
your slides or your views to your code
11:23
your slides or your views to your code i'll just
11:23
i'll just
11:23
i'll just add it to the screen
11:26
oh yes i have shared my screen
11:31
and then yeah once you change your
11:35
and then yeah once you change your
11:35
and then yeah once you change your screen i'll
11:35
screen i'll
11:36
screen i'll add it you're inside stream app now
11:38
add it you're inside stream app now
11:38
add it you're inside stream app now let's change it oh okay
11:40
let's change it oh okay
11:40
let's change it oh okay right right sir yep yeah everyone
11:42
right right sir yep yeah everyone
11:42
right right sir yep yeah everyone everyone can see a screen
11:43
everyone can see a screen
11:44
everyone can see a screen and next
11:51
okay shall we go ahead yeah yes
11:56
okay shall we go ahead yeah yes
11:56
okay shall we go ahead yeah yes go ahead okay so i was just checking the
12:01
go ahead okay so i was just checking the
12:01
go ahead okay so i was just checking the speed of my internet sometimes it's
12:09
okay uh is my voice audible yes your
12:12
okay uh is my voice audible yes your
12:12
okay uh is my voice audible yes your voice is audible you can get started
12:15
okay sometime i'm sorry uh okay so
12:19
okay sometime i'm sorry uh okay so
12:19
okay sometime i'm sorry uh okay so as i was mentioning there are multiple
12:21
as i was mentioning there are multiple
12:21
as i was mentioning there are multiple options where we can go ahead and
12:24
options where we can go ahead and
12:24
options where we can go ahead and use this so you can install this
12:27
use this so you can install this
12:27
use this so you can install this uh instance on our local laptop or
12:30
uh instance on our local laptop or
12:30
uh instance on our local laptop or use
12:31
use
12:31
use mongodless it's uh it's a pretty good
12:33
mongodless it's uh it's a pretty good
12:33
mongodless it's uh it's a pretty good thing i
12:34
thing i
12:34
thing i always use it in all my demos previous
12:36
always use it in all my demos previous
12:36
always use it in all my demos previous demos so this is the first time i'm
12:38
demos so this is the first time i'm
12:38
demos so this is the first time i'm switching to
12:39
switching to
12:39
switching to the local container i just wanted to try
12:41
the local container i just wanted to try
12:41
the local container i just wanted to try this and i really liked it
12:44
this and i really liked it
12:44
this and i really liked it so let's see couple let's make a couple
12:46
so let's see couple let's make a couple
12:46
so let's see couple let's make a couple of minutes on
12:47
of minutes on
12:47
of minutes on this one uh what we can do is we can go
12:50
this one uh what we can do is we can go
12:50
this one uh what we can do is we can go to
12:51
to
12:51
to hub.docker.com and
12:55
hub.docker.com and
12:55
hub.docker.com and hub.docker.com and we can
12:57
hub.docker.com and we can
12:57
hub.docker.com and we can clearly go ahead and see this
13:00
clearly go ahead and see this
13:00
clearly go ahead and see this see the container see this image
13:04
see the container see this image
13:04
see the container see this image the docker image we can search for uh
13:07
the docker image we can search for uh
13:08
the docker image we can search for uh the i think the net is little slow
13:11
the i think the net is little slow
13:11
the i think the net is little slow now explore
13:14
now explore
13:14
now explore and
13:18
and can select the official image and
13:21
and can select the official image and
13:21
and can select the official image and you will have this here there's an
13:24
you will have this here there's an
13:24
you will have this here there's an official image
13:26
official image
13:26
official image and inside this official image you will
13:29
and inside this official image you will
13:29
and inside this official image you will see that
13:30
see that
13:30
see that all we need to do is pull uh docker pull
13:33
all we need to do is pull uh docker pull
13:33
all we need to do is pull uh docker pull it gets the
13:36
it gets the
13:36
it gets the uh image on our local db
13:39
uh image on our local db
13:39
uh image on our local db these have done a fantastic job on uh
13:41
these have done a fantastic job on uh
13:41
these have done a fantastic job on uh specifying how do we need to
13:43
specifying how do we need to
13:43
specifying how do we need to run and the port on which it listens
13:47
run and the port on which it listens
13:47
run and the port on which it listens uh 2707 and they themself has given that
13:51
uh 2707 and they themself has given that
13:51
uh 2707 and they themself has given that how do we need to
13:52
how do we need to
13:52
how do we need to run this so we need to docker run
13:55
run this so we need to docker run
13:55
run this so we need to docker run interactive
13:56
interactive
13:56
interactive and give the name of the image
13:59
and give the name of the image
13:59
and give the name of the image and we can put it this uh 27107 and if
14:03
and we can put it this uh 27107 and if
14:03
and we can put it this uh 27107 and if you want to do it through the
14:05
you want to do it through the
14:05
you want to do it through the uh doc yaml also it's it's pretty much
14:08
uh doc yaml also it's it's pretty much
14:08
uh doc yaml also it's it's pretty much the same
14:09
the same
14:09
the same uh the only difference is we use
14:13
uh the only difference is we use
14:13
uh the only difference is we use the only difference is we use this uh
14:18
the port port mapping whatever is a port
14:20
the port port mapping whatever is a port
14:20
the port port mapping whatever is a port mapping we need to do that one that's a
14:21
mapping we need to do that one that's a
14:22
mapping we need to do that one that's a pretty much
14:22
pretty much
14:22
pretty much uh from that perspective so we'll see
14:27
uh from that perspective so we'll see
14:27
uh from that perspective so we'll see come back over here and let me do
14:31
come back over here and let me do
14:31
come back over here and let me do docker ps and the moment i do the
14:34
docker ps and the moment i do the
14:34
docker ps and the moment i do the docker ps i will be able to see
14:37
docker ps i will be able to see
14:37
docker ps i will be able to see here is the docker
14:41
container which is running and i just
14:44
container which is running and i just
14:44
container which is running and i just started four hours ever just wanted to
14:46
started four hours ever just wanted to
14:46
started four hours ever just wanted to test that everything is working
14:48
test that everything is working
14:48
test that everything is working so here i will hit on 27.017 on my local
14:51
so here i will hit on 27.017 on my local
14:52
so here i will hit on 27.017 on my local machine that gets routed to
14:53
machine that gets routed to
14:53
machine that gets routed to 27107. okay that's the name of that
14:57
27107. okay that's the name of that
14:57
27107. okay that's the name of that image is
14:58
image is
14:58
image is in docker so what we can do is we
15:00
in docker so what we can do is we
15:00
in docker so what we can do is we can
15:01
can
15:01
can uh go ahead and dock her
15:05
logs and i can give this container if
15:08
logs and i can give this container if
15:08
logs and i can give this container if you want to see
15:09
you want to see
15:09
you want to see what's happening inside that and you see
15:11
what's happening inside that and you see
15:11
what's happening inside that and you see that tons and tons of logs are
15:12
that tons and tons of logs are
15:12
that tons and tons of logs are flushing out so this tool we can use it
15:15
flushing out so this tool we can use it
15:15
flushing out so this tool we can use it as part of the
15:17
as part of the
15:17
as part of the initial investigation to find out if at
15:19
initial investigation to find out if at
15:19
initial investigation to find out if at all
15:21
all
15:21
all um how the
15:24
um how the
15:24
um how the things are going and some
15:27
things are going and some
15:27
things are going and some some of the things which we can do first
15:30
some of the things which we can do first
15:30
some of the things which we can do first round of investigation right from
15:31
round of investigation right from
15:32
round of investigation right from this logs uh get the bird docker
15:36
this logs uh get the bird docker
15:36
this logs uh get the bird docker inspect and give the adf
15:41
inspect and give the adf
15:41
inspect and give the adf four so we can give the first three our
15:43
four so we can give the first three our
15:43
four so we can give the first three our first four characters but ensure that
15:44
first four characters but ensure that
15:44
first four characters but ensure that you are giving the complete
15:46
you are giving the complete
15:46
you are giving the complete id of that so if this guy will give you
15:48
id of that so if this guy will give you
15:48
id of that so if this guy will give you a tons and tons of information where
15:51
a tons and tons of information where
15:51
a tons and tons of information where uh where you can come and do the second
15:54
uh where you can come and do the second
15:54
uh where you can come and do the second round of investigation so it says that
15:57
round of investigation so it says that
15:57
round of investigation so it says that what is that it's going to start and
16:00
what is that it's going to start and
16:00
what is that it's going to start and what is the current state of this
16:02
what is the current state of this
16:02
what is the current state of this current state of this the image it is
16:05
current state of this the image it is
16:05
current state of this the image it is using
16:06
using
16:06
using the image id and what is the name which
16:08
the image id and what is the name which
16:08
the image id and what is the name which we have given
16:09
we have given
16:10
we have given and uh and here you can see that the
16:14
and uh and here you can see that the
16:14
and uh and here you can see that the host port is 27017 and the port binding
16:18
host port is 27017 and the port binding
16:18
host port is 27017 and the port binding we can see this 2701 that same thing
16:21
we can see this 2701 that same thing
16:21
we can see this 2701 that same thing whatever we have seen there
16:23
whatever we have seen there
16:23
whatever we have seen there and other important things is we can dig
16:26
and other important things is we can dig
16:26
and other important things is we can dig deeper in
16:26
deeper in
16:26
deeper in into this particular stuff to learn
16:30
into this particular stuff to learn
16:30
into this particular stuff to learn at a high level i'm just trying to uh
16:32
at a high level i'm just trying to uh
16:32
at a high level i'm just trying to uh quickly go through
16:33
quickly go through
16:33
quickly go through so this is the slash data slash db
16:36
so this is the slash data slash db
16:36
so this is the slash data slash db that's where this is the volume on on
16:39
that's where this is the volume on on
16:39
that's where this is the volume on on the volume mount i did a volume on so
16:41
the volume mount i did a volume on so
16:41
the volume mount i did a volume on so that
16:41
that
16:41
that that will be persistent and this is the
16:44
that will be persistent and this is the
16:44
that will be persistent and this is the volume inside
16:45
volume inside
16:45
volume inside the it says data.db and data.config db
16:49
the it says data.db and data.config db
16:49
the it says data.db and data.config db that's a couple of things and
16:52
that's a couple of things and
16:52
that's a couple of things and one more thing i wanted to highlight is
16:56
one more thing i wanted to highlight is
16:56
one more thing i wanted to highlight is the the public ip this is pretty much
16:59
the the public ip this is pretty much
16:59
the the public ip this is pretty much uh very important skill set you need to
17:02
uh very important skill set you need to
17:02
uh very important skill set you need to know that
17:03
know that
17:03
know that when you are using it on on when you are
17:05
when you are using it on on when you are
17:05
when you are using it on on when you are using that
17:07
using that
17:07
using that on local you have to definitely use that
17:14
because i will show that difference what
17:18
because i will show that difference what
17:18
because i will show that difference what will
17:18
will
17:18
will uh what will be that in in a minute i'll
17:20
uh what will be that in in a minute i'll
17:20
uh what will be that in in a minute i'll show the difference why do you need to
17:22
show the difference why do you need to
17:22
show the difference why do you need to use that
17:23
use that
17:23
use that right um uh you need to definitely need
17:26
right um uh you need to definitely need
17:26
right um uh you need to definitely need to have this
17:27
to have this
17:27
to have this uh it's public ip it will be very handy
17:30
uh it's public ip it will be very handy
17:30
uh it's public ip it will be very handy and you'll spend hours together if you
17:32
and you'll spend hours together if you
17:32
and you'll spend hours together if you uh if you don't uh use this piece and
17:35
uh if you don't uh use this piece and
17:35
uh if you don't uh use this piece and that's pretty important to
17:36
that's pretty important to
17:36
that's pretty important to know what is the public ip okay these
17:38
know what is the public ip okay these
17:38
know what is the public ip okay these are some of the
17:39
are some of the
17:39
are some of the things which i wanted to bring it on to
17:41
things which i wanted to bring it on to
17:41
things which i wanted to bring it on to the table which will definitely help us
17:43
the table which will definitely help us
17:44
the table which will definitely help us if we are doing some investigation okay
17:46
if we are doing some investigation okay
17:46
if we are doing some investigation okay now the next thing is
17:47
now the next thing is
17:47
now the next thing is okay this is all fines for me i know
17:50
okay this is all fines for me i know
17:50
okay this is all fines for me i know that what else you're bringing on to the
17:51
that what else you're bringing on to the
17:51
that what else you're bringing on to the table i said okay
17:52
table i said okay
17:52
table i said okay let's go and do this uh rock and roll
17:55
let's go and do this uh rock and roll
17:55
let's go and do this uh rock and roll uh you have to do the docker exec id
17:59
uh you have to do the docker exec id
17:59
uh you have to do the docker exec id and the image the container id
18:02
and the image the container id
18:02
and the image the container id bin and sh the shell i
18:05
bin and sh the shell i
18:05
bin and sh the shell i i feel more comfortable in the trash
18:08
i feel more comfortable in the trash
18:08
i feel more comfortable in the trash so i can do the same thing docker
18:12
so i can do the same thing docker
18:12
so i can do the same thing docker exec hyphen id
18:16
exec hyphen id
18:16
exec hyphen id and adf4 before characters
18:19
and adf4 before characters
18:19
and adf4 before characters i will do bin bash
18:23
i will do bin bash
18:23
i will do bin bash okay technically i'm in the same so you
18:26
okay technically i'm in the same so you
18:26
okay technically i'm in the same so you can
18:27
can
18:27
can you can see that host name it's uh
18:30
you can see that host name it's uh
18:30
you can see that host name it's uh it's the computer on which i mean the
18:32
it's the computer on which i mean the
18:32
it's the computer on which i mean the container on which it's running
18:34
container on which it's running
18:34
container on which it's running so we can see that uh host name and i do
18:37
so we can see that uh host name and i do
18:37
so we can see that uh host name and i do an exit
18:38
an exit
18:38
an exit if i do hostname it's my uh
18:41
if i do hostname it's my uh
18:41
if i do hostname it's my uh my my host uh my computer name it comes
18:44
my my host uh my computer name it comes
18:44
my my host uh my computer name it comes is vishwanath swami
18:46
is vishwanath swami
18:46
is vishwanath swami and if i do the uh docker exact and i do
18:50
and if i do the uh docker exact and i do
18:50
and if i do the uh docker exact and i do and hostname it shows the container name
18:52
and hostname it shows the container name
18:52
and hostname it shows the container name that because technically
18:53
that because technically
18:53
that because technically that's the computer or
18:56
that's the computer or
18:56
that's the computer or it's it itself is a container so it
18:58
it's it itself is a container so it
18:58
it's it itself is a container so it treats it as a company computer
19:00
treats it as a company computer
19:00
treats it as a company computer right so if your
19:03
right so if your
19:03
right so if your command line guy exists if you're a gui
19:07
command line guy exists if you're a gui
19:07
command line guy exists if you're a gui guy
19:07
guy
19:07
guy like me you can do this where you can
19:09
like me you can do this where you can
19:09
like me you can do this where you can see this
19:10
see this
19:10
see this running logs over here the one which i
19:13
running logs over here the one which i
19:13
running logs over here the one which i showed you
19:13
showed you
19:14
showed you through the command line you can come
19:15
through the command line you can come
19:15
through the command line you can come and do investigation if some some
19:17
and do investigation if some some
19:17
and do investigation if some some something is going wrong you can get it
19:19
something is going wrong you can get it
19:19
something is going wrong you can get it over here and
19:20
over here and
19:20
over here and the other thing is stats you can see the
19:23
the other thing is stats you can see the
19:23
the other thing is stats you can see the memory usage and
19:25
memory usage and
19:25
memory usage and other stuff over here and you can do an
19:26
other stuff over here and you can do an
19:26
other stuff over here and you can do an inspect whatever i did they inspect
19:28
inspect whatever i did they inspect
19:28
inspect whatever i did they inspect at high level you can do here but it
19:30
at high level you can do here but it
19:30
at high level you can do here but it doesn't give that much of uh
19:34
doesn't give that much of uh
19:34
doesn't give that much of uh wealth of information whatever you have
19:35
wealth of information whatever you have
19:35
wealth of information whatever you have seen on the command line you
19:37
seen on the command line you
19:37
seen on the command line you will definitely not get that much of
19:39
will definitely not get that much of
19:39
will definitely not get that much of wealth but at least at a high level this
19:41
wealth but at least at a high level this
19:41
wealth but at least at a high level this gives a pretty good information but
19:43
gives a pretty good information but
19:43
gives a pretty good information but i would suggest we need to get uh
19:46
i would suggest we need to get uh
19:46
i would suggest we need to get uh deep down into the into this uh
19:49
deep down into the into this uh
19:49
deep down into the into this uh this one okay now let's do that now we
19:51
this one okay now let's do that now we
19:51
this one okay now let's do that now we are in container
19:53
are in container
19:53
are in container if i do ls i'll be seeing the
19:56
if i do ls i'll be seeing the
19:56
if i do ls i'll be seeing the i'll be seeing the file system i do
19:58
i'll be seeing the file system i do
19:58
i'll be seeing the file system i do so the
19:59
so the
19:59
so the the moment i do right now i'm
20:01
the moment i do right now i'm
20:01
the moment i do right now i'm inside my uh
20:02
inside my uh
20:02
inside my uh docker container i'm not in my local
20:04
docker container i'm not in my local
20:04
docker container i'm not in my local machine you see that right now i'm
20:06
machine you see that right now i'm
20:06
machine you see that right now i'm inside this
20:07
inside this
20:07
inside this and it works as a shell i'm not using
20:09
and it works as a shell i'm not using
20:10
and it works as a shell i'm not using any
20:10
any
20:10
any uh windows commands i'm using the linux
20:14
uh windows commands i'm using the linux
20:14
uh windows commands i'm using the linux commands right and you can see that
20:17
commands right and you can see that
20:17
commands right and you can see that i do uh show dbs
20:21
i do uh show dbs
20:21
i do uh show dbs and i can see that all the dbs are there
20:23
and i can see that all the dbs are there
20:23
and i can see that all the dbs are there and i can say that
20:25
and i can say that
20:25
and i can say that use books db
20:28
use books db
20:28
use books db and i can go show
20:32
collections and i can say that
20:35
collections and i can say that
20:35
collections and i can say that db dot uh
20:39
db dot uh
20:39
db dot uh books dot fine
20:44
and this one it's showing all those rows
20:46
and this one it's showing all those rows
20:46
and this one it's showing all those rows which
20:48
which
20:48
which are there in my listing now i did a
20:50
are there in my listing now i did a
20:50
are there in my listing now i did a pretty
20:51
pretty
20:51
pretty so you can see this few rows uh right
20:53
so you can see this few rows uh right
20:53
so you can see this few rows uh right now i have the few rows so let me
20:57
now i have the few rows so let me
20:57
now i have the few rows so let me show you that uh in a moment
21:00
show you that uh in a moment
21:00
show you that uh in a moment that's executing
21:03
that's executing
21:03
that's executing so these are couple of roles uh this all
21:07
so these are couple of roles uh this all
21:07
so these are couple of roles uh this all these all the things will be very much
21:09
these all the things will be very much
21:09
these all the things will be very much important or will be handy if you are
21:11
important or will be handy if you are
21:11
important or will be handy if you are using your local instances
21:13
using your local instances
21:13
using your local instances uh local local container of the mango
21:16
uh local local container of the mango
21:16
uh local local container of the mango because you
21:17
because you
21:17
because you need to get down and to find out what
21:19
need to get down and to find out what
21:19
need to get down and to find out what all the tables which are there why am i
21:20
all the tables which are there why am i
21:20
all the tables which are there why am i unable to connect and all those things
21:22
unable to connect and all those things
21:22
unable to connect and all those things and i was talking about the inspect and
21:24
and i was talking about the inspect and
21:24
and i was talking about the inspect and the public ip that is pretty much
21:26
the public ip that is pretty much
21:26
the public ip that is pretty much very very important why means we i'll
21:29
very very important why means we i'll
21:29
very very important why means we i'll come and i'll show you because
21:30
come and i'll show you because
21:30
come and i'll show you because let's imagine a scenario where you're
21:32
let's imagine a scenario where you're
21:32
let's imagine a scenario where you're executing your web api
21:34
executing your web api
21:34
executing your web api and the web api you are executing
21:36
and the web api you are executing
21:36
and the web api you are executing through the kestrel
21:37
through the kestrel
21:37
through the kestrel or is server and right now your
21:40
or is server and right now your
21:40
or is server and right now your docker container is in the dock uh the
21:43
docker container is in the dock uh the
21:43
docker container is in the dock uh the mongodb is inside the docker container
21:46
mongodb is inside the docker container
21:46
mongodb is inside the docker container so when you go to the config settings
21:48
so when you go to the config settings
21:48
so when you go to the config settings when you go to this
21:49
when you go to this
21:49
when you go to this app settings those technically this app
21:51
app settings those technically this app
21:51
app settings those technically this app this is applicable for
21:52
this is applicable for
21:52
this is applicable for anyone and everyone so if you come to
21:54
anyone and everyone so if you come to
21:54
anyone and everyone so if you come to this app settings
21:55
this app settings
21:56
this app settings inside the app settings we give the
21:57
inside the app settings we give the
21:57
inside the app settings we give the connection string in one method
21:59
connection string in one method
21:59
connection string in one method we say that mongodb colon double slash
22:02
we say that mongodb colon double slash
22:02
we say that mongodb colon double slash localhost 2701
22:04
localhost 2701
22:04
localhost 2701 now if you execute it here it
22:07
now if you execute it here it
22:07
now if you execute it here it understands that
22:09
understands that
22:09
understands that the local available perfect it goes in
22:11
the local available perfect it goes in
22:11
the local available perfect it goes in but the moment
22:12
but the moment
22:12
but the moment you execute this shopping api inside the
22:14
you execute this shopping api inside the
22:14
you execute this shopping api inside the container
22:15
container
22:15
container now it is two containers in a separate
22:18
now it is two containers in a separate
22:18
now it is two containers in a separate world
22:19
world
22:19
world how does one container recognize the
22:20
how does one container recognize the
22:20
how does one container recognize the other container if you try with this low
22:22
other container if you try with this low
22:22
other container if you try with this low colors definitely it's going to blow
22:24
colors definitely it's going to blow
22:24
colors definitely it's going to blow it's not going to work so what we
22:27
it's not going to work so what we
22:27
it's not going to work so what we generally
22:28
generally
22:28
generally do is uh we can technically come and
22:31
do is uh we can technically come and
22:31
do is uh we can technically come and update this
22:32
update this
22:32
update this connection string in line number uh line
22:34
connection string in line number uh line
22:34
connection string in line number uh line number seven
22:35
number seven
22:35
number seven sorry line number six or uh one more
22:38
sorry line number six or uh one more
22:38
sorry line number six or uh one more thing what we do is however you're
22:39
thing what we do is however you're
22:40
thing what we do is however you're executing you need to pass this
22:41
executing you need to pass this
22:41
executing you need to pass this connection string
22:42
connection string
22:42
connection string and give the public ip uh the public ip
22:45
and give the public ip uh the public ip
22:45
and give the public ip uh the public ip whatever we have seen that ip
22:47
whatever we have seen that ip
22:48
whatever we have seen that ip um here previously that high p you have
22:50
um here previously that high p you have
22:50
um here previously that high p you have to specify
22:51
to specify
22:51
to specify so again 172.7
22:55
so again 172.7
22:55
so again 172.7 that's an ip now between two containers
22:57
that's an ip now between two containers
22:57
that's an ip now between two containers it recognized what should be the
22:59
it recognized what should be the
22:59
it recognized what should be the path so that's a high level 34
23:02
path so that's a high level 34
23:02
path so that's a high level 34 30 000 foot about the docker again i'll
23:06
30 000 foot about the docker again i'll
23:06
30 000 foot about the docker again i'll show you this piece that's very very
23:08
show you this piece that's very very
23:08
show you this piece that's very very important because
23:09
important because
23:09
important because i have spent few hours time wasted
23:12
i have spent few hours time wasted
23:12
i have spent few hours time wasted so if you see that the ip address
23:14
so if you see that the ip address
23:14
so if you see that the ip address whatever is that 172 170.2
23:17
whatever is that 172 170.2
23:17
whatever is that 172 170.2 so that's what you need to specify so
23:19
so that's what you need to specify so
23:19
so that's what you need to specify so how here i can technically switch
23:21
how here i can technically switch
23:21
how here i can technically switch between
23:22
between
23:22
between uh the connection string of the local
23:24
uh the connection string of the local
23:24
uh the connection string of the local when i'm executing this
23:25
when i'm executing this
23:26
when i'm executing this api using iis express orchestral
23:29
api using iis express orchestral
23:29
api using iis express orchestral when i am host executing this
23:32
when i am host executing this
23:32
when i am host executing this particular api as a container instance
23:34
particular api as a container instance
23:34
particular api as a container instance then i need to switch
23:36
then i need to switch
23:36
then i need to switch the connection string i should not be it
23:38
the connection string i should not be it
23:38
the connection string i should not be it should not be localhost it should be
23:40
should not be localhost it should be
23:40
should not be localhost it should be the public ip so that's about the tip
23:43
the public ip so that's about the tip
23:44
the public ip so that's about the tip why do we need to have these commands
23:46
why do we need to have these commands
23:46
why do we need to have these commands basic commands
23:47
basic commands
23:47
basic commands handy okay let's come back to the
23:51
handy okay let's come back to the
23:51
handy okay let's come back to the api front because i already
23:54
api front because i already
23:54
api front because i already uh created this entire application we'll
23:56
uh created this entire application we'll
23:56
uh created this entire application we'll go step by step but i just created
23:59
go step by step but i just created
23:59
go step by step but i just created uh at a high level uh what this
24:01
uh at a high level uh what this
24:01
uh at a high level uh what this application is
24:03
application is
24:03
application is and how does it look um let me do
24:06
and how does it look um let me do
24:06
and how does it look um let me do a clear and so that you know we can uh
24:08
a clear and so that you know we can uh
24:08
a clear and so that you know we can uh we can keep this guy
24:10
we can keep this guy
24:10
we can keep this guy side and handy uh
24:13
side and handy uh
24:13
side and handy uh let me show i mean we will be doing
24:16
let me show i mean we will be doing
24:16
let me show i mean we will be doing everything and we'll will spend a lot of
24:18
everything and we'll will spend a lot of
24:18
everything and we'll will spend a lot of time
24:18
time
24:18
time okay so i can quickly come and add this
24:23
okay so i can quickly come and add this
24:23
okay so i can quickly come and add this and come back to list so all these
24:26
and come back to list so all these
24:26
and come back to list so all these things are getting tracked which api
24:30
things are getting tracked which api
24:30
things are getting tracked which api i'm going going to and what is the
24:33
i'm going going to and what is the
24:33
i'm going going to and what is the content length which i am returning and
24:35
content length which i am returning and
24:35
content length which i am returning and what is the milliseconds it is taking
24:37
what is the milliseconds it is taking
24:37
what is the milliseconds it is taking time so everything is getting dragged
24:39
time so everything is getting dragged
24:39
time so everything is getting dragged over there suppose i can come to
24:40
over there suppose i can come to
24:40
over there suppose i can come to george ready and uh
24:44
george ready and uh
24:44
george ready and uh i'm creating is uh uh thing as an
24:47
i'm creating is uh uh thing as an
24:47
i'm creating is uh uh thing as an inactive so
24:49
inactive so
24:49
inactive so that will be uh that all
24:53
that will be uh that all
24:53
that will be uh that all the things whatever i'm doing i can go
24:55
the things whatever i'm doing i can go
24:55
the things whatever i'm doing i can go ahead and i can see that those
24:56
ahead and i can see that those
24:56
ahead and i can see that those uh things what everything is getting
24:59
uh things what everything is getting
24:59
uh things what everything is getting tracked
24:59
tracked
24:59
tracked to the morgan logger we'll see about
25:01
to the morgan logger we'll see about
25:01
to the morgan logger we'll see about that
25:02
that
25:02
that and that's about this one let's see
25:05
and that's about this one let's see
25:06
and that's about this one let's see the api first let me close this
25:09
the api first let me close this
25:09
the api first let me close this let me go to the back end so this back
25:12
let me go to the back end so this back
25:12
let me go to the back end so this back end
25:13
end
25:13
end have created using the
25:17
have created using the
25:17
have created using the node.js and express okay so that's a
25:20
node.js and express okay so that's a
25:20
node.js and express okay so that's a pretty
25:20
pretty
25:20
pretty simple uh backend so i'll just talk
25:23
simple uh backend so i'll just talk
25:23
simple uh backend so i'll just talk about uh
25:23
about uh
25:23
about uh talk through what all the things which
25:26
talk through what all the things which
25:26
talk through what all the things which has been
25:27
has been
25:27
has been used anything which i wanted to
25:29
used anything which i wanted to
25:29
used anything which i wanted to highlight i'll highlight that one
25:31
highlight i'll highlight that one
25:31
highlight i'll highlight that one so first thing what i wanted to
25:34
so first thing what i wanted to
25:34
so first thing what i wanted to highlight is
25:35
highlight is
25:35
highlight is about these two files env files and
25:38
about these two files env files and
25:38
about these two files env files and example dot env files so if you come
25:42
example dot env files so if you come
25:42
example dot env files so if you come to the uh dot git dot
25:46
to the uh dot git dot
25:46
to the uh dot git dot dot get ignore file you see that dot env
25:49
dot get ignore file you see that dot env
25:49
dot get ignore file you see that dot env dot enb local dot env development local
25:52
dot enb local dot env development local
25:52
dot enb local dot env development local or these are the files which are
25:55
or these are the files which are
25:55
or these are the files which are being ignored by default okay so
25:58
being ignored by default okay so
25:58
being ignored by default okay so if even if you use this env file that's
26:00
if even if you use this env file that's
26:00
if even if you use this env file that's not going to be checked in
26:03
not going to be checked in
26:03
not going to be checked in uh into any project repository so we are
26:06
uh into any project repository so we are
26:06
uh into any project repository so we are safe over there okay we are pretty much
26:09
safe over there okay we are pretty much
26:09
safe over there okay we are pretty much safe over there so i've used the
26:12
safe over there so i've used the
26:12
safe over there so i've used the use my connection string to my localhost
26:15
use my connection string to my localhost
26:15
use my connection string to my localhost and imagine as i was mentioning suppose
26:17
and imagine as i was mentioning suppose
26:17
and imagine as i was mentioning suppose if this backhand if i'm
26:19
if this backhand if i'm
26:19
if this backhand if i'm adding a docker file and executing it as
26:21
adding a docker file and executing it as
26:22
adding a docker file and executing it as part of the container
26:23
part of the container
26:23
part of the container then we should not use locals we should
26:25
then we should not use locals we should
26:25
then we should not use locals we should use either the container name or the
26:27
use either the container name or the
26:27
use either the container name or the public ip i'm going with the public ip
26:29
public ip i'm going with the public ip
26:29
public ip i'm going with the public ip until unless we are not using the docker
26:32
until unless we are not using the docker
26:32
until unless we are not using the docker compose to
26:33
compose to
26:33
compose to spin up multiple containers i will
26:36
spin up multiple containers i will
26:36
spin up multiple containers i will go by the public ip whatever the ip
26:38
go by the public ip whatever the ip
26:38
go by the public ip whatever the ip which you have seen in the previous
26:39
which you have seen in the previous
26:39
which you have seen in the previous command
26:40
command
26:40
command okay so ensure that please do not ever
26:43
okay so ensure that please do not ever
26:43
okay so ensure that please do not ever store any connection string then create
26:46
store any connection string then create
26:46
store any connection string then create example dot env and specify
26:49
example dot env and specify
26:50
example dot env and specify what should be the connection string
26:51
what should be the connection string
26:51
what should be the connection string just like your mongodb
26:53
just like your mongodb
26:53
just like your mongodb mongodb your mongodb server your port
26:56
mongodb your mongodb server your port
26:56
mongodb your mongodb server your port number
26:57
number
26:57
number your database name something like that
26:59
your database name something like that
26:59
your database name something like that but please do not
27:00
but please do not
27:00
but please do not store any of those credentials or any
27:03
store any of those credentials or any
27:03
store any of those credentials or any important things there
27:04
important things there
27:04
important things there and ensure that before checking you're
27:06
and ensure that before checking you're
27:06
and ensure that before checking you're not
27:07
not
27:08
not without knowing you're not checking
27:09
without knowing you're not checking
27:09
without knowing you're not checking these files ensure that those files has
27:11
these files ensure that those files has
27:11
these files ensure that those files has been tagged
27:12
been tagged
27:12
been tagged inside this gitignore that's one tip
27:16
inside this gitignore that's one tip
27:16
inside this gitignore that's one tip and coming back to this one let's
27:19
and coming back to this one let's
27:19
and coming back to this one let's start seeing this one
27:23
start seeing this one
27:23
start seeing this one it's a pretty much simple node.js
27:26
it's a pretty much simple node.js
27:26
it's a pretty much simple node.js server i have chalk we can use chalk or
27:30
server i have chalk we can use chalk or
27:30
server i have chalk we can use chalk or colors but
27:31
colors but
27:31
colors but i found shock people are using
27:37
top colors and one more guy are there in
27:40
top colors and one more guy are there in
27:40
top colors and one more guy are there in the
27:41
the
27:41
the game so when i go and see the
27:44
game so when i go and see the
27:44
game so when i go and see the trend the chart was leading so i was
27:47
trend the chart was leading so i was
27:47
trend the chart was leading so i was more
27:48
more
27:48
more lean towards this chalk
27:51
lean towards this chalk
27:51
lean towards this chalk okay that's a simple thing so i'm using
27:53
okay that's a simple thing so i'm using
27:53
okay that's a simple thing so i'm using chalk dot env express
27:54
chalk dot env express
27:54
chalk dot env express uh express sync handler joy for
27:58
uh express sync handler joy for
27:58
uh express sync handler joy for schema validation mongoose for mongodb
28:02
schema validation mongoose for mongodb
28:02
schema validation mongoose for mongodb and morgan is for this logger you see
28:04
and morgan is for this logger you see
28:04
and morgan is for this logger you see this all the log
28:05
this all the log
28:05
this all the log logging stuff which is being split here
28:08
logging stuff which is being split here
28:08
logging stuff which is being split here they are coming from this uh this guy
28:12
they are coming from this uh this guy
28:12
they are coming from this uh this guy morgan so we'll see real quick i want to
28:15
morgan so we'll see real quick i want to
28:15
morgan so we'll see real quick i want to show you something suppose if i uh i
28:19
show you something suppose if i uh i
28:19
show you something suppose if i uh i have tweaked this one now i'm coming
28:22
have tweaked this one now i'm coming
28:22
have tweaked this one now i'm coming back here i do
28:23
back here i do
28:23
back here i do save no it's not one is restarting my
28:27
save no it's not one is restarting my
28:27
save no it's not one is restarting my server
28:28
server
28:28
server and it is trying to go and find the
28:33
and it is trying to go and find the
28:33
and it is trying to go and find the find the mongodb server and uh inside
28:36
find the mongodb server and uh inside
28:36
find the mongodb server and uh inside this persistence i have
28:38
this persistence i have
28:38
this persistence i have created a file uh just to connect i'm
28:41
created a file uh just to connect i'm
28:41
created a file uh just to connect i'm just connecting it
28:42
just connecting it
28:42
just connecting it and if at all it is connected i'm
28:44
and if at all it is connected i'm
28:44
and if at all it is connected i'm showing that nc on board
28:46
showing that nc on board
28:46
showing that nc on board that i was able to connect to my mongodb
28:48
that i was able to connect to my mongodb
28:48
that i was able to connect to my mongodb connection please do not do this one
28:50
connection please do not do this one
28:50
connection please do not do this one i did it uh just as this is a hello
28:53
i did it uh just as this is a hello
28:53
i did it uh just as this is a hello world because i am speeding this uh
28:56
world because i am speeding this uh
28:56
world because i am speeding this uh the connection string that you do that
28:59
the connection string that you do that
28:59
the connection string that you do that that
28:59
that
28:59
that means your connection string will be in
29:03
means your connection string will be in
29:03
means your connection string will be in while
29:03
while
29:04
while people are going to bring down your
29:05
people are going to bring down your
29:05
people are going to bring down your database please never ever do this i'm
29:07
database please never ever do this i'm
29:07
database please never ever do this i'm doing it only for the
29:09
doing it only for the
29:09
doing it only for the demonstration purpose okay and once i'm
29:12
demonstration purpose okay and once i'm
29:12
demonstration purpose okay and once i'm not able to connect it i
29:13
not able to connect it i
29:13
not able to connect it i am speeding this uh error message
29:15
am speeding this uh error message
29:15
am speeding this uh error message shock.bold
29:16
shock.bold
29:16
shock.bold and i was not able to connect the
29:18
and i was not able to connect the
29:18
and i was not able to connect the hostname i am splitting it over here
29:21
hostname i am splitting it over here
29:21
hostname i am splitting it over here uh that's the red one so if i go back
29:24
uh that's the red one so if i go back
29:24
uh that's the red one so if i go back and
29:25
and
29:25
and fix this so i did i do come back over
29:28
fix this so i did i do come back over
29:28
fix this so i did i do come back over here and
29:30
here and
29:30
here and and now see this within a fraction of a
29:33
and now see this within a fraction of a
29:33
and now see this within a fraction of a second it was able to connect
29:34
second it was able to connect
29:34
second it was able to connect please do not ever ever do this i'm
29:37
please do not ever ever do this i'm
29:37
please do not ever ever do this i'm doing it i'm really sorry
29:39
doing it i'm really sorry
29:39
doing it i'm really sorry but please do not do this one i'm
29:41
but please do not do this one i'm
29:41
but please do not do this one i'm splitting this
29:42
splitting this
29:42
splitting this connection string and it has come here
29:45
connection string and it has come here
29:45
connection string and it has come here and that's i mean i'm just highlighting
29:47
and that's i mean i'm just highlighting
29:47
and that's i mean i'm just highlighting few of those
29:48
few of those
29:48
few of those points and if you uh i just want to show
29:51
points and if you uh i just want to show
29:51
points and if you uh i just want to show one more
29:52
one more
29:52
one more point let me go and
29:55
point let me go and
29:55
point let me go and this one more small improvisation i did
29:58
this one more small improvisation i did
29:58
this one more small improvisation i did from my
30:00
from my
30:00
from my previous uh this thing let me go
30:03
previous uh this thing let me go
30:03
previous uh this thing let me go and select
30:08
and select
30:08
and select it's like this one this was uh part of
30:10
it's like this one this was uh part of
30:10
it's like this one this was uh part of my mean stack uh demonstration which i
30:13
my mean stack uh demonstration which i
30:13
my mean stack uh demonstration which i uh did uh last year assume
30:16
uh did uh last year assume
30:16
uh did uh last year assume i don't remember exactly so if you see
30:18
i don't remember exactly so if you see
30:18
i don't remember exactly so if you see this uh
30:20
this uh
30:20
this uh if you see this this one uh
30:23
if you see this this one uh
30:23
if you see this this one uh at all the places we did this require
30:27
at all the places we did this require
30:27
at all the places we did this require and here also you do you see this all
30:29
and here also you do you see this all
30:29
and here also you do you see this all the places we have require and one small
30:31
the places we have require and one small
30:31
the places we have require and one small improvisation uh or that is this time
30:34
improvisation uh or that is this time
30:34
improvisation uh or that is this time i'm doing
30:35
i'm doing
30:35
i'm doing the import and one catch over there
30:38
the import and one catch over there
30:38
the import and one catch over there is if you i tag this one as a
30:42
is if you i tag this one as a
30:42
is if you i tag this one as a module and when you do a module you have
30:45
module and when you do a module you have
30:45
module and when you do a module you have to
30:46
to
30:46
to please be very careful when you are
30:49
please be very careful when you are
30:49
please be very careful when you are using that uh libraries which is coming
30:52
using that uh libraries which is coming
30:52
using that uh libraries which is coming uh framework libraries you have to
30:54
uh framework libraries you have to
30:54
uh framework libraries you have to specify like import the particular item
30:57
specify like import the particular item
30:57
specify like import the particular item from
30:57
from
30:57
from the from the library it's going to
30:59
the from the library it's going to
30:59
the from the library it's going to recognize but
31:01
recognize but
31:01
recognize but if it is the file which we have written
31:03
if it is the file which we have written
31:03
if it is the file which we have written let's assume we come back to this router
31:06
let's assume we come back to this router
31:06
let's assume we come back to this router and router was written by me and i
31:08
and router was written by me and i
31:08
and router was written by me and i exported this
31:09
exported this
31:09
exported this export default router and that's what
31:13
export default router and that's what
31:13
export default router and that's what i'm saying that
31:13
i'm saying that
31:13
i'm saying that import book router that's what i
31:16
import book router that's what i
31:16
import book router that's what i exported it here book router
31:18
exported it here book router
31:18
exported it here book router book router from this one and if you
31:21
book router from this one and if you
31:21
book router from this one and if you want to
31:21
want to
31:21
want to do this and go ahead and save this
31:24
do this and go ahead and save this
31:24
do this and go ahead and save this without the gs file
31:26
without the gs file
31:26
without the gs file it's going to crash it says that it's
31:28
it's going to crash it says that it's
31:28
it's going to crash it says that it's not
31:29
not
31:29
not it's it's unable to find it so that's
31:32
it's it's unable to find it so that's
31:32
it's it's unable to find it so that's one particular tip so if you are using
31:35
one particular tip so if you are using
31:35
one particular tip so if you are using if you want to use import
31:36
if you want to use import
31:36
if you want to use import and make this as a module the type as a
31:40
and make this as a module the type as a
31:40
and make this as a module the type as a module
31:41
module
31:41
module and ensure that all the classes which
31:42
and ensure that all the classes which
31:42
and ensure that all the classes which you write you can do
31:44
you write you can do
31:44
you write you can do import from that particular class ensure
31:47
import from that particular class ensure
31:47
import from that particular class ensure that
31:47
that
31:48
that you are having this js extension
31:51
you are having this js extension
31:51
you are having this js extension that's one particular where am i in
31:55
that's one particular where am i in
31:55
that's one particular where am i in app file so that you know app.js we can
31:57
app file so that you know app.js we can
31:57
app file so that you know app.js we can come and see the differentiation if you
31:58
come and see the differentiation if you
31:58
come and see the differentiation if you see this
32:00
see this
32:00
see this express is being like this constant
32:02
express is being like this constant
32:02
express is being like this constant require but i did
32:03
require but i did
32:03
require but i did import express and here everything was
32:06
import express and here everything was
32:06
import express and here everything was required the
32:07
required the
32:07
required the the morgan logger or the book router so
32:10
the morgan logger or the book router so
32:10
the morgan logger or the book router so i did it using the input here that one
32:13
i did it using the input here that one
32:13
i did it using the input here that one that's one
32:14
that's one
32:14
that's one uh small uh improvisation over that
32:17
uh small uh improvisation over that
32:17
uh small uh improvisation over that and the next important thing is this
32:19
and the next important thing is this
32:19
and the next important thing is this course i have
32:21
course i have
32:21
course i have made it wide open but we should never do
32:23
made it wide open but we should never do
32:23
made it wide open but we should never do that please ensure
32:24
that please ensure
32:24
that please ensure that you are doing very least privileges
32:28
that you are doing very least privileges
32:28
that you are doing very least privileges had only the host which we should allow
32:30
had only the host which we should allow
32:30
had only the host which we should allow and only the methods which we should
32:31
and only the methods which we should
32:31
and only the methods which we should allow
32:32
allow
32:32
allow uh do not ever open it for a while i
32:35
uh do not ever open it for a while i
32:35
uh do not ever open it for a while i just did
32:36
just did
32:36
just did just for the demonstration purpose okay
32:39
just for the demonstration purpose okay
32:39
just for the demonstration purpose okay and uh
32:40
and uh
32:40
and uh in the previous version i have used
32:44
in the previous version i have used
32:44
in the previous version i have used uh the same one some people will
32:48
uh the same one some people will
32:48
uh the same one some people will will use body body parser now express
32:51
will use body body parser now express
32:51
will use body body parser now express they themselves are
32:52
they themselves are
32:52
they themselves are uh ex are providing this out of the box
32:55
uh ex are providing this out of the box
32:55
uh ex are providing this out of the box so
32:55
so
32:56
so we can use this uh this one previously
32:58
we can use this uh this one previously
32:58
we can use this uh this one previously we have to
32:59
we have to
32:59
we have to we use this uh body parser to pass the
33:01
we use this uh body parser to pass the
33:01
we use this uh body parser to pass the body
33:02
body
33:02
body okay that's uh one particular thing and
33:06
okay that's uh one particular thing and
33:06
okay that's uh one particular thing and coming back to the server i'm giving the
33:08
coming back to the server i'm giving the
33:08
coming back to the server i'm giving the high level tips
33:10
high level tips
33:10
high level tips without wasting much of the time
33:13
without wasting much of the time
33:13
without wasting much of the time so the other thing is this we have
33:14
so the other thing is this we have
33:14
so the other thing is this we have already covered and
33:16
already covered and
33:16
already covered and okay the other thing is uh how are we
33:19
okay the other thing is uh how are we
33:19
okay the other thing is uh how are we using that env file dot env file so you
33:22
using that env file dot env file so you
33:22
using that env file dot env file so you can drop the env file at the
33:24
can drop the env file at the
33:24
can drop the env file at the top level um and you can use it at the
33:27
top level um and you can use it at the
33:27
top level um and you can use it at the time you don't need to
33:29
time you don't need to
33:29
time you don't need to you don't need to go ahead and
33:32
you don't need to go ahead and
33:32
you don't need to go ahead and specify the path but i want to
33:35
specify the path but i want to
33:35
specify the path but i want to highlight that from my yeah you can do
33:38
highlight that from my yeah you can do
33:38
highlight that from my yeah you can do directly like that
33:39
directly like that
33:39
directly like that uh you can say yeah specify require or
33:42
uh you can say yeah specify require or
33:42
uh you can say yeah specify require or import whatever it is slash dot env
33:45
import whatever it is slash dot env
33:45
import whatever it is slash dot env config that itself will take care
33:47
config that itself will take care
33:47
config that itself will take care now if you are storing this env file
33:49
now if you are storing this env file
33:49
now if you are storing this env file somewhere in the folder structure please
33:51
somewhere in the folder structure please
33:51
somewhere in the folder structure please ensure that
33:52
ensure that
33:52
ensure that that you are giving the full path of
33:55
that you are giving the full path of
33:55
that you are giving the full path of that so i
33:55
that so i
33:55
that so i said uh part dot resolve
33:59
said uh part dot resolve
33:59
said uh part dot resolve process uh cwd current working directory
34:02
process uh cwd current working directory
34:02
process uh cwd current working directory and then
34:03
and then
34:03
and then back and slash config dot env so that's
34:05
back and slash config dot env so that's
34:05
back and slash config dot env so that's when it's going to pick up
34:07
when it's going to pick up
34:07
when it's going to pick up the configuration whatever we have
34:09
the configuration whatever we have
34:09
the configuration whatever we have specified here and you don't give that
34:11
specified here and you don't give that
34:11
specified here and you don't give that you have to struggle for a couple of
34:12
you have to struggle for a couple of
34:12
you have to struggle for a couple of hours or yeah you might crack it in a
34:16
hours or yeah you might crack it in a
34:16
hours or yeah you might crack it in a minute or two but i if i was
34:20
minute or two but i if i was
34:20
minute or two but i if i was uh breaking my head and scratching my
34:22
uh breaking my head and scratching my
34:22
uh breaking my head and scratching my head
34:23
head
34:23
head even though i don't have ears i had to
34:24
even though i don't have ears i had to
34:24
even though i don't have ears i had to scratch my head uh to figure it out
34:27
scratch my head uh to figure it out
34:27
scratch my head uh to figure it out if i stored it in a different location
34:29
if i stored it in a different location
34:29
if i stored it in a different location that's one one tip
34:31
that's one one tip
34:31
that's one one tip and the other tip which we have already
34:34
and the other tip which we have already
34:34
and the other tip which we have already seen that
34:34
seen that
34:34
seen that if if i'm not able to connect i
34:38
if if i'm not able to connect i
34:38
if if i'm not able to connect i am exiting the process because i don't
34:40
am exiting the process because i don't
34:40
am exiting the process because i don't want to
34:41
want to
34:41
want to uh go ahead and because we can't do
34:42
uh go ahead and because we can't do
34:42
uh go ahead and because we can't do anything if i'm not able to connect to
34:44
anything if i'm not able to connect to
34:44
anything if i'm not able to connect to the data store there is no point in we
34:46
the data store there is no point in we
34:46
the data store there is no point in we going and
34:47
going and
34:47
going and trying to trying something okay cool
34:50
trying to trying something okay cool
34:50
trying to trying something okay cool so that's one thing and the
34:53
so that's one thing and the
34:54
so that's one thing and the other thing is we have to focus on this
34:56
other thing is we have to focus on this
34:56
other thing is we have to focus on this models real quick and
34:59
models real quick and
34:59
models real quick and so we are using this mongoose and
35:02
so we are using this mongoose and
35:02
so we are using this mongoose and have this picture url title author some
35:05
have this picture url title author some
35:05
have this picture url title author some basic types
35:06
basic types
35:06
basic types and this one is
35:10
and this one is
35:10
and this one is schema schema validator so in the
35:12
schema schema validator so in the
35:12
schema schema validator so in the previous version
35:13
previous version
35:13
previous version i have used
35:16
i have used
35:16
i have used joy happy joy you can come and see
35:20
joy happy joy you can come and see
35:20
joy happy joy you can come and see that models
35:24
that models
35:24
that models the schema validator i have used this
35:26
the schema validator i have used this
35:26
the schema validator i have used this happy joy
35:27
happy joy
35:27
happy joy so if you try to go ahead and search
35:30
so if you try to go ahead and search
35:30
so if you try to go ahead and search this
35:31
this
35:31
this happy join so they themselves will
35:33
happy join so they themselves will
35:34
happy join so they themselves will specify that
35:35
specify that
35:35
specify that this has been deprecated so uh even if
35:38
this has been deprecated so uh even if
35:38
this has been deprecated so uh even if you
35:38
you
35:38
you go to this npm of this happy join
35:42
go to this npm of this happy join
35:42
go to this npm of this happy join so they specify that uh happy joy has
35:45
so they specify that uh happy joy has
35:45
so they specify that uh happy joy has been
35:45
been
35:45
been deprecated uh moved to this
35:48
deprecated uh moved to this
35:48
deprecated uh moved to this joy so that's a joy validator so all we
35:51
joy so that's a joy validator so all we
35:51
joy so that's a joy validator so all we have to do is uh from the schema
35:54
have to do is uh from the schema
35:54
have to do is uh from the schema whatever
35:55
whatever
35:55
whatever you want to verify if
35:59
you want to verify if
35:59
you want to verify if we are not specifying these things
36:03
we are not specifying these things
36:03
we are not specifying these things it has to break so difference which i
36:06
it has to break so difference which i
36:06
it has to break so difference which i saw um where am i
36:11
saw um where am i
36:11
saw um where am i i'm sorry i'm sorry
36:14
i'm sorry i'm sorry
36:14
i'm sorry i'm sorry so one particular difference which i uh
36:17
so one particular difference which i uh
36:17
so one particular difference which i uh faced
36:17
faced
36:18
faced problem yesterday is like if we use this
36:21
problem yesterday is like if we use this
36:21
problem yesterday is like if we use this javascript
36:22
javascript
36:22
javascript we will have a habit of using the
36:25
we will have a habit of using the
36:26
we will have a habit of using the number as a lower lowercase n
36:29
number as a lower lowercase n
36:29
number as a lower lowercase n if you see this book schema here the
36:31
if you see this book schema here the
36:31
if you see this book schema here the number
36:32
number
36:32
number is lowercase but here in this mongoose
36:36
is lowercase but here in this mongoose
36:36
is lowercase but here in this mongoose schema if you go to this mongoose
36:39
schema if you go to this mongoose
36:39
schema if you go to this mongoose schema
36:43
if you go to this mongoose schema i want
36:46
if you go to this mongoose schema i want
36:46
if you go to this mongoose schema i want to
36:47
to
36:47
to show you the data types where it
36:51
show you the data types where it
36:51
show you the data types where it has got uppercase
36:54
has got uppercase
36:54
has got uppercase so the schema schema types if you see
36:56
so the schema schema types if you see
36:56
so the schema schema types if you see that the schema type is
36:57
that the schema type is
36:58
that the schema type is uppercase n so it's not a lowercase and
37:00
uppercase n so it's not a lowercase and
37:00
uppercase n so it's not a lowercase and just
37:01
just
37:01
just be careful uh if you want to do uh if
37:03
be careful uh if you want to do uh if
37:04
be careful uh if you want to do uh if you're using this one
37:05
you're using this one
37:05
you're using this one just ensure that there is an uppercase n
37:08
just ensure that there is an uppercase n
37:08
just ensure that there is an uppercase n that's another tip and have a couple
37:11
that's another tip and have a couple
37:11
that's another tip and have a couple of uh middlewares one for this
37:14
of uh middlewares one for this
37:14
of uh middlewares one for this mongol uh one for this logger so
37:17
mongol uh one for this logger so
37:18
mongol uh one for this logger so this is morgan logger i really like this
37:19
this is morgan logger i really like this
37:20
this is morgan logger i really like this guy they give
37:21
guy they give
37:21
guy they give all beautiful uh logging what was the
37:24
all beautiful uh logging what was the
37:24
all beautiful uh logging what was the end point i mean we
37:25
end point i mean we
37:25
end point i mean we it's like we can customize i just kept
37:27
it's like we can customize i just kept
37:28
it's like we can customize i just kept it to the pretty simple thing but
37:29
it to the pretty simple thing but
37:29
it to the pretty simple thing but we can customize as much as as we want
37:32
we can customize as much as as we want
37:32
we can customize as much as as we want here
37:33
here
37:33
here okay and the controllers are pretty much
37:36
okay and the controllers are pretty much
37:36
okay and the controllers are pretty much uh
37:36
uh
37:36
uh simple controllers uh you can see that
37:39
simple controllers uh you can see that
37:39
simple controllers uh you can see that like get all books
37:40
like get all books
37:40
like get all books uh we're just going away book um the
37:43
uh we're just going away book um the
37:43
uh we're just going away book um the book model got fined so it's going to
37:45
book model got fined so it's going to
37:45
book model got fined so it's going to find everything we have seen that
37:47
find everything we have seen that
37:47
find everything we have seen that we uh we did it here from the console in
37:49
we uh we did it here from the console in
37:49
we uh we did it here from the console in the mongodb
37:50
the mongodb
37:50
the mongodb okay now how do we add book that a small
37:53
okay now how do we add book that a small
37:53
okay now how do we add book that a small uh
37:54
uh
37:54
uh mini validation is not such a big one we
37:57
mini validation is not such a big one we
37:57
mini validation is not such a big one we are
37:57
are
37:57
are first doing a basic validator whatever
38:00
first doing a basic validator whatever
38:00
first doing a basic validator whatever is the
38:00
is the
38:00
is the required parameters if we don't specify
38:02
required parameters if we don't specify
38:02
required parameters if we don't specify it's going to throw an error
38:04
it's going to throw an error
38:04
it's going to throw an error and a similar book if it is
38:08
and a similar book if it is
38:08
and a similar book if it is existing then it says that similar book
38:10
existing then it says that similar book
38:10
existing then it says that similar book already exists uh in
38:11
already exists uh in
38:11
already exists uh in in both the both the things we are
38:14
in both the both the things we are
38:14
in both the both the things we are specifying 400
38:15
specifying 400
38:16
specifying 400 and once it is there we are creating it
38:19
and once it is there we are creating it
38:19
and once it is there we are creating it okay
38:20
okay
38:20
okay i think we are uh covered uh pretty much
38:22
i think we are uh covered uh pretty much
38:22
i think we are uh covered uh pretty much uh
38:23
uh
38:23
uh thing i can uh go and uh
38:26
thing i can uh go and uh
38:26
thing i can uh go and uh check this see we have all these things
38:29
check this see we have all these things
38:29
check this see we have all these things uh it has come come out so we have four
38:32
uh it has come come out so we have four
38:32
uh it has come come out so we have four just wanted to check that do we have
38:34
just wanted to check that do we have
38:34
just wanted to check that do we have four rows or anything
38:35
four rows or anything
38:35
four rows or anything more okay one two
38:38
more okay one two
38:38
more okay one two three four five we have five five rows
38:41
three four five we have five five rows
38:41
three four five we have five five rows so
38:42
so
38:42
so i think it should be five one
38:45
i think it should be five one
38:45
i think it should be five one two three four five yeah i counted it
38:49
two three four five yeah i counted it
38:49
two three four five yeah i counted it wrong i'm really sorry for that okay so
38:52
wrong i'm really sorry for that okay so
38:52
wrong i'm really sorry for that okay so this is george reddy's
38:53
this is george reddy's
38:53
this is george reddy's uh this thing is here so i want to go
38:55
uh this thing is here so i want to go
38:55
uh this thing is here so i want to go and capture this
38:57
and capture this
38:57
and capture this and we'll see that post we will
39:00
and we'll see that post we will
39:00
and we'll see that post we will see in a moment so we'll do the send
39:04
see in a moment so we'll do the send
39:04
see in a moment so we'll do the send so you got that charge radius details it
39:08
so you got that charge radius details it
39:08
so you got that charge radius details it shows that
39:09
shows that
39:09
shows that the book is active and one more tip over
39:11
the book is active and one more tip over
39:11
the book is active and one more tip over here is just wanted to
39:13
here is just wanted to
39:13
here is just wanted to keep it simple today i'm uh i'm testing
39:16
keep it simple today i'm uh i'm testing
39:16
keep it simple today i'm uh i'm testing with the localhost and tomorrow
39:18
with the localhost and tomorrow
39:18
with the localhost and tomorrow the url might change i might run on a
39:20
the url might change i might run on a
39:20
the url might change i might run on a different
39:22
different
39:22
different port number even though it is local i
39:24
port number even though it is local i
39:24
port number even though it is local i might run on different port
39:26
might run on different port
39:26
might run on different port different ports so all we can do is we
39:28
different ports so all we can do is we
39:28
different ports so all we can do is we can go ahead and
39:29
can go ahead and
39:30
can go ahead and create an environment and inside that
39:32
create an environment and inside that
39:32
create an environment and inside that environment we
39:33
environment we
39:33
environment we can go ahead and create a variable and
39:36
can go ahead and create a variable and
39:36
can go ahead and create a variable and host it here
39:37
host it here
39:37
host it here because the advantage is at this at this
39:39
because the advantage is at this at this
39:39
because the advantage is at this at this point of time i have
39:40
point of time i have
39:40
point of time i have one two three four five end points in
39:43
one two three four five end points in
39:43
one two three four five end points in real
39:43
real
39:43
real in real time we might have a minimum 20
39:45
in real time we might have a minimum 20
39:45
in real time we might have a minimum 20 to 25 or more than 50
39:47
to 25 or more than 50
39:47
to 25 or more than 50 end points we have and every time i
39:49
end points we have and every time i
39:49
end points we have and every time i can't go and
39:50
can't go and
39:50
can't go and change the port in all 25 different
39:54
change the port in all 25 different
39:54
change the port in all 25 different uh tabs it's it will be a painful
39:57
uh tabs it's it will be a painful
39:57
uh tabs it's it will be a painful uh thing so all i can do is i can pretty
39:59
uh thing so all i can do is i can pretty
39:59
uh thing so all i can do is i can pretty much come over here and change this at
40:01
much come over here and change this at
40:01
much come over here and change this at one instance please
40:02
one instance please
40:02
one instance please if you're using this uh this is one of
40:04
if you're using this uh this is one of
40:04
if you're using this uh this is one of the other tips which we can go ahead and
40:06
the other tips which we can go ahead and
40:06
the other tips which we can go ahead and do that
40:07
do that
40:07
do that so we have uh got this charts record so
40:10
so we have uh got this charts record so
40:10
so we have uh got this charts record so i can come back over here
40:12
i can come back over here
40:12
i can come back over here in the put i am going here
40:16
in the put i am going here
40:16
in the put i am going here and i want to
40:20
send this
40:23
see if it is working if not i will
40:26
see if it is working if not i will
40:26
see if it is working if not i will send all the other parameters i did
40:29
send all the other parameters i did
40:29
send all the other parameters i did false
40:29
false
40:29
false then i can come back over here and
40:33
then i can come back over here and
40:33
then i can come back over here and come here as small right now you can see
40:36
come here as small right now you can see
40:36
come here as small right now you can see this the
40:37
this the
40:37
this the john's book is disabled right now
40:40
john's book is disabled right now
40:40
john's book is disabled right now okay so that's a small thing and we can
40:42
okay so that's a small thing and we can
40:42
okay so that's a small thing and we can go ahead and delete any of those rows we
40:44
go ahead and delete any of those rows we
40:44
go ahead and delete any of those rows we can
40:45
can
40:45
can specify okay that's pretty much
40:49
we can come back uh to the
40:52
we can come back uh to the
40:52
we can come back uh to the [Music]
40:54
[Music]
40:54
[Music] i'm just saying did i miss anything okay
40:57
i'm just saying did i miss anything okay
40:57
i'm just saying did i miss anything okay uh
40:57
uh
40:57
uh okay these are the methods which we have
40:59
okay these are the methods which we have
41:00
okay these are the methods which we have it here
41:01
it here
41:01
it here and and the entire source code whatever
41:03
and and the entire source code whatever
41:03
and and the entire source code whatever i'm showing here
41:05
i'm showing here
41:05
i'm showing here will be available inside this folder
41:08
will be available inside this folder
41:08
will be available inside this folder uh speaker series 2021 and
41:11
uh speaker series 2021 and
41:11
uh speaker series 2021 and inside that you will be you will be
41:14
inside that you will be you will be
41:14
inside that you will be you will be seeing a
41:15
seeing a
41:15
seeing a folder called 11th june 2021 underscore
41:18
folder called 11th june 2021 underscore
41:18
folder called 11th june 2021 underscore bookstore underscore one
41:20
bookstore underscore one
41:20
bookstore underscore one and here you will have both the back end
41:23
and here you will have both the back end
41:23
and here you will have both the back end and front end
41:24
and front end
41:24
and front end except even that example
41:27
except even that example
41:27
except even that example whatever the config which are specified
41:29
whatever the config which are specified
41:29
whatever the config which are specified example.env
41:31
example.env
41:31
example.env even that will be pointing to your local
41:33
even that will be pointing to your local
41:33
even that will be pointing to your local host if you have
41:35
host if you have
41:35
host if you have the local instance of the
41:37
the local instance of the
41:37
the local instance of the installed on your laptop
41:39
installed on your laptop
41:39
installed on your laptop or you have the docker container you
41:41
or you have the docker container you
41:41
or you have the docker container you have covered if you are
41:43
have covered if you are
41:43
have covered if you are using the atlas mongodless or you have
41:46
using the atlas mongodless or you have
41:46
using the atlas mongodless or you have some
41:46
some
41:46
some some other uh among things just ensure
41:49
some other uh among things just ensure
41:49
some other uh among things just ensure that you're changing
41:50
that you're changing
41:50
that you're changing and all you have to do is just do an npm
41:53
and all you have to do is just do an npm
41:53
and all you have to do is just do an npm uh
41:53
uh
41:53
uh install and you're good to go everything
41:56
install and you're good to go everything
41:56
install and you're good to go everything is
41:57
is
41:57
is uh in that in that way it's all covered
41:59
uh in that in that way it's all covered
41:59
uh in that in that way it's all covered right so we'll see come back over here
42:02
right so we'll see come back over here
42:02
right so we'll see come back over here and uh a small middleware kind of thing
42:06
and uh a small middleware kind of thing
42:06
and uh a small middleware kind of thing because
42:07
because
42:07
because um the end points if you see the
42:10
um the end points if you see the
42:10
um the end points if you see the endpoints like
42:11
endpoints like
42:11
endpoints like get booked by id are update book
42:14
get booked by id are update book
42:14
get booked by id are update book or delete book those all things are the
42:17
or delete book those all things are the
42:17
or delete book those all things are the same route
42:18
same route
42:18
same route like book slash book id and
42:21
like book slash book id and
42:21
like book slash book id and you have to go ahead and search this
42:23
you have to go ahead and search this
42:23
you have to go ahead and search this book for every
42:25
book for every
42:25
book for every functionality all these three
42:26
functionality all these three
42:26
functionality all these three functionalities the first piece is the
42:28
functionalities the first piece is the
42:28
functionalities the first piece is the book should exist in the system
42:29
book should exist in the system
42:30
book should exist in the system before you go and either retrieve it or
42:32
before you go and either retrieve it or
42:32
before you go and either retrieve it or delete it or
42:33
delete it or
42:33
delete it or update it so the that's a that's a
42:36
update it so the that's a that's a
42:36
update it so the that's a that's a pretty much so even though
42:37
pretty much so even though
42:37
pretty much so even though it's a one or two lines but still uh
42:39
it's a one or two lines but still uh
42:40
it's a one or two lines but still uh moved it to a
42:42
moved it to a
42:42
moved it to a reducible method and moved it to a
42:45
reducible method and moved it to a
42:45
reducible method and moved it to a reusable method and so that you know
42:47
reusable method and so that you know
42:47
reusable method and so that you know we'll be able to
42:48
we'll be able to
42:48
we'll be able to uh we will be able to use it i'll come
42:51
uh we will be able to use it i'll come
42:51
uh we will be able to use it i'll come back to that one and before that i
42:52
back to that one and before that i
42:52
back to that one and before that i was able to uh i want to show that see
42:55
was able to uh i want to show that see
42:55
was able to uh i want to show that see this the
42:56
this the
42:56
this the specifying that it's been duplicated
42:58
specifying that it's been duplicated
42:58
specifying that it's been duplicated please start using this joy
43:00
please start using this joy
43:00
please start using this joy so that's one important point and this
43:02
so that's one important point and this
43:02
so that's one important point and this one is uh
43:04
one is uh
43:04
one is uh async expressing handler i think it's
43:07
async expressing handler i think it's
43:07
async expressing handler i think it's going to take some time to
43:10
going to take some time to
43:10
going to take some time to for that one let's take
43:14
npm okay so i took little time i didn't
43:17
npm okay so i took little time i didn't
43:17
npm okay so i took little time i didn't have that much patience i'm sorry for
43:18
have that much patience i'm sorry for
43:18
have that much patience i'm sorry for that
43:19
that
43:19
that um so this one a simple middleware for
43:22
um so this one a simple middleware for
43:22
um so this one a simple middleware for handling exceptions
43:24
handling exceptions
43:24
handling exceptions inside the async express routes and
43:26
inside the async express routes and
43:26
inside the async express routes and passing them
43:27
passing them
43:27
passing them to our express error analyst
43:31
to our express error analyst
43:31
to our express error analyst so that's this one so how do we use it
43:34
so that's this one so how do we use it
43:34
so that's this one so how do we use it is whatever the
43:35
is whatever the
43:36
is whatever the our async method is there uh that method
43:39
our async method is there uh that method
43:39
our async method is there uh that method we have to wrap
43:39
we have to wrap
43:40
we have to wrap it inside this asynchronous so if you
43:42
it inside this asynchronous so if you
43:42
it inside this asynchronous so if you want to compare
43:43
want to compare
43:43
want to compare how our methods were there previously
43:46
how our methods were there previously
43:46
how our methods were there previously and
43:47
and
43:47
and if i come in over here so we can see
43:49
if i come in over here so we can see
43:50
if i come in over here so we can see that that's
43:50
that that's
43:50
that that's this was an async method and let me take
43:54
this was an async method and let me take
43:54
this was an async method and let me take the
43:55
the
43:55
the get all books so that's very simple so
43:58
get all books so that's very simple so
43:58
get all books so that's very simple so it's just one line
43:59
it's just one line
43:59
it's just one line so we have this one line so we had this
44:02
so we have this one line so we had this
44:02
so we have this one line so we had this async function now if you see
44:03
async function now if you see
44:03
async function now if you see compare with this latest version get all
44:06
compare with this latest version get all
44:06
compare with this latest version get all books
44:07
books
44:07
books you have the same functionality see
44:08
you have the same functionality see
44:08
you have the same functionality see there's the same functionality whatever
44:09
there's the same functionality whatever
44:10
there's the same functionality whatever you have it there
44:11
you have it there
44:11
you have it there uh get all books the request and
44:13
uh get all books the request and
44:13
uh get all books the request and response and
44:14
response and
44:14
response and uh you have you're throwing this one
44:16
uh you have you're throwing this one
44:16
uh you have you're throwing this one line exactly
44:17
line exactly
44:18
line exactly the same one line all we have to do is
44:20
the same one line all we have to do is
44:20
the same one line all we have to do is just wrap it
44:21
just wrap it
44:21
just wrap it and any of those exceptions will get
44:25
and any of those exceptions will get
44:25
and any of those exceptions will get route to this uh middleware over here
44:28
route to this uh middleware over here
44:28
route to this uh middleware over here so error handler so it properly does
44:30
so error handler so it properly does
44:30
so error handler so it properly does that so
44:31
that so
44:31
that so we're using that one and another tip
44:35
we're using that one and another tip
44:35
we're using that one and another tip what uh yeah about about this one so it
44:37
what uh yeah about about this one so it
44:37
what uh yeah about about this one so it does it doesn't make sense to
44:39
does it doesn't make sense to
44:39
does it doesn't make sense to every time go and check that so if you
44:41
every time go and check that so if you
44:41
every time go and check that so if you see this get booked by id
44:42
see this get booked by id
44:42
see this get booked by id it's pretty lean it's just one line
44:44
it's pretty lean it's just one line
44:44
it's pretty lean it's just one line because we are using this as part of the
44:46
because we are using this as part of the
44:46
because we are using this as part of the middleware
44:47
middleware
44:47
middleware every time you go with those end points
44:49
every time you go with those end points
44:49
every time you go with those end points where
44:50
where
44:50
where it depends upon the id parameter id
44:53
it depends upon the id parameter id
44:53
it depends upon the id parameter id which you pass we
44:54
which you pass we
44:54
which you pass we it's one of the way to handle there
44:56
it's one of the way to handle there
44:56
it's one of the way to handle there might be better ways but this is what i
44:58
might be better ways but this is what i
44:58
might be better ways but this is what i have learned from others so
45:01
have learned from others so
45:01
have learned from others so i'm just passing on to others
45:04
i'm just passing on to others
45:04
i'm just passing on to others so if it is helpful we can definitely
45:06
so if it is helpful we can definitely
45:06
so if it is helpful we can definitely use it and
45:07
use it and
45:07
use it and update is again the simple thing
45:11
update is again the simple thing
45:11
update is again the simple thing we use the same middleware to find if
45:13
we use the same middleware to find if
45:13
we use the same middleware to find if the record exists then it comes as part
45:15
the record exists then it comes as part
45:15
the record exists then it comes as part of the body
45:16
of the body
45:16
of the body and the delete is also pretty much the
45:18
and the delete is also pretty much the
45:18
and the delete is also pretty much the same you use the same one
45:19
same you use the same one
45:19
same you use the same one so here we are exporting these all
45:21
so here we are exporting these all
45:21
so here we are exporting these all methods and
45:22
methods and
45:22
methods and coming back to the router um coming back
45:26
coming back to the router um coming back
45:26
coming back to the router um coming back to the routes you can see that it's a
45:29
to the routes you can see that it's a
45:29
to the routes you can see that it's a pretty much
45:30
pretty much
45:30
pretty much very lean router you don't have any
45:32
very lean router you don't have any
45:32
very lean router you don't have any flush inside this it's just
45:34
flush inside this it's just
45:34
flush inside this it's just uh creates uh express and uh we are
45:37
uh creates uh express and uh we are
45:38
uh creates uh express and uh we are creating that uh book router and we've
45:41
creating that uh book router and we've
45:41
creating that uh book router and we've improved imported all the methods
45:43
improved imported all the methods
45:43
improved imported all the methods uh the seven methods uh six
45:46
uh the seven methods uh six
45:46
uh the seven methods uh six technically six methods we have imported
45:48
technically six methods we have imported
45:48
technically six methods we have imported and
45:49
and
45:49
and the first one does book exists
45:52
the first one does book exists
45:52
the first one does book exists that we are hooking it to the middleware
45:55
that we are hooking it to the middleware
45:55
that we are hooking it to the middleware so
45:55
so
45:56
so any route which finds the book id so it
45:59
any route which finds the book id so it
45:59
any route which finds the book id so it goes and executes
46:00
goes and executes
46:00
goes and executes does this book exist on this particular
46:01
does this book exist on this particular
46:01
does this book exist on this particular id if it
46:03
id if it
46:03
id if it then go to the next step else it throws
46:06
then go to the next step else it throws
46:06
then go to the next step else it throws from there itself you can see that uh in
46:09
from there itself you can see that uh in
46:09
from there itself you can see that uh in the controller
46:11
the controller
46:11
the controller let's see that here it goes and tries to
46:14
let's see that here it goes and tries to
46:14
let's see that here it goes and tries to find that
46:15
find that
46:15
find that if at all the book doesn't exist so i
46:17
if at all the book doesn't exist so i
46:17
if at all the book doesn't exist so i mean if it is any problem we are
46:19
mean if it is any problem we are
46:19
mean if it is any problem we are throwing this 500
46:20
throwing this 500
46:20
throwing this 500 and if this book exists then we are
46:24
and if this book exists then we are
46:24
and if this book exists then we are calling the next that means go to the
46:25
calling the next that means go to the
46:25
calling the next that means go to the next
46:27
next
46:27
next handler and uh if not we are
46:30
handler and uh if not we are
46:30
handler and uh if not we are we're throwing four zero four so
46:33
we're throwing four zero four so
46:34
we're throwing four zero four so that's the one and uh final pieces it's
46:36
that's the one and uh final pieces it's
46:36
that's the one and uh final pieces it's all pretty lean
46:37
all pretty lean
46:38
all pretty lean so on this end point where without i
46:41
so on this end point where without i
46:41
so on this end point where without i mean
46:42
mean
46:42
mean for this books for these two
46:46
for this books for these two
46:46
for this books for these two verbs whether it is books or whether it
46:49
verbs whether it is books or whether it
46:49
verbs whether it is books or whether it is
46:50
is
46:50
is get books or post books so that there
46:52
get books or post books so that there
46:52
get books or post books so that there are nothing
46:53
are nothing
46:53
are nothing coming as part of the route parameter so
46:55
coming as part of the route parameter so
46:55
coming as part of the route parameter so in that we are calling this get all
46:57
in that we are calling this get all
46:57
in that we are calling this get all books get by id
46:58
books get by id
46:58
books get by id and anything like get book by id or
47:01
and anything like get book by id or
47:01
and anything like get book by id or update book by id
47:02
update book by id
47:02
update book by id or delete book by id where we have this
47:04
or delete book by id where we have this
47:04
or delete book by id where we have this id parameter coming in all these three
47:07
id parameter coming in all these three
47:07
id parameter coming in all these three end points so three end points are there
47:09
end points so three end points are there
47:10
end points so three end points are there and by default it's going to take care
47:11
and by default it's going to take care
47:11
and by default it's going to take care of
47:11
of
47:11
of the middleware is going to run in these
47:13
the middleware is going to run in these
47:13
the middleware is going to run in these three requests specifically
47:15
three requests specifically
47:15
three requests specifically and it's going to handle that's pretty
47:17
and it's going to handle that's pretty
47:17
and it's going to handle that's pretty much about the back end
47:19
much about the back end
47:19
much about the back end and we have seen couple of back ends
47:20
and we have seen couple of back ends
47:20
and we have seen couple of back ends there uh back and calls there
47:22
there uh back and calls there
47:22
there uh back and calls there and let's come back to the front end so
47:25
and let's come back to the front end so
47:25
and let's come back to the front end so this front end is pretty
47:26
this front end is pretty
47:26
this front end is pretty uh simple uh is it executing
47:30
uh simple uh is it executing
47:30
uh simple uh is it executing yes it's it's running
47:33
yes it's it's running
47:33
yes it's it's running okay so the front end i didn't use much
47:36
okay so the front end i didn't use much
47:36
okay so the front end i didn't use much of the
47:38
of the
47:38
of the react bootstrap or anything including
47:40
react bootstrap or anything including
47:40
react bootstrap or anything including the
47:41
the
47:41
the um kept it like redux or any of those
47:45
um kept it like redux or any of those
47:45
um kept it like redux or any of those things kept it to the pretty simple
47:47
things kept it to the pretty simple
47:47
things kept it to the pretty simple uh to showcase that how quickly we'll be
47:49
uh to showcase that how quickly we'll be
47:49
uh to showcase that how quickly we'll be able to create the
47:50
able to create the
47:50
able to create the uh crud operations in this
47:54
uh crud operations in this
47:54
uh crud operations in this month stack so we have covered
47:57
month stack so we have covered
47:57
month stack so we have covered we have covered about the we
48:00
we have covered about the we
48:00
we have covered about the we covered about
48:01
covered about
48:01
covered about express and node.js and we have seen few
48:03
express and node.js and we have seen few
48:03
express and node.js and we have seen few tips and tricks what i
48:05
tips and tricks what i
48:05
tips and tricks what i felt was helpful i just passed it off
48:08
felt was helpful i just passed it off
48:08
felt was helpful i just passed it off and
48:10
and
48:10
and what we are using is one thing is we are
48:12
what we are using is one thing is we are
48:12
what we are using is one thing is we are using this react router
48:14
using this react router
48:14
using this react router and this is one which ham
48:19
and this is one which ham
48:19
and this is one which ham using okay so we are using that
48:23
using okay so we are using that
48:23
using okay so we are using that and react spinner as well as react uh
48:26
and react spinner as well as react uh
48:26
and react spinner as well as react uh toastify so to show some toasts
48:31
toastify so to show some toasts
48:31
toastify so to show some toasts uh on this one so let me terminate this
48:34
uh on this one so let me terminate this
48:34
uh on this one so let me terminate this so that you know we'll be able to
48:37
so that you know we'll be able to
48:37
so that you know we'll be able to see those things at this point of time
48:38
see those things at this point of time
48:38
see those things at this point of time i'll terminate this
48:40
i'll terminate this
48:40
i'll terminate this okay let's spend some time before we
48:44
okay let's spend some time before we
48:44
okay let's spend some time before we go and discuss that one anything to
48:47
go and discuss that one anything to
48:47
go and discuss that one anything to focus here no nothing to focus over
48:49
focus here no nothing to focus over
48:49
focus here no nothing to focus over there and
48:49
there and
48:50
there and uh these are the simple things which
48:53
uh these are the simple things which
48:53
uh these are the simple things which it comes out of the box nothing uh
48:55
it comes out of the box nothing uh
48:56
it comes out of the box nothing uh nothing new
48:59
okay so nothing new here so those are
49:02
okay so nothing new here so those are
49:02
okay so nothing new here so those are the frameworks and
49:03
the frameworks and
49:03
the frameworks and let's come back to this uh public folder
49:07
let's come back to this uh public folder
49:07
let's come back to this uh public folder and inside this public folder you can
49:09
and inside this public folder you can
49:09
and inside this public folder you can you can see this we are
49:11
you can see this we are
49:11
you can see this we are using the uh we are using we are using
49:14
using the uh we are using we are using
49:14
using the uh we are using we are using this one and the
49:16
this one and the
49:16
this one and the font awesome the cdn so all those icons
49:20
font awesome the cdn so all those icons
49:20
font awesome the cdn so all those icons we
49:20
we
49:20
we see this it's it's coming from this uh
49:23
see this it's it's coming from this uh
49:23
see this it's it's coming from this uh it's coming from that
49:24
it's coming from that
49:24
it's coming from that font icon so we have this root the do
49:27
font icon so we have this root the do
49:27
font icon so we have this root the do root is here
49:28
root is here
49:28
root is here so that one and inside this public i
49:31
so that one and inside this public i
49:31
so that one and inside this public i have few images
49:32
have few images
49:32
have few images one is this loader and few books i just
49:35
one is this loader and few books i just
49:35
one is this loader and few books i just had coded
49:36
had coded
49:36
had coded so it dynamically generate a random
49:38
so it dynamically generate a random
49:38
so it dynamically generate a random number between one and
49:39
number between one and
49:39
number between one and ten and it anytime we add a new book it
49:42
ten and it anytime we add a new book it
49:42
ten and it anytime we add a new book it just
49:42
just
49:42
just uh adds that one the random number and
49:45
uh adds that one the random number and
49:45
uh adds that one the random number and it generates
49:46
it generates
49:46
it generates so that's the one and here if we
49:49
so that's the one and here if we
49:49
so that's the one and here if we come back to the app
49:52
come back to the app
49:52
come back to the app here you can you can see this this
49:55
here you can you can see this this
49:55
here you can you can see this this component where
49:56
component where
49:56
component where uh once again uh yeah this is the first
50:00
uh once again uh yeah this is the first
50:00
uh once again uh yeah this is the first component where
50:01
component where
50:01
component where we go ahead and get this app and we are
50:05
we go ahead and get this app and we are
50:05
we go ahead and get this app and we are dropping it here in the router and we
50:07
dropping it here in the router and we
50:07
dropping it here in the router and we are specifying this
50:10
are specifying this
50:10
are specifying this document.getelementbyid root so root we
50:12
document.getelementbyid root so root we
50:12
document.getelementbyid root so root we have already seen that in the
50:15
have already seen that in the
50:15
have already seen that in the index dot html that device root so that
50:18
index dot html that device root so that
50:18
index dot html that device root so that one
50:18
one
50:18
one and the next thing what is happening
50:21
and the next thing what is happening
50:21
and the next thing what is happening over here is
50:22
over here is
50:22
over here is uh in this index file we are telling
50:25
uh in this index file we are telling
50:26
uh in this index file we are telling that here is the here is the first
50:28
that here is the here is the first
50:28
that here is the here is the first element
50:29
element
50:29
element and take that element and where we have
50:31
and take that element and where we have
50:32
and take that element and where we have to load that you have to load it in
50:33
to load that you have to load it in
50:33
to load that you have to load it in this uh we have to load it in this
50:35
this uh we have to load it in this
50:35
this uh we have to load it in this container so this is the element the
50:37
container so this is the element the
50:37
container so this is the element the first piece is the element and the
50:38
first piece is the element and the
50:38
first piece is the element and the second piece is a
50:39
second piece is a
50:39
second piece is a container so that's that's one thing and
50:42
container so that's that's one thing and
50:42
container so that's that's one thing and one more thing is uh whatever the
50:45
one more thing is uh whatever the
50:45
one more thing is uh whatever the bootstrap
50:45
bootstrap
50:46
bootstrap which we do have
50:49
which we do have
50:49
which we do have that's what i forgot did i remove that
50:52
that's what i forgot did i remove that
50:52
that's what i forgot did i remove that i'm really sorry
50:53
i'm really sorry
50:53
i'm really sorry because we should see that as part of
50:55
because we should see that as part of
50:55
because we should see that as part of the
50:57
the
50:57
the uh be one second i'm really sorry guys
51:01
uh be one second i'm really sorry guys
51:01
uh be one second i'm really sorry guys yeah what's up it's been installed i
51:03
yeah what's up it's been installed i
51:03
yeah what's up it's been installed i don't know for some reason i could not
51:04
don't know for some reason i could not
51:04
don't know for some reason i could not see that
51:05
see that
51:05
see that uh the bootstrap he said because without
51:08
uh the bootstrap he said because without
51:08
uh the bootstrap he said because without bootstrap
51:09
bootstrap
51:09
bootstrap uh i can't do the styling i'm really
51:11
uh i can't do the styling i'm really
51:11
uh i can't do the styling i'm really sorry for that
51:12
sorry for that
51:12
sorry for that uh
51:13
uh
51:13
uh [Music]
51:15
[Music]
51:15
[Music] for some reason i said i'm really sorry
51:17
for some reason i said i'm really sorry
51:18
for some reason i said i'm really sorry yeah the bootstrap
51:19
yeah the bootstrap
51:19
yeah the bootstrap is also important the bootstrap i have
51:21
is also important the bootstrap i have
51:21
is also important the bootstrap i have included here and
51:22
included here and
51:22
included here and if you see the bottom it's being
51:26
if you see the bottom it's being
51:26
if you see the bottom it's being used from the cdn okay those are the two
51:28
used from the cdn okay those are the two
51:28
used from the cdn okay those are the two important pieces i
51:29
important pieces i
51:29
important pieces i can't help myself without those two
51:32
can't help myself without those two
51:32
can't help myself without those two things now we know that
51:33
things now we know that
51:33
things now we know that uh how these things are getting hooked
51:35
uh how these things are getting hooked
51:35
uh how these things are getting hooked up so it
51:36
up so it
51:36
up so it in the html file we in the html file we
51:39
in the html file we in the html file we
51:40
in the html file we in the html file we do
51:40
do
51:40
do have the we do have this
51:43
have the we do have this
51:43
have the we do have this the container or the do and where we are
51:46
the container or the do and where we are
51:46
the container or the do and where we are going to load everything
51:47
going to load everything
51:47
going to load everything and here we have the font awesome
51:50
and here we have the font awesome
51:50
and here we have the font awesome okay let's go to the next uh step in the
51:53
okay let's go to the next uh step in the
51:53
okay let's go to the next uh step in the process
51:54
process
51:54
process so here we have this app and
51:57
so here we have this app and
51:57
so here we have this app and this app is loading the top nav bar
52:00
this app is loading the top nav bar
52:00
this app is loading the top nav bar and has got the footer and
52:04
and has got the footer and
52:04
and has got the footer and it has got this stew
52:07
it has got this stew
52:07
it has got this stew and here is the toaster and then we are
52:11
and here is the toaster and then we are
52:11
and here is the toaster and then we are having the sticky sticky sidebar you can
52:14
having the sticky sticky sidebar you can
52:14
having the sticky sticky sidebar you can see this
52:15
see this
52:15
see this uh over here the sticky sidebar
52:19
uh over here the sticky sidebar
52:19
uh over here the sticky sidebar 15 of that so two columns and the 10
52:22
15 of that so two columns and the 10
52:22
15 of that so two columns and the 10 columns i have the 12 columns i divided
52:24
columns i have the 12 columns i divided
52:24
columns i have the 12 columns i divided into 2 comma 10
52:26
into 2 comma 10
52:26
into 2 comma 10 and here is this switch where we go and
52:30
and here is this switch where we go and
52:30
and here is this switch where we go and route it to different things so it's all
52:33
route it to different things so it's all
52:33
route it to different things so it's all the
52:33
the
52:34
the every thing is coming in play because of
52:37
every thing is coming in play because of
52:37
every thing is coming in play because of this
52:37
this
52:37
this uh styles which is there inside this uh
52:40
uh styles which is there inside this uh
52:40
uh styles which is there inside this uh which is there inside is this one okay
52:43
which is there inside is this one okay
52:43
which is there inside is this one okay so let's quickly start and
52:45
so let's quickly start and
52:45
so let's quickly start and start breaking the application and then
52:47
start breaking the application and then
52:47
start breaking the application and then let's start understand
52:49
let's start understand
52:49
let's start understand now
52:54
so i'm starting the server
53:00
so i'm starting the server
53:00
so i'm starting the server let me start
53:04
i'm cutting the one because if you see
53:06
i'm cutting the one because if you see
53:06
i'm cutting the one because if you see this one
53:07
this one
53:07
this one i mean it's not needed that you should
53:09
i mean it's not needed that you should
53:09
i mean it's not needed that you should use the same structure but i'm going to
53:10
use the same structure but i'm going to
53:10
use the same structure but i'm going to check in
53:11
check in
53:11
check in this structure so what is happening here
53:13
this structure so what is happening here
53:13
this structure so what is happening here is in this package
53:14
is in this package
53:14
is in this package uh if you start it starts the node
53:18
uh if you start it starts the node
53:18
uh if you start it starts the node from here i'm going to the back end i'm
53:19
from here i'm going to the back end i'm
53:20
from here i'm going to the back end i'm starting the server
53:21
starting the server
53:21
starting the server js and if you specify
53:25
js and if you specify
53:25
js and if you specify npm if you specify this piece
53:29
npm if you specify this piece
53:29
npm if you specify this piece where you can go back and see that so
53:33
where you can go back and see that so
53:33
where you can go back and see that so npm run server that means it is coming
53:35
npm run server that means it is coming
53:35
npm run server that means it is coming and hitting this line number nine where
53:37
and hitting this line number nine where
53:37
and hitting this line number nine where it starts the node one
53:38
it starts the node one
53:38
it starts the node one and instead of node we are starting with
53:40
and instead of node we are starting with
53:40
and instead of node we are starting with the node one nothing nothing special
53:42
the node one nothing nothing special
53:42
the node one nothing nothing special it's a pretty simple so we have
53:44
it's a pretty simple so we have
53:44
it's a pretty simple so we have connected
53:45
connected
53:45
connected and here it's going to build that okay
53:48
and here it's going to build that okay
53:48
and here it's going to build that okay while it is building let's go ahead and
53:49
while it is building let's go ahead and
53:49
while it is building let's go ahead and build up
53:50
build up
53:50
build up uh some other theory how did we organize
53:53
uh some other theory how did we organize
53:53
uh some other theory how did we organize this
53:54
this
53:54
this so under compress i mean it's all uh the
53:57
so under compress i mean it's all uh the
53:57
so under compress i mean it's all uh the best practices
53:58
best practices
53:58
best practices which you will be using might be
54:01
which you will be using might be
54:01
which you will be using might be entirely different from
54:02
entirely different from
54:02
entirely different from what i'm using it it might not be the
54:04
what i'm using it it might not be the
54:04
what i'm using it it might not be the best practice it might be my personal
54:06
best practice it might be my personal
54:06
best practice it might be my personal choice
54:06
choice
54:06
choice it might be my personal choice okay so
54:09
it might be my personal choice okay so
54:09
it might be my personal choice okay so under the layout i'm marking it the
54:11
under the layout i'm marking it the
54:11
under the layout i'm marking it the footer sidebar
54:12
footer sidebar
54:12
footer sidebar and the top navbar we can have
54:15
and the top navbar we can have
54:15
and the top navbar we can have our own component specific uh css but i
54:19
our own component specific uh css but i
54:19
our own component specific uh css but i made it like a server of anivarni put
54:22
made it like a server of anivarni put
54:22
made it like a server of anivarni put all these style sheets in
54:23
all these style sheets in
54:24
all these style sheets in one place but you guys can follow
54:27
one place but you guys can follow
54:27
one place but you guys can follow the best practice and go ahead and have
54:30
the best practice and go ahead and have
54:30
the best practice and go ahead and have uh separate styles for each and every
54:33
uh separate styles for each and every
54:33
uh separate styles for each and every component
54:34
component
54:34
component okay so what do we have here we are
54:37
okay so what do we have here we are
54:37
okay so what do we have here we are using this
54:38
using this
54:38
using this uh router and
54:41
uh router and
54:41
uh router and we heavily used this
54:44
we heavily used this
54:44
we heavily used this icons and the bootstrap functionality
54:49
icons and the bootstrap functionality
54:49
icons and the bootstrap functionality and by default the default props is
54:52
and by default the default props is
54:52
and by default the default props is there and the prop type
54:54
there and the prop type
54:54
there and the prop type and you can see that this one link which
54:57
and you can see that this one link which
54:57
and you can see that this one link which says the book
54:58
says the book
54:58
says the book bookstore that's going to the dashboard
55:01
bookstore that's going to the dashboard
55:02
bookstore that's going to the dashboard and list books and about pages
55:05
and list books and about pages
55:05
and list books and about pages so again if you come to this pages
55:08
so again if you come to this pages
55:08
so again if you come to this pages uh created this home and about about
55:11
uh created this home and about about
55:11
uh created this home and about about is just a small page which
55:15
is just a small page which
55:15
is just a small page which shows that and home page is like a just
55:17
shows that and home page is like a just
55:17
shows that and home page is like a just like a dashboard to create what all the
55:19
like a dashboard to create what all the
55:19
like a dashboard to create what all the facilities which are available in the
55:21
facilities which are available in the
55:21
facilities which are available in the application it's only for uh those
55:23
application it's only for uh those
55:23
application it's only for uh those pieces if you come and see that
55:25
pieces if you come and see that
55:25
pieces if you come and see that this is these are the two things like if
55:27
this is these are the two things like if
55:27
this is these are the two things like if i if i come to homepage it's just this
55:29
i if i come to homepage it's just this
55:29
i if i come to homepage it's just this one
55:30
one
55:30
one and if you navigate to the dashboard
55:33
and if you navigate to the dashboard
55:33
and if you navigate to the dashboard it's just like
55:34
it's just like
55:34
it's just like a couple of wizards and each of this
55:36
a couple of wizards and each of this
55:36
a couple of wizards and each of this wizard generally
55:37
wizard generally
55:37
wizard generally uh it's not the application dashboard
55:40
uh it's not the application dashboard
55:40
uh it's not the application dashboard it's like a landing page
55:41
it's like a landing page
55:42
it's like a landing page uh let me rephrase that it's not a
55:45
uh let me rephrase that it's not a
55:45
uh let me rephrase that it's not a admin dashboard or something where we
55:47
admin dashboard or something where we
55:47
admin dashboard or something where we will show that how many books are there
55:49
will show that how many books are there
55:49
will show that how many books are there in the stock or
55:51
in the stock or
55:51
in the stock or uh what all the purchases which has
55:53
uh what all the purchases which has
55:53
uh what all the purchases which has happened over the last one week or those
55:54
happened over the last one week or those
55:54
happened over the last one week or those kind of graphs and other things which
55:56
kind of graphs and other things which
55:56
kind of graphs and other things which comes that
55:56
comes that
55:56
comes that is an entirely different dashboard let
55:59
is an entirely different dashboard let
55:59
is an entirely different dashboard let me call this as a landing page it's just
56:01
me call this as a landing page it's just
56:01
me call this as a landing page it's just a landing page when once you
56:02
a landing page when once you
56:02
a landing page when once you go and hit this one okay so
56:06
go and hit this one okay so
56:06
go and hit this one okay so here we have this switch case where
56:10
here we have this switch case where
56:10
here we have this switch case where if it comes to the route we show this
56:14
if it comes to the route we show this
56:14
if it comes to the route we show this and if it goes to about it we are coming
56:17
and if it goes to about it we are coming
56:17
and if it goes to about it we are coming in
56:17
in
56:17
in here and showing this one okay now i can
56:20
here and showing this one okay now i can
56:20
here and showing this one okay now i can show this
56:21
show this
56:21
show this uh there was a small spinner you can see
56:23
uh there was a small spinner you can see
56:23
uh there was a small spinner you can see this just for a
56:25
this just for a
56:25
this just for a fraction of a second you can see that
56:26
fraction of a second you can see that
56:26
fraction of a second you can see that there was a spinner
56:28
there was a spinner
56:28
there was a spinner i will because we are already
56:31
i will because we are already
56:32
i will because we are already running that so that might be the reason
56:34
running that so that might be the reason
56:34
running that so that might be the reason we could not see that
56:36
we could not see that
56:36
we could not see that for a longer time let me go ahead and
56:38
for a longer time let me go ahead and
56:38
for a longer time let me go ahead and stop this
56:39
stop this
56:39
stop this i think that the first hit it might take
56:41
i think that the first hit it might take
56:41
i think that the first hit it might take i again i'm starting it and
56:45
i again i'm starting it and
56:45
i again i'm starting it and maybe maybe you like to wrap in next two
56:47
maybe maybe you like to wrap in next two
56:47
maybe maybe you like to wrap in next two or three minutes
56:48
or three minutes
56:48
or three minutes yeah yeah sure sure sure so
56:51
yeah yeah sure sure sure so
56:52
yeah yeah sure sure sure so so we have seen that flickering and
56:55
so we have seen that flickering and
56:55
so we have seen that flickering and another uh another tip in
56:58
another uh another tip in
56:58
another uh another tip in the list page okay another tip is
57:02
the list page okay another tip is
57:02
the list page okay another tip is the way i organized is like a screens
57:06
the way i organized is like a screens
57:06
the way i organized is like a screens where i mean under the screens if you
57:08
where i mean under the screens if you
57:08
where i mean under the screens if you have different modules we can have
57:09
have different modules we can have
57:09
have different modules we can have books and push all these four inside
57:12
books and push all these four inside
57:12
books and push all these four inside that
57:13
that
57:13
that books and service and again in the
57:15
books and service and again in the
57:15
books and service and again in the service
57:17
service
57:17
service i used fetch and if you go ahead and
57:20
i used fetch and if you go ahead and
57:20
i used fetch and if you go ahead and do a comparison whether to use
57:24
do a comparison whether to use
57:24
do a comparison whether to use axios or whether to use fetch um
57:28
axios or whether to use fetch um
57:28
axios or whether to use fetch um the fetch i mean the axios has got more
57:31
the fetch i mean the axios has got more
57:31
the fetch i mean the axios has got more uh facilities than fetch so you can see
57:34
uh facilities than fetch so you can see
57:34
uh facilities than fetch so you can see that
57:35
that
57:35
that we can do the cancelling and we can have
57:38
we can do the cancelling and we can have
57:38
we can do the cancelling and we can have interceptors and a lot of other things
57:40
interceptors and a lot of other things
57:40
interceptors and a lot of other things and if you see that the
57:42
and if you see that the
57:42
and if you see that the data which is coming in this and the
57:45
data which is coming in this and the
57:45
data which is coming in this and the body these are some of the
57:47
body these are some of the
57:47
body these are some of the differentiation and inbuilt protection
57:49
differentiation and inbuilt protection
57:49
differentiation and inbuilt protection from
57:51
from
57:51
from cross site request for germany here it
57:54
cross site request for germany here it
57:54
cross site request for germany here it doesn't but
57:55
doesn't but
57:55
doesn't but my use case was pretty simple just do a
57:57
my use case was pretty simple just do a
57:57
my use case was pretty simple just do a crud operation so i
57:59
crud operation so i
57:59
crud operation so i i was sticking to this one but i'm not
58:01
i was sticking to this one but i'm not
58:01
i was sticking to this one but i'm not doing any
58:02
doing any
58:02
doing any uh any of those facilities i'm not using
58:05
uh any of those facilities i'm not using
58:05
uh any of those facilities i'm not using it i
58:06
it i
58:06
it i just was sticking to this one okay so
58:09
just was sticking to this one okay so
58:09
just was sticking to this one okay so that's pretty simple so if you see that
58:10
that's pretty simple so if you see that
58:10
that's pretty simple so if you see that fetch
58:11
fetch
58:11
fetch i have the url and i'm doing the post
58:14
i have the url and i'm doing the post
58:14
i have the url and i'm doing the post and
58:15
and
58:15
and doing this
58:18
assigning this value i mean i'm doing
58:20
assigning this value i mean i'm doing
58:20
assigning this value i mean i'm doing the stringify of this
58:21
the stringify of this
58:21
the stringify of this book taking out all those properties and
58:24
book taking out all those properties and
58:24
book taking out all those properties and these all simple uh operations and you
58:27
these all simple uh operations and you
58:27
these all simple uh operations and you can see
58:28
can see
58:28
can see let's go through the list one real quick
58:31
let's go through the list one real quick
58:31
let's go through the list one real quick and
58:31
and
58:31
and see this one we have the use date one
58:34
see this one we have the use date one
58:34
see this one we have the use date one for the books and one for the loading
58:37
for the books and one for the loading
58:37
for the books and one for the loading so that's what we are seeing over here
58:40
so that's what we are seeing over here
58:40
so that's what we are seeing over here if you go and go back to some other
58:44
if you go and go back to some other
58:44
if you go and go back to some other place and
58:46
place and
58:46
place and come over here you can see that the
58:48
come over here you can see that the
58:48
come over here you can see that the loading symbol as long the loading is
58:50
loading symbol as long the loading is
58:50
loading symbol as long the loading is there we are
58:51
there we are
58:51
there we are uh we are showing this we are showing
58:54
uh we are showing this we are showing
58:54
uh we are showing this we are showing this
58:55
this
58:55
this clock loader this is one of the
58:56
clock loader this is one of the
58:56
clock loader this is one of the excellent thing you have got
58:58
excellent thing you have got
58:58
excellent thing you have got hundreds of loaders and i selected this
59:01
hundreds of loaders and i selected this
59:01
hundreds of loaders and i selected this this
59:01
this
59:02
this the bare minimum i have selected there
59:03
the bare minimum i have selected there
59:03
the bare minimum i have selected there are hundreds and hundreds of designs
59:05
are hundreds and hundreds of designs
59:05
are hundreds and hundreds of designs okay so that's one thing and this table
59:08
okay so that's one thing and this table
59:08
okay so that's one thing and this table we already know that until this loading
59:11
we already know that until this loading
59:11
we already know that until this loading uh this will be hidden if it is false
59:12
uh this will be hidden if it is false
59:12
uh this will be hidden if it is false we'll show this one and here
59:15
we'll show this one and here
59:15
we'll show this one and here books dot map is coming in here uh one
59:17
books dot map is coming in here uh one
59:18
books dot map is coming in here uh one thing which i wanted to highlight here
59:19
thing which i wanted to highlight here
59:19
thing which i wanted to highlight here is the
59:21
is the
59:21
is the rounded circle where uh this one and
59:24
rounded circle where uh this one and
59:24
rounded circle where uh this one and little bit of shadow
59:25
little bit of shadow
59:25
little bit of shadow on top of this and this is a picture url
59:28
on top of this and this is a picture url
59:28
on top of this and this is a picture url which is coming as part of the
59:30
which is coming as part of the
59:30
which is coming as part of the api call and this is another uh
59:33
api call and this is another uh
59:33
api call and this is another uh if condition we are using if the book is
59:35
if condition we are using if the book is
59:36
if condition we are using if the book is active we are showing the green thumbs
59:37
active we are showing the green thumbs
59:37
active we are showing the green thumbs up
59:38
up
59:38
up and book is deactivated we are showing
59:40
and book is deactivated we are showing
59:40
and book is deactivated we are showing the red thumbs up
59:41
the red thumbs up
59:41
the red thumbs up and it's all pretty much an icon without
59:44
and it's all pretty much an icon without
59:44
and it's all pretty much an icon without much of a
59:46
much of a
59:46
much of a textual label uh like everything it
59:48
textual label uh like everything it
59:48
textual label uh like everything it shows that edit book or a
59:50
shows that edit book or a
59:50
shows that edit book or a delete book and we can pretty much
59:53
delete book and we can pretty much
59:53
delete book and we can pretty much uh go and come back here without harming
59:57
uh go and come back here without harming
59:57
uh go and come back here without harming anything or
59:58
anything or
59:58
anything or we can go and delete that particular row
1:00:01
we can go and delete that particular row
1:00:01
we can go and delete that particular row it shows a
1:00:02
it shows a
1:00:02
it shows a small toaster so a a small
1:00:05
small toaster so a a small
1:00:05
small toaster so a a small application which needs uh all the
1:00:07
application which needs uh all the
1:00:07
application which needs uh all the facilities like you can do
1:00:09
facilities like you can do
1:00:09
facilities like you can do add add update and uh
1:00:14
add add update and uh
1:00:14
add add update and uh something
1:00:20
pitching let me add this row you can see
1:00:23
pitching let me add this row you can see
1:00:24
pitching let me add this row you can see this
1:00:24
this
1:00:24
this month rates record has been created it's
1:00:26
month rates record has been created it's
1:00:26
month rates record has been created it's smaller when these
1:00:27
smaller when these
1:00:28
smaller when these are dynamically generated
1:00:31
are dynamically generated
1:00:31
are dynamically generated this random numbers and uh that's it so
1:00:34
this random numbers and uh that's it so
1:00:34
this random numbers and uh that's it so this was uh the demo from my site
1:00:38
this was uh the demo from my site
1:00:38
this was uh the demo from my site i'm going to check in the entire source
1:00:39
i'm going to check in the entire source
1:00:39
i'm going to check in the entire source code including the server
1:00:42
code including the server
1:00:42
code including the server as well as the including the server as
1:00:44
as well as the including the server as
1:00:44
as well as the including the server as well as the
1:00:46
well as the
1:00:46
well as the client so please feel free to grab it
1:00:49
client so please feel free to grab it
1:00:49
client so please feel free to grab it from i think steven will post it
1:00:52
from i think steven will post it
1:00:52
from i think steven will post it uh post it in the
1:00:55
uh post it in the
1:00:55
uh post it in the youtube channel the github link please
1:00:58
youtube channel the github link please
1:00:58
youtube channel the github link please feel free to grab it
1:00:59
feel free to grab it
1:00:59
feel free to grab it and yeah i have actually dropped your
1:01:03
and yeah i have actually dropped your
1:01:03
and yeah i have actually dropped your github link in the github url in the
1:01:06
github link in the github url in the
1:01:06
github link in the github url in the comments
1:01:07
comments
1:01:07
comments definitely people can pick up from there
1:01:09
definitely people can pick up from there
1:01:09
definitely people can pick up from there question swami may be
1:01:10
question swami may be
1:01:10
question swami may be uh i know you're running a little over
1:01:11
uh i know you're running a little over
1:01:12
uh i know you're running a little over time now so people really like your
1:01:14
time now so people really like your
1:01:14
time now so people really like your session i see herman saying uh
1:01:16
session i see herman saying uh
1:01:16
session i see herman saying uh uh thanks thanks for watching sir this
1:01:19
uh thanks thanks for watching sir this
1:01:19
uh thanks thanks for watching sir this session
1:01:20
session
1:01:20
session here my many doubts so thanks for
1:01:23
here my many doubts so thanks for
1:01:23
here my many doubts so thanks for joining us thank you man
1:01:25
joining us thank you man
1:01:25
joining us thank you man says a great session so thank you so
1:01:28
says a great session so thank you so
1:01:28
says a great session so thank you so much
1:01:29
much
1:01:29
much um um um let's take one question from
1:01:31
um um um let's take one question from
1:01:31
um um um let's take one question from gunjan gundyn says what would be the
1:01:33
gunjan gundyn says what would be the
1:01:33
gunjan gundyn says what would be the best place to store db credentials
1:01:35
best place to store db credentials
1:01:35
best place to store db credentials while in one stack to ensure security
1:01:37
while in one stack to ensure security
1:01:38
while in one stack to ensure security slash confidentiality in just 30 seconds
1:01:41
slash confidentiality in just 30 seconds
1:01:41
slash confidentiality in just 30 seconds okay
1:01:45
like this env file once you deploy
1:01:48
like this env file once you deploy
1:01:48
like this env file once you deploy deploy to the server if you see in
1:01:51
deploy to the server if you see in
1:01:51
deploy to the server if you see in azure where i frequently deploy where we
1:01:53
azure where i frequently deploy where we
1:01:54
azure where i frequently deploy where we have this
1:01:55
have this
1:01:55
have this configuration settings so we deploy it
1:01:58
configuration settings so we deploy it
1:01:58
configuration settings so we deploy it with the dev credentials
1:01:59
with the dev credentials
1:01:59
with the dev credentials and then store the credentials in the
1:02:01
and then store the credentials in the
1:02:01
and then store the credentials in the azure key vault
1:02:03
azure key vault
1:02:03
azure key vault and then get the credentials from the
1:02:04
and then get the credentials from the
1:02:04
and then get the credentials from the azure keyword while you are
1:02:06
azure keyword while you are
1:02:06
azure keyword while you are deploying through the release pipeline
1:02:09
deploying through the release pipeline
1:02:09
deploying through the release pipeline go ahead and
1:02:10
go ahead and
1:02:10
go ahead and replace the tokens there so while you're
1:02:14
replace the tokens there so while you're
1:02:14
replace the tokens there so while you're having in the source code you are not
1:02:15
having in the source code you are not
1:02:15
having in the source code you are not going to store anywhere and the only
1:02:17
going to store anywhere and the only
1:02:17
going to store anywhere and the only thing is while you are deploying
1:02:18
thing is while you are deploying
1:02:18
thing is while you are deploying deploying to through the release
1:02:21
deploying to through the release
1:02:21
deploying to through the release pipeline
1:02:22
pipeline
1:02:22
pipeline and the service principle go and get
1:02:24
and the service principle go and get
1:02:24
and the service principle go and get this from the keyword
1:02:25
this from the keyword
1:02:25
this from the keyword and do a token replacement and you
1:02:28
and do a token replacement and you
1:02:28
and do a token replacement and you deploy it to the server
1:02:29
deploy it to the server
1:02:29
deploy it to the server and azure key vault is a thing which
1:02:32
and azure key vault is a thing which
1:02:32
and azure key vault is a thing which no one in this face of earth will get
1:02:34
no one in this face of earth will get
1:02:34
no one in this face of earth will get the access to that resource except the
1:02:36
the access to that resource except the
1:02:36
the access to that resource except the infrastructure lead
1:02:38
infrastructure lead
1:02:38
infrastructure lead and the architect or senior actor they
1:02:40
and the architect or senior actor they
1:02:40
and the architect or senior actor they are not going to give it to the senior
1:02:42
are not going to give it to the senior
1:02:42
are not going to give it to the senior architect also because
1:02:43
architect also because
1:02:43
architect also because that's where the credentials are stored
1:02:45
that's where the credentials are stored
1:02:45
that's where the credentials are stored it's like the keys of the kingdom
1:02:47
it's like the keys of the kingdom
1:02:47
it's like the keys of the kingdom i'm not willing to give it to anyone
1:02:50
i'm not willing to give it to anyone
1:02:50
i'm not willing to give it to anyone let's take one more question then the
1:02:52
let's take one more question then the
1:02:52
let's take one more question then the next session it's by
1:02:54
next session it's by
1:02:54
next session it's by uh asari knight who says how can we
1:02:56
uh asari knight who says how can we
1:02:56
uh asari knight who says how can we manage mongodb
1:02:58
manage mongodb
1:02:58
manage mongodb and how to increase memory for that
1:02:59
and how to increase memory for that
1:02:59
and how to increase memory for that image
1:03:01
image
1:03:01
image wow this is pretty uh good question so
1:03:04
wow this is pretty uh good question so
1:03:04
wow this is pretty uh good question so if you
1:03:04
if you
1:03:04
if you see the yaml templates
1:03:08
see the yaml templates
1:03:08
see the yaml templates um i mean whether it is a docker compose
1:03:11
um i mean whether it is a docker compose
1:03:11
um i mean whether it is a docker compose or the kubernetes when
1:03:13
or the kubernetes when
1:03:13
or the kubernetes when you are you're composing this uh
1:03:16
you are you're composing this uh
1:03:16
you are you're composing this uh containerization that's where you
1:03:18
containerization that's where you
1:03:18
containerization that's where you specify that how much memory
1:03:20
specify that how much memory
1:03:20
specify that how much memory or how much ram you can use it so
1:03:23
or how much ram you can use it so
1:03:23
or how much ram you can use it so you have to quickly specify those things
1:03:25
you have to quickly specify those things
1:03:25
you have to quickly specify those things one and deploy it
1:03:27
one and deploy it
1:03:27
one and deploy it and we have this uh kibana and grifana
1:03:30
and we have this uh kibana and grifana
1:03:30
and we have this uh kibana and grifana these dashboards are there you can
1:03:32
these dashboards are there you can
1:03:32
these dashboards are there you can check this elk stack so
1:03:35
check this elk stack so
1:03:35
check this elk stack so even though we specify that we need 500
1:03:38
even though we specify that we need 500
1:03:38
even though we specify that we need 500 mb or 750 mb so we have to constantly
1:03:41
mb or 750 mb so we have to constantly
1:03:41
mb or 750 mb so we have to constantly monitor those dashboards to see that the
1:03:43
monitor those dashboards to see that the
1:03:43
monitor those dashboards to see that the usage
1:03:45
usage
1:03:45
usage we should we cannot consider the happy
1:03:47
we should we cannot consider the happy
1:03:47
we should we cannot consider the happy day scenario
1:03:48
day scenario
1:03:48
day scenario happy days anyways i'm the only user i
1:03:50
happy days anyways i'm the only user i
1:03:50
happy days anyways i'm the only user i can go ahead and use it
1:03:51
can go ahead and use it
1:03:51
can go ahead and use it once we drop it to the test or qa
1:03:54
once we drop it to the test or qa
1:03:54
once we drop it to the test or qa environment and you
1:03:55
environment and you
1:03:55
environment and you do a one round of production sorry the
1:03:58
do a one round of production sorry the
1:03:58
do a one round of production sorry the performance testing and then monitor the
1:04:01
performance testing and then monitor the
1:04:01
performance testing and then monitor the graph how the memory or cpu how it is
1:04:04
graph how the memory or cpu how it is
1:04:04
graph how the memory or cpu how it is chewing
1:04:05
chewing
1:04:05
chewing and based on that whether you have to
1:04:06
and based on that whether you have to
1:04:06
and based on that whether you have to increase or decrease but net net
1:04:08
increase or decrease but net net
1:04:08
increase or decrease but net net whether you are doing the yaml templates
1:04:10
whether you are doing the yaml templates
1:04:10
whether you are doing the yaml templates you have to specify the
1:04:12
you have to specify the
1:04:12
you have to specify the ram or cpu because that's that's the
1:04:15
ram or cpu because that's that's the
1:04:15
ram or cpu because that's that's the difference where
1:04:16
difference where
1:04:16
difference where yes yes yeah go ahead go ahead yeah
1:04:19
yes yes yeah go ahead go ahead yeah
1:04:19
yes yes yeah go ahead go ahead yeah so that's where the difference between
1:04:21
so that's where the difference between
1:04:21
so that's where the difference between the virtual machine
1:04:23
the virtual machine
1:04:23
the virtual machine and the docker container is coming so
1:04:25
and the docker container is coming so
1:04:25
and the docker container is coming so when when you
1:04:26
when when you
1:04:26
when when you have a virtualization and you you
1:04:29
have a virtualization and you you
1:04:29
have a virtualization and you you create a virtual machine and you deploy
1:04:31
create a virtual machine and you deploy
1:04:31
create a virtual machine and you deploy two or four uh
1:04:33
two or four uh
1:04:33
two or four uh applications i am taking an example of
1:04:34
applications i am taking an example of
1:04:34
applications i am taking an example of is and inside that is steven has written
1:04:37
is and inside that is steven has written
1:04:37
is and inside that is steven has written a
1:04:37
a
1:04:37
a website that is their web api and i have
1:04:40
website that is their web api and i have
1:04:40
website that is their web api and i have written a web api
1:04:41
written a web api
1:04:41
written a web api using crap code and steven's code is
1:04:45
using crap code and steven's code is
1:04:45
using crap code and steven's code is pretty good and what's happening is
1:04:46
pretty good and what's happening is
1:04:46
pretty good and what's happening is because of my
1:04:47
because of my
1:04:47
because of my dirty code the users when they are
1:04:49
dirty code the users when they are
1:04:50
dirty code the users when they are coming and hitting
1:04:51
coming and hitting
1:04:51
coming and hitting my web api is chewing up the memory so
1:04:53
my web api is chewing up the memory so
1:04:53
my web api is chewing up the memory so because of
1:04:54
because of
1:04:54
because of my application stephen supply web api
1:04:56
my application stephen supply web api
1:04:56
my application stephen supply web api will get impacted his users are getting
1:04:58
will get impacted his users are getting
1:04:58
will get impacted his users are getting impacted
1:04:59
impacted
1:04:59
impacted so there is no control but when you come
1:05:01
so there is no control but when you come
1:05:01
so there is no control but when you come to the containers we can exactly specify
1:05:03
to the containers we can exactly specify
1:05:03
to the containers we can exactly specify that
1:05:04
that
1:05:04
that what is this containers max we can cap
1:05:06
what is this containers max we can cap
1:05:06
what is this containers max we can cap it so i'm going to use this much cpu and
1:05:08
it so i'm going to use this much cpu and
1:05:08
it so i'm going to use this much cpu and you're going to use this much ram
1:05:10
you're going to use this much ram
1:05:10
you're going to use this much ram that's it so we have to go and observe
1:05:13
that's it so we have to go and observe
1:05:13
that's it so we have to go and observe the dashboard through
1:05:14
the dashboard through
1:05:14
the dashboard through the monitor and alerts and monitoring
1:05:16
the monitor and alerts and monitoring
1:05:16
the monitor and alerts and monitoring system and then come back and tweak it
1:05:19
system and then come back and tweak it
1:05:19
system and then come back and tweak it so we are safe we are covered over there
1:05:38
yeah please feel free to uh uh ping me
1:05:41
yeah please feel free to uh uh ping me
1:05:41
yeah please feel free to uh uh ping me and uh am i a learner uh so
1:05:44
and uh am i a learner uh so
1:05:44
and uh am i a learner uh so definitely i'll do a lot of mistakes but
1:05:46
definitely i'll do a lot of mistakes but
1:05:46
definitely i'll do a lot of mistakes but uh please feel free to
1:05:48
uh please feel free to
1:05:48
uh please feel free to correct me um always feel like i have to
1:05:51
correct me um always feel like i have to
1:05:51
correct me um always feel like i have to learn more
1:05:52
learn more
1:05:52
learn more so i will be more than happy to learn
1:05:54
so i will be more than happy to learn
1:05:54
so i will be more than happy to learn from anyone and everyone so
1:05:57
from anyone and everyone so
1:05:57
from anyone and everyone so thank you so much hope you guys have
1:05:59
thank you so much hope you guys have
1:05:59
thank you so much hope you guys have enjoyed it yeah it's really exciting
1:06:01
enjoyed it yeah it's really exciting
1:06:01
enjoyed it yeah it's really exciting thank you so much have a nice weekend
1:06:02
thank you so much have a nice weekend
1:06:02
thank you so much have a nice weekend ahead and yeah see you in the next
1:06:04
ahead and yeah see you in the next
1:06:04
ahead and yeah see you in the next conference
1:06:05
conference
1:06:05
conference thank you sir bye all right all right
1:06:08
thank you sir bye all right all right
1:06:08
thank you sir bye all right all right with that i know we are literally
1:06:10
with that i know we are literally
1:06:10
with that i know we are literally running a little five minutes of our
1:06:11
running a little five minutes of our
1:06:11
running a little five minutes of our time now but as i promised we're gonna
1:06:13
time now but as i promised we're gonna
1:06:13
time now but as i promised we're gonna do a giveaway now and we're just gonna
1:06:15
do a giveaway now and we're just gonna
1:06:15
do a giveaway now and we're just gonna take 30 seconds
1:06:16
take 30 seconds
1:06:16
take 30 seconds so as i have been telling that please go
1:06:18
so as i have been telling that please go
1:06:18
so as i have been telling that please go ahead and drop your
1:06:19
ahead and drop your
1:06:19
ahead and drop your uh every time you comment so definitely
1:06:22
uh every time you comment so definitely
1:06:22
uh every time you comment so definitely use react c sharp corner in the comments
1:06:24
use react c sharp corner in the comments
1:06:24
use react c sharp corner in the comments uh so we're gonna be and already have 13
1:06:27
uh so we're gonna be and already have 13
1:06:27
uh so we're gonna be and already have 13 entries
1:06:28
entries
1:06:28
entries so at the count of five we are going to
1:06:30
so at the count of five we are going to
1:06:30
so at the count of five we are going to do a lucky draw and let's see who wins
1:06:33
do a lucky draw and let's see who wins
1:06:33
do a lucky draw and let's see who wins let's first what are we going to give
1:06:34
let's first what are we going to give
1:06:34
let's first what are we going to give away let's say uh we're going to give
1:06:36
away let's say uh we're going to give
1:06:36
away let's say uh we're going to give away a c sharp on our swat pack like
1:06:38
away a c sharp on our swat pack like
1:06:38
away a c sharp on our swat pack like everything that we have at c sharp
1:06:40
everything that we have at c sharp
1:06:40
everything that we have at c sharp corner t-shirts
1:06:41
corner t-shirts
1:06:41
corner t-shirts cap slippers everything that we have
1:06:43
cap slippers everything that we have
1:06:43
cap slippers everything that we have right we're going to give it away
1:06:44
right we're going to give it away
1:06:44
right we're going to give it away so it's gonna be the account of five
1:06:47
so it's gonna be the account of five
1:06:48
so it's gonna be the account of five zero okay how do we do it thomas like
1:06:49
zero okay how do we do it thomas like
1:06:49
zero okay how do we do it thomas like from the beginning of towards the end
1:06:51
from the beginning of towards the end
1:06:51
from the beginning of towards the end i never mind five all right let's do it
1:06:54
i never mind five all right let's do it
1:06:54
i never mind five all right let's do it let's hit it
1:06:57
who wins it who wins it wins it
1:07:01
who wins it who wins it wins it
1:07:01
who wins it who wins it wins it [Music]
1:07:07
oh my god right thumber you are already
1:07:10
oh my god right thumber you are already
1:07:10
oh my god right thumber you are already a team member right
1:07:11
a team member right
1:07:11
a team member right you don't need it right you already have
1:07:14
you don't need it right you already have
1:07:14
you don't need it right you already have a swag pack
1:07:16
a swag pack
1:07:16
a swag pack you're a team member so let's do a draw
1:07:17
you're a team member so let's do a draw
1:07:17
you're a team member so let's do a draw again
1:07:19
again
1:07:19
again oh my goodness uh rohit just wished if
1:07:22
oh my goodness uh rohit just wished if
1:07:22
oh my goodness uh rohit just wished if it was an amazon gift card
1:07:25
it was an amazon gift card
1:07:25
it was an amazon gift card uh all right who ends up next who is
1:07:28
uh all right who ends up next who is
1:07:28
uh all right who ends up next who is next
1:07:29
next
1:07:29
next all right arjun congratulations arjuna
1:07:32
all right arjun congratulations arjuna
1:07:32
all right arjun congratulations arjuna you win a complete shisha corner swag
1:07:35
you win a complete shisha corner swag
1:07:35
you win a complete shisha corner swag pack
1:07:35
pack
1:07:35
pack please reach out to me at code with
1:07:38
please reach out to me at code with
1:07:38
please reach out to me at code with simon on twitter
1:07:39
simon on twitter
1:07:39
simon on twitter that's why i'm handled right so just
1:07:41
that's why i'm handled right so just
1:07:41
that's why i'm handled right so just reach out to me over here
1:07:43
reach out to me over here
1:07:43
reach out to me over here okay it's over here this is up to me at
1:07:45
okay it's over here this is up to me at
1:07:45
okay it's over here this is up to me at codepen at twitter and we'll make sure
1:07:47
codepen at twitter and we'll make sure
1:07:47
codepen at twitter and we'll make sure that we ship you
1:07:48
that we ship you
1:07:48
that we ship you your uh previously sharepoint swag packs
1:07:50
your uh previously sharepoint swag packs
1:07:50
your uh previously sharepoint swag packs and having said that i am pretty excited
1:07:52
and having said that i am pretty excited
1:07:52
and having said that i am pretty excited for next session
1:07:54
for next session
1:07:54
for next session uh he uh the next session is gonna be
1:07:55
uh he uh the next session is gonna be
1:07:55
uh he uh the next session is gonna be about useful
1:07:57
about useful
1:07:57
about useful npm react libraries in sp fx
1:08:00
npm react libraries in sp fx
1:08:00
npm react libraries in sp fx uh the next speaker is a microsoft mvp
1:08:03
uh the next speaker is a microsoft mvp
1:08:03
uh the next speaker is a microsoft mvp uh i'm hosting him for the very first
1:08:05
uh i'm hosting him for the very first
1:08:05
uh i'm hosting him for the very first time it's so bizarre that i'm hosting
1:08:07
time it's so bizarre that i'm hosting
1:08:07
time it's so bizarre that i'm hosting him for the first time
1:08:08
him for the first time
1:08:08
him for the first time but he has been so active in the
1:08:10
but he has been so active in the
1:08:10
but he has been so active in the community he's an amazing company leader
1:08:12
community he's an amazing company leader
1:08:12
community he's an amazing company leader from
1:08:12
from
1:08:12
from mumbai pune region so without any
1:08:14
mumbai pune region so without any
1:08:14
mumbai pune region so without any further ado let's go invite
1:08:16
further ado let's go invite
1:08:16
further ado let's go invite uh siddharth joining us all the way from
1:08:19
uh siddharth joining us all the way from
1:08:19
uh siddharth joining us all the way from pune india
1:08:35
[Music]
1:08:57
[Music]
1:08:57
[Music] hi siddharth welcome to the react virgin
1:08:59
hi siddharth welcome to the react virgin
1:08:59
hi siddharth welcome to the react virgin conference
1:09:00
conference
1:09:00
conference hey simon how are you i'm doing great
1:09:03
hey simon how are you i'm doing great
1:09:03
hey simon how are you i'm doing great and what's up with your background i
1:09:05
and what's up with your background i
1:09:05
and what's up with your background i love it
1:09:06
love it
1:09:06
love it oh you know what i did right
1:09:11
oh you know what i did right
1:09:11
oh you know what i did right behind the scenes all right
1:09:14
behind the scenes all right
1:09:14
behind the scenes all right then how have you been a house live
1:09:16
then how have you been a house live
1:09:16
then how have you been a house live during the spending alex
1:09:17
during the spending alex
1:09:18
during the spending alex did sam hosting for but i see you're
1:09:20
did sam hosting for but i see you're
1:09:20
did sam hosting for but i see you're very very active in the community
1:09:22
very very active in the community
1:09:22
very very active in the community how has your uh this pandemic been uh
1:09:26
how has your uh this pandemic been uh
1:09:26
how has your uh this pandemic been uh it's okay uh i got a chance to stay at
1:09:29
it's okay uh i got a chance to stay at
1:09:29
it's okay uh i got a chance to stay at my
1:09:30
my
1:09:30
my hometown for around seven months but now
1:09:32
hometown for around seven months but now
1:09:32
hometown for around seven months but now i'm back to pune
1:09:33
i'm back to pune
1:09:33
i'm back to pune from last two or three months uh and for
1:09:36
from last two or three months uh and for
1:09:36
from last two or three months uh and for maybe
1:09:36
maybe
1:09:36
maybe for you know people in it i don't think
1:09:38
for you know people in it i don't think
1:09:38
for you know people in it i don't think it is uh
1:09:39
it is uh
1:09:40
it is uh that much difference has been made
1:09:41
that much difference has been made
1:09:41
that much difference has been made because we are still working we can
1:09:42
because we are still working we can
1:09:42
because we are still working we can still work from home and everything
1:09:44
still work from home and everything
1:09:44
still work from home and everything uh so yeah pretty much good and
1:09:47
uh so yeah pretty much good and
1:09:47
uh so yeah pretty much good and everything and thanks for that video i
1:09:48
everything and thanks for that video i
1:09:48
everything and thanks for that video i never knew
1:09:49
never knew
1:09:49
never knew you know you take everything from the
1:09:51
you know you take everything from the
1:09:51
you know you take everything from the social media and that was nice
1:09:52
social media and that was nice
1:09:52
social media and that was nice introduction thank thanks that who does
1:09:55
introduction thank thanks that who does
1:09:55
introduction thank thanks that who does this and thanks again
1:09:57
this and thanks again
1:09:57
this and thanks again brandon today you're wearing this up on
1:09:59
brandon today you're wearing this up on
1:09:59
brandon today you're wearing this up on our teacher yes i just received it last
1:10:01
our teacher yes i just received it last
1:10:01
our teacher yes i just received it last week yeah
1:10:03
week yeah
1:10:03
week yeah all right let's see that i know we're
1:10:04
all right let's see that i know we're
1:10:04
all right let's see that i know we're only 10 minutes in your session so we
1:10:06
only 10 minutes in your session so we
1:10:06
only 10 minutes in your session so we won't take much of your time
1:10:07
won't take much of your time
1:10:07
won't take much of your time feel free to go ahead and share your
1:10:09
feel free to go ahead and share your
1:10:09
feel free to go ahead and share your screen and then i'll add it to the
1:10:10
screen and then i'll add it to the
1:10:10
screen and then i'll add it to the stream
1:10:11
stream
1:10:11
stream sure just a moment
1:10:15
and everyone who is who is definitely
1:10:17
and everyone who is who is definitely
1:10:17
and everyone who is who is definitely watching us feel free to go ahead and
1:10:19
watching us feel free to go ahead and
1:10:19
watching us feel free to go ahead and drop your comments
1:10:20
drop your comments
1:10:20
drop your comments question in the comments see that i see
1:10:22
question in the comments see that i see
1:10:22
question in the comments see that i see your slides now once you
1:10:24
your slides now once you
1:10:24
your slides now once you okay i'm gonna add it to the stream
1:10:25
okay i'm gonna add it to the stream
1:10:26
okay i'm gonna add it to the stream everyone can see it okay this is
1:10:27
everyone can see it okay this is
1:10:27
everyone can see it okay this is another note yep
1:10:31
uh all right yeah that's the one so all
1:10:34
uh all right yeah that's the one so all
1:10:34
uh all right yeah that's the one so all right so that next
1:10:35
right so that next
1:10:35
right so that next 40 45 minutes is all yours thanks hey
1:10:38
40 45 minutes is all yours thanks hey
1:10:38
40 45 minutes is all yours thanks hey welcome everyone to react virtual
1:10:39
welcome everyone to react virtual
1:10:40
welcome everyone to react virtual conference uh
1:10:41
conference uh
1:10:41
conference uh the last session was very uh very
1:10:44
the last session was very uh very
1:10:44
the last session was very uh very informative i was really into you know
1:10:46
informative i was really into you know
1:10:46
informative i was really into you know like rather than preparing myself i was
1:10:48
like rather than preparing myself i was
1:10:48
like rather than preparing myself i was getting into seeing details of what the
1:10:49
getting into seeing details of what the
1:10:49
getting into seeing details of what the uh
1:10:50
uh
1:10:50
uh how the program was been written uh so
1:10:54
how the program was been written uh so
1:10:54
how the program was been written uh so thanks for that and thanks for joining
1:10:55
thanks for that and thanks for joining
1:10:55
thanks for that and thanks for joining us again
1:11:00
yeah uh a little bit of introduction
1:11:01
yeah uh a little bit of introduction
1:11:01
yeah uh a little bit of introduction myself i think i already
1:11:03
myself i think i already
1:11:03
myself i think i already i mean simon has already uh played the
1:11:05
i mean simon has already uh played the
1:11:05
i mean simon has already uh played the video so you already know
1:11:07
video so you already know
1:11:07
video so you already know but uh just to conclude these are some
1:11:09
but uh just to conclude these are some
1:11:09
but uh just to conclude these are some of my social handlers through which if
1:11:10
of my social handlers through which if
1:11:10
of my social handlers through which if you want to connect with me
1:11:14
okay so today's session is about useful
1:11:16
okay so today's session is about useful
1:11:16
okay so today's session is about useful uh
1:11:17
uh
1:11:17
uh useful npm react libraries in spfx right
1:11:19
useful npm react libraries in spfx right
1:11:19
useful npm react libraries in spfx right so let's start with mpm
1:11:21
so let's start with mpm
1:11:21
so let's start with mpm okay um i'll just take maybe quick
1:11:23
okay um i'll just take maybe quick
1:11:23
okay um i'll just take maybe quick couple of minutes to
1:11:24
couple of minutes to
1:11:24
couple of minutes to see what mpm is about so most of us
1:11:27
see what mpm is about so most of us
1:11:27
see what mpm is about so most of us would already know it is basically worse
1:11:29
would already know it is basically worse
1:11:29
would already know it is basically worse largest software registry uh it's an
1:11:31
largest software registry uh it's an
1:11:32
largest software registry uh it's an open source
1:11:32
open source
1:11:32
open source and most of the packages which are
1:11:35
and most of the packages which are
1:11:35
and most of the packages which are available in the mpm are free when i say
1:11:37
available in the mpm are free when i say
1:11:37
available in the mpm are free when i say most of this
1:11:38
most of this
1:11:38
most of this is i mean there are many which are free
1:11:40
is i mean there are many which are free
1:11:40
is i mean there are many which are free there are some paid also but
1:11:41
there are some paid also but
1:11:42
there are some paid also but uh still uh many of the free ones are
1:11:44
uh still uh many of the free ones are
1:11:44
uh still uh many of the free ones are the one which are very much useful
1:11:46
the one which are very much useful
1:11:46
the one which are very much useful uh it is a library to share and borrow
1:11:48
uh it is a library to share and borrow
1:11:48
uh it is a library to share and borrow packages okay
1:11:50
packages okay
1:11:50
packages okay and uh the mpm consists of basically
1:11:52
and uh the mpm consists of basically
1:11:52
and uh the mpm consists of basically three components like the website
1:11:54
three components like the website
1:11:54
three components like the website the command line interface and the
1:11:55
the command line interface and the
1:11:55
the command line interface and the registry so the website is the one from
1:11:57
registry so the website is the one from
1:11:57
registry so the website is the one from where we
1:11:58
where we
1:11:58
where we can basically go and search for the
1:12:01
can basically go and search for the
1:12:01
can basically go and search for the packages which are available
1:12:03
packages which are available
1:12:03
packages which are available and then there is a command line
1:12:04
and then there is a command line
1:12:04
and then there is a command line interface which works as a part of our
1:12:05
interface which works as a part of our
1:12:06
interface which works as a part of our node.js installation
1:12:07
node.js installation
1:12:07
node.js installation through which we can install the mpm
1:12:09
through which we can install the mpm
1:12:09
through which we can install the mpm packages using npm install
1:12:11
packages using npm install
1:12:11
packages using npm install and then there is the registry which is
1:12:12
and then there is the registry which is
1:12:12
and then there is the registry which is basically the database where all the
1:12:14
basically the database where all the
1:12:14
basically the database where all the packages which are been available freely
1:12:17
packages which are been available freely
1:12:17
packages which are been available freely are hosted
1:12:18
are hosted
1:12:18
are hosted somewhere at a particular server and
1:12:20
somewhere at a particular server and
1:12:20
somewhere at a particular server and from where it gets downloaded to a local
1:12:22
from where it gets downloaded to a local
1:12:22
from where it gets downloaded to a local machine
1:12:24
machine
1:12:24
machine right so uh so that's about
1:12:27
right so uh so that's about
1:12:27
right so uh so that's about mpm and now the second thing is we are
1:12:29
mpm and now the second thing is we are
1:12:29
mpm and now the second thing is we are here for react right so what
1:12:31
here for react right so what
1:12:31
here for react right so what what is react basically um it is in
1:12:34
what is react basically um it is in
1:12:34
what is react basically um it is in javascript library as we all know
1:12:36
javascript library as we all know
1:12:36
javascript library as we all know um it is kind of a it is a front-end
1:12:39
um it is kind of a it is a front-end
1:12:39
um it is kind of a it is a front-end framework okay
1:12:40
framework okay
1:12:40
framework okay and it is uh programmably very simple
1:12:43
and it is uh programmably very simple
1:12:43
and it is uh programmably very simple and it performs very better uh the
1:12:46
and it performs very better uh the
1:12:46
and it performs very better uh the reason being
1:12:47
reason being
1:12:47
reason being uh the architecture behind the library
1:12:50
uh the architecture behind the library
1:12:50
uh the architecture behind the library which has been created
1:12:52
which has been created
1:12:52
which has been created uh the it what it does is basically it
1:12:55
uh the it what it does is basically it
1:12:55
uh the it what it does is basically it is
1:12:55
is
1:12:55
is uh it creates a virtual dom in our uh
1:12:58
uh it creates a virtual dom in our uh
1:12:58
uh it creates a virtual dom in our uh actual dom and what it does is any
1:13:00
actual dom and what it does is any
1:13:00
actual dom and what it does is any changes which we want to make
1:13:01
changes which we want to make
1:13:02
changes which we want to make it first makes to the virtual dom okay
1:13:03
it first makes to the virtual dom okay
1:13:03
it first makes to the virtual dom okay and doesn't reload the whole
1:13:05
and doesn't reload the whole
1:13:05
and doesn't reload the whole uh whole actual dom html dom and which
1:13:08
uh whole actual dom html dom and which
1:13:08
uh whole actual dom html dom and which makes it very faster than the regular
1:13:10
makes it very faster than the regular
1:13:10
makes it very faster than the regular dom object so
1:13:11
dom object so
1:13:11
dom object so uh there were still there would be
1:13:13
uh there were still there would be
1:13:13
uh there were still there would be people who would be using jqueries and
1:13:15
people who would be using jqueries and
1:13:15
people who would be using jqueries and everything and we know that to change
1:13:16
everything and we know that to change
1:13:16
everything and we know that to change something on the ui what we do is we
1:13:18
something on the ui what we do is we
1:13:18
something on the ui what we do is we basically
1:13:19
basically
1:13:19
basically find that particular dome element using
1:13:21
find that particular dome element using
1:13:21
find that particular dome element using jquery uh
1:13:22
jquery uh
1:13:22
jquery uh and using ids or maybe css class name
1:13:25
and using ids or maybe css class name
1:13:25
and using ids or maybe css class name and then we
1:13:26
and then we
1:13:26
and then we basically change the dom the way we
1:13:28
basically change the dom the way we
1:13:28
basically change the dom the way we wanted to do it okay and
1:13:30
wanted to do it okay and
1:13:30
wanted to do it okay and reacts make it organized it's structured
1:13:33
reacts make it organized it's structured
1:13:33
reacts make it organized it's structured and uh it also you know kind of it's a
1:13:36
and uh it also you know kind of it's a
1:13:36
and uh it also you know kind of it's a one way reactive data flow it means that
1:13:37
one way reactive data flow it means that
1:13:37
one way reactive data flow it means that once we
1:13:38
once we
1:13:38
once we create states along with uh the classes
1:13:41
create states along with uh the classes
1:13:41
create states along with uh the classes which we create
1:13:42
which we create
1:13:42
which we create and once we change the state it
1:13:44
and once we change the state it
1:13:44
and once we change the state it automatically would re-render the dom
1:13:46
automatically would re-render the dom
1:13:46
automatically would re-render the dom and it will uh send the updated uh html
1:13:49
and it will uh send the updated uh html
1:13:49
and it will uh send the updated uh html content
1:13:50
content
1:13:50
content to the user all right and we can
1:13:52
to the user all right and we can
1:13:52
to the user all right and we can consider
1:13:53
consider
1:13:53
consider react as a v in our mbc so if anybody
1:13:56
react as a v in our mbc so if anybody
1:13:56
react as a v in our mbc so if anybody who follows mvc pattern like model view
1:13:58
who follows mvc pattern like model view
1:13:58
who follows mvc pattern like model view controller
1:14:00
controller
1:14:00
controller so we can consider we can use v as a
1:14:03
so we can consider we can use v as a
1:14:03
so we can consider we can use v as a react as a view in that particular
1:14:05
react as a view in that particular
1:14:05
react as a view in that particular design pattern right
1:14:08
design pattern right
1:14:08
design pattern right moving ahead uh sharepoint framework
1:14:10
moving ahead uh sharepoint framework
1:14:10
moving ahead uh sharepoint framework okay
1:14:11
okay
1:14:11
okay this might be new to some of the people
1:14:13
this might be new to some of the people
1:14:13
this might be new to some of the people who are not from the sharepoint
1:14:14
who are not from the sharepoint
1:14:14
who are not from the sharepoint background but just to give and
1:14:15
background but just to give and
1:14:15
background but just to give and background on you know what this
1:14:17
background on you know what this
1:14:17
background on you know what this framework is about
1:14:18
framework is about
1:14:18
framework is about uh this is how we basically do the
1:14:21
uh this is how we basically do the
1:14:21
uh this is how we basically do the modern client-side development on
1:14:23
modern client-side development on
1:14:23
modern client-side development on or customization on the sharepoint right
1:14:25
or customization on the sharepoint right
1:14:25
or customization on the sharepoint right and it is very lightweight
1:14:27
and it is very lightweight
1:14:27
and it is very lightweight and uh it is backward compatible it
1:14:29
and uh it is backward compatible it
1:14:29
and uh it is backward compatible it means it the web part which we develop
1:14:31
means it the web part which we develop
1:14:31
means it the web part which we develop works with uh the classic uh
1:14:35
works with uh the classic uh
1:14:35
works with uh the classic uh experience also and uh it is again open
1:14:38
experience also and uh it is again open
1:14:38
experience also and uh it is again open source and it supports all the
1:14:39
source and it supports all the
1:14:39
source and it supports all the basic javascript frameworks which we
1:14:41
basic javascript frameworks which we
1:14:41
basic javascript frameworks which we have right and
1:14:43
have right and
1:14:43
have right and on top of it we can use graph apis llb
1:14:46
on top of it we can use graph apis llb
1:14:46
on top of it we can use graph apis llb system cloud services like for example
1:14:48
system cloud services like for example
1:14:48
system cloud services like for example if you have your own apis which you can
1:14:50
if you have your own apis which you can
1:14:50
if you have your own apis which you can call
1:14:50
call
1:14:50
call and which you can create and web part
1:14:53
and which you can create and web part
1:14:53
and which you can create and web part and which you can deploy it into a
1:14:55
and which you can deploy it into a
1:14:55
and which you can deploy it into a sharepoint page
1:14:58
uh these are just or the open source
1:15:00
uh these are just or the open source
1:15:00
uh these are just or the open source tooling in the sharepoint framework okay
1:15:01
tooling in the sharepoint framework okay
1:15:01
tooling in the sharepoint framework okay i wanted to
1:15:02
i wanted to
1:15:02
i wanted to just quickly highlight this because uh
1:15:05
just quickly highlight this because uh
1:15:05
just quickly highlight this because uh it supports all the modern open source
1:15:07
it supports all the modern open source
1:15:07
it supports all the modern open source tooling
1:15:07
tooling
1:15:08
tooling right for the build process uh it
1:15:09
right for the build process uh it
1:15:10
right for the build process uh it supports your man gulp node.js and mpm
1:15:12
supports your man gulp node.js and mpm
1:15:12
supports your man gulp node.js and mpm so which is why
1:15:13
so which is why
1:15:13
so which is why we are here for today uh system.js
1:15:16
we are here for today uh system.js
1:15:16
we are here for today uh system.js webpack says
1:15:17
webpack says
1:15:17
webpack says and typescript okay in the web from back
1:15:19
and typescript okay in the web from back
1:15:19
and typescript okay in the web from back it star it supports react
1:15:21
it star it supports react
1:15:21
it star it supports react okay which uh again which would be uh
1:15:23
okay which uh again which would be uh
1:15:23
okay which uh again which would be uh you know would be the focus of our
1:15:25
you know would be the focus of our
1:15:25
you know would be the focus of our session today
1:15:26
session today
1:15:26
session today angular knockout jquery and any other
1:15:29
angular knockout jquery and any other
1:15:29
angular knockout jquery and any other front-end frameworks which you can
1:15:30
front-end frameworks which you can
1:15:30
front-end frameworks which you can have that you can be that you can use
1:15:32
have that you can be that you can use
1:15:32
have that you can be that you can use into sharepoint framework
1:15:34
into sharepoint framework
1:15:34
into sharepoint framework and these are some of the code editors
1:15:36
and these are some of the code editors
1:15:36
and these are some of the code editors uh like visual studio code at home
1:15:38
uh like visual studio code at home
1:15:38
uh like visual studio code at home through which you can develop your
1:15:39
through which you can develop your
1:15:39
through which you can develop your sharepoint framework i won't be going
1:15:41
sharepoint framework i won't be going
1:15:41
sharepoint framework i won't be going much detail into this
1:15:42
much detail into this
1:15:42
much detail into this uh but considering uh though
1:15:45
uh but considering uh though
1:15:45
uh but considering uh though i the session title says you know using
1:15:48
i the session title says you know using
1:15:48
i the session title says you know using mpm library in spfx
1:15:50
mpm library in spfx
1:15:50
mpm library in spfx it not necessarily means that you can
1:15:52
it not necessarily means that you can
1:15:52
it not necessarily means that you can only use this library using spfx okay
1:15:56
only use this library using spfx okay
1:15:56
only use this library using spfx okay because this is open source and this is
1:15:59
because this is open source and this is
1:15:59
because this is open source and this is on the
1:15:59
on the
1:15:59
on the mpm uh package manager all the libraries
1:16:02
mpm uh package manager all the libraries
1:16:02
mpm uh package manager all the libraries can be used in
1:16:03
can be used in
1:16:03
can be used in any react based application where you
1:16:05
any react based application where you
1:16:05
any react based application where you are using it is the front end okay
1:16:07
are using it is the front end okay
1:16:07
are using it is the front end okay and what i have focused is i have
1:16:09
and what i have focused is i have
1:16:09
and what i have focused is i have focused on
1:16:11
focused on
1:16:11
focused on mostly the uh libraries which are
1:16:14
mostly the uh libraries which are
1:16:14
mostly the uh libraries which are kind of uh you know allow us to build an
1:16:17
kind of uh you know allow us to build an
1:16:17
kind of uh you know allow us to build an user interface so that
1:16:19
user interface so that
1:16:19
user interface so that for example we don't have to create that
1:16:21
for example we don't have to create that
1:16:21
for example we don't have to create that particular you know
1:16:22
particular you know
1:16:22
particular you know component from this scratch and we can
1:16:24
component from this scratch and we can
1:16:24
component from this scratch and we can reuse it what is available from
1:16:27
reuse it what is available from
1:16:27
reuse it what is available from in the mpm package okay
1:16:30
in the mpm package okay
1:16:30
in the mpm package okay this is just a server tool side
1:16:33
this is just a server tool side
1:16:33
this is just a server tool side comparison uh
1:16:34
comparison uh
1:16:34
comparison uh for spfx like in sp previously we were
1:16:38
for spfx like in sp previously we were
1:16:38
for spfx like in sp previously we were developing using is
1:16:39
developing using is
1:16:40
developing using is net now we have node.js we were having
1:16:42
net now we have node.js we were having
1:16:42
net now we have node.js we were having nuget now we have mpm
1:16:44
nuget now we have mpm
1:16:44
nuget now we have mpm previously we was having ms build now we
1:16:46
previously we was having ms build now we
1:16:46
previously we was having ms build now we are using gulp
1:16:47
are using gulp
1:16:47
are using gulp and we were coding in c sharp now we can
1:16:49
and we were coding in c sharp now we can
1:16:49
and we were coding in c sharp now we can code in typescript
1:16:51
code in typescript
1:16:51
code in typescript and there were visual studio project
1:16:52
and there were visual studio project
1:16:52
and there were visual studio project templates now we can use visual studio
1:16:54
templates now we can use visual studio
1:16:54
templates now we can use visual studio code and human generator to create
1:16:55
code and human generator to create
1:16:55
code and human generator to create different types of solutions
1:16:59
different types of solutions
1:16:59
different types of solutions okay now why this topic right okay so
1:17:02
okay now why this topic right okay so
1:17:02
okay now why this topic right okay so the idea behind this topic is to get to
1:17:04
the idea behind this topic is to get to
1:17:04
the idea behind this topic is to get to know the useful packages which are
1:17:05
know the useful packages which are
1:17:05
know the useful packages which are available readily
1:17:07
available readily
1:17:07
available readily as an part of open source okay and which
1:17:10
as an part of open source okay and which
1:17:10
as an part of open source okay and which we can use in our react-based
1:17:11
we can use in our react-based
1:17:11
we can use in our react-based application
1:17:12
application
1:17:12
application right which will save time uh you know
1:17:15
right which will save time uh you know
1:17:15
right which will save time uh you know like developing everything from the
1:17:16
like developing everything from the
1:17:16
like developing everything from the scratch
1:17:17
scratch
1:17:17
scratch okay why do we want to reinvent the bill
1:17:19
okay why do we want to reinvent the bill
1:17:19
okay why do we want to reinvent the bill if something is already available
1:17:21
if something is already available
1:17:21
if something is already available okay so we can focus on our business
1:17:23
okay so we can focus on our business
1:17:23
okay so we can focus on our business logic
1:17:24
logic
1:17:24
logic okay and also you know kind of support
1:17:26
okay and also you know kind of support
1:17:26
okay and also you know kind of support the community by using it and if you
1:17:28
the community by using it and if you
1:17:28
the community by using it and if you have any feedback you can share with the
1:17:30
have any feedback you can share with the
1:17:30
have any feedback you can share with the developer and
1:17:31
developer and
1:17:31
developer and they might be able to you know kind of
1:17:33
they might be able to you know kind of
1:17:33
they might be able to you know kind of fix it also and
1:17:34
fix it also and
1:17:34
fix it also and if something you think might be you know
1:17:38
if something you think might be you know
1:17:38
if something you think might be you know a component which you might have
1:17:39
a component which you might have
1:17:39
a component which you might have developed as a part of
1:17:42
developed as a part of
1:17:42
developed as a part of your projects and which you think can be
1:17:44
your projects and which you think can be
1:17:44
your projects and which you think can be uh
1:17:45
uh
1:17:45
uh added to mpm package certainly you can
1:17:47
added to mpm package certainly you can
1:17:47
added to mpm package certainly you can do this so you can be part of that
1:17:49
do this so you can be part of that
1:17:49
do this so you can be part of that community also
1:17:50
community also
1:17:50
community also right so moving ahead uh
1:17:53
right so moving ahead uh
1:17:53
right so moving ahead uh general usage of you know any mpf
1:17:56
general usage of you know any mpf
1:17:56
general usage of you know any mpf package right i just wanted to
1:17:57
package right i just wanted to
1:17:57
package right i just wanted to highlight it so for the people who might
1:17:59
highlight it so for the people who might
1:17:59
highlight it so for the people who might be new to you know uh this topic or
1:18:01
be new to you know uh this topic or
1:18:01
be new to you know uh this topic or anything
1:18:02
anything
1:18:02
anything uh what happens is any package which we
1:18:04
uh what happens is any package which we
1:18:04
uh what happens is any package which we have we install it
1:18:06
have we install it
1:18:06
have we install it right then we import it in the component
1:18:09
right then we import it in the component
1:18:09
right then we import it in the component file
1:18:10
file
1:18:10
file then we add that component to the render
1:18:12
then we add that component to the render
1:18:12
then we add that component to the render method so that the
1:18:13
method so that the
1:18:13
method so that the uh we can use that uh component
1:18:16
uh we can use that uh component
1:18:16
uh we can use that uh component in the ux right and we set the
1:18:19
in the ux right and we set the
1:18:19
in the ux right and we set the properties for the configuration so
1:18:21
properties for the configuration so
1:18:21
properties for the configuration so there might be different configurations
1:18:23
there might be different configurations
1:18:23
there might be different configurations properties which would be available as a
1:18:24
properties which would be available as a
1:18:24
properties which would be available as a part of that particular package
1:18:26
part of that particular package
1:18:26
part of that particular package which we can use and which we can
1:18:28
which we can use and which we can
1:18:28
which we can use and which we can basically uh customize it
1:18:30
basically uh customize it
1:18:30
basically uh customize it the way the developer has intended us to
1:18:32
the way the developer has intended us to
1:18:32
the way the developer has intended us to do
1:18:33
do
1:18:33
do right moving ahead let's start with uh
1:18:38
right moving ahead let's start with uh
1:18:38
right moving ahead let's start with uh the component right first of all i would
1:18:40
the component right first of all i would
1:18:40
the component right first of all i would like to you know um
1:18:42
like to you know um
1:18:42
like to you know um explain react tab okay this any
1:18:45
explain react tab okay this any
1:18:45
explain react tab okay this any application which we have
1:18:47
application which we have
1:18:47
application which we have okay one way or another there would be
1:18:49
okay one way or another there would be
1:18:49
okay one way or another there would be an uh
1:18:50
an uh
1:18:50
an uh business case where we might have to
1:18:52
business case where we might have to
1:18:52
business case where we might have to create tabs right
1:18:54
create tabs right
1:18:54
create tabs right okay and what if you want to uh you know
1:18:57
okay and what if you want to uh you know
1:18:57
okay and what if you want to uh you know what if you want to
1:18:58
what if you want to
1:18:58
what if you want to create it and in a react-based
1:19:00
create it and in a react-based
1:19:00
create it and in a react-based application so this is one of the
1:19:02
application so this is one of the
1:19:02
application so this is one of the library which i have found which is very
1:19:05
library which i have found which is very
1:19:05
library which i have found which is very you know useful and easy implementation
1:19:07
you know useful and easy implementation
1:19:07
you know useful and easy implementation right
1:19:08
right
1:19:08
right there are certain features like it is
1:19:10
there are certain features like it is
1:19:10
there are certain features like it is mobile friendly so
1:19:11
mobile friendly so
1:19:11
mobile friendly so you don't need to worry about creating
1:19:13
you don't need to worry about creating
1:19:13
you don't need to worry about creating you know
1:19:14
you know
1:19:14
you know running that particular tab into mobile
1:19:16
running that particular tab into mobile
1:19:16
running that particular tab into mobile it is automatically
1:19:17
it is automatically
1:19:17
it is automatically it will automatically uh basically um
1:19:22
it will automatically uh basically um
1:19:22
it will automatically uh basically um it will automatically uh render based on
1:19:24
it will automatically uh render based on
1:19:24
it will automatically uh render based on the uh what
1:19:26
the uh what
1:19:26
the uh what the uh the screen screens look like
1:19:29
the uh the screen screens look like
1:19:29
the uh the screen screens look like and there are four different components
1:19:31
and there are four different components
1:19:31
and there are four different components within the react app one would be
1:19:33
within the react app one would be
1:19:33
within the react app one would be tabs tab list tab and tab panel okay
1:19:36
tabs tab list tab and tab panel okay
1:19:36
tabs tab list tab and tab panel okay i'll explain this once i'll walk through
1:19:38
i'll explain this once i'll walk through
1:19:38
i'll explain this once i'll walk through the code and
1:19:39
the code and
1:19:40
the code and the other feature is there is custom
1:19:41
the other feature is there is custom
1:19:41
the other feature is there is custom styling so it doesn't mean that what you
1:19:43
styling so it doesn't mean that what you
1:19:43
styling so it doesn't mean that what you see on the right hand side the
1:19:44
see on the right hand side the
1:19:44
see on the right hand side the screenshot is there that that's what you
1:19:45
screenshot is there that that's what you
1:19:46
screenshot is there that that's what you have to use right you can always you
1:19:47
have to use right you can always you
1:19:47
have to use right you can always you always have an option to
1:19:49
always have an option to
1:19:49
always have an option to basically customize the look and feel of
1:19:51
basically customize the look and feel of
1:19:51
basically customize the look and feel of the uh
1:19:52
the uh
1:19:52
the uh tab which is looking you can change the
1:19:54
tab which is looking you can change the
1:19:54
tab which is looking you can change the colors you can change the background
1:19:56
colors you can change the background
1:19:56
colors you can change the background colors over colors and everything and
1:19:58
colors over colors and everything and
1:19:58
colors over colors and everything and everything is possible right and another
1:20:00
everything is possible right and another
1:20:00
everything is possible right and another important feature which i would like to
1:20:02
important feature which i would like to
1:20:02
important feature which i would like to highlight is the on select event handler
1:20:04
highlight is the on select event handler
1:20:04
highlight is the on select event handler uh why i think is this is very useful
1:20:08
uh why i think is this is very useful
1:20:08
uh why i think is this is very useful for example if we are you know creating
1:20:10
for example if we are you know creating
1:20:10
for example if we are you know creating a dashboard wherein we wanted to
1:20:12
a dashboard wherein we wanted to
1:20:12
a dashboard wherein we wanted to we are displaying for example uh
1:20:15
we are displaying for example uh
1:20:15
we are displaying for example uh different different views like uh you
1:20:17
different different views like uh you
1:20:18
different different views like uh you know my request and
1:20:19
know my request and
1:20:19
know my request and all requests and my approval my pending
1:20:22
all requests and my approval my pending
1:20:22
all requests and my approval my pending uh my pending task for example
1:20:26
uh my pending task for example
1:20:26
uh my pending task for example okay why do we want to you know
1:20:29
okay why do we want to you know
1:20:29
okay why do we want to you know load all the data at once when the page
1:20:31
load all the data at once when the page
1:20:31
load all the data at once when the page loads right what we wanted to do is we
1:20:32
loads right what we wanted to do is we
1:20:32
loads right what we wanted to do is we wanted to load when
1:20:33
wanted to load when
1:20:33
wanted to load when only when the user clicks on it right so
1:20:35
only when the user clicks on it right so
1:20:35
only when the user clicks on it right so in this case
1:20:36
in this case
1:20:36
in this case what we can do is basically you know we
1:20:39
what we can do is basically you know we
1:20:39
what we can do is basically you know we can use this one select event handler
1:20:41
can use this one select event handler
1:20:41
can use this one select event handler and on click of the tab we can actually
1:20:43
and on click of the tab we can actually
1:20:43
and on click of the tab we can actually get the data
1:20:44
get the data
1:20:44
get the data and then bind it rather than binding it
1:20:46
and then bind it rather than binding it
1:20:46
and then bind it rather than binding it on the page load
1:20:48
on the page load
1:20:48
on the page load okay so this is uh the first component
1:20:51
okay so this is uh the first component
1:20:51
okay so this is uh the first component which i would like to highlight and what
1:20:53
which i would like to highlight and what
1:20:53
which i would like to highlight and what i would like to do is
1:20:54
i would like to do is
1:20:54
i would like to do is uh basically uh show you how this
1:20:57
uh basically uh show you how this
1:20:57
uh basically uh show you how this component can be used in a
1:21:00
component can be used in a
1:21:00
component can be used in a spfx web part but as i said because spfx
1:21:03
spfx web part but as i said because spfx
1:21:03
spfx web part but as i said because spfx is again
1:21:04
is again
1:21:04
is again supporting all the open source tooling
1:21:06
supporting all the open source tooling
1:21:06
supporting all the open source tooling okay it is merely like
1:21:08
okay it is merely like
1:21:08
okay it is merely like using the same thing in the uh react
1:21:10
using the same thing in the uh react
1:21:10
using the same thing in the uh react application also
1:21:11
application also
1:21:11
application also okay so going ah going to the code
1:21:15
okay so going ah going to the code
1:21:15
okay so going ah going to the code uh first let me show you how the tabs
1:21:18
uh first let me show you how the tabs
1:21:18
uh first let me show you how the tabs looks like okay so
1:21:19
looks like okay so
1:21:19
looks like okay so if you see this is a sharepoint
1:21:21
if you see this is a sharepoint
1:21:21
if you see this is a sharepoint framework local workbench from where we
1:21:23
framework local workbench from where we
1:21:23
framework local workbench from where we can add the
1:21:24
can add the
1:21:24
can add the web part and this is the web part which
1:21:26
web part and this is the web part which
1:21:26
web part and this is the web part which i have created which is specifically tab
1:21:28
i have created which is specifically tab
1:21:28
i have created which is specifically tab apart and these are the tabs which we
1:21:31
apart and these are the tabs which we
1:21:31
apart and these are the tabs which we have created like
1:21:32
have created like
1:21:32
have created like i just wanted to highlight that we can
1:21:34
i just wanted to highlight that we can
1:21:34
i just wanted to highlight that we can you know have
1:21:35
you know have
1:21:35
you know have sub tab within a tab like for example
1:21:37
sub tab within a tab like for example
1:21:37
sub tab within a tab like for example the simon's
1:21:38
the simon's
1:21:38
the simon's the simpson is one tab and within that
1:21:41
the simpson is one tab and within that
1:21:41
the simpson is one tab and within that there are you know different tabs sub
1:21:42
there are you know different tabs sub
1:21:42
there are you know different tabs sub tabs which we have created and which
1:21:44
tabs which we have created and which
1:21:44
tabs which we have created and which works pretty much
1:21:45
works pretty much
1:21:45
works pretty much uh the way you know uh where we have uh
1:21:48
uh the way you know uh where we have uh
1:21:48
uh the way you know uh where we have uh added the data to
1:21:49
added the data to
1:21:50
added the data to right and then there is a second tab and
1:21:52
right and then there is a second tab and
1:21:52
right and then there is a second tab and the second tab also can have a sub tabs
1:21:54
the second tab also can have a sub tabs
1:21:54
the second tab also can have a sub tabs right so this is you know pretty
1:21:57
right so this is you know pretty
1:21:57
right so this is you know pretty uh easy to implement in a way wherein um
1:22:01
uh easy to implement in a way wherein um
1:22:01
uh easy to implement in a way wherein um as a part of my web part what i will get
1:22:03
as a part of my web part what i will get
1:22:03
as a part of my web part what i will get i will get a component okay
1:22:05
i will get a component okay
1:22:05
i will get a component okay so anybody who is familiar with react
1:22:08
so anybody who is familiar with react
1:22:08
so anybody who is familiar with react would know that
1:22:09
would know that
1:22:09
would know that uh this one this is basically a react uh
1:22:12
uh this one this is basically a react uh
1:22:12
uh this one this is basically a react uh component itself okay and where we have
1:22:13
component itself okay and where we have
1:22:14
component itself okay and where we have render method right
1:22:15
render method right
1:22:15
render method right and any react component which you do
1:22:17
and any react component which you do
1:22:17
and any react component which you do always would have a render method
1:22:19
always would have a render method
1:22:19
always would have a render method that is where we would be writing our
1:22:20
that is where we would be writing our
1:22:20
that is where we would be writing our html to build the ui system
1:22:24
html to build the ui system
1:22:24
html to build the ui system sorry to interrupt but can you just zoom
1:22:26
sorry to interrupt but can you just zoom
1:22:26
sorry to interrupt but can you just zoom it yeah
1:22:27
it yeah
1:22:27
it yeah sure
1:22:35
this control plus plus helps yeah this
1:22:37
this control plus plus helps yeah this
1:22:37
this control plus plus helps yeah this will
1:22:38
will
1:22:38
will yep yeah i think it move yeah okay
1:22:42
yep yeah i think it move yeah okay
1:22:42
yep yeah i think it move yeah okay thank you thanks no problem okay so
1:22:45
thank you thanks no problem okay so
1:22:45
thank you thanks no problem okay so if you see here in the render method the
1:22:47
if you see here in the render method the
1:22:47
if you see here in the render method the first component is tab
1:22:49
first component is tab
1:22:49
first component is tab right and then we have a tab list which
1:22:52
right and then we have a tab list which
1:22:52
right and then we have a tab list which we
1:22:52
we
1:22:52
we we use and wherein we mentioned two main
1:22:55
we use and wherein we mentioned two main
1:22:55
we use and wherein we mentioned two main tabs which are there on the top
1:22:56
tabs which are there on the top
1:22:56
tabs which are there on the top like the simpsons and fatuma and then
1:22:59
like the simpsons and fatuma and then
1:22:59
like the simpsons and fatuma and then there are tab panels so
1:23:01
there are tab panels so
1:23:01
there are tab panels so ideally uh there is no association as
1:23:04
ideally uh there is no association as
1:23:04
ideally uh there is no association as such like wherein we can say that this
1:23:06
such like wherein we can say that this
1:23:06
such like wherein we can say that this tab panel content goes to this step
1:23:08
tab panel content goes to this step
1:23:08
tab panel content goes to this step so what it does is it basically is based
1:23:10
so what it does is it basically is based
1:23:10
so what it does is it basically is based on the index so
1:23:11
on the index so
1:23:11
on the index so the zeroth index is the simpsons and
1:23:14
the zeroth index is the simpsons and
1:23:14
the zeroth index is the simpsons and wherein
1:23:15
wherein
1:23:15
wherein there would be two tab panels for each
1:23:16
there would be two tab panels for each
1:23:16
there would be two tab panels for each of the tab which we have
1:23:18
of the tab which we have
1:23:18
of the tab which we have right so for both the tabs we have tab
1:23:21
right so for both the tabs we have tab
1:23:21
right so for both the tabs we have tab panel
1:23:21
panel
1:23:22
panel and within the first tab panel again we
1:23:24
and within the first tab panel again we
1:23:24
and within the first tab panel again we are creating a new tab
1:23:25
are creating a new tab
1:23:25
are creating a new tab because we wanted to create uh sub tabs
1:23:28
because we wanted to create uh sub tabs
1:23:28
because we wanted to create uh sub tabs within each right
1:23:29
within each right
1:23:29
within each right and these are the tab list uh without
1:23:31
and these are the tab list uh without
1:23:31
and these are the tab list uh without these sub tabs within each okay
1:23:33
these sub tabs within each okay
1:23:33
these sub tabs within each okay and then within that tab list we are
1:23:35
and then within that tab list we are
1:23:35
and then within that tab list we are having the tab panel where we are
1:23:36
having the tab panel where we are
1:23:36
having the tab panel where we are actually putting the content
1:23:37
actually putting the content
1:23:38
actually putting the content like paragraph and the image and
1:23:39
like paragraph and the image and
1:23:39
like paragraph and the image and anything so consider
1:23:41
anything so consider
1:23:41
anything so consider your content goes here okay within your
1:23:43
your content goes here okay within your
1:23:43
your content goes here okay within your tab panel it can
1:23:45
tab panel it can
1:23:45
tab panel it can in my example it is a again i'm creating
1:23:48
in my example it is a again i'm creating
1:23:48
in my example it is a again i'm creating a tabs
1:23:49
a tabs
1:23:49
a tabs but it can be any content any react
1:23:52
but it can be any content any react
1:23:52
but it can be any content any react component or any html which you would
1:23:54
component or any html which you would
1:23:54
component or any html which you would like to do
1:23:55
like to do
1:23:55
like to do okay so this is about a tab component
1:23:59
okay so this is about a tab component
1:23:59
okay so this is about a tab component um the this is the link
1:24:02
um the this is the link
1:24:02
um the this is the link okay which you can use and basically uh
1:24:05
okay which you can use and basically uh
1:24:05
okay which you can use and basically uh go and see what are the different
1:24:07
go and see what are the different
1:24:07
go and see what are the different customization options which you have
1:24:09
customization options which you have
1:24:09
customization options which you have like for example if i just
1:24:18
okay so this is the documentation of the
1:24:20
okay so this is the documentation of the
1:24:20
okay so this is the documentation of the react app okay
1:24:21
react app okay
1:24:21
react app okay and if you see uh what we do is we first
1:24:24
and if you see uh what we do is we first
1:24:24
and if you see uh what we do is we first install it okay using npm install
1:24:26
install it okay using npm install
1:24:26
install it okay using npm install command okay
1:24:28
command okay
1:24:28
command okay and then the basic example says you
1:24:30
and then the basic example says you
1:24:30
and then the basic example says you import it first
1:24:31
import it first
1:24:31
import it first what are the components you wanted to
1:24:33
what are the components you wanted to
1:24:33
what are the components you wanted to install you install it first
1:24:35
install you install it first
1:24:35
install you install it first and then then what you do is
1:24:39
and then then what you do is
1:24:39
and then then what you do is just a moment
1:24:44
just a moment
1:24:44
just a moment just a moment simon uh
1:24:49
yeah my kids are here
1:24:55
okay so uh this is how you basically
1:24:58
okay so uh this is how you basically
1:24:58
okay so uh this is how you basically uh import it okay and then these are the
1:25:01
uh import it okay and then these are the
1:25:01
uh import it okay and then these are the best examples on how do you
1:25:03
best examples on how do you
1:25:03
best examples on how do you use the tabs like the way i have shown
1:25:06
use the tabs like the way i have shown
1:25:06
use the tabs like the way i have shown uh and then these are the different apis
1:25:09
uh and then these are the different apis
1:25:09
uh and then these are the different apis which are available
1:25:10
which are available
1:25:10
which are available okay uh like example the different
1:25:12
okay uh like example the different
1:25:12
okay uh like example the different different customization or the options
1:25:13
different customization or the options
1:25:14
different customization or the options which you see so basically
1:25:15
which you see so basically
1:25:15
which you see so basically this would be the general idea of any
1:25:17
this would be the general idea of any
1:25:17
this would be the general idea of any npm package which we will use right what
1:25:19
npm package which we will use right what
1:25:19
npm package which we will use right what we do is we follow the documentation
1:25:21
we do is we follow the documentation
1:25:21
we do is we follow the documentation the documentation would have different
1:25:24
the documentation would have different
1:25:24
the documentation would have different different ways of how do we customize
1:25:26
different ways of how do we customize
1:25:26
different ways of how do we customize and use that particular
1:25:28
and use that particular
1:25:28
and use that particular uh mpm package and uh
1:25:31
uh mpm package and uh
1:25:31
uh mpm package and uh then if if there are you know the good
1:25:33
then if if there are you know the good
1:25:33
then if if there are you know the good thing about an open source technology
1:25:35
thing about an open source technology
1:25:35
thing about an open source technology again is you know like
1:25:36
again is you know like
1:25:36
again is you know like if you go to the github there would be a
1:25:38
if you go to the github there would be a
1:25:38
if you go to the github there would be a issue list where you can actually
1:25:40
issue list where you can actually
1:25:40
issue list where you can actually raise an issue and if the developer is
1:25:42
raise an issue and if the developer is
1:25:42
raise an issue and if the developer is you know active in maintaining that
1:25:44
you know active in maintaining that
1:25:44
you know active in maintaining that particular repo they would be able to
1:25:45
particular repo they would be able to
1:25:45
particular repo they would be able to solve it also
1:25:47
solve it also
1:25:47
solve it also okay so moving ahead i'll go to
1:25:50
okay so moving ahead i'll go to
1:25:50
okay so moving ahead i'll go to uh second one okay this is very
1:25:52
uh second one okay this is very
1:25:52
uh second one okay this is very interesting react canvas signature
1:25:53
interesting react canvas signature
1:25:54
interesting react canvas signature right now consider a scenario wherein
1:25:57
right now consider a scenario wherein
1:25:57
right now consider a scenario wherein you are building a form
1:25:58
you are building a form
1:25:58
you are building a form and what you want to get is you wanted
1:26:00
and what you want to get is you wanted
1:26:00
and what you want to get is you wanted to get input from the user and then you
1:26:02
to get input from the user and then you
1:26:02
to get input from the user and then you want
1:26:02
want
1:26:02
want them to basically sign it right in most
1:26:05
them to basically sign it right in most
1:26:05
them to basically sign it right in most of the case
1:26:06
of the case
1:26:06
of the case this signature works with uh you know
1:26:08
this signature works with uh you know
1:26:08
this signature works with uh you know documents like there are
1:26:10
documents like there are
1:26:10
documents like there are uh commercial products available like
1:26:11
uh commercial products available like
1:26:12
uh commercial products available like docusigns and everything where we can
1:26:13
docusigns and everything where we can
1:26:13
docusigns and everything where we can actually
1:26:14
actually
1:26:14
actually uh build a solution around uh creating
1:26:18
uh build a solution around uh creating
1:26:18
uh build a solution around uh creating e-signature
1:26:19
e-signature
1:26:19
e-signature within our document as a part of our
1:26:21
within our document as a part of our
1:26:21
within our document as a part of our business process right but they are paid
1:26:23
business process right but they are paid
1:26:23
business process right but they are paid okay i'm not sure that there are any
1:26:25
okay i'm not sure that there are any
1:26:25
okay i'm not sure that there are any freely available there might be some but
1:26:27
freely available there might be some but
1:26:27
freely available there might be some but there would be some limitation okay
1:26:29
there would be some limitation okay
1:26:29
there would be some limitation okay but what if your use case is pretty
1:26:31
but what if your use case is pretty
1:26:31
but what if your use case is pretty simple right you wanted to just maybe
1:26:32
simple right you wanted to just maybe
1:26:32
simple right you wanted to just maybe create an
1:26:33
create an
1:26:33
create an uh travel request system and just as a
1:26:35
uh travel request system and just as a
1:26:35
uh travel request system and just as a part of uh you know
1:26:37
part of uh you know
1:26:37
part of uh you know the audit policy you want them to once
1:26:39
the audit policy you want them to once
1:26:39
the audit policy you want them to once they raise a request you want to just
1:26:41
they raise a request you want to just
1:26:41
they raise a request you want to just get the signature right and uh you can
1:26:44
get the signature right and uh you can
1:26:44
get the signature right and uh you can use this
1:26:45
use this
1:26:45
use this uh this kind of this library except
1:26:48
uh this kind of this library except
1:26:48
uh this kind of this library except and you can get the signature on the web
1:26:51
and you can get the signature on the web
1:26:51
and you can get the signature on the web okay and
1:26:52
okay and
1:26:52
okay and uh this canvas it will be an html based
1:26:54
uh this canvas it will be an html based
1:26:54
uh this canvas it will be an html based canvas
1:26:55
canvas
1:26:55
canvas uh it will sign it and you can use this
1:26:57
uh it will sign it and you can use this
1:26:57
uh it will sign it and you can use this and store it somewhere so that you know
1:26:59
and store it somewhere so that you know
1:26:59
and store it somewhere so that you know that the signature has been you know
1:27:00
that the signature has been you know
1:27:00
that the signature has been you know been
1:27:01
been
1:27:01
been added by the user as a when they have
1:27:03
added by the user as a when they have
1:27:03
added by the user as a when they have fill up the form
1:27:04
fill up the form
1:27:04
fill up the form right so about features about this
1:27:07
right so about features about this
1:27:07
right so about features about this particular
1:27:07
particular
1:27:07
particular library uh it is basically wrapper
1:27:09
library uh it is basically wrapper
1:27:10
library uh it is basically wrapper around you know js library signature pad
1:27:12
around you know js library signature pad
1:27:12
around you know js library signature pad okay so
1:27:12
okay so
1:27:12
okay so this is the actual npm library but some
1:27:15
this is the actual npm library but some
1:27:15
this is the actual npm library but some other developer has created a wrapper so
1:27:17
other developer has created a wrapper so
1:27:17
other developer has created a wrapper so that it can be
1:27:18
that it can be
1:27:18
that it can be you easily used in our react uh based
1:27:21
you easily used in our react uh based
1:27:21
you easily used in our react uh based project
1:27:21
project
1:27:21
project it is html5 and canvas based uh there
1:27:25
it is html5 and canvas based uh there
1:27:25
it is html5 and canvas based uh there are option to export signature to png
1:27:26
are option to export signature to png
1:27:26
are option to export signature to png jpg and svg so once we get the signature
1:27:29
jpg and svg so once we get the signature
1:27:29
jpg and svg so once we get the signature right what we can do is we can export it
1:27:31
right what we can do is we can export it
1:27:31
right what we can do is we can export it when we can save it in this three
1:27:32
when we can save it in this three
1:27:32
when we can save it in this three different format
1:27:34
different format
1:27:34
different format and there are options to load canvas
1:27:36
and there are options to load canvas
1:27:36
and there are options to load canvas from base 64. so when i say
1:27:37
from base 64. so when i say
1:27:37
from base 64. so when i say option to let canvas on base64 why this
1:27:40
option to let canvas on base64 why this
1:27:40
option to let canvas on base64 why this is important considering an edit
1:27:42
is important considering an edit
1:27:42
is important considering an edit scenario right and once user has already
1:27:44
scenario right and once user has already
1:27:44
scenario right and once user has already filled the form but you wanted them to
1:27:46
filled the form but you wanted them to
1:27:46
filled the form but you wanted them to uh for an approver or for themselves to
1:27:49
uh for an approver or for themselves to
1:27:49
uh for an approver or for themselves to see the edit or view
1:27:50
see the edit or view
1:27:50
see the edit or view what data they have entered right so in
1:27:52
what data they have entered right so in
1:27:52
what data they have entered right so in that case the
1:27:53
that case the
1:27:53
that case the signature is already stored somewhere
1:27:55
signature is already stored somewhere
1:27:55
signature is already stored somewhere what you wanted to do is you wanted to
1:27:56
what you wanted to do is you wanted to
1:27:56
what you wanted to do is you wanted to get the signature
1:27:57
get the signature
1:27:57
get the signature as a part of base64 and provide it to
1:28:00
as a part of base64 and provide it to
1:28:00
as a part of base64 and provide it to the component
1:28:01
the component
1:28:01
the component and uh the canvas would basically load
1:28:03
and uh the canvas would basically load
1:28:03
and uh the canvas would basically load the pre-filled signature
1:28:05
the pre-filled signature
1:28:05
the pre-filled signature okay and then uh you also have to change
1:28:08
okay and then uh you also have to change
1:28:08
okay and then uh you also have to change the pen color like for example you want
1:28:10
the pen color like for example you want
1:28:10
the pen color like for example you want black red or anything like there might
1:28:11
black red or anything like there might
1:28:11
black red or anything like there might be requirements wherein you know you ask
1:28:13
be requirements wherein you know you ask
1:28:13
be requirements wherein you know you ask signature
1:28:14
signature
1:28:14
signature particularly in black format or in red
1:28:16
particularly in black format or in red
1:28:16
particularly in black format or in red format or in blue format
1:28:17
format or in blue format
1:28:17
format or in blue format blue color for example so that can be
1:28:19
blue color for example so that can be
1:28:19
blue color for example so that can be used right
1:28:21
used right
1:28:21
used right so let's see a quick demo of how this
1:28:23
so let's see a quick demo of how this
1:28:23
so let's see a quick demo of how this work uh
1:28:24
work uh
1:28:24
work uh so what i did is uh to show all other
1:28:27
so what i did is uh to show all other
1:28:27
so what i did is uh to show all other components right which we are going to
1:28:29
components right which we are going to
1:28:29
components right which we are going to see
1:28:29
see
1:28:29
see in the session here uh i have created a
1:28:33
in the session here uh i have created a
1:28:33
in the session here uh i have created a main web part which would be basically a
1:28:35
main web part which would be basically a
1:28:35
main web part which would be basically a tab web part and then all the components
1:28:37
tab web part and then all the components
1:28:37
tab web part and then all the components are loaded as a part of that
1:28:38
are loaded as a part of that
1:28:38
are loaded as a part of that right so just to make sure that you know
1:28:41
right so just to make sure that you know
1:28:41
right so just to make sure that you know i wanted to highlight the idea where in
1:28:43
i wanted to highlight the idea where in
1:28:43
i wanted to highlight the idea where in that
1:28:43
that
1:28:43
that it's not that we can use individual
1:28:45
it's not that we can use individual
1:28:45
it's not that we can use individual react libraries
1:28:47
react libraries
1:28:47
react libraries uh individual only what we can do is we
1:28:49
uh individual only what we can do is we
1:28:49
uh individual only what we can do is we can club
1:28:50
can club
1:28:50
can club different different libraries and
1:28:51
different different libraries and
1:28:51
different different libraries and components which are there and we can
1:28:53
components which are there and we can
1:28:53
components which are there and we can build a solution around it so that you
1:28:55
build a solution around it so that you
1:28:56
build a solution around it so that you know
1:28:56
know
1:28:56
know each components individually will work
1:28:58
each components individually will work
1:28:58
each components individually will work on its own plus
1:28:59
on its own plus
1:28:59
on its own plus it can be work combined as a solution
1:29:02
it can be work combined as a solution
1:29:02
it can be work combined as a solution right so if you see here i have created
1:29:04
right so if you see here i have created
1:29:04
right so if you see here i have created tabs which is the tab component which i
1:29:05
tabs which is the tab component which i
1:29:06
tabs which is the tab component which i have used
1:29:06
have used
1:29:06
have used and then i have created seven tabs uh
1:29:08
and then i have created seven tabs uh
1:29:08
and then i have created seven tabs uh sorry six tabs for
1:29:10
sorry six tabs for
1:29:10
sorry six tabs for each of the components which we are
1:29:11
each of the components which we are
1:29:11
each of the components which we are going to check next and uh each of the
1:29:14
going to check next and uh each of the
1:29:14
going to check next and uh each of the component is loaded as a part of tab
1:29:16
component is loaded as a part of tab
1:29:16
component is loaded as a part of tab panel correct
1:29:17
panel correct
1:29:17
panel correct so let me show you quick example of you
1:29:19
so let me show you quick example of you
1:29:19
so let me show you quick example of you know how signature works here like for
1:29:21
know how signature works here like for
1:29:21
know how signature works here like for example if i say
1:29:22
example if i say
1:29:22
example if i say you know take this signature
1:29:25
you know take this signature
1:29:25
you know take this signature uh it would be loaded and once i click
1:29:28
uh it would be loaded and once i click
1:29:28
uh it would be loaded and once i click on trim what it does is it will remove
1:29:30
on trim what it does is it will remove
1:29:30
on trim what it does is it will remove the
1:29:31
the
1:29:31
the you know the extra space which we have
1:29:33
you know the extra space which we have
1:29:34
you know the extra space which we have and it will give us a base 64 image
1:29:36
and it will give us a base 64 image
1:29:36
and it will give us a base 64 image and what i'm doing i'm using that base64
1:29:38
and what i'm doing i'm using that base64
1:29:38
and what i'm doing i'm using that base64 image and just displaying it here okay
1:29:40
image and just displaying it here okay
1:29:40
image and just displaying it here okay now this can be extended by where in
1:29:42
now this can be extended by where in
1:29:42
now this can be extended by where in using this base64 we can save it in the
1:29:44
using this base64 we can save it in the
1:29:44
using this base64 we can save it in the database in a sharepoint list in a
1:29:45
database in a sharepoint list in a
1:29:45
database in a sharepoint list in a document library or maybe in a custom
1:29:47
document library or maybe in a custom
1:29:47
document library or maybe in a custom database based on your
1:29:48
database based on your
1:29:48
database based on your uh requirement wherever you wanted to do
1:29:51
uh requirement wherever you wanted to do
1:29:51
uh requirement wherever you wanted to do right
1:29:51
right
1:29:52
right how do we use this so if we see
1:29:55
how do we use this so if we see
1:29:55
how do we use this so if we see uh the usage is pretty simple here again
1:29:58
uh the usage is pretty simple here again
1:29:58
uh the usage is pretty simple here again i'll open the signature component file
1:30:01
i'll open the signature component file
1:30:01
i'll open the signature component file okay
1:30:02
okay
1:30:02
okay uh in the render method first thing is
1:30:04
uh in the render method first thing is
1:30:04
uh in the render method first thing is we would be importing the
1:30:06
we would be importing the
1:30:06
we would be importing the uh library where we wanted to use it
1:30:09
uh library where we wanted to use it
1:30:09
uh library where we wanted to use it right and then we would be using this
1:30:12
right and then we would be using this
1:30:12
right and then we would be using this particular
1:30:13
particular
1:30:13
particular format signature canvas we are
1:30:16
format signature canvas we are
1:30:16
format signature canvas we are specifying the prime color to red
1:30:18
specifying the prime color to red
1:30:18
specifying the prime color to red we are specifying the background color
1:30:20
we are specifying the background color
1:30:20
we are specifying the background color and we are specifying the canvas
1:30:21
and we are specifying the canvas
1:30:21
and we are specifying the canvas property to 300 200 and the class name
1:30:24
property to 300 200 and the class name
1:30:24
property to 300 200 and the class name okay
1:30:24
okay
1:30:24
okay now all these properties which we are
1:30:27
now all these properties which we are
1:30:27
now all these properties which we are passing right that can be found
1:30:28
passing right that can be found
1:30:28
passing right that can be found uh in the um documentation itself so we
1:30:32
uh in the um documentation itself so we
1:30:32
uh in the um documentation itself so we don't need to worry about you know like
1:30:34
don't need to worry about you know like
1:30:34
don't need to worry about you know like how do i remember everything what you
1:30:35
how do i remember everything what you
1:30:35
how do i remember everything what you need to do is you just need to go to the
1:30:38
need to do is you just need to go to the
1:30:38
need to do is you just need to go to the documentation of a particular library
1:30:39
documentation of a particular library
1:30:40
documentation of a particular library see what are the options available and
1:30:42
see what are the options available and
1:30:42
see what are the options available and something might fit your requirement
1:30:44
something might fit your requirement
1:30:44
something might fit your requirement what you wanted to do right
1:30:46
what you wanted to do right
1:30:46
what you wanted to do right and for this particular case what i'm
1:30:48
and for this particular case what i'm
1:30:48
and for this particular case what i'm doing uh as i said once we click on trim
1:30:50
doing uh as i said once we click on trim
1:30:50
doing uh as i said once we click on trim right
1:30:51
right
1:30:51
right okay uh i'm calling this method trim and
1:30:54
okay uh i'm calling this method trim and
1:30:54
okay uh i'm calling this method trim and uh
1:30:54
uh
1:30:54
uh there is a method which is available as
1:30:56
there is a method which is available as
1:30:56
there is a method which is available as a part of our
1:30:58
a part of our
1:30:58
a part of our library which says get trimmed canvas
1:31:00
library which says get trimmed canvas
1:31:00
library which says get trimmed canvas and
1:31:01
and
1:31:01
and which says you know two dota url it
1:31:03
which says you know two dota url it
1:31:03
which says you know two dota url it means we specify
1:31:05
means we specify
1:31:05
means we specify in which format you want the image to be
1:31:07
in which format you want the image to be
1:31:07
in which format you want the image to be in this case it is png
1:31:09
in this case it is png
1:31:09
in this case it is png and we are just setting the state you
1:31:11
and we are just setting the state you
1:31:11
and we are just setting the state you know to the base64 to this particular
1:31:13
know to the base64 to this particular
1:31:14
know to the base64 to this particular state object stream data url and then
1:31:16
state object stream data url and then
1:31:16
state object stream data url and then then the trim data url has been rendered
1:31:18
then the trim data url has been rendered
1:31:18
then the trim data url has been rendered as a part of our
1:31:19
as a part of our
1:31:19
as a part of our image stack so that's uh just you know
1:31:21
image stack so that's uh just you know
1:31:21
image stack so that's uh just you know rendering it in the ui
1:31:23
rendering it in the ui
1:31:23
rendering it in the ui correct so this is uh pretty much you
1:31:26
correct so this is uh pretty much you
1:31:26
correct so this is uh pretty much you know
1:31:27
know
1:31:27
know about the signature uh component okay
1:31:30
about the signature uh component okay
1:31:30
about the signature uh component okay again
1:31:31
again
1:31:31
again as i said there are different options
1:31:32
as i said there are different options
1:31:32
as i said there are different options which are available which we can
1:31:34
which are available which we can
1:31:34
which are available which we can go and see into the documentation and
1:31:37
go and see into the documentation and
1:31:37
go and see into the documentation and see what
1:31:37
see what
1:31:37
see what what all things are possible and what
1:31:39
what all things are possible and what
1:31:39
what all things are possible and what all things we can do with this
1:31:40
all things we can do with this
1:31:40
all things we can do with this particular library
1:31:42
particular library
1:31:42
particular library so i find it very interesting and you
1:31:43
so i find it very interesting and you
1:31:44
so i find it very interesting and you know maybe
1:31:45
know maybe
1:31:45
know maybe a free solution for something very i
1:31:48
a free solution for something very i
1:31:48
a free solution for something very i have really implemented it for a couple
1:31:50
have really implemented it for a couple
1:31:50
have really implemented it for a couple of customers where they wanted
1:31:51
of customers where they wanted
1:31:52
of customers where they wanted them to uh you know basically get the
1:31:54
them to uh you know basically get the
1:31:54
them to uh you know basically get the signature so that the
1:31:56
signature so that the
1:31:56
signature so that the user who is actually requesting good
1:31:57
user who is actually requesting good
1:31:58
user who is actually requesting good feel that you know actually i'm signing
1:31:59
feel that you know actually i'm signing
1:31:59
feel that you know actually i'm signing into something
1:32:00
into something
1:32:00
into something rather than just submitting the data as
1:32:02
rather than just submitting the data as
1:32:02
rather than just submitting the data as a part of my request like travel request
1:32:04
a part of my request like travel request
1:32:04
a part of my request like travel request or expense expert or something which we
1:32:06
or expense expert or something which we
1:32:06
or expense expert or something which we are doing
1:32:06
are doing
1:32:06
are doing right okay so
1:32:10
right okay so
1:32:10
right okay so moving on the third one custom scroll
1:32:12
moving on the third one custom scroll
1:32:12
moving on the third one custom scroll bar okay
1:32:13
bar okay
1:32:13
bar okay so again i i feel like why this is
1:32:16
so again i i feel like why this is
1:32:16
so again i i feel like why this is important you know like
1:32:17
important you know like
1:32:17
important you know like nowadays you know um we know that every
1:32:20
nowadays you know um we know that every
1:32:20
nowadays you know um we know that every website would have
1:32:22
website would have
1:32:22
website would have uh a landing page right and the landing
1:32:24
uh a landing page right and the landing
1:32:24
uh a landing page right and the landing page would have too many contents
1:32:26
page would have too many contents
1:32:26
page would have too many contents uh which we will be using like in a
1:32:27
uh which we will be using like in a
1:32:28
uh which we will be using like in a single page application there will be
1:32:29
single page application there will be
1:32:29
single page application there will be too many contents right
1:32:30
too many contents right
1:32:30
too many contents right uh now what would happen if you know if
1:32:32
uh now what would happen if you know if
1:32:32
uh now what would happen if you know if you are developing a full
1:32:34
you are developing a full
1:32:34
you are developing a full webpage and you want a particular
1:32:37
webpage and you want a particular
1:32:37
webpage and you want a particular paragraph or a particular content to be
1:32:39
paragraph or a particular content to be
1:32:39
paragraph or a particular content to be as a part of your page
1:32:41
as a part of your page
1:32:41
as a part of your page but you don't want it to be you know
1:32:43
but you don't want it to be you know
1:32:43
but you don't want it to be you know using all the space right so what we
1:32:45
using all the space right so what we
1:32:45
using all the space right so what we want to do is we wanted to basically
1:32:46
want to do is we wanted to basically
1:32:46
want to do is we wanted to basically enable scroll within that particular
1:32:48
enable scroll within that particular
1:32:48
enable scroll within that particular component right
1:32:49
component right
1:32:49
component right so yeah definitely there are uh you know
1:32:51
so yeah definitely there are uh you know
1:32:52
so yeah definitely there are uh you know by using custom css that is possible
1:32:54
by using custom css that is possible
1:32:54
by using custom css that is possible okay it's that it's not possible
1:32:56
okay it's that it's not possible
1:32:56
okay it's that it's not possible the only thing is this one gives us a
1:32:58
the only thing is this one gives us a
1:32:58
the only thing is this one gives us a good pretty good look and feel
1:32:59
good pretty good look and feel
1:32:59
good pretty good look and feel plus it is uh you know kind of fully
1:33:02
plus it is uh you know kind of fully
1:33:02
plus it is uh you know kind of fully customizable and it also supports mobile
1:33:04
customizable and it also supports mobile
1:33:04
customizable and it also supports mobile device you know sometimes what happens
1:33:05
device you know sometimes what happens
1:33:05
device you know sometimes what happens is once you are
1:33:06
is once you are
1:33:06
is once you are doing something custom using css you
1:33:09
doing something custom using css you
1:33:09
doing something custom using css you might also have to take care of
1:33:11
might also have to take care of
1:33:11
might also have to take care of how it will render in the mobile device
1:33:13
how it will render in the mobile device
1:33:13
how it will render in the mobile device and everything right
1:33:14
and everything right
1:33:14
and everything right so this gives them basically an added
1:33:17
so this gives them basically an added
1:33:17
so this gives them basically an added advantage on by using this particular
1:33:19
advantage on by using this particular
1:33:19
advantage on by using this particular scroll bar
1:33:20
scroll bar
1:33:20
scroll bar okay uh again it is fully customizable
1:33:24
okay uh again it is fully customizable
1:33:24
okay uh again it is fully customizable okay we can auto hide it means it will
1:33:26
okay we can auto hide it means it will
1:33:26
okay we can auto hide it means it will only come when the content grows that
1:33:27
only come when the content grows that
1:33:28
only come when the content grows that particular height of the
1:33:29
particular height of the
1:33:29
particular height of the container of the html uh there is no
1:33:31
container of the html uh there is no
1:33:31
container of the html uh there is no extra style sheet required and it is
1:33:33
extra style sheet required and it is
1:33:33
extra style sheet required and it is well tested okay and will
1:33:34
well tested okay and will
1:33:34
well tested okay and will well been used some at many places right
1:33:37
well been used some at many places right
1:33:37
well been used some at many places right so
1:33:38
so
1:33:38
so let's see a quick demo of this
1:33:43
so if you go to if i click on scroll bar
1:33:45
so if you go to if i click on scroll bar
1:33:45
so if you go to if i click on scroll bar if you see uh the second component which
1:33:47
if you see uh the second component which
1:33:47
if you see uh the second component which i have loaded as a part of tab and
1:33:50
i have loaded as a part of tab and
1:33:50
i have loaded as a part of tab and this is the uh this is how this call
1:33:53
this is the uh this is how this call
1:33:53
this is the uh this is how this call barber looks like right
1:33:54
barber looks like right
1:33:54
barber looks like right so it's it's pretty good in terms of
1:33:56
so it's it's pretty good in terms of
1:33:56
so it's it's pretty good in terms of what how the out of the box call bar
1:33:58
what how the out of the box call bar
1:33:58
what how the out of the box call bar looks like okay and
1:33:59
looks like okay and
1:33:59
looks like okay and you consider like you know we creating
1:34:01
you consider like you know we creating
1:34:01
you consider like you know we creating this particular type of component at
1:34:03
this particular type of component at
1:34:03
this particular type of component at different different pages in the uh part
1:34:06
different different pages in the uh part
1:34:06
different different pages in the uh part and then can be
1:34:07
and then can be
1:34:07
and then can be you know basically used uh the space can
1:34:10
you know basically used uh the space can
1:34:10
you know basically used uh the space can be utilized more efficiently
1:34:12
be utilized more efficiently
1:34:12
be utilized more efficiently right so yeah so this is the scroll bar
1:34:15
right so yeah so this is the scroll bar
1:34:15
right so yeah so this is the scroll bar component let's quickly see how we can
1:34:17
component let's quickly see how we can
1:34:17
component let's quickly see how we can use this
1:34:18
use this
1:34:18
use this so again i have a scroll bar component
1:34:21
so again i have a scroll bar component
1:34:21
so again i have a scroll bar component here i'll just
1:34:22
here i'll just
1:34:22
here i'll just minimize little bit uh but this is
1:34:24
minimize little bit uh but this is
1:34:24
minimize little bit uh but this is pretty much very
1:34:26
pretty much very
1:34:26
pretty much very uh easy to use first thing is you import
1:34:29
uh easy to use first thing is you import
1:34:29
uh easy to use first thing is you import it okay
1:34:29
it okay
1:34:29
it okay and whatever content you wanted to you
1:34:31
and whatever content you wanted to you
1:34:31
and whatever content you wanted to you know kind of wrap around the scroll bar
1:34:33
know kind of wrap around the scroll bar
1:34:33
know kind of wrap around the scroll bar you put it
1:34:34
you put it
1:34:34
you put it be uh inside the scroll bar component
1:34:36
be uh inside the scroll bar component
1:34:36
be uh inside the scroll bar component okay and you
1:34:37
okay and you
1:34:37
okay and you specify the width and the height of the
1:34:39
specify the width and the height of the
1:34:39
specify the width and the height of the scroll bar and once you do that what
1:34:41
scroll bar and once you do that what
1:34:41
scroll bar and once you do that what will happen is any content which is
1:34:43
will happen is any content which is
1:34:43
will happen is any content which is within the scroll bar
1:34:44
within the scroll bar
1:34:44
within the scroll bar okay it can be paragraph html form or
1:34:47
okay it can be paragraph html form or
1:34:47
okay it can be paragraph html form or anything
1:34:48
anything
1:34:48
anything it will basically you know uh wrap
1:34:50
it will basically you know uh wrap
1:34:50
it will basically you know uh wrap within that particular part of the
1:34:52
within that particular part of the
1:34:52
within that particular part of the section of the webpage right so again
1:34:56
section of the webpage right so again
1:34:56
section of the webpage right so again this is pretty much you know very simple
1:34:57
this is pretty much you know very simple
1:34:57
this is pretty much you know very simple to use but i think it is very effective
1:34:59
to use but i think it is very effective
1:34:59
to use but i think it is very effective you know like considering
1:35:01
you know like considering
1:35:01
you know like considering this kind of library is available and we
1:35:02
this kind of library is available and we
1:35:02
this kind of library is available and we can easily uh
1:35:04
can easily uh
1:35:04
can easily uh build it okay i personally like this
1:35:06
build it okay i personally like this
1:35:06
build it okay i personally like this kind of life that is because you know
1:35:08
kind of life that is because you know
1:35:08
kind of life that is because you know i'm not more into css you know i always
1:35:11
i'm not more into css you know i always
1:35:11
i'm not more into css you know i always fear like cs is something which i cannot
1:35:13
fear like cs is something which i cannot
1:35:13
fear like cs is something which i cannot you know
1:35:14
you know
1:35:14
you know uh do it quickly okay i would need some
1:35:16
uh do it quickly okay i would need some
1:35:16
uh do it quickly okay i would need some ui developers help
1:35:18
ui developers help
1:35:18
ui developers help but if we have this kind of components
1:35:20
but if we have this kind of components
1:35:20
but if we have this kind of components what we can at least do is
1:35:21
what we can at least do is
1:35:21
what we can at least do is independently we as an back-end
1:35:23
independently we as an back-end
1:35:23
independently we as an back-end developer also would be able to use this
1:35:25
developer also would be able to use this
1:35:25
developer also would be able to use this front-end libraries easily
1:35:27
front-end libraries easily
1:35:27
front-end libraries easily and build uh solutions effectively
1:35:31
okay uh moving ahead to third one greet
1:35:34
okay uh moving ahead to third one greet
1:35:34
okay uh moving ahead to third one greet gallery okay now this
1:35:35
gallery okay now this
1:35:36
gallery okay now this this again is pretty much you know would
1:35:38
this again is pretty much you know would
1:35:38
this again is pretty much you know would be a basic requirement on displaying
1:35:41
be a basic requirement on displaying
1:35:41
be a basic requirement on displaying your images in the grid right and this
1:35:43
your images in the grid right and this
1:35:43
your images in the grid right and this can be for a website which is public
1:35:45
can be for a website which is public
1:35:45
can be for a website which is public facing website where you are you know
1:35:47
facing website where you are you know
1:35:47
facing website where you are you know which is content-driven website or
1:35:49
which is content-driven website or
1:35:49
which is content-driven website or it might be also useful wherein
1:35:53
it might be also useful wherein
1:35:53
it might be also useful wherein you wanted to display basically
1:35:55
you wanted to display basically
1:35:55
you wanted to display basically different different images which you are
1:35:57
different different images which you are
1:35:57
different different images which you are capturing as a part of your application
1:35:59
capturing as a part of your application
1:35:59
capturing as a part of your application right and what if you wanted to display
1:36:01
right and what if you wanted to display
1:36:01
right and what if you wanted to display this kind of gallery like this right and
1:36:03
this kind of gallery like this right and
1:36:03
this kind of gallery like this right and this is pretty cool
1:36:04
this is pretty cool
1:36:04
this is pretty cool in terms of you know what features it
1:36:06
in terms of you know what features it
1:36:06
in terms of you know what features it provides
1:36:07
provides
1:36:08
provides like for example uh you know it is
1:36:09
like for example uh you know it is
1:36:09
like for example uh you know it is inspired by google photos so if you can
1:36:11
inspired by google photos so if you can
1:36:11
inspired by google photos so if you can see that
1:36:12
see that
1:36:12
see that look and feel is more like google photos
1:36:14
look and feel is more like google photos
1:36:14
look and feel is more like google photos and the good thing about is
1:36:16
and the good thing about is
1:36:16
and the good thing about is depending on the actual height and the
1:36:18
depending on the actual height and the
1:36:18
depending on the actual height and the width of the image okay
1:36:19
width of the image okay
1:36:19
width of the image okay it actually you know kind of justifies
1:36:22
it actually you know kind of justifies
1:36:22
it actually you know kind of justifies itself like for example this one is you
1:36:23
itself like for example this one is you
1:36:23
itself like for example this one is you know a vertical image right so it
1:36:25
know a vertical image right so it
1:36:25
know a vertical image right so it justifies and put it somewhere
1:36:27
justifies and put it somewhere
1:36:27
justifies and put it somewhere only all other images are long enough so
1:36:30
only all other images are long enough so
1:36:30
only all other images are long enough so this is uh pretty good in terms of again
1:36:33
this is uh pretty good in terms of again
1:36:33
this is uh pretty good in terms of again utilizing the space
1:36:34
utilizing the space
1:36:34
utilizing the space effectively within your web page right
1:36:37
effectively within your web page right
1:36:37
effectively within your web page right and
1:36:38
and
1:36:38
and then you have uh
1:36:42
then you have uh
1:36:42
then you have uh then with the select images are
1:36:43
then with the select images are
1:36:43
then with the select images are selectable it means you can you know
1:36:45
selectable it means you can you know
1:36:45
selectable it means you can you know basically select the image so if you see
1:36:46
basically select the image so if you see
1:36:46
basically select the image so if you see here the blue
1:36:47
here the blue
1:36:47
here the blue icon which says these are the selectable
1:36:49
icon which says these are the selectable
1:36:49
icon which says these are the selectable images we can have custom overlay text
1:36:51
images we can have custom overlay text
1:36:52
images we can have custom overlay text it means that once you hover over it you
1:36:53
it means that once you hover over it you
1:36:53
it means that once you hover over it you can also display text on the image
1:36:55
can also display text on the image
1:36:55
can also display text on the image right uh then you can also give
1:36:57
right uh then you can also give
1:36:58
right uh then you can also give thumbnail captions
1:36:59
thumbnail captions
1:36:59
thumbnail captions okay and again it is mobile friendly
1:37:01
okay and again it is mobile friendly
1:37:01
okay and again it is mobile friendly okay most of the libraries which we are
1:37:03
okay most of the libraries which we are
1:37:03
okay most of the libraries which we are seeing
1:37:03
seeing
1:37:03
seeing would be mobile friendly because that's
1:37:05
would be mobile friendly because that's
1:37:05
would be mobile friendly because that's when you know uh the advantages right
1:37:07
when you know uh the advantages right
1:37:07
when you know uh the advantages right we don't have to take care of everything
1:37:09
we don't have to take care of everything
1:37:09
we don't have to take care of everything from our own right
1:37:10
from our own right
1:37:10
from our own right and uh again if we go to the
1:37:13
and uh again if we go to the
1:37:13
and uh again if we go to the documentation i have mentioned this url
1:37:15
documentation i have mentioned this url
1:37:15
documentation i have mentioned this url here uh to save us time i will not go
1:37:18
here uh to save us time i will not go
1:37:18
here uh to save us time i will not go through the documentation but
1:37:20
through the documentation but
1:37:20
through the documentation but if you just know that you know this
1:37:21
if you just know that you know this
1:37:22
if you just know that you know this something similar
1:37:23
something similar
1:37:23
something similar exists you can always go and google it
1:37:25
exists you can always go and google it
1:37:25
exists you can always go and google it and you can see how you can customize it
1:37:27
and you can see how you can customize it
1:37:27
and you can see how you can customize it right let's see a quick demo uh so this
1:37:31
right let's see a quick demo uh so this
1:37:31
right let's see a quick demo uh so this is the grid gallery okay
1:37:32
is the grid gallery okay
1:37:32
is the grid gallery okay if you see this is selectable uh i might
1:37:35
if you see this is selectable uh i might
1:37:35
if you see this is selectable uh i might have
1:37:36
have
1:37:36
have made it non-selectable but you can see
1:37:38
made it non-selectable but you can see
1:37:38
made it non-selectable but you can see ocean and people it means that you know
1:37:40
ocean and people it means that you know
1:37:40
ocean and people it means that you know um these are the overlay text which you
1:37:42
um these are the overlay text which you
1:37:42
um these are the overlay text which you can basically add as a part of your
1:37:44
can basically add as a part of your
1:37:44
can basically add as a part of your gallery also right uh in terms of
1:37:47
gallery also right uh in terms of
1:37:47
gallery also right uh in terms of implementation
1:37:49
implementation
1:37:49
implementation um i might be repetitive but again you
1:37:52
um i might be repetitive but again you
1:37:52
um i might be repetitive but again you import the
1:37:53
import the
1:37:53
import the actual component okay and you just
1:37:55
actual component okay and you just
1:37:55
actual component okay and you just create a gallery component okay you see
1:37:57
create a gallery component okay you see
1:37:57
create a gallery component okay you see how easy this is
1:37:58
how easy this is
1:37:58
how easy this is the only thing which you are giving is
1:38:00
the only thing which you are giving is
1:38:00
the only thing which you are giving is the area of the images right so you have
1:38:01
the area of the images right so you have
1:38:02
the area of the images right so you have to make sure that
1:38:03
to make sure that
1:38:03
to make sure that right now what i'm doing i'm just
1:38:04
right now what i'm doing i'm just
1:38:04
right now what i'm doing i'm just putting three static images by
1:38:06
putting three static images by
1:38:06
putting three static images by assigning src thumbnail and the width
1:38:08
assigning src thumbnail and the width
1:38:08
assigning src thumbnail and the width and the height and everything right
1:38:10
and the height and everything right
1:38:10
and the height and everything right now what you can do is basically you can
1:38:13
now what you can do is basically you can
1:38:13
now what you can do is basically you can also
1:38:14
also
1:38:14
also get the this image is from the database
1:38:16
get the this image is from the database
1:38:16
get the this image is from the database create the required object and just pass
1:38:18
create the required object and just pass
1:38:18
create the required object and just pass it to the color image
1:38:20
it to the color image
1:38:20
it to the color image and it will auto it will take care of
1:38:22
and it will auto it will take care of
1:38:22
and it will auto it will take care of rendering it
1:38:23
rendering it
1:38:23
rendering it okay uh moving ahead
1:38:27
okay uh moving ahead
1:38:27
okay uh moving ahead uh next react draft what you see what
1:38:29
uh next react draft what you see what
1:38:30
uh next react draft what you see what you get edited okay
1:38:31
you get edited okay
1:38:31
you get edited okay now you might have as a web developer or
1:38:33
now you might have as a web developer or
1:38:33
now you might have as a web developer or as a business application we might have
1:38:35
as a business application we might have
1:38:35
as a business application we might have seen there are
1:38:36
seen there are
1:38:36
seen there are two but there are there will be many
1:38:38
two but there are there will be many
1:38:38
two but there are there will be many requirements where we'll be needing
1:38:40
requirements where we'll be needing
1:38:40
requirements where we'll be needing you know similar kind of html editor as
1:38:42
you know similar kind of html editor as
1:38:42
you know similar kind of html editor as a part of our solution right
1:38:44
a part of our solution right
1:38:44
a part of our solution right now this again you know uh there are
1:38:47
now this again you know uh there are
1:38:47
now this again you know uh there are pretty much
1:38:47
pretty much
1:38:47
pretty much many available okay why i want to
1:38:50
many available okay why i want to
1:38:50
many available okay why i want to highlight this is because this is react
1:38:52
highlight this is because this is react
1:38:52
highlight this is because this is react based it means it is easily
1:38:54
based it means it is easily
1:38:54
based it means it is easily for the react developers it is you know
1:38:56
for the react developers it is you know
1:38:56
for the react developers it is you know easily available and also is the
1:38:58
easily available and also is the
1:38:58
easily available and also is the customizable
1:38:59
customizable
1:38:59
customizable customizable and it supports all the
1:39:01
customizable and it supports all the
1:39:01
customizable and it supports all the typescript
1:39:02
typescript
1:39:02
typescript based uh typescript based customization
1:39:05
based uh typescript based customization
1:39:05
based uh typescript based customization which we wanted to do
1:39:06
which we wanted to do
1:39:06
which we wanted to do okay so if you see these are the
1:39:09
okay so if you see these are the
1:39:09
okay so if you see these are the features there is a long list of feature
1:39:11
features there is a long list of feature
1:39:11
features there is a long list of feature this is very popular again uh now
1:39:14
this is very popular again uh now
1:39:14
this is very popular again uh now if you like for example you can you know
1:39:16
if you like for example you can you know
1:39:16
if you like for example you can you know show and hide
1:39:17
show and hide
1:39:17
show and hide different different controls which are
1:39:18
different different controls which are
1:39:18
different different controls which are available okay and you can change the
1:39:21
available okay and you can change the
1:39:21
available okay and you can change the order of the controls like for example
1:39:22
order of the controls like for example
1:39:22
order of the controls like for example if you wanted to keep the
1:39:23
if you wanted to keep the
1:39:24
if you wanted to keep the bold italic underline at the last
1:39:25
bold italic underline at the last
1:39:25
bold italic underline at the last because that might not be very much
1:39:26
because that might not be very much
1:39:26
because that might not be very much important to the user
1:39:28
important to the user
1:39:28
important to the user uh you can always do that and then you
1:39:30
uh you can always do that and then you
1:39:30
uh you can always do that and then you can also create custom control to the
1:39:32
can also create custom control to the
1:39:32
can also create custom control to the toolbar so not only the out of the box
1:39:34
toolbar so not only the out of the box
1:39:34
toolbar so not only the out of the box controls which you see like indentation
1:39:36
controls which you see like indentation
1:39:36
controls which you see like indentation adding hyperlinks the emojis you can
1:39:39
adding hyperlinks the emojis you can
1:39:39
adding hyperlinks the emojis you can also create a custom control and then
1:39:41
also create a custom control and then
1:39:41
also create a custom control and then build
1:39:41
build
1:39:42
build something on top of it right like for
1:39:43
something on top of it right like for
1:39:43
something on top of it right like for example if you wanted to get
1:39:45
example if you wanted to get
1:39:45
example if you wanted to get hyperlink and just add it here then you
1:39:47
hyperlink and just add it here then you
1:39:47
hyperlink and just add it here then you can create a custom component which
1:39:48
can create a custom component which
1:39:48
can create a custom component which would be a pop-up kind of thing
1:39:50
would be a pop-up kind of thing
1:39:50
would be a pop-up kind of thing build it add to the user and then put it
1:39:53
build it add to the user and then put it
1:39:53
build it add to the user and then put it in the uh
1:39:54
in the uh
1:39:54
in the uh the editor itself right then there are
1:39:57
the editor itself right then there are
1:39:57
the editor itself right then there are choices of 150 emojis
1:39:59
choices of 150 emojis
1:39:59
choices of 150 emojis there are support for mentions hashtag
1:40:02
there are support for mentions hashtag
1:40:02
there are support for mentions hashtag uh there is support for uploading and
1:40:04
uh there is support for uploading and
1:40:04
uh there is support for uploading and adding images also so pretty much all of
1:40:08
adding images also so pretty much all of
1:40:08
adding images also so pretty much all of the you know
1:40:08
the you know
1:40:08
the you know um html editor features are available
1:40:12
um html editor features are available
1:40:12
um html editor features are available here okay
1:40:13
here okay
1:40:13
here okay uh let's quickly see the uh demo
1:40:16
uh let's quickly see the uh demo
1:40:16
uh let's quickly see the uh demo again uh so you if you see here this is
1:40:20
again uh so you if you see here this is
1:40:20
again uh so you if you see here this is the demo
1:40:21
the demo
1:40:21
the demo right and what you can do is you can
1:40:24
right and what you can do is you can
1:40:24
right and what you can do is you can add it you can also use a certain
1:40:27
add it you can also use a certain
1:40:27
add it you can also use a certain shortcut like for example i use ctrl b
1:40:29
shortcut like for example i use ctrl b
1:40:29
shortcut like for example i use ctrl b to bold it right and then you can add
1:40:32
to bold it right and then you can add
1:40:32
to bold it right and then you can add hyperlink you can give the link
1:40:33
hyperlink you can give the link
1:40:34
hyperlink you can give the link and the title uh sorry the title and the
1:40:37
and the title uh sorry the title and the
1:40:37
and the title uh sorry the title and the link
1:40:38
link
1:40:38
link and you can also specify whether you
1:40:40
and you can also specify whether you
1:40:40
and you can also specify whether you want to open it in the new window or
1:40:41
want to open it in the new window or
1:40:41
want to open it in the new window or everything
1:40:42
everything
1:40:42
everything so uh why would you need this like for
1:40:44
so uh why would you need this like for
1:40:44
so uh why would you need this like for example you are building a form and you
1:40:46
example you are building a form and you
1:40:46
example you are building a form and you want
1:40:47
want
1:40:47
want the end user to basically add data
1:40:50
the end user to basically add data
1:40:50
the end user to basically add data in the html right and being a sharepoint
1:40:54
in the html right and being a sharepoint
1:40:54
in the html right and being a sharepoint developer i would know that this
1:40:55
developer i would know that this
1:40:55
developer i would know that this is uh this is uh useful many times
1:40:58
is uh this is uh useful many times
1:40:58
is uh this is uh useful many times because what happens is uh
1:41:00
because what happens is uh
1:41:00
because what happens is uh there is an column type which is html
1:41:03
there is an column type which is html
1:41:03
there is an column type which is html which is available
1:41:04
which is available
1:41:04
which is available in sharepoint and where we want we are
1:41:06
in sharepoint and where we want we are
1:41:06
in sharepoint and where we want we are building custom forms but we want user
1:41:07
building custom forms but we want user
1:41:08
building custom forms but we want user to basically use you know
1:41:09
to basically use you know
1:41:09
to basically use you know a rich text editor so that they can
1:41:11
a rich text editor so that they can
1:41:11
a rich text editor so that they can provide uh
1:41:12
provide uh
1:41:12
provide uh the uh formatted content and then which
1:41:16
the uh formatted content and then which
1:41:16
the uh formatted content and then which we can use to display it wherever we
1:41:17
we can use to display it wherever we
1:41:18
we can use to display it wherever we need it okay so again let's see the
1:41:21
need it okay so again let's see the
1:41:21
need it okay so again let's see the usage
1:41:23
usage
1:41:23
usage so this is draft okay again very simple
1:41:26
so this is draft okay again very simple
1:41:26
so this is draft okay again very simple usage the only thing is uh
1:41:28
usage the only thing is uh
1:41:28
usage the only thing is uh we are importing the actual component
1:41:31
we are importing the actual component
1:41:31
we are importing the actual component and we are also importing the css okay
1:41:33
and we are also importing the css okay
1:41:33
and we are also importing the css okay some of the libraries would require you
1:41:34
some of the libraries would require you
1:41:34
some of the libraries would require you to import the css the reason being
1:41:36
to import the css the reason being
1:41:36
to import the css the reason being uh you know uh it might be not directly
1:41:39
uh you know uh it might be not directly
1:41:40
uh you know uh it might be not directly available okay
1:41:41
available okay
1:41:41
available okay and or it might be directly clashing
1:41:42
and or it might be directly clashing
1:41:42
and or it might be directly clashing with the other ones if default you are
1:41:44
with the other ones if default you are
1:41:44
with the other ones if default you are not
1:41:45
not
1:41:45
not available if you are not specifying it
1:41:47
available if you are not specifying it
1:41:47
available if you are not specifying it right
1:41:48
right
1:41:48
right and you just have to say editor and you
1:41:50
and you just have to say editor and you
1:41:50
and you just have to say editor and you have to say wrapper class and everything
1:41:52
have to say wrapper class and everything
1:41:52
have to say wrapper class and everything okay now in terms of customization how
1:41:54
okay now in terms of customization how
1:41:54
okay now in terms of customization how to read the html content and everything
1:41:57
to read the html content and everything
1:41:57
to read the html content and everything if you go to the documentation
1:41:59
if you go to the documentation
1:41:59
if you go to the documentation uh there are options like you know on
1:42:01
uh there are options like you know on
1:42:01
uh there are options like you know on blur on focus
1:42:03
blur on focus
1:42:03
blur on focus and everything through which we will be
1:42:04
and everything through which we will be
1:42:04
and everything through which we will be able to get the content also and which
1:42:06
able to get the content also and which
1:42:06
able to get the content also and which we can use
1:42:07
we can use
1:42:07
we can use as an html and store it somewhere in the
1:42:09
as an html and store it somewhere in the
1:42:09
as an html and store it somewhere in the database right
1:42:10
database right
1:42:10
database right and also there are option to
1:42:12
and also there are option to
1:42:12
and also there are option to pre-populate like again the
1:42:13
pre-populate like again the
1:42:14
pre-populate like again the scenario wherein it's not just about
1:42:15
scenario wherein it's not just about
1:42:15
scenario wherein it's not just about adding the content like you might want
1:42:17
adding the content like you might want
1:42:17
adding the content like you might want to
1:42:17
to
1:42:17
to edit the content uh edit form you might
1:42:20
edit the content uh edit form you might
1:42:20
edit the content uh edit form you might want to create an edit form where you
1:42:21
want to create an edit form where you
1:42:21
want to create an edit form where you want to pre-load the
1:42:22
want to pre-load the
1:42:22
want to pre-load the uh html which is already there so you
1:42:24
uh html which is already there so you
1:42:24
uh html which is already there so you just have to give it as an input okay
1:42:27
just have to give it as an input okay
1:42:28
just have to give it as an input okay so so this is the what you see what you
1:42:30
so so this is the what you see what you
1:42:30
so so this is the what you see what you get editor
1:42:31
get editor
1:42:31
get editor uh reach editor with the name react
1:42:33
uh reach editor with the name react
1:42:33
uh reach editor with the name react draft and again
1:42:34
draft and again
1:42:34
draft and again you can see refer it from the uh
1:42:37
you can see refer it from the uh
1:42:37
you can see refer it from the uh official documentation of the library
1:42:41
official documentation of the library
1:42:41
official documentation of the library okay then uh accessible accordion okay
1:42:44
okay then uh accessible accordion okay
1:42:44
okay then uh accessible accordion okay now
1:42:45
now
1:42:45
now i'm pretty sure you know this would be
1:42:46
i'm pretty sure you know this would be
1:42:46
i'm pretty sure you know this would be one of the basic requirement of
1:42:48
one of the basic requirement of
1:42:48
one of the basic requirement of getting accordion done right okay and
1:42:51
getting accordion done right okay and
1:42:51
getting accordion done right okay and there are
1:42:52
there are
1:42:52
there are lots of accordions available i would say
1:42:54
lots of accordions available i would say
1:42:54
lots of accordions available i would say okay uh
1:42:55
okay uh
1:42:55
okay uh why again i would highlight this this is
1:42:57
why again i would highlight this this is
1:42:57
why again i would highlight this this is based on react okay it means it can be
1:42:59
based on react okay it means it can be
1:42:59
based on react okay it means it can be easily used on the react-based project
1:43:01
easily used on the react-based project
1:43:01
easily used on the react-based project okay and the styling is customizable it
1:43:04
okay and the styling is customizable it
1:43:04
okay and the styling is customizable it means we can customize the styling
1:43:06
means we can customize the styling
1:43:06
means we can customize the styling uh there are options to basically you
1:43:08
uh there are options to basically you
1:43:08
uh there are options to basically you know choose whether we wanted to
1:43:10
know choose whether we wanted to
1:43:10
know choose whether we wanted to only allow single accordion to be
1:43:13
only allow single accordion to be
1:43:13
only allow single accordion to be expanded or we wanted multiple to be
1:43:15
expanded or we wanted multiple to be
1:43:15
expanded or we wanted multiple to be expanded
1:43:16
expanded
1:43:16
expanded plus there are options to also to
1:43:19
plus there are options to also to
1:43:20
plus there are options to also to choose which particular accordion should
1:43:22
choose which particular accordion should
1:43:22
choose which particular accordion should be you know expand collapse by default
1:43:24
be you know expand collapse by default
1:43:24
be you know expand collapse by default then there is one change even handle
1:43:25
then there is one change even handle
1:43:26
then there is one change even handle which is again very important as i said
1:43:27
which is again very important as i said
1:43:27
which is again very important as i said until you have a specific content which
1:43:30
until you have a specific content which
1:43:30
until you have a specific content which is
1:43:30
is
1:43:30
is very less and you are uh that should be
1:43:33
very less and you are uh that should be
1:43:33
very less and you are uh that should be okay but what if you wanted to you know
1:43:35
okay but what if you wanted to you know
1:43:35
okay but what if you wanted to you know dynamically get data once the user
1:43:36
dynamically get data once the user
1:43:36
dynamically get data once the user clicks on it right
1:43:37
clicks on it right
1:43:37
clicks on it right then pretty much this would be very much
1:43:39
then pretty much this would be very much
1:43:39
then pretty much this would be very much useful
1:43:41
useful
1:43:41
useful uh there is an option to disable
1:43:42
uh there is an option to disable
1:43:42
uh there is an option to disable particular item also
1:43:44
particular item also
1:43:44
particular item also for example we can disable that this
1:43:45
for example we can disable that this
1:43:45
for example we can disable that this particular item cannot be expanded for
1:43:47
particular item cannot be expanded for
1:43:47
particular item cannot be expanded for example right
1:43:48
example right
1:43:48
example right so i i would always consider you know
1:43:50
so i i would always consider you know
1:43:50
so i i would always consider you know accordion uh
1:43:51
accordion uh
1:43:52
accordion uh maybe as an vertical tab also right like
1:43:54
maybe as an vertical tab also right like
1:43:54
maybe as an vertical tab also right like it's not just
1:43:55
it's not just
1:43:55
it's not just about creating faq use or something
1:43:57
about creating faq use or something
1:43:57
about creating faq use or something using accordion
1:43:58
using accordion
1:43:58
using accordion you can also build a form which looks
1:44:01
you can also build a form which looks
1:44:01
you can also build a form which looks you know
1:44:01
you know
1:44:02
you know vertically which would look like an tab
1:44:04
vertically which would look like an tab
1:44:04
vertically which would look like an tab and on click of every tab
1:44:06
and on click of every tab
1:44:06
and on click of every tab on the right hand side you are
1:44:07
on the right hand side you are
1:44:07
on the right hand side you are specifically you know add loading
1:44:09
specifically you know add loading
1:44:09
specifically you know add loading different component like for example
1:44:10
different component like for example
1:44:10
different component like for example create new form
1:44:11
create new form
1:44:11
create new form or my request or my pending task etc
1:44:15
or my request or my pending task etc
1:44:15
or my request or my pending task etc right then it also supports all the
1:44:17
right then it also supports all the
1:44:17
right then it also supports all the desktop and mobile browsers
1:44:20
desktop and mobile browsers
1:44:20
desktop and mobile browsers uh so let's see implementation again i
1:44:23
uh so let's see implementation again i
1:44:23
uh so let's see implementation again i know
1:44:23
know
1:44:23
know uh i'm i'm running fast but you know
1:44:26
uh i'm i'm running fast but you know
1:44:26
uh i'm i'm running fast but you know that was the idea okay just to get used
1:44:28
that was the idea okay just to get used
1:44:28
that was the idea okay just to get used to all this library
1:44:29
to all this library
1:44:29
to all this library and so that you know that this kind of
1:44:32
and so that you know that this kind of
1:44:32
and so that you know that this kind of components are available which can be
1:44:34
components are available which can be
1:44:34
components are available which can be readily used rather than building
1:44:35
readily used rather than building
1:44:35
readily used rather than building something from the scratch okay
1:44:37
something from the scratch okay
1:44:37
something from the scratch okay so these are the three accordions like
1:44:39
so these are the three accordions like
1:44:39
so these are the three accordions like what is spfx what is react
1:44:41
what is spfx what is react
1:44:41
what is spfx what is react okay the header and the actual content
1:44:43
okay the header and the actual content
1:44:44
okay the header and the actual content right
1:44:44
right
1:44:44
right uh now if i go to the implementation
1:44:48
uh now if i go to the implementation
1:44:48
uh now if i go to the implementation uh i'll say go to accordion right
1:44:51
uh i'll say go to accordion right
1:44:52
uh i'll say go to accordion right i will import all the components which
1:44:54
i will import all the components which
1:44:54
i will import all the components which would be used okay so how do you know
1:44:56
would be used okay so how do you know
1:44:56
would be used okay so how do you know that uh
1:44:56
that uh
1:44:56
that uh you wanted to you have to create use a
1:44:58
you wanted to you have to create use a
1:44:58
you wanted to you have to create use a specific format like
1:45:00
specific format like
1:45:00
specific format like uh like for example you start with a
1:45:02
uh like for example you start with a
1:45:02
uh like for example you start with a cody and then within accordion you need
1:45:03
cody and then within accordion you need
1:45:03
cody and then within accordion you need accordion item
1:45:05
accordion item
1:45:05
accordion item all is available in the documentation
1:45:06
all is available in the documentation
1:45:06
all is available in the documentation you just have to follow it and you will
1:45:08
you just have to follow it and you will
1:45:08
you just have to follow it and you will understand what
1:45:09
understand what
1:45:09
understand what every component means like for example
1:45:11
every component means like for example
1:45:11
every component means like for example here if you see
1:45:12
here if you see
1:45:12
here if you see accordion is the base uh tag within
1:45:15
accordion is the base uh tag within
1:45:15
accordion is the base uh tag within accordion there is accordion item it
1:45:17
accordion there is accordion item it
1:45:17
accordion there is accordion item it means there would be you know three
1:45:18
means there would be you know three
1:45:18
means there would be you know three accordion items for each of the
1:45:20
accordion items for each of the
1:45:20
accordion items for each of the accordion item which we have seen as a
1:45:22
accordion item which we have seen as a
1:45:22
accordion item which we have seen as a part of our demo
1:45:23
part of our demo
1:45:23
part of our demo and then there is an accordion heading
1:45:25
and then there is an accordion heading
1:45:25
and then there is an accordion heading okay uh
1:45:27
okay uh
1:45:27
okay uh wherein you have to specify accordion
1:45:28
wherein you have to specify accordion
1:45:28
wherein you have to specify accordion item button uh
1:45:30
item button uh
1:45:30
item button uh frankly i'm not sure whether this would
1:45:31
frankly i'm not sure whether this would
1:45:31
frankly i'm not sure whether this would be required or directly we can put it
1:45:33
be required or directly we can put it
1:45:33
be required or directly we can put it but as per the documentation they were
1:45:35
but as per the documentation they were
1:45:35
but as per the documentation they were mentioning that this this
1:45:36
mentioning that this this
1:45:36
mentioning that this this accordion item button is there okay and
1:45:39
accordion item button is there okay and
1:45:39
accordion item button is there okay and then there is accordion item panel which
1:45:41
then there is accordion item panel which
1:45:41
then there is accordion item panel which is basically the content for that
1:45:42
is basically the content for that
1:45:42
is basically the content for that particular accordion so
1:45:44
particular accordion so
1:45:44
particular accordion so now within this again as i said you can
1:45:46
now within this again as i said you can
1:45:46
now within this again as i said you can have html you can have a different react
1:45:48
have html you can have a different react
1:45:48
have html you can have a different react component or you can use any other
1:45:50
component or you can use any other
1:45:50
component or you can use any other library components which is available
1:45:51
library components which is available
1:45:51
library components which is available okay so
1:45:52
okay so
1:45:52
okay so possibilities are endless right
1:45:56
possibilities are endless right
1:45:56
possibilities are endless right uh moving ahead uh next
1:45:59
uh moving ahead uh next
1:45:59
uh moving ahead uh next material table okay um again a very
1:46:03
material table okay um again a very
1:46:03
material table okay um again a very useful one
1:46:04
useful one
1:46:04
useful one okay like for example uh we have seen in
1:46:07
okay like for example uh we have seen in
1:46:07
okay like for example uh we have seen in the last session right um
1:46:09
the last session right um
1:46:09
the last session right um that swami was uh using uh
1:46:12
that swami was uh using uh
1:46:12
that swami was uh using uh a tabular kind of format to display the
1:46:15
a tabular kind of format to display the
1:46:15
a tabular kind of format to display the books
1:46:15
books
1:46:15
books right uh and this is pretty much uh uh
1:46:19
right uh and this is pretty much uh uh
1:46:19
right uh and this is pretty much uh uh you know requirement for every other
1:46:22
you know requirement for every other
1:46:22
you know requirement for every other project which if you are developing
1:46:23
project which if you are developing
1:46:23
project which if you are developing something
1:46:24
something
1:46:24
something you know which is kind of uh getting
1:46:26
you know which is kind of uh getting
1:46:26
you know which is kind of uh getting data from the database displaying and
1:46:28
data from the database displaying and
1:46:28
data from the database displaying and performing the crude operation exactly
1:46:30
performing the crude operation exactly
1:46:30
performing the crude operation exactly right so what happens uh in this for
1:46:32
right so what happens uh in this for
1:46:32
right so what happens uh in this for this kind of
1:46:33
this kind of
1:46:33
this kind of implementation why do i choose this
1:46:35
implementation why do i choose this
1:46:35
implementation why do i choose this particular one because
1:46:37
particular one because
1:46:37
particular one because because of the one feature which is
1:46:38
because of the one feature which is
1:46:38
because of the one feature which is available and there are
1:46:40
available and there are
1:46:40
available and there are many availables like you know there is
1:46:41
many availables like you know there is
1:46:41
many availables like you know there is jquery data table there is bootstrap
1:46:43
jquery data table there is bootstrap
1:46:43
jquery data table there is bootstrap data table there is
1:46:43
data table there is
1:46:44
data table there is a fabric ui fluent ui data table list
1:46:47
a fabric ui fluent ui data table list
1:46:47
a fabric ui fluent ui data table list view controls
1:46:48
view controls
1:46:48
view controls there are many availables okay but uh
1:46:51
there are many availables okay but uh
1:46:52
there are many availables okay but uh this i wanted to highlight because there
1:46:53
this i wanted to highlight because there
1:46:53
this i wanted to highlight because there are different options here like for
1:46:54
are different options here like for
1:46:54
are different options here like for example
1:46:55
example
1:46:55
example you know you can export to csv in excel
1:46:57
you know you can export to csv in excel
1:46:57
you know you can export to csv in excel so by default you can just click on the
1:46:59
so by default you can just click on the
1:46:59
so by default you can just click on the download button and it gives an option
1:47:01
download button and it gives an option
1:47:01
download button and it gives an option to cs financial and you don't need to
1:47:02
to cs financial and you don't need to
1:47:02
to cs financial and you don't need to program it
1:47:03
program it
1:47:03
program it right uh then yeah definitely again
1:47:07
right uh then yeah definitely again
1:47:07
right uh then yeah definitely again there might be argument that jquery data
1:47:08
there might be argument that jquery data
1:47:08
there might be argument that jquery data tables also use this okay
1:47:10
tables also use this okay
1:47:10
tables also use this okay but if it if you are building something
1:47:12
but if it if you are building something
1:47:12
but if it if you are building something on react right you wanted to get
1:47:14
on react right you wanted to get
1:47:14
on react right you wanted to get something
1:47:15
something
1:47:15
something which is supported by react right so
1:47:17
which is supported by react right so
1:47:17
which is supported by react right so that is where the uh this particular
1:47:19
that is where the uh this particular
1:47:19
that is where the uh this particular library will come into picture then
1:47:22
library will come into picture then
1:47:22
library will come into picture then any data table which would have there is
1:47:24
any data table which would have there is
1:47:24
any data table which would have there is a search functionality there is sorting
1:47:25
a search functionality there is sorting
1:47:25
a search functionality there is sorting functionality filtering grouping
1:47:28
functionality filtering grouping
1:47:28
functionality filtering grouping and we can choose detail panel also like
1:47:30
and we can choose detail panel also like
1:47:30
and we can choose detail panel also like for example on click of it the detail
1:47:31
for example on click of it the detail
1:47:31
for example on click of it the detail panel can be open
1:47:32
panel can be open
1:47:32
panel can be open okay then you can have custom rendering
1:47:35
okay then you can have custom rendering
1:47:35
okay then you can have custom rendering of columns so it gives us an option
1:47:37
of columns so it gives us an option
1:47:37
of columns so it gives us an option wherein you can actually
1:47:38
wherein you can actually
1:47:38
wherein you can actually customize the uh column rendering like
1:47:40
customize the uh column rendering like
1:47:40
customize the uh column rendering like for example
1:47:41
for example
1:47:41
for example if the data which you are getting from
1:47:43
if the data which you are getting from
1:47:43
if the data which you are getting from the database
1:47:44
the database
1:47:44
the database which would be an array is just the name
1:47:47
which would be an array is just the name
1:47:48
which would be an array is just the name but you wanted to format it before you
1:47:49
but you wanted to format it before you
1:47:49
but you wanted to format it before you actually want to render it right that
1:47:50
actually want to render it right that
1:47:50
actually want to render it right that can that is possible that you can do it
1:47:52
can that is possible that you can do it
1:47:52
can that is possible that you can do it right
1:47:53
right
1:47:53
right and it is editable which you will see
1:47:55
and it is editable which you will see
1:47:55
and it is editable which you will see and then there is event handler for each
1:47:57
and then there is event handler for each
1:47:57
and then there is event handler for each action it means that on click of edit
1:47:59
action it means that on click of edit
1:47:59
action it means that on click of edit what you wanted to do you can customize
1:48:01
what you wanted to do you can customize
1:48:01
what you wanted to do you can customize it
1:48:01
it
1:48:01
it you want click of delete icon what you
1:48:03
you want click of delete icon what you
1:48:03
you want click of delete icon what you want to do you can customize it you can
1:48:04
want to do you can customize it you can
1:48:04
want to do you can customize it you can have
1:48:05
have
1:48:05
have write your own code to basically perform
1:48:06
write your own code to basically perform
1:48:06
write your own code to basically perform the actual crude operations as a part of
1:48:09
the actual crude operations as a part of
1:48:09
the actual crude operations as a part of it
1:48:10
it
1:48:10
it okay so uh
1:48:13
okay so uh
1:48:13
okay so uh moving on to see the demo uh so this is
1:48:16
moving on to see the demo uh so this is
1:48:16
moving on to see the demo uh so this is how
1:48:17
how
1:48:17
how you know the data table looks like okay
1:48:19
you know the data table looks like okay
1:48:19
you know the data table looks like okay you can see
1:48:20
you can see
1:48:20
you can see uh pardon my you know css as i said i
1:48:23
uh pardon my you know css as i said i
1:48:23
uh pardon my you know css as i said i did not focus on the action part
1:48:25
did not focus on the action part
1:48:25
did not focus on the action part uh but yeah you can see that there are
1:48:27
uh but yeah you can see that there are
1:48:27
uh but yeah you can see that there are two ops actions available like edit
1:48:29
two ops actions available like edit
1:48:29
two ops actions available like edit delete
1:48:30
delete
1:48:30
delete there is an action to edit so once you
1:48:32
there is an action to edit so once you
1:48:32
there is an action to edit so once you click on edit what happens is a new row
1:48:33
click on edit what happens is a new row
1:48:33
click on edit what happens is a new row gets created here you can input the name
1:48:35
gets created here you can input the name
1:48:35
gets created here you can input the name here
1:48:37
here
1:48:37
here right and
1:48:41
you can just say you know save and it
1:48:44
you can just say you know save and it
1:48:44
you can just say you know save and it will add it
1:48:45
will add it
1:48:45
will add it to the row right it will add it to the
1:48:47
to the row right it will add it to the
1:48:47
to the row right it will add it to the last of the row because we have
1:48:48
last of the row because we have
1:48:48
last of the row because we have pagination right so if you see
1:48:50
pagination right so if you see
1:48:50
pagination right so if you see here it just added right and again as i
1:48:52
here it just added right and again as i
1:48:52
here it just added right and again as i said
1:48:54
said
1:48:54
said right now everything has been done
1:48:55
right now everything has been done
1:48:55
right now everything has been done locally right nothing has been stored in
1:48:57
locally right nothing has been stored in
1:48:57
locally right nothing has been stored in the database but what you can do is once
1:48:59
the database but what you can do is once
1:48:59
the database but what you can do is once you click on
1:48:59
you click on
1:49:00
you click on the tick mark which was basically a save
1:49:02
the tick mark which was basically a save
1:49:02
the tick mark which was basically a save icon you can actually store in the
1:49:03
icon you can actually store in the
1:49:03
icon you can actually store in the database and reload the data okay and
1:49:05
database and reload the data okay and
1:49:05
database and reload the data okay and that you can do then the good thing is
1:49:08
that you can do then the good thing is
1:49:08
that you can do then the good thing is it is editable
1:49:09
it is editable
1:49:09
it is editable right so it means there is an inline
1:49:11
right so it means there is an inline
1:49:11
right so it means there is an inline editing capability and which i think
1:49:13
editing capability and which i think
1:49:13
editing capability and which i think is mostly you know many times it has
1:49:16
is mostly you know many times it has
1:49:16
is mostly you know many times it has been asked for
1:49:17
been asked for
1:49:17
been asked for by the user like we need a listview but
1:49:19
by the user like we need a listview but
1:49:19
by the user like we need a listview but we don't want to you know basically have
1:49:21
we don't want to you know basically have
1:49:21
we don't want to you know basically have a different form where i go and edit it
1:49:23
a different form where i go and edit it
1:49:23
a different form where i go and edit it if this is
1:49:24
if this is
1:49:24
if this is pretty much you know five to six columns
1:49:25
pretty much you know five to six columns
1:49:25
pretty much you know five to six columns which you are displaying in the
1:49:27
which you are displaying in the
1:49:27
which you are displaying in the uh grid right or the table so you can
1:49:30
uh grid right or the table so you can
1:49:30
uh grid right or the table so you can always you know basically
1:49:31
always you know basically
1:49:31
always you know basically edit it okay and uh then you can save it
1:49:35
edit it okay and uh then you can save it
1:49:35
edit it okay and uh then you can save it so
1:49:35
so
1:49:35
so this is uh pretty cool okay in terms of
1:49:38
this is uh pretty cool okay in terms of
1:49:38
this is uh pretty cool okay in terms of the editable grid which we have
1:49:39
the editable grid which we have
1:49:39
the editable grid which we have and then there is search functionality
1:49:41
and then there is search functionality
1:49:41
and then there is search functionality you can search it based on any columns
1:49:43
you can search it based on any columns
1:49:43
you can search it based on any columns which you want
1:49:44
which you want
1:49:44
which you want you can uh download csv or pdf you can
1:49:48
you can uh download csv or pdf you can
1:49:48
you can uh download csv or pdf you can just export the data as a part of csvp
1:49:51
just export the data as a part of csvp
1:49:51
just export the data as a part of csvp pdf uh pagination functionality is
1:49:54
pdf uh pagination functionality is
1:49:54
pdf uh pagination functionality is available
1:49:55
available
1:49:55
available so most of the list great view
1:49:56
so most of the list great view
1:49:56
so most of the list great view functionality is available and
1:49:58
functionality is available and
1:49:58
functionality is available and i would suggest if you are exploring to
1:50:00
i would suggest if you are exploring to
1:50:00
i would suggest if you are exploring to build something custom right and if you
1:50:02
build something custom right and if you
1:50:02
build something custom right and if you wanted to give similar kind of
1:50:03
wanted to give similar kind of
1:50:03
wanted to give similar kind of functionality this can be
1:50:05
functionality this can be
1:50:05
functionality this can be pretty useful right so let's say the
1:50:08
pretty useful right so let's say the
1:50:08
pretty useful right so let's say the implementation okay uh
1:50:10
implementation okay uh
1:50:10
implementation okay uh the implementation again here would be
1:50:12
the implementation again here would be
1:50:12
the implementation again here would be uh that would be little
1:50:14
uh that would be little
1:50:14
uh that would be little uh more a little bit more to what we
1:50:16
uh more a little bit more to what we
1:50:16
uh more a little bit more to what we have used other libraries
1:50:18
have used other libraries
1:50:18
have used other libraries first thing is you import it okay and as
1:50:20
first thing is you import it okay and as
1:50:20
first thing is you import it okay and as i said uh
1:50:21
i said uh
1:50:21
i said uh this is based on the material uh ui okay
1:50:25
this is based on the material uh ui okay
1:50:25
this is based on the material uh ui okay so what uh as a part of material ui we
1:50:28
so what uh as a part of material ui we
1:50:28
so what uh as a part of material ui we just get the table okay like list view
1:50:30
just get the table okay like list view
1:50:30
just get the table okay like list view and everything
1:50:31
and everything
1:50:31
and everything so this particular developer what he did
1:50:33
so this particular developer what he did
1:50:33
so this particular developer what he did is he used the material your basic table
1:50:35
is he used the material your basic table
1:50:35
is he used the material your basic table and he added some capabilities like
1:50:37
and he added some capabilities like
1:50:37
and he added some capabilities like editing and everything which we are
1:50:38
editing and everything which we are
1:50:38
editing and everything which we are seeing
1:50:39
seeing
1:50:39
seeing so this is you know good thing about
1:50:40
so this is you know good thing about
1:50:40
so this is you know good thing about community wherein people would
1:50:43
community wherein people would
1:50:43
community wherein people would uh if something is open source people
1:50:45
uh if something is open source people
1:50:45
uh if something is open source people will use it plus it will they can they
1:50:47
will use it plus it will they can they
1:50:47
will use it plus it will they can they would
1:50:47
would
1:50:47
would get you know an opportunity to extend it
1:50:50
get you know an opportunity to extend it
1:50:50
get you know an opportunity to extend it also and then
1:50:51
also and then
1:50:51
also and then again it can be you know open sourced it
1:50:53
again it can be you know open sourced it
1:50:54
again it can be you know open sourced it right so
1:50:56
right so
1:50:56
right so considering how do you want to use it uh
1:50:58
considering how do you want to use it uh
1:50:58
considering how do you want to use it uh you start with you know material table
1:51:01
you start with you know material table
1:51:01
you start with you know material table you specify data which would be the
1:51:03
you specify data which would be the
1:51:03
you specify data which would be the specific data which you wanted to do in
1:51:05
specific data which you wanted to do in
1:51:05
specific data which you wanted to do in my case i'm just using
1:51:06
my case i'm just using
1:51:06
my case i'm just using static data like you know name surname
1:51:08
static data like you know name surname
1:51:08
static data like you know name surname age gender
1:51:10
age gender
1:51:10
age gender and you specify column and the column
1:51:12
and you specify column and the column
1:51:12
and you specify column and the column also should be you know kind of an
1:51:13
also should be you know kind of an
1:51:13
also should be you know kind of an array wherein you tell what should be
1:51:15
array wherein you tell what should be
1:51:15
array wherein you tell what should be the title and what should be the field
1:51:17
the title and what should be the field
1:51:17
the title and what should be the field which it should map to the in the data
1:51:19
which it should map to the in the data
1:51:19
which it should map to the in the data so this would be the header which we are
1:51:21
so this would be the header which we are
1:51:21
so this would be the header which we are seeing right like name surname agent
1:51:23
seeing right like name surname agent
1:51:23
seeing right like name surname agent gender
1:51:24
gender
1:51:24
gender okay and this is the field which it says
1:51:26
okay and this is the field which it says
1:51:26
okay and this is the field which it says that once i
1:51:27
that once i
1:51:27
that once i provide the data array okay to this
1:51:30
provide the data array okay to this
1:51:30
provide the data array okay to this field you need to basically
1:51:31
field you need to basically
1:51:31
field you need to basically uh map it to so the name would map it to
1:51:34
uh map it to so the name would map it to
1:51:34
uh map it to so the name would map it to the name field
1:51:35
the name field
1:51:35
the name field the surname would map it to the sun name
1:51:36
the surname would map it to the sun name
1:51:36
the surname would map it to the sun name field and edge wouldn't map it to the
1:51:38
field and edge wouldn't map it to the
1:51:38
field and edge wouldn't map it to the age field
1:51:38
age field
1:51:38
age field like right and this can this is pretty
1:51:41
like right and this can this is pretty
1:51:41
like right and this can this is pretty useful wherein you know
1:51:42
useful wherein you know
1:51:42
useful wherein you know there might be case when in the database
1:51:45
there might be case when in the database
1:51:45
there might be case when in the database or from where we are getting data uh
1:51:48
or from where we are getting data uh
1:51:48
or from where we are getting data uh it might be having a different name
1:51:50
it might be having a different name
1:51:50
it might be having a different name right but we wanted to display different
1:51:51
right but we wanted to display different
1:51:51
right but we wanted to display different header title so
1:51:53
header title so
1:51:53
header title so this gives a flexibility over it right
1:51:56
this gives a flexibility over it right
1:51:56
this gives a flexibility over it right and then uh the icons
1:51:59
and then uh the icons
1:51:59
and then uh the icons like you know table icons which we
1:52:00
like you know table icons which we
1:52:00
like you know table icons which we wanted to show so it just says that
1:52:03
wanted to show so it just says that
1:52:03
wanted to show so it just says that when we say table icons it means it say
1:52:05
when we say table icons it means it say
1:52:05
when we say table icons it means it say what all things you wanted to display
1:52:07
what all things you wanted to display
1:52:07
what all things you wanted to display right so this is pretty much from the
1:52:09
right so this is pretty much from the
1:52:09
right so this is pretty much from the documentation where you
1:52:11
documentation where you
1:52:11
documentation where you tell them that you know that you need an
1:52:12
tell them that you know that you need an
1:52:12
tell them that you know that you need an ad icon you need a checkbox icon
1:52:14
ad icon you need a checkbox icon
1:52:14
ad icon you need a checkbox icon you need a clear icon delete icon detail
1:52:17
you need a clear icon delete icon detail
1:52:17
you need a clear icon delete icon detail pen icon
1:52:18
pen icon
1:52:18
pen icon so all of this basically you are passing
1:52:19
so all of this basically you are passing
1:52:19
so all of this basically you are passing it saying that all these options i mean
1:52:21
it saying that all these options i mean
1:52:22
it saying that all these options i mean all these icons are needed as a part of
1:52:23
all these icons are needed as a part of
1:52:23
all these icons are needed as a part of my
1:52:23
my
1:52:24
my solution right and this is again as i
1:52:26
solution right and this is again as i
1:52:26
solution right and this is again as i said we can check it from the
1:52:27
said we can check it from the
1:52:27
said we can check it from the documentation and use it
1:52:30
documentation and use it
1:52:30
documentation and use it and in the options we specify whether we
1:52:33
and in the options we specify whether we
1:52:33
and in the options we specify whether we want export button
1:52:34
want export button
1:52:34
want export button okay and if it is true then it will
1:52:36
okay and if it is true then it will
1:52:36
okay and if it is true then it will basically uh
1:52:37
basically uh
1:52:37
basically uh you know add that export to csv and pdf
1:52:40
you know add that export to csv and pdf
1:52:40
you know add that export to csv and pdf right
1:52:41
right
1:52:41
right and this is interesting okay uh in
1:52:44
and this is interesting okay uh in
1:52:44
and this is interesting okay uh in editable property okay what you do is
1:52:47
editable property okay what you do is
1:52:47
editable property okay what you do is you specify
1:52:47
you specify
1:52:48
you specify three uh event handlers like on row
1:52:51
three uh event handlers like on row
1:52:51
three uh event handlers like on row update on row add and row delete
1:52:53
update on row add and row delete
1:52:53
update on row add and row delete okay in our case what we are doing is
1:52:56
okay in our case what we are doing is
1:52:56
okay in our case what we are doing is once we get a new data it means
1:52:57
once we get a new data it means
1:52:57
once we get a new data it means basically new data is nothing but
1:52:59
basically new data is nothing but
1:52:59
basically new data is nothing but just uh the data about the row what it
1:53:02
just uh the data about the row what it
1:53:02
just uh the data about the row what it does is automatically take care
1:53:04
does is automatically take care
1:53:04
does is automatically take care of binding all the json objects
1:53:06
of binding all the json objects
1:53:06
of binding all the json objects attributes
1:53:07
attributes
1:53:07
attributes the way user has added to the
1:53:11
the way user has added to the
1:53:11
the way user has added to the grid and it gives us that particular uh
1:53:14
grid and it gives us that particular uh
1:53:14
grid and it gives us that particular uh particular item right and then that item
1:53:17
particular item right and then that item
1:53:17
particular item right and then that item we can use it so right now we are just
1:53:19
we can use it so right now we are just
1:53:19
we can use it so right now we are just setting the data in the state okay but
1:53:20
setting the data in the state okay but
1:53:20
setting the data in the state okay but what we can do is we can always save it
1:53:22
what we can do is we can always save it
1:53:22
what we can do is we can always save it in the database we make an api call and
1:53:24
in the database we make an api call and
1:53:24
in the database we make an api call and actually save it
1:53:25
actually save it
1:53:25
actually save it right and same happens with row update
1:53:27
right and same happens with row update
1:53:27
right and same happens with row update okay uh what we wanted to do we are
1:53:29
okay uh what we wanted to do we are
1:53:29
okay uh what we wanted to do we are getting first the actual index
1:53:31
getting first the actual index
1:53:31
getting first the actual index which is getting edited and then we are
1:53:33
which is getting edited and then we are
1:53:33
which is getting edited and then we are updating the new
1:53:34
updating the new
1:53:34
updating the new properties or the updated values and
1:53:36
properties or the updated values and
1:53:36
properties or the updated values and setting the state again
1:53:38
setting the state again
1:53:38
setting the state again okay and on row delete we are using
1:53:40
okay and on row delete we are using
1:53:40
okay and on row delete we are using splice to just remove it from the
1:53:42
splice to just remove it from the
1:53:42
splice to just remove it from the array content but in real scenario we
1:53:44
array content but in real scenario we
1:53:44
array content but in real scenario we might be making an actual api calls
1:53:46
might be making an actual api calls
1:53:46
might be making an actual api calls first displaying maybe for example a
1:53:48
first displaying maybe for example a
1:53:48
first displaying maybe for example a pop-up window
1:53:49
pop-up window
1:53:49
pop-up window saying that do you really want to delete
1:53:51
saying that do you really want to delete
1:53:51
saying that do you really want to delete this and then actually delete it
1:53:53
this and then actually delete it
1:53:53
this and then actually delete it right so yes uh this where the you know
1:53:57
right so yes uh this where the you know
1:53:57
right so yes uh this where the you know few of the components there might be
1:53:58
few of the components there might be
1:53:58
few of the components there might be n number of you know other components
1:54:00
n number of you know other components
1:54:00
n number of you know other components and i would like to hear from the
1:54:02
and i would like to hear from the
1:54:02
and i would like to hear from the audience you know if you
1:54:03
audience you know if you
1:54:03
audience you know if you think there is something which you
1:54:05
think there is something which you
1:54:05
think there is something which you already know which i have missed
1:54:06
already know which i have missed
1:54:06
already know which i have missed please feel free to add in the comment
1:54:08
please feel free to add in the comment
1:54:08
please feel free to add in the comment and i would really like to explore it uh
1:54:11
and i would really like to explore it uh
1:54:11
and i would really like to explore it uh because being an uh not a front-end
1:54:13
because being an uh not a front-end
1:54:13
because being an uh not a front-end developer you know
1:54:14
developer you know
1:54:14
developer you know i really look forward to use this kind
1:54:17
i really look forward to use this kind
1:54:17
i really look forward to use this kind of ui libraries which are available
1:54:19
of ui libraries which are available
1:54:19
of ui libraries which are available which we can you know easily use to
1:54:21
which we can you know easily use to
1:54:21
which we can you know easily use to build our solution rather than
1:54:22
build our solution rather than
1:54:22
build our solution rather than uh depending on the ui developer to
1:54:25
uh depending on the ui developer to
1:54:25
uh depending on the ui developer to build something okay so moving ahead
1:54:29
build something okay so moving ahead
1:54:29
build something okay so moving ahead uh references uh these are some of the
1:54:31
uh references uh these are some of the
1:54:31
uh references uh these are some of the reference links which
1:54:34
reference links which
1:54:34
reference links which which where from where i have used this
1:54:35
which where from where i have used this
1:54:35
which where from where i have used this okay this would be pretty
1:54:37
okay this would be pretty
1:54:37
okay this would be pretty sharp and framework the mpmgs and the
1:54:39
sharp and framework the mpmgs and the
1:54:39
sharp and framework the mpmgs and the react.js and everything
1:54:41
react.js and everything
1:54:41
react.js and everything and uh again thank you and uh
1:54:44
and uh again thank you and uh
1:54:44
and uh again thank you and uh if there is any question answer simon i
1:54:46
if there is any question answer simon i
1:54:46
if there is any question answer simon i would like to take and hopefully
1:54:48
would like to take and hopefully
1:54:48
would like to take and hopefully i have completed in time that's an
1:54:50
i have completed in time that's an
1:54:50
i have completed in time that's an absolutely amazing session
1:54:52
absolutely amazing session
1:54:52
absolutely amazing session um you covered a lot in just 45-50
1:54:56
um you covered a lot in just 45-50
1:54:56
um you covered a lot in just 45-50 minutes right
1:54:57
minutes right
1:54:57
minutes right there's a lot that you go and it's a
1:54:58
there's a lot that you go and it's a
1:54:58
there's a lot that you go and it's a very pretty exciting topic right i think
1:55:01
very pretty exciting topic right i think
1:55:01
very pretty exciting topic right i think many people who have loved it
1:55:02
many people who have loved it
1:55:02
many people who have loved it we're actually running a little over
1:55:03
we're actually running a little over
1:55:03
we're actually running a little over time now but maybe let's take a few
1:55:05
time now but maybe let's take a few
1:55:05
time now but maybe let's take a few sessions from uh from
1:55:07
sessions from uh from
1:55:07
sessions from uh from uh the the the audience uh asari says
1:55:10
uh the the the audience uh asari says
1:55:10
uh the the the audience uh asari says which
1:55:11
which
1:55:11
which best one jquery table or material table
1:55:14
best one jquery table or material table
1:55:14
best one jquery table or material table for server side origination which one is
1:55:16
for server side origination which one is
1:55:16
for server side origination which one is best
1:55:17
best
1:55:17
best yeah uh so frankly i might not able to
1:55:21
yeah uh so frankly i might not able to
1:55:21
yeah uh so frankly i might not able to actually tell okay which one is best
1:55:23
actually tell okay which one is best
1:55:23
actually tell okay which one is best because that would be
1:55:24
because that would be
1:55:24
because that would be not fair to do uh but considering you
1:55:27
not fair to do uh but considering you
1:55:27
not fair to do uh but considering you know like
1:55:27
know like
1:55:27
know like jquery data table is still very popular
1:55:30
jquery data table is still very popular
1:55:30
jquery data table is still very popular in terms of
1:55:31
in terms of
1:55:31
in terms of uh the front ends which users are
1:55:33
uh the front ends which users are
1:55:33
uh the front ends which users are developing right
1:55:34
developing right
1:55:34
developing right and uh react in terms of uh
1:55:37
and uh react in terms of uh
1:55:37
and uh react in terms of uh implementation or changing the state i
1:55:39
implementation or changing the state i
1:55:39
implementation or changing the state i would definitely i can tell on that that
1:55:41
would definitely i can tell on that that
1:55:41
would definitely i can tell on that that react is
1:55:41
react is
1:55:41
react is faster than the jquery the way we are
1:55:44
faster than the jquery the way we are
1:55:44
faster than the jquery the way we are doing it so
1:55:44
doing it so
1:55:44
doing it so in a way indirectly i'm saying that yeah
1:55:46
in a way indirectly i'm saying that yeah
1:55:46
in a way indirectly i'm saying that yeah maybe you know material table would be
1:55:48
maybe you know material table would be
1:55:48
maybe you know material table would be faster yeah definitely let's take one
1:55:50
faster yeah definitely let's take one
1:55:50
faster yeah definitely let's take one more then we'll move to the next session
1:55:52
more then we'll move to the next session
1:55:52
more then we'll move to the next session that's by gunjan
1:55:53
that's by gunjan
1:55:53
that's by gunjan uh thanks for asking the question
1:55:54
uh thanks for asking the question
1:55:54
uh thanks for asking the question quenching she says can we also sign
1:55:56
quenching she says can we also sign
1:55:56
quenching she says can we also sign can we also e-sign pds using canvas
1:55:59
can we also e-sign pds using canvas
1:55:59
can we also e-sign pds using canvas signature
1:56:01
signature
1:56:01
signature uh see consider canvas signature is
1:56:03
uh see consider canvas signature is
1:56:04
uh see consider canvas signature is basically
1:56:04
basically
1:56:04
basically you know how we are allowing user to
1:56:06
you know how we are allowing user to
1:56:06
you know how we are allowing user to basically sign in the front-end right
1:56:08
basically sign in the front-end right
1:56:08
basically sign in the front-end right now what you do with that base64 for
1:56:10
now what you do with that base64 for
1:56:10
now what you do with that base64 for example you might have a pdf editor or
1:56:12
example you might have a pdf editor or
1:56:12
example you might have a pdf editor or something
1:56:13
something
1:56:13
something you can always use that base64 and put
1:56:15
you can always use that base64 and put
1:56:15
you can always use that base64 and put it into a pdf as a part of
1:56:17
it into a pdf as a part of
1:56:17
it into a pdf as a part of maybe first create a word template and
1:56:18
maybe first create a word template and
1:56:18
maybe first create a word template and then convert into pdf but yeah
1:56:20
then convert into pdf but yeah
1:56:20
then convert into pdf but yeah it can be used okay okay let's take one
1:56:23
it can be used okay okay let's take one
1:56:23
it can be used okay okay let's take one final one they keep on coming dude do
1:56:26
final one they keep on coming dude do
1:56:26
final one they keep on coming dude do you think using virtual dome is faster
1:56:29
you think using virtual dome is faster
1:56:29
you think using virtual dome is faster yes i think and it is proved yeah
1:56:33
yes i think and it is proved yeah
1:56:33
yes i think and it is proved yeah people really love your session patricia
1:56:35
people really love your session patricia
1:56:35
people really love your session patricia says great session
1:56:37
says great session
1:56:37
says great session uh learned a lot of new useful libraries
1:56:41
uh learned a lot of new useful libraries
1:56:41
uh learned a lot of new useful libraries so thank thank thanks everyone you tuned
1:56:43
so thank thank thanks everyone you tuned
1:56:43
so thank thank thanks everyone you tuned in and thanks without any final thing
1:56:45
in and thanks without any final thing
1:56:45
in and thanks without any final thing when you plug in before we move to next
1:56:47
when you plug in before we move to next
1:56:47
when you plug in before we move to next session
1:56:48
session
1:56:48
session no uh thanks again you know c sharp
1:56:50
no uh thanks again you know c sharp
1:56:50
no uh thanks again you know c sharp corner for providing this opportunity
1:56:52
corner for providing this opportunity
1:56:52
corner for providing this opportunity and i again would like to personally
1:56:53
and i again would like to personally
1:56:54
and i again would like to personally thank you for all the energy you have to
1:56:56
thank you for all the energy you have to
1:56:56
thank you for all the energy you have to host all this
1:56:57
host all this
1:56:57
host all this i just definitely this is the first time
1:56:58
i just definitely this is the first time
1:56:58
i just definitely this is the first time you are hosting me but i'm following you
1:57:00
you are hosting me but i'm following you
1:57:00
you are hosting me but i'm following you on you know facebook youtube and twitter
1:57:02
on you know facebook youtube and twitter
1:57:02
on you know facebook youtube and twitter and everything and i can see
1:57:04
and everything and i can see
1:57:04
and everything and i can see every week you are doing all this
1:57:06
every week you are doing all this
1:57:06
every week you are doing all this session and
1:57:07
session and
1:57:07
session and there is never been you know uh you are
1:57:10
there is never been you know uh you are
1:57:10
there is never been you know uh you are never been more excited every
1:57:12
never been more excited every
1:57:12
never been more excited every every conference which you have thanks
1:57:14
every conference which you have thanks
1:57:14
every conference which you have thanks again
1:57:15
again
1:57:15
again yeah thanks to you guys who do
1:57:17
yeah thanks to you guys who do
1:57:17
yeah thanks to you guys who do contribute so much to the community i
1:57:19
contribute so much to the community i
1:57:19
contribute so much to the community i really appreciate all that
1:57:20
really appreciate all that
1:57:20
really appreciate all that so that is that i really enjoyed hosting
1:57:22
so that is that i really enjoyed hosting
1:57:22
so that is that i really enjoyed hosting i would love to host you back whenever
1:57:23
i would love to host you back whenever
1:57:24
i would love to host you back whenever you're
1:57:24
you're
1:57:24
you're available and have a good time and your
1:57:26
available and have a good time and your
1:57:26
available and have a good time and your place out of india so once things get
1:57:28
place out of india so once things get
1:57:28
place out of india so once things get okay i would definitely like to meet you
1:57:30
okay i would definitely like to meet you
1:57:30
okay i would definitely like to meet you uh maybe delhi maybe maybe somewhere
1:57:32
uh maybe delhi maybe maybe somewhere
1:57:32
uh maybe delhi maybe maybe somewhere else so thank you sir
1:57:33
else so thank you sir
1:57:33
else so thank you sir have a nice weekend and yeah see you
1:57:36
have a nice weekend and yeah see you
1:57:36
have a nice weekend and yeah see you near this guy
1:57:38
near this guy
1:57:38
near this guy all right with that i know we are
1:57:39
all right with that i know we are
1:57:39
all right with that i know we are running seven minutes over time
1:57:41
running seven minutes over time
1:57:42
running seven minutes over time and i'm really excited for our next
1:57:43
and i'm really excited for our next
1:57:43
and i'm really excited for our next speakers because i am hosting him after
1:57:45
speakers because i am hosting him after
1:57:45
speakers because i am hosting him after almost one year
1:57:46
almost one year
1:57:46
almost one year and to be to be very very honest uh this
1:57:48
and to be to be very very honest uh this
1:57:48
and to be to be very very honest uh this person has
1:57:49
person has
1:57:49
person has has grown exponentially this person is
1:57:53
has grown exponentially this person is
1:57:53
has grown exponentially this person is everywhere
1:57:53
everywhere
1:57:54
everywhere this this person the first one i i
1:57:56
this this person the first one i i
1:57:56
this this person the first one i i actually came to know about twitter
1:57:58
actually came to know about twitter
1:57:58
actually came to know about twitter spaces
1:57:59
spaces
1:57:59
spaces uh from this person uh this person has
1:58:02
uh from this person uh this person has
1:58:02
uh from this person uh this person has actually hosted some amazing people like
1:58:04
actually hosted some amazing people like
1:58:04
actually hosted some amazing people like scott hanselman for him it's like
1:58:06
scott hanselman for him it's like
1:58:06
scott hanselman for him it's like just another day so what i'm actually
1:58:09
just another day so what i'm actually
1:58:09
just another day so what i'm actually i'm talking is
1:58:10
i'm talking is
1:58:10
i'm talking is that the that person is actually kobe uh
1:58:13
that the that person is actually kobe uh
1:58:13
that the that person is actually kobe uh he is an advocate and international
1:58:16
he is an advocate and international
1:58:16
he is an advocate and international speaker
1:58:17
speaker
1:58:17
speaker la civi who said it that session really
1:58:19
la civi who said it that session really
1:58:19
la civi who said it that session really blew up
1:58:20
blew up
1:58:20
blew up and i'm really excited to host him again
1:58:22
and i'm really excited to host him again
1:58:22
and i'm really excited to host him again so without any further ado
1:58:23
so without any further ado
1:58:23
so without any further ado let's invite kobe joining us all the way
1:58:25
let's invite kobe joining us all the way
1:58:25
let's invite kobe joining us all the way from philly
1:58:35
from philly
1:58:35
from philly [Music]
1:59:01
[Music]
1:59:02
[Music] hi kirby welcome to the react virtual
1:59:03
hi kirby welcome to the react virtual
1:59:03
hi kirby welcome to the react virtual conference hello thanks for having me
1:59:06
conference hello thanks for having me
1:59:06
conference hello thanks for having me that was a really nice introduction
1:59:08
that was a really nice introduction
1:59:08
that was a really nice introduction oh my goodness how have you been going
1:59:11
oh my goodness how have you been going
1:59:11
oh my goodness how have you been going uh how has your last you have been
1:59:13
uh how has your last you have been
1:59:13
uh how has your last you have been you haven't been great yeah i've been
1:59:15
you haven't been great yeah i've been
1:59:15
you haven't been great yeah i've been good it seems
1:59:16
good it seems
1:59:16
good it seems it's crazy that it has been a year
1:59:18
it's crazy that it has been a year
1:59:18
it's crazy that it has been a year already right it seems like it's even
1:59:20
already right it seems like it's even
1:59:20
already right it seems like it's even uh going by so fast how about yourself
1:59:22
uh going by so fast how about yourself
1:59:22
uh going by so fast how about yourself how have you been i'm
1:59:23
how have you been i'm
1:59:23
how have you been i'm doing great i got the first shot
1:59:25
doing great i got the first shot
1:59:25
doing great i got the first shot definitely looking forward for the
1:59:26
definitely looking forward for the
1:59:26
definitely looking forward for the second one things are getting okay in
1:59:28
second one things are getting okay in
1:59:28
second one things are getting okay in india
1:59:29
india
1:59:29
india we're not at 400 000 now it's only like
1:59:31
we're not at 400 000 now it's only like
1:59:31
we're not at 400 000 now it's only like 90 000 each day
1:59:32
90 000 each day
1:59:32
90 000 each day and we get happy about it so yeah that's
1:59:35
and we get happy about it so yeah that's
1:59:35
and we get happy about it so yeah that's good and by the way how's your new house
1:59:37
good and by the way how's your new house
1:59:37
good and by the way how's your new house congratulations for that actually
1:59:39
congratulations for that actually
1:59:39
congratulations for that actually thank you thank you i actually move in
1:59:40
thank you thank you i actually move in
1:59:40
thank you thank you i actually move in tomorrow so ask me again
1:59:42
tomorrow so ask me again
1:59:42
tomorrow so ask me again in a day or two sorry to bother you at
1:59:46
in a day or two sorry to bother you at
1:59:46
in a day or two sorry to bother you at this time
1:59:47
this time
1:59:47
this time no no no no i'm happy to join you all
1:59:50
no no no no i'm happy to join you all
1:59:50
no no no no i'm happy to join you all all right i won't take much of your time
1:59:52
all right i won't take much of your time
1:59:52
all right i won't take much of your time i know you're on
1:59:53
i know you're on
1:59:53
i know you're on 10 minutes in your session i'm gonna add
1:59:55
10 minutes in your session i'm gonna add
1:59:55
10 minutes in your session i'm gonna add your slide to the skin everybody can see
1:59:57
your slide to the skin everybody can see
1:59:57
your slide to the skin everybody can see a slice
1:59:57
a slice
1:59:58
a slice now and next 20 minutes is all yours
2:00:00
now and next 20 minutes is all yours
2:00:00
now and next 20 minutes is all yours awesome sounds great
2:00:01
awesome sounds great
2:00:01
awesome sounds great so hey everybody we're going to talk
2:00:03
so hey everybody we're going to talk
2:00:03
so hey everybody we're going to talk about wordpress and how we can scale it
2:00:05
about wordpress and how we can scale it
2:00:05
about wordpress and how we can scale it with next js
2:00:07
with next js
2:00:07
with next js so who am i i know we had that wonderful
2:00:09
so who am i i know we had that wonderful
2:00:09
so who am i i know we had that wonderful introduction but i'm
2:00:10
introduction but i'm
2:00:10
introduction but i'm the one hugging bb8 and kylo ren over
2:00:12
the one hugging bb8 and kylo ren over
2:00:12
the one hugging bb8 and kylo ren over there i'm colby fayok
2:00:14
there i'm colby fayok
2:00:14
there i'm colby fayok i work with the dev community as a
2:00:16
i work with the dev community as a
2:00:16
i work with the dev community as a developer advocate with apple tools
2:00:18
developer advocate with apple tools
2:00:18
developer advocate with apple tools you can find me pretty much anywhere on
2:00:20
you can find me pretty much anywhere on
2:00:20
you can find me pretty much anywhere on the web by just googling my name as i'm
2:00:21
the web by just googling my name as i'm
2:00:21
the web by just googling my name as i'm the only one in the world
2:00:23
the only one in the world
2:00:23
the only one in the world so let's start off by addressing the cms
2:00:26
so let's start off by addressing the cms
2:00:26
so let's start off by addressing the cms in the room
2:00:27
in the room
2:00:27
in the room it's 2021 and some developers would
2:00:29
it's 2021 and some developers would
2:00:29
it's 2021 and some developers would probably cringe at the thought of
2:00:31
probably cringe at the thought of
2:00:31
probably cringe at the thought of wordpress
2:00:32
wordpress
2:00:32
wordpress but frankly we're still living in a
2:00:33
but frankly we're still living in a
2:00:33
but frankly we're still living in a wordpress world
2:00:36
wordpress world
2:00:36
wordpress world according to build with trends if we
2:00:37
according to build with trends if we
2:00:38
according to build with trends if we look at the cms distribution of the top
2:00:40
look at the cms distribution of the top
2:00:40
look at the cms distribution of the top 1 million
2:00:41
1 million
2:00:41
1 million sites 40 of websites are using wordpress
2:00:44
sites 40 of websites are using wordpress
2:00:44
sites 40 of websites are using wordpress that's a huge percentage and i'm not
2:00:47
that's a huge percentage and i'm not
2:00:47
that's a huge percentage and i'm not quite sure how accurate this number is
2:00:49
quite sure how accurate this number is
2:00:49
quite sure how accurate this number is and how they derived it but if you look
2:00:51
and how they derived it but if you look
2:00:51
and how they derived it but if you look at the number of detections on the built
2:00:52
at the number of detections on the built
2:00:52
at the number of detections on the built builtless site it's over 800 million
2:00:55
builtless site it's over 800 million
2:00:55
builtless site it's over 800 million installs of wordpress that's an
2:00:57
installs of wordpress that's an
2:00:57
installs of wordpress that's an absolutely staggering number
2:01:00
absolutely staggering number
2:01:00
absolutely staggering number while we might not all want to use
2:01:01
while we might not all want to use
2:01:01
while we might not all want to use wordpress it's realistically around to
2:01:04
wordpress it's realistically around to
2:01:04
wordpress it's realistically around to stay for the foreseeable future
2:01:06
stay for the foreseeable future
2:01:06
stay for the foreseeable future so let's talk about how we can take
2:01:07
so let's talk about how we can take
2:01:07
so let's talk about how we can take advantage of the king cms in a headless
2:01:10
advantage of the king cms in a headless
2:01:10
advantage of the king cms in a headless way
2:01:10
way
2:01:10
way and use it to power our gm stack sites
2:01:12
and use it to power our gm stack sites
2:01:12
and use it to power our gm stack sites in 2021.
2:01:15
in 2021.
2:01:15
in 2021. so to start what does headless actually
2:01:17
so to start what does headless actually
2:01:17
so to start what does headless actually mean
2:01:18
mean
2:01:18
mean well with our traditional stack somebody
2:01:20
well with our traditional stack somebody
2:01:20
well with our traditional stack somebody visits a page in their browser
2:01:22
visits a page in their browser
2:01:22
visits a page in their browser the browser reaches out to the server
2:01:24
the browser reaches out to the server
2:01:24
the browser reaches out to the server the server will do the work like request
2:01:26
the server will do the work like request
2:01:26
the server will do the work like request data from the database
2:01:28
data from the database
2:01:28
data from the database then render that html for the page and
2:01:30
then render that html for the page and
2:01:30
then render that html for the page and return a response
2:01:31
return a response
2:01:31
return a response if we're lucky it'll return it cached
2:01:34
if we're lucky it'll return it cached
2:01:34
if we're lucky it'll return it cached and finally the browser displays that
2:01:35
and finally the browser displays that
2:01:36
and finally the browser displays that response to the person with a headless
2:01:39
response to the person with a headless
2:01:39
response to the person with a headless approach
2:01:39
approach
2:01:40
approach that request is to the server is
2:01:41
that request is to the server is
2:01:41
that request is to the server is asynchronous on the client typically
2:01:43
asynchronous on the client typically
2:01:43
asynchronous on the client typically in this particular example the person
2:01:46
in this particular example the person
2:01:46
in this particular example the person would visit a page in their browser
2:01:47
would visit a page in their browser
2:01:47
would visit a page in their browser and immediately get a response straight
2:01:49
and immediately get a response straight
2:01:49
and immediately get a response straight from storage like aws s3
2:01:52
from storage like aws s3
2:01:52
from storage like aws s3 once the page loads in the browser the
2:01:54
once the page loads in the browser the
2:01:54
once the page loads in the browser the browser will kick off another request to
2:01:55
browser will kick off another request to
2:01:55
browser will kick off another request to a server
2:01:56
a server
2:01:56
a server which can load in all the dynamic
2:01:58
which can load in all the dynamic
2:01:58
which can load in all the dynamic content
2:02:00
content
2:02:00
content but i would imagine you'd be wondering
2:02:02
but i would imagine you'd be wondering
2:02:02
but i would imagine you'd be wondering why would you want to make a client side
2:02:03
why would you want to make a client side
2:02:03
why would you want to make a client side request
2:02:04
request
2:02:04
request to a cms like wordpress and that's not
2:02:06
to a cms like wordpress and that's not
2:02:06
to a cms like wordpress and that's not necessarily the recommended approach
2:02:08
necessarily the recommended approach
2:02:08
necessarily the recommended approach that's where static site generators come
2:02:10
that's where static site generators come
2:02:10
that's where static site generators come in to do the hard lifting
2:02:11
in to do the hard lifting
2:02:11
in to do the hard lifting before your page even hits the browser
2:02:14
before your page even hits the browser
2:02:14
before your page even hits the browser which has given rise to what people now
2:02:16
which has given rise to what people now
2:02:16
which has given rise to what people now call the jam stack
2:02:18
call the jam stack
2:02:18
call the jam stack maybe you've heard of the jam stack on
2:02:20
maybe you've heard of the jam stack on
2:02:20
maybe you've heard of the jam stack on twitter or maybe it's completely new but
2:02:22
twitter or maybe it's completely new but
2:02:22
twitter or maybe it's completely new but what exactly is it
2:02:24
what exactly is it
2:02:24
what exactly is it at the core of it jamstack sites are
2:02:26
at the core of it jamstack sites are
2:02:26
at the core of it jamstack sites are static html websites
2:02:28
static html websites
2:02:28
static html websites this isn't a new idea but it's a modern
2:02:30
this isn't a new idea but it's a modern
2:02:30
this isn't a new idea but it's a modern approach
2:02:31
approach
2:02:31
approach typically they use javascript in the
2:02:33
typically they use javascript in the
2:02:33
typically they use javascript in the browser to make any requests to your
2:02:35
browser to make any requests to your
2:02:35
browser to make any requests to your apis that would provide
2:02:36
apis that would provide
2:02:36
apis that would provide dynamic data or they can use those apis
2:02:39
dynamic data or they can use those apis
2:02:39
dynamic data or they can use those apis at compile time
2:02:40
at compile time
2:02:40
at compile time and serve that dynamic content without
2:02:42
and serve that dynamic content without
2:02:42
and serve that dynamic content without an extra client-side request
2:02:45
an extra client-side request
2:02:45
an extra client-side request one example that we can imagine is
2:02:47
one example that we can imagine is
2:02:47
one example that we can imagine is building a react app this would serve as
2:02:49
building a react app this would serve as
2:02:49
building a react app this would serve as our javascript layer
2:02:50
our javascript layer
2:02:50
our javascript layer we would use the wordpress api to
2:02:52
we would use the wordpress api to
2:02:52
we would use the wordpress api to provide some content and dynamic data
2:02:55
provide some content and dynamic data
2:02:55
provide some content and dynamic data we would then compile that down to a
2:02:57
we would then compile that down to a
2:02:57
we would then compile that down to a static site using something like
2:02:58
static site using something like
2:02:58
static site using something like xjs which along with a ton of other
2:03:01
xjs which along with a ton of other
2:03:01
xjs which along with a ton of other features is also a static site generator
2:03:04
features is also a static site generator
2:03:04
features is also a static site generator now if this is all new to you that
2:03:06
now if this is all new to you that
2:03:06
now if this is all new to you that sounds like a lot of work
2:03:08
sounds like a lot of work
2:03:08
sounds like a lot of work why not just use wordpress out of the
2:03:09
why not just use wordpress out of the
2:03:09
why not just use wordpress out of the box like we always do
2:03:12
box like we always do
2:03:12
box like we always do well the great thing about the jam stack
2:03:14
well the great thing about the jam stack
2:03:14
well the great thing about the jam stack sites is they have a lot of compelling
2:03:16
sites is they have a lot of compelling
2:03:16
sites is they have a lot of compelling features built right in
2:03:17
features built right in
2:03:17
features built right in by default we're living up to what aws
2:03:20
by default we're living up to what aws
2:03:20
by default we're living up to what aws considers a well-architected
2:03:21
considers a well-architected
2:03:21
considers a well-architected infrastructure
2:03:23
infrastructure
2:03:23
infrastructure these are features that we all care
2:03:24
these are features that we all care
2:03:24
these are features that we all care about like performance reliability and
2:03:26
about like performance reliability and
2:03:26
about like performance reliability and cost
2:03:28
cost
2:03:28
cost with most server-based solutions like
2:03:31
with most server-based solutions like
2:03:31
with most server-based solutions like wordpress there are a lot of options to
2:03:32
wordpress there are a lot of options to
2:03:32
wordpress there are a lot of options to help speed things up
2:03:34
help speed things up
2:03:34
help speed things up for red wordpress specifically that
2:03:36
for red wordpress specifically that
2:03:36
for red wordpress specifically that includes things like plugins to cache or
2:03:38
includes things like plugins to cache or
2:03:38
includes things like plugins to cache or maybe even some custom work under the
2:03:39
maybe even some custom work under the
2:03:39
maybe even some custom work under the hood
2:03:40
hood
2:03:40
hood but each page is a server hit which is
2:03:42
but each page is a server hit which is
2:03:42
but each page is a server hit which is still prone to its ups and downs
2:03:45
still prone to its ups and downs
2:03:45
still prone to its ups and downs on the other hand serving a plain static
2:03:48
on the other hand serving a plain static
2:03:48
on the other hand serving a plain static html file
2:03:49
html file
2:03:49
html file is just going to be fast instead of
2:03:51
is just going to be fast instead of
2:03:51
is just going to be fast instead of spending that time
2:03:52
spending that time
2:03:52
spending that time rendering on the server you serve a
2:03:54
rendering on the server you serve a
2:03:54
rendering on the server you serve a static file straight from storage or
2:03:56
static file straight from storage or
2:03:56
static file straight from storage or from a cdn
2:03:57
from a cdn
2:03:57
from a cdn while you can do that with the default
2:03:59
while you can do that with the default
2:03:59
while you can do that with the default wordpress it's often much more
2:04:01
wordpress it's often much more
2:04:01
wordpress it's often much more complicated
2:04:02
complicated
2:04:02
complicated and some of the plugins that cache might
2:04:03
and some of the plugins that cache might
2:04:04
and some of the plugins that cache might serve an html file
2:04:05
serve an html file
2:04:05
serve an html file but they still serve it from a regular
2:04:07
but they still serve it from a regular
2:04:07
but they still serve it from a regular server not static storage
2:04:10
server not static storage
2:04:10
server not static storage with any server we're typically paying
2:04:12
with any server we're typically paying
2:04:12
with any server we're typically paying for how much we expect our traffic to be
2:04:14
for how much we expect our traffic to be
2:04:14
for how much we expect our traffic to be while most of the time that's pretty
2:04:16
while most of the time that's pretty
2:04:16
while most of the time that's pretty predictable we all hope
2:04:18
predictable we all hope
2:04:18
predictable we all hope but we all hope to one day have a post
2:04:19
but we all hope to one day have a post
2:04:19
but we all hope to one day have a post that goes viral right
2:04:21
that goes viral right
2:04:21
that goes viral right and if that happens the people visiting
2:04:23
and if that happens the people visiting
2:04:23
and if that happens the people visiting our site are the ones that are going to
2:04:24
our site are the ones that are going to
2:04:24
our site are the ones that are going to be paying for it with slow speeds or
2:04:26
be paying for it with slow speeds or
2:04:26
be paying for it with slow speeds or timeouts
2:04:27
timeouts
2:04:27
timeouts there's of course solutions like load
2:04:29
there's of course solutions like load
2:04:29
there's of course solutions like load balancing and auto
2:04:30
balancing and auto
2:04:30
balancing and auto auto scaling but those aren't perfect
2:04:32
auto scaling but those aren't perfect
2:04:32
auto scaling but those aren't perfect solutions and they might not always
2:04:34
solutions and they might not always
2:04:34
solutions and they might not always still handle
2:04:35
still handle
2:04:35
still handle a really big surge in traffic
2:04:38
a really big surge in traffic
2:04:38
a really big surge in traffic back to the fact that we're serving
2:04:39
back to the fact that we're serving
2:04:40
back to the fact that we're serving these static html files
2:04:42
these static html files
2:04:42
these static html files because we're serving straight from
2:04:43
because we're serving straight from
2:04:43
because we're serving straight from storage or better yet serving them
2:04:45
storage or better yet serving them
2:04:45
storage or better yet serving them directly from a cdn
2:04:47
directly from a cdn
2:04:47
directly from a cdn buzzword alert that means that our using
2:04:49
buzzword alert that means that our using
2:04:50
buzzword alert that means that our using user facing website is going to
2:04:51
user facing website is going to
2:04:51
user facing website is going to infinitely scale that static site will
2:04:55
infinitely scale that static site will
2:04:55
infinitely scale that static site will survive the reddit hug of death when
2:04:57
survive the reddit hug of death when
2:04:57
survive the reddit hug of death when your post goes viral
2:05:00
managing servers isn't always cheap
2:05:02
managing servers isn't always cheap
2:05:02
managing servers isn't always cheap while a low traffic personal blog can
2:05:04
while a low traffic personal blog can
2:05:04
while a low traffic personal blog can manage a few dollars a month
2:05:06
manage a few dollars a month
2:05:06
manage a few dollars a month the more that traffic grows the more
2:05:08
the more that traffic grows the more
2:05:08
the more that traffic grows the more that the cost is going to quickly grow
2:05:10
that the cost is going to quickly grow
2:05:10
that the cost is going to quickly grow while you have those options like load
2:05:11
while you have those options like load
2:05:11
while you have those options like load balancing and auto scaling
2:05:13
balancing and auto scaling
2:05:13
balancing and auto scaling those services also quickly add up and
2:05:15
those services also quickly add up and
2:05:15
those services also quickly add up and without it you risk your site slowing
2:05:17
without it you risk your site slowing
2:05:17
without it you risk your site slowing down or worse
2:05:18
down or worse
2:05:18
down or worse downtime but storage is cheap it's
2:05:22
downtime but storage is cheap it's
2:05:22
downtime but storage is cheap it's really cheap
2:05:23
really cheap
2:05:23
really cheap we can manage maintain huge static
2:05:25
we can manage maintain huge static
2:05:25
we can manage maintain huge static projects on aws
2:05:26
projects on aws
2:05:26
projects on aws using s3 for a really low cost but even
2:05:29
using s3 for a really low cost but even
2:05:29
using s3 for a really low cost but even with the
2:05:30
with the
2:05:30
with the if we still manage server the usage is
2:05:32
if we still manage server the usage is
2:05:32
if we still manage server the usage is going to be much much lower
2:05:33
going to be much much lower
2:05:34
going to be much much lower with only content managers or requests
2:05:35
with only content managers or requests
2:05:35
with only content managers or requests at compile time
2:05:38
at compile time
2:05:38
at compile time while there are a ton of headless
2:05:39
while there are a ton of headless
2:05:39
while there are a ton of headless options available in a headless word
2:05:41
options available in a headless word
2:05:41
options available in a headless word world wordpress is still has a lot of
2:05:44
world wordpress is still has a lot of
2:05:44
world wordpress is still has a lot of features that makes it really compelling
2:05:45
features that makes it really compelling
2:05:45
features that makes it really compelling to use
2:05:47
to use
2:05:47
to use one issue with a lot of the recent
2:05:49
one issue with a lot of the recent
2:05:49
one issue with a lot of the recent solutions is they seem to be developer
2:05:51
solutions is they seem to be developer
2:05:51
solutions is they seem to be developer focused
2:05:51
focused
2:05:52
focused and that's not necessarily a bad thing
2:05:53
and that's not necessarily a bad thing
2:05:53
and that's not necessarily a bad thing but you have to know your audience
2:05:55
but you have to know your audience
2:05:55
but you have to know your audience if the ultimate goal is for that cms to
2:05:57
if the ultimate goal is for that cms to
2:05:57
if the ultimate goal is for that cms to be used by people who are non-technical
2:06:00
be used by people who are non-technical
2:06:00
be used by people who are non-technical you're providing an experience that
2:06:01
you're providing an experience that
2:06:01
you're providing an experience that people might struggle to learn and use
2:06:04
people might struggle to learn and use
2:06:04
people might struggle to learn and use wordpress is the most used cms in the
2:06:06
wordpress is the most used cms in the
2:06:06
wordpress is the most used cms in the industry
2:06:07
industry
2:06:07
industry that means that most of our clients are
2:06:09
that means that most of our clients are
2:06:09
that means that most of our clients are probably already going to be familiar
2:06:11
probably already going to be familiar
2:06:11
probably already going to be familiar with wordpress
2:06:13
with wordpress
2:06:13
with wordpress and there's also a huge ecosystem
2:06:15
and there's also a huge ecosystem
2:06:15
and there's also a huge ecosystem already thriving around wordpress
2:06:17
already thriving around wordpress
2:06:17
already thriving around wordpress if you run into an issue you're more
2:06:19
if you run into an issue you're more
2:06:19
if you run into an issue you're more than likely able to find someone who
2:06:20
than likely able to find someone who
2:06:20
than likely able to find someone who already ran into that issue with a quick
2:06:22
already ran into that issue with a quick
2:06:22
already ran into that issue with a quick google search
2:06:23
google search
2:06:23
google search we can also take advantage of a lot of
2:06:25
we can also take advantage of a lot of
2:06:25
we can also take advantage of a lot of the community solutions that extend
2:06:27
the community solutions that extend
2:06:27
the community solutions that extend wordpress
2:06:29
wordpress
2:06:29
wordpress all right so if wordpress is so great
2:06:31
all right so if wordpress is so great
2:06:31
all right so if wordpress is so great let's see what it actually looks like
2:06:34
let's see what it actually looks like
2:06:34
let's see what it actually looks like well since 4.7 wordpress by default now
2:06:37
well since 4.7 wordpress by default now
2:06:37
well since 4.7 wordpress by default now supports a rest api
2:06:39
supports a rest api
2:06:39
supports a rest api this means right out of the box
2:06:41
this means right out of the box
2:06:41
this means right out of the box wordpress is actually available as a
2:06:42
wordpress is actually available as a
2:06:42
wordpress is actually available as a headless api
2:06:45
headless api
2:06:45
headless api but taking that a step further thanks to
2:06:47
but taking that a step further thanks to
2:06:47
but taking that a step further thanks to jason ball who created
2:06:48
jason ball who created
2:06:48
jason ball who created wp graphql which is a plugin that we can
2:06:51
wp graphql which is a plugin that we can
2:06:51
wp graphql which is a plugin that we can add right inside of our dashboard
2:06:53
add right inside of our dashboard
2:06:53
add right inside of our dashboard we also have the ability to query our
2:06:55
we also have the ability to query our
2:06:55
we also have the ability to query our wordpress data with graphql
2:06:58
wordpress data with graphql
2:06:58
wordpress data with graphql so coming full circle we can take
2:07:00
so coming full circle we can take
2:07:00
so coming full circle we can take advantage of this approach where we
2:07:01
advantage of this approach where we
2:07:01
advantage of this approach where we leverage the apis at compile time
2:07:04
leverage the apis at compile time
2:07:04
leverage the apis at compile time to produce static websites rather than
2:07:06
to produce static websites rather than
2:07:06
to produce static websites rather than waiting for a server request
2:07:08
waiting for a server request
2:07:08
waiting for a server request we'll have our entire wordpress site
2:07:10
we'll have our entire wordpress site
2:07:10
we'll have our entire wordpress site available as html documents
2:07:13
available as html documents
2:07:13
available as html documents and i've done just that with nextjs
2:07:15
and i've done just that with nextjs
2:07:15
and i've done just that with nextjs which i've created a next.js wordpress
2:07:17
which i've created a next.js wordpress
2:07:17
which i've created a next.js wordpress starter
2:07:18
starter
2:07:18
starter which lets anyone sped up a new static
2:07:20
which lets anyone sped up a new static
2:07:20
which lets anyone sped up a new static wordpress site with react
2:07:22
wordpress site with react
2:07:22
wordpress site with react framework nexjs super easily
2:07:25
framework nexjs super easily
2:07:25
framework nexjs super easily i've set this up so that on our home
2:07:26
i've set this up so that on our home
2:07:26
i've set this up so that on our home page when we're compiling the site
2:07:29
page when we're compiling the site
2:07:29
page when we're compiling the site we're first going to reach out to get
2:07:30
we're first going to reach out to get
2:07:30
we're first going to reach out to get the first set of posts like we commonly
2:07:32
the first set of posts like we commonly
2:07:32
the first set of posts like we commonly would see on a wordpress blog site
2:07:34
would see on a wordpress blog site
2:07:34
would see on a wordpress blog site those are passed as props to the page
2:07:36
those are passed as props to the page
2:07:36
those are passed as props to the page that's built out react which i can then
2:07:38
that's built out react which i can then
2:07:38
that's built out react which i can then use to create a ui just like i would
2:07:40
use to create a ui just like i would
2:07:40
use to create a ui just like i would with any other react app
2:07:42
with any other react app
2:07:42
with any other react app because next gs won't know the routes
2:07:44
because next gs won't know the routes
2:07:44
because next gs won't know the routes ahead of time
2:07:45
ahead of time
2:07:45
ahead of time i need to actually use dynamic routes so
2:07:47
i need to actually use dynamic routes so
2:07:47
i need to actually use dynamic routes so we need to figure out all those pages
2:07:49
we need to figure out all those pages
2:07:49
we need to figure out all those pages that it actually needs to create
2:07:51
that it actually needs to create
2:07:51
that it actually needs to create so we grab all the posts and we create
2:07:53
so we grab all the posts and we create
2:07:53
so we grab all the posts and we create new paths and we're telling next to
2:07:55
new paths and we're telling next to
2:07:55
new paths and we're telling next to create a new page for every single one
2:07:58
create a new page for every single one
2:07:58
create a new page for every single one i also wanted to include client-side
2:08:00
i also wanted to include client-side
2:08:00
i also wanted to include client-side search for the project
2:08:01
search for the project
2:08:01
search for the project the wordpress rest api provides search
2:08:03
the wordpress rest api provides search
2:08:03
the wordpress rest api provides search capabilities
2:08:04
capabilities
2:08:04
capabilities but then we're going to still hit the
2:08:06
but then we're going to still hit the
2:08:06
but then we're going to still hit the server to do that and since next.js is
2:08:08
server to do that and since next.js is
2:08:08
server to do that and since next.js is built on top of webpack
2:08:10
built on top of webpack
2:08:10
built on top of webpack i was able to create a webpack compiler
2:08:12
i was able to create a webpack compiler
2:08:12
i was able to create a webpack compiler that fetched all the posts at compile
2:08:14
that fetched all the posts at compile
2:08:14
that fetched all the posts at compile time
2:08:14
time
2:08:14
time it would then create a search index with
2:08:16
it would then create a search index with
2:08:16
it would then create a search index with the titles and the paths and some
2:08:18
the titles and the paths and some
2:08:18
the titles and the paths and some metadata in a static file
2:08:20
metadata in a static file
2:08:20
metadata in a static file it then loads that into memory or even
2:08:22
it then loads that into memory or even
2:08:22
it then loads that into memory or even asynchronously on the client
2:08:24
asynchronously on the client
2:08:24
asynchronously on the client and then it makes the searches right to
2:08:25
and then it makes the searches right to
2:08:25
and then it makes the searches right to that index
2:08:27
that index
2:08:28
that index and with all that i was able to get
2:08:30
and with all that i was able to get
2:08:30
and with all that i was able to get together a wordpress site
2:08:31
together a wordpress site
2:08:31
together a wordpress site statically compiled with nexjs
2:08:35
statically compiled with nexjs
2:08:35
statically compiled with nexjs the cool thing is we can couple this
2:08:36
the cool thing is we can couple this
2:08:36
the cool thing is we can couple this with wordpress plugins like
2:08:38
with wordpress plugins like
2:08:38
with wordpress plugins like yoast and acf where we can give a lot of
2:08:40
yoast and acf where we can give a lot of
2:08:40
yoast and acf where we can give a lot of flexibility for managing our content
2:08:43
flexibility for managing our content
2:08:43
flexibility for managing our content these work out of the box with next.js
2:08:44
these work out of the box with next.js
2:08:44
these work out of the box with next.js wordpress starter
2:08:47
wordpress starter
2:08:47
wordpress starter so i know all of you don't want to just
2:08:48
so i know all of you don't want to just
2:08:48
so i know all of you don't want to just see some screenshots of some code
2:08:50
see some screenshots of some code
2:08:50
see some screenshots of some code so let's do a quick walkthrough so
2:08:52
so let's do a quick walkthrough so
2:08:52
so let's do a quick walkthrough so here's what i'm going to go through
2:08:54
here's what i'm going to go through
2:08:54
here's what i'm going to go through i'm going to first show you how easy it
2:08:56
i'm going to first show you how easy it
2:08:56
i'm going to first show you how easy it is
2:08:57
is
2:08:57
is to spin up a new site with the nexus
2:09:00
to spin up a new site with the nexus
2:09:00
to spin up a new site with the nexus starter
2:09:01
starter
2:09:01
starter but that project is probably too much
2:09:02
but that project is probably too much
2:09:02
but that project is probably too much code to walk through today
2:09:04
code to walk through today
2:09:04
code to walk through today so i'm going to spin up a second next.js
2:09:06
so i'm going to spin up a second next.js
2:09:06
so i'm going to spin up a second next.js site and i'm going to walk you through
2:09:08
site and i'm going to walk you through
2:09:08
site and i'm going to walk you through how that works from a simpler
2:09:09
how that works from a simpler
2:09:09
how that works from a simpler perspective
2:09:11
perspective
2:09:11
perspective all right so grab your popcorn here's
2:09:13
all right so grab your popcorn here's
2:09:13
all right so grab your popcorn here's let's get ready for the demo
2:09:14
let's get ready for the demo
2:09:14
let's get ready for the demo so i'm going to share my screen
2:09:24
all right so
2:09:27
all right so
2:09:27
all right so i'm going to start off with a pretty
2:09:29
i'm going to start off with a pretty
2:09:29
i'm going to start off with a pretty basic wordpress site
2:09:31
basic wordpress site
2:09:31
basic wordpress site we can see here i'm inside wp engine
2:09:33
we can see here i'm inside wp engine
2:09:34
we can see here i'm inside wp engine where i have my wordpress site pulled up
2:09:36
where i have my wordpress site pulled up
2:09:36
where i have my wordpress site pulled up and just to prove that it's a pretty
2:09:39
and just to prove that it's a pretty
2:09:39
and just to prove that it's a pretty simple default installation
2:09:40
simple default installation
2:09:40
simple default installation we can see here that under my posts i
2:09:43
we can see here that under my posts i
2:09:43
we can see here that under my posts i have some post data
2:09:44
have some post data
2:09:44
have some post data what i did was i used fillerama.io to
2:09:46
what i did was i used fillerama.io to
2:09:46
what i did was i used fillerama.io to fill in some content
2:09:48
fill in some content
2:09:48
fill in some content it's nothing actually meaningful it's
2:09:50
it's nothing actually meaningful it's
2:09:50
it's nothing actually meaningful it's just episode data from
2:09:52
just episode data from
2:09:52
just episode data from futurama if you're familiar but if we go
2:09:55
futurama if you're familiar but if we go
2:09:55
futurama if you're familiar but if we go into things like the pages we can see
2:09:56
into things like the pages we can see
2:09:56
into things like the pages we can see the same thing
2:09:57
the same thing
2:09:57
the same thing i haven't about us or about and contact
2:09:59
i haven't about us or about and contact
2:09:59
i haven't about us or about and contact us page and if we go to plugins
2:10:02
us page and if we go to plugins
2:10:02
us page and if we go to plugins we can see that the only thing that i
2:10:04
we can see that the only thing that i
2:10:04
we can see that the only thing that i did here and i actually should have
2:10:05
did here and i actually should have
2:10:05
did here and i actually should have deactivated this before the demo
2:10:07
deactivated this before the demo
2:10:07
deactivated this before the demo but we can see that we have these
2:10:09
but we can see that we have these
2:10:09
but we can see that we have these plugins for
2:10:11
plugins for
2:10:11
plugins for a couple things we have advanced custom
2:10:13
a couple things we have advanced custom
2:10:13
a couple things we have advanced custom fields which i'll show you later
2:10:14
fields which i'll show you later
2:10:14
fields which i'll show you later but we have wp graphql which is
2:10:17
but we have wp graphql which is
2:10:17
but we have wp graphql which is primarily what we're going to be looking
2:10:18
primarily what we're going to be looking
2:10:18
primarily what we're going to be looking at today
2:10:19
at today
2:10:19
at today so once we have that installed the way
2:10:21
so once we have that installed the way
2:10:21
so once we have that installed the way we can install it in the first place is
2:10:23
we can install it in the first place is
2:10:23
we can install it in the first place is going up to our add new
2:10:25
going up to our add new
2:10:25
going up to our add new where if we go over to search plugins we
2:10:27
where if we go over to search plugins we
2:10:27
where if we go over to search plugins we can search for wpgraphql
2:10:30
can search for wpgraphql
2:10:30
can search for wpgraphql oops i don't know why it keeps hitting
2:10:33
oops i don't know why it keeps hitting
2:10:33
oops i don't know why it keeps hitting enter for me
2:10:36
there we go so we can see that i already
2:10:37
there we go so we can see that i already
2:10:37
there we go so we can see that i already have this active but this is the wbp
2:10:40
have this active but this is the wbp
2:10:40
have this active but this is the wbp graphql plugin that you can install
2:10:42
graphql plugin that you can install
2:10:42
graphql plugin that you can install right inside of the wordpress dashboard
2:10:44
right inside of the wordpress dashboard
2:10:44
right inside of the wordpress dashboard but what that does is it gives us this
2:10:46
but what that does is it gives us this
2:10:46
but what that does is it gives us this new graphql tab
2:10:47
new graphql tab
2:10:47
new graphql tab and if i go inside of this graphical ide
2:10:49
and if i go inside of this graphical ide
2:10:50
and if i go inside of this graphical ide which if you're familiar with something
2:10:51
which if you're familiar with something
2:10:51
which if you're familiar with something like gatsby you might have already used
2:10:53
like gatsby you might have already used
2:10:53
like gatsby you might have already used the graphical ide
2:10:54
the graphical ide
2:10:54
the graphical ide which simply put is a really nice and
2:10:56
which simply put is a really nice and
2:10:56
which simply put is a really nice and easy way
2:10:57
easy way
2:10:57
easy way to query all of our data inside of
2:10:59
to query all of our data inside of
2:10:59
to query all of our data inside of wordpress so instead of hitting that
2:11:01
wordpress so instead of hitting that
2:11:01
wordpress so instead of hitting that rest api
2:11:02
rest api
2:11:02
rest api now what we can do is we can come over
2:11:04
now what we can do is we can come over
2:11:04
now what we can do is we can come over to this explorer tab and we can see that
2:11:05
to this explorer tab and we can see that
2:11:06
to this explorer tab and we can see that if i go through here with the posts
2:11:08
if i go through here with the posts
2:11:08
if i go through here with the posts and the edges and the node which this is
2:11:10
and the edges and the node which this is
2:11:10
and the edges and the node which this is referring to each of the different
2:11:11
referring to each of the different
2:11:11
referring to each of the different basically an array of the data inside of
2:11:13
basically an array of the data inside of
2:11:13
basically an array of the data inside of my wordpress database
2:11:14
my wordpress database
2:11:14
my wordpress database but we can see if i go down here i can
2:11:16
but we can see if i go down here i can
2:11:16
but we can see if i go down here i can select things like
2:11:18
select things like
2:11:18
select things like let me get rid of that since i already
2:11:19
let me get rid of that since i already
2:11:19
let me get rid of that since i already have it but we can select things like my
2:11:21
have it but we can select things like my
2:11:21
have it but we can select things like my title
2:11:22
title
2:11:22
title and we have my uri which let's click
2:11:24
and we have my uri which let's click
2:11:24
and we have my uri which let's click play
2:11:25
play
2:11:25
play we can see immediately this is going to
2:11:27
we can see immediately this is going to
2:11:27
we can see immediately this is going to return back all those post titles
2:11:29
return back all those post titles
2:11:29
return back all those post titles it's going to return our uri and let's
2:11:31
it's going to return our uri and let's
2:11:31
it's going to return our uri and let's see what else do we want to add we
2:11:33
see what else do we want to add we
2:11:33
see what else do we want to add we probably want like our expert
2:11:35
probably want like our expert
2:11:35
probably want like our expert excerpt to show on the home page and
2:11:37
excerpt to show on the home page and
2:11:37
excerpt to show on the home page and even our content
2:11:38
even our content
2:11:38
even our content and again since we just added that right
2:11:41
and again since we just added that right
2:11:41
and again since we just added that right on the side here
2:11:41
on the side here
2:11:42
on the side here we get all of that content immediately
2:11:43
we get all of that content immediately
2:11:43
we get all of that content immediately in those simple graphql queries
2:11:46
in those simple graphql queries
2:11:46
in those simple graphql queries so let's see what this looks like in
2:11:47
so let's see what this looks like in
2:11:47
so let's see what this looks like in practice i'm going to use my next.js
2:11:50
practice i'm going to use my next.js
2:11:50
practice i'm going to use my next.js wordpress starter
2:11:51
wordpress starter
2:11:51
wordpress starter so let me bring this up a little bit but
2:11:53
so let me bring this up a little bit but
2:11:53
so let me bring this up a little bit but it's going to do
2:11:55
it's going to do
2:11:55
it's going to do is we're going to go through and if
2:11:56
is we're going to go through and if
2:11:56
is we're going to go through and if you're not familiar with a next.js
2:11:58
you're not familiar with a next.js
2:11:58
you're not familiar with a next.js starter or a gatsby starter
2:12:00
starter or a gatsby starter
2:12:00
starter or a gatsby starter we're going to run this simple command
2:12:02
we're going to run this simple command
2:12:02
we're going to run this simple command and it's going to basically clone down
2:12:04
and it's going to basically clone down
2:12:04
and it's going to basically clone down this website as a template
2:12:06
this website as a template
2:12:06
this website as a template and then we can see here all we need to
2:12:07
and then we can see here all we need to
2:12:07
and then we can see here all we need to do after that is add this one
2:12:09
do after that is add this one
2:12:09
do after that is add this one environment file which is going to set
2:12:10
environment file which is going to set
2:12:10
environment file which is going to set up the endpoint for us
2:12:12
up the endpoint for us
2:12:12
up the endpoint for us so i'm going to do just that i'm going
2:12:14
so i'm going to do just that i'm going
2:12:14
so i'm going to do just that i'm going to open up my terminal
2:12:16
to open up my terminal
2:12:16
to open up my terminal i'm going to copy in this command and
2:12:19
i'm going to copy in this command and
2:12:19
i'm going to copy in this command and let's see let's oops it's already
2:12:20
let's see let's oops it's already
2:12:20
let's see let's oops it's already running but typically i would put the
2:12:22
running but typically i would put the
2:12:22
running but typically i would put the folder name after that but it's going to
2:12:23
folder name after that but it's going to
2:12:23
folder name after that but it's going to give an option for us anyways
2:12:25
give an option for us anyways
2:12:25
give an option for us anyways so what it's doing now is it's grabbing
2:12:27
so what it's doing now is it's grabbing
2:12:27
so what it's doing now is it's grabbing all those dependencies so it can
2:12:28
all those dependencies so it can
2:12:28
all those dependencies so it can actually find that starter with an xjs
2:12:30
actually find that starter with an xjs
2:12:30
actually find that starter with an xjs and let's call it my wp
2:12:34
and let's call it my wp
2:12:34
and let's call it my wp x js that sounds good right so what
2:12:37
x js that sounds good right so what
2:12:37
x js that sounds good right so what that's going to do is it's going to
2:12:38
that's going to do is it's going to
2:12:38
that's going to do is it's going to clone down that
2:12:39
clone down that
2:12:39
clone down that template file like i was talking about
2:12:42
template file like i was talking about
2:12:42
template file like i was talking about but it's also going to install all the
2:12:43
but it's also going to install all the
2:12:43
but it's also going to install all the dependencies since that's part of the
2:12:45
dependencies since that's part of the
2:12:45
dependencies since that's part of the next.js starter script
2:12:46
next.js starter script
2:12:46
next.js starter script or the example script in the next js
2:12:49
or the example script in the next js
2:12:49
or the example script in the next js world so now that that's installed let's
2:12:51
world so now that that's installed let's
2:12:51
world so now that that's installed let's cd
2:12:51
cd
2:12:51
cd into my wp next.js i'm going to open
2:12:54
into my wp next.js i'm going to open
2:12:54
into my wp next.js i'm going to open that up in my code editor
2:12:58
so before we actually run this in the
2:13:00
so before we actually run this in the
2:13:00
so before we actually run this in the browser let's actually poke around a
2:13:01
browser let's actually poke around a
2:13:01
browser let's actually poke around a little bit and see what's inside
2:13:03
little bit and see what's inside
2:13:03
little bit and see what's inside so if you're familiar with nexus yes it
2:13:05
so if you're familiar with nexus yes it
2:13:05
so if you're familiar with nexus yes it uses file system based routing
2:13:07
uses file system based routing
2:13:07
uses file system based routing so we can see that i already have all
2:13:08
so we can see that i already have all
2:13:08
so we can see that i already have all these pages in here
2:13:10
these pages in here
2:13:10
these pages in here that you might typically expect from a
2:13:11
that you might typically expect from a
2:13:11
that you might typically expect from a wordpress site where the index is going
2:13:13
wordpress site where the index is going
2:13:13
wordpress site where the index is going to be your home page
2:13:14
to be your home page
2:13:14
to be your home page we even have our post list page and we
2:13:17
we even have our post list page and we
2:13:17
we even have our post list page and we have a search page
2:13:18
have a search page
2:13:18
have a search page but again the next gs wordpress starter
2:13:20
but again the next gs wordpress starter
2:13:20
but again the next gs wordpress starter as is is probably a little bit too dense
2:13:23
as is is probably a little bit too dense
2:13:23
as is is probably a little bit too dense to take
2:13:23
to take
2:13:23
to take uh into account for this particular demo
2:13:26
uh into account for this particular demo
2:13:26
uh into account for this particular demo but you it's totally open source on
2:13:29
but you it's totally open source on
2:13:29
but you it's totally open source on github if you want to take a look
2:13:31
github if you want to take a look
2:13:31
github if you want to take a look but what we can do is we can add that
2:13:33
but what we can do is we can add that
2:13:33
but what we can do is we can add that dot env
2:13:34
dot env
2:13:34
dot env dot local file and let me grab that
2:13:36
dot local file and let me grab that
2:13:36
dot local file and let me grab that snippet from the starter page
2:13:38
snippet from the starter page
2:13:38
snippet from the starter page where all we need to do is insert this
2:13:41
where all we need to do is insert this
2:13:41
where all we need to do is insert this wordpress graphql endpoint
2:13:43
wordpress graphql endpoint
2:13:43
wordpress graphql endpoint and back on my actual wordpress site if
2:13:45
and back on my actual wordpress site if
2:13:45
and back on my actual wordpress site if i grab
2:13:46
i grab
2:13:46
i grab this domain this host from the front
2:13:48
this domain this host from the front
2:13:48
this domain this host from the front because this is where i'm currently
2:13:49
because this is where i'm currently
2:13:50
because this is where i'm currently serving my
2:13:51
serving my
2:13:51
serving my website from but what it will do is
2:13:54
website from but what it will do is
2:13:54
website from but what it will do is by default wp graphql will make the
2:13:57
by default wp graphql will make the
2:13:57
by default wp graphql will make the slash graphql
2:13:58
slash graphql
2:13:58
slash graphql endpoint available to query all your
2:14:00
endpoint available to query all your
2:14:00
endpoint available to query all your graphql data let me make this https
2:14:03
graphql data let me make this https
2:14:03
graphql data let me make this https so now i have my configuration set up
2:14:05
so now i have my configuration set up
2:14:05
so now i have my configuration set up that's all i needed to do so let's see
2:14:07
that's all i needed to do so let's see
2:14:07
that's all i needed to do so let's see what happens
2:14:08
what happens
2:14:08
what happens when i run yarndev which is the starting
2:14:11
when i run yarndev which is the starting
2:14:11
when i run yarndev which is the starting up a development server with an xjs
2:14:13
up a development server with an xjs
2:14:13
up a development server with an xjs i'm going to open this up inside of my
2:14:14
i'm going to open this up inside of my
2:14:14
i'm going to open this up inside of my browser i could probably just go to it
2:14:16
browser i could probably just go to it
2:14:16
browser i could probably just go to it here
2:14:18
here
2:14:18
here and typical with next i guess it's going
2:14:20
and typical with next i guess it's going
2:14:20
and typical with next i guess it's going to take a little bit of time to actually
2:14:22
to take a little bit of time to actually
2:14:22
to take a little bit of time to actually compile that first uh that first site
2:14:25
compile that first uh that first site
2:14:25
compile that first uh that first site and it's going to make all those
2:14:26
and it's going to make all those
2:14:26
and it's going to make all those requests to get it from wordpress but we
2:14:28
requests to get it from wordpress but we
2:14:28
requests to get it from wordpress but we can already see
2:14:29
can already see
2:14:29
can already see that it's doing just that and we're also
2:14:31
that it's doing just that and we're also
2:14:31
that it's doing just that and we're also seeing some extra files in there
2:14:32
seeing some extra files in there
2:14:32
seeing some extra files in there one of the cool things about the starter
2:14:34
one of the cool things about the starter
2:14:34
one of the cool things about the starter is in addition to the site itself we're
2:14:37
is in addition to the site itself we're
2:14:37
is in addition to the site itself we're also creating things like
2:14:38
also creating things like
2:14:38
also creating things like open graph images while they're simple
2:14:40
open graph images while they're simple
2:14:40
open graph images while they're simple it's just a better way to show up on
2:14:42
it's just a better way to show up on
2:14:42
it's just a better way to show up on your social feeds
2:14:43
your social feeds
2:14:43
your social feeds but we're also creating that search
2:14:45
but we're also creating that search
2:14:45
but we're also creating that search index and we're also creating
2:14:46
index and we're also creating
2:14:46
index and we're also creating an rss feed and a site map because those
2:14:49
an rss feed and a site map because those
2:14:49
an rss feed and a site map because those are all things that we want to make sure
2:14:50
are all things that we want to make sure
2:14:50
are all things that we want to make sure that we have
2:14:51
that we have
2:14:51
that we have inside of our blogs so now we can see
2:14:53
inside of our blogs so now we can see
2:14:53
inside of our blogs so now we can see that
2:14:54
that
2:14:54
that my new nexus starter was already set up
2:14:57
my new nexus starter was already set up
2:14:57
my new nexus starter was already set up and we're going down through these pages
2:14:59
and we're going down through these pages
2:14:59
and we're going down through these pages and we can see that that's exactly what
2:15:01
and we can see that that's exactly what
2:15:01
and we can see that that's exactly what we were seeing inside of our wordpress
2:15:03
we were seeing inside of our wordpress
2:15:03
we were seeing inside of our wordpress admin
2:15:03
admin
2:15:03
admin it's a bunch of these uh the blog posts
2:15:06
it's a bunch of these uh the blog posts
2:15:06
it's a bunch of these uh the blog posts and if we click through
2:15:11
again it'll take a second to load
2:15:12
again it'll take a second to load
2:15:12
again it'll take a second to load because it's making those requests
2:15:14
because it's making those requests
2:15:14
because it's making those requests while it primes the cache but now we can
2:15:16
while it primes the cache but now we can
2:15:16
while it primes the cache but now we can see that we even have that post page and
2:15:18
see that we even have that post page and
2:15:18
see that we even have that post page and it's being dynamically created
2:15:20
it's being dynamically created
2:15:20
it's being dynamically created based off of all that data that we have
2:15:22
based off of all that data that we have
2:15:22
based off of all that data that we have inside a wordpress
2:15:23
inside a wordpress
2:15:23
inside a wordpress now we also have like our pages where
2:15:25
now we also have like our pages where
2:15:26
now we also have like our pages where that's going to automatically be
2:15:27
that's going to automatically be
2:15:27
that's going to automatically be up at the top we can even configure that
2:15:29
up at the top we can even configure that
2:15:29
up at the top we can even configure that if we want with a wordpress menu if
2:15:31
if we want with a wordpress menu if
2:15:31
if we want with a wordpress menu if you're familiar with the concept
2:15:33
you're familiar with the concept
2:15:33
you're familiar with the concept so it's easier to manage inside the
2:15:34
so it's easier to manage inside the
2:15:34
so it's easier to manage inside the dashboard without having to make any
2:15:36
dashboard without having to make any
2:15:36
dashboard without having to make any hard-coded changes
2:15:37
hard-coded changes
2:15:37
hard-coded changes but we also have the cabil the
2:15:39
but we also have the cabil the
2:15:39
but we also have the cabil the capability of making the searches
2:15:41
capability of making the searches
2:15:41
capability of making the searches just like we were talking to that search
2:15:43
just like we were talking to that search
2:15:43
just like we were talking to that search index so the search is going to be
2:15:45
index so the search is going to be
2:15:45
index so the search is going to be super fast which is pretty awesome
2:15:48
super fast which is pretty awesome
2:15:48
super fast which is pretty awesome considering that it's querying all that
2:15:50
considering that it's querying all that
2:15:50
considering that it's querying all that wordpress data from your pages
2:15:52
wordpress data from your pages
2:15:52
wordpress data from your pages but again while this is really cool in
2:15:55
but again while this is really cool in
2:15:55
but again while this is really cool in my opinion
2:15:56
my opinion
2:15:56
my opinion it has a lot of features it's just
2:15:57
it has a lot of features it's just
2:15:57
it has a lot of features it's just probably a little bit too much to dive
2:15:59
probably a little bit too much to dive
2:15:59
probably a little bit too much to dive into
2:16:00
into
2:16:00
into for this particular talk from a
2:16:01
for this particular talk from a
2:16:01
for this particular talk from a technical perspective so let's spin up
2:16:03
technical perspective so let's spin up
2:16:03
technical perspective so let's spin up our second
2:16:04
our second
2:16:04
our second sorry hopefully that didn't make sense
2:16:05
sorry hopefully that didn't make sense
2:16:05
sorry hopefully that didn't make sense let's spin up our seconds
2:16:07
let's spin up our seconds
2:16:07
let's spin up our seconds wordpress site so we can actually dive
2:16:09
wordpress site so we can actually dive
2:16:09
wordpress site so we can actually dive into the technical bits
2:16:10
into the technical bits
2:16:10
into the technical bits and to do that i'm going to use this
2:16:12
and to do that i'm going to use this
2:16:12
and to do that i'm going to use this separate starter that i created
2:16:14
separate starter that i created
2:16:14
separate starter that i created and it actually has a name i have to fix
2:16:17
and it actually has a name i have to fix
2:16:17
and it actually has a name i have to fix that
2:16:17
that
2:16:17
that but it's basically i call it a wp
2:16:20
but it's basically i call it a wp
2:16:20
but it's basically i call it a wp graphql basic starter because what it
2:16:22
graphql basic starter because what it
2:16:22
graphql basic starter because what it really does
2:16:22
really does
2:16:22
really does is it's going to provide the foundation
2:16:25
is it's going to provide the foundation
2:16:25
is it's going to provide the foundation of all that where it's just going to set
2:16:27
of all that where it's just going to set
2:16:27
of all that where it's just going to set it up so that we can
2:16:28
it up so that we can
2:16:28
it up so that we can easily query our post data it just dumps
2:16:30
easily query our post data it just dumps
2:16:30
easily query our post data it just dumps them on the home page with the
2:16:32
them on the home page with the
2:16:32
them on the home page with the pretty much the default next.js starter
2:16:34
pretty much the default next.js starter
2:16:34
pretty much the default next.js starter itself and provides some dynamic page
2:16:36
itself and provides some dynamic page
2:16:36
itself and provides some dynamic page routes so let's see what that looks like
2:16:38
routes so let's see what that looks like
2:16:38
routes so let's see what that looks like i'm going to copy that command and open
2:16:40
i'm going to copy that command and open
2:16:40
i'm going to copy that command and open back up my terminal
2:16:41
back up my terminal
2:16:42
back up my terminal i'm going to cancel out my other project
2:16:44
i'm going to cancel out my other project
2:16:44
i'm going to cancel out my other project let's level up
2:16:45
let's level up
2:16:45
let's level up i'm going to run that yarn command again
2:16:47
i'm going to run that yarn command again
2:16:47
i'm going to run that yarn command again but let's try it let's call that my
2:16:49
but let's try it let's call that my
2:16:49
but let's try it let's call that my wp graphql app that sounds good to me
2:16:54
wp graphql app that sounds good to me
2:16:54
wp graphql app that sounds good to me so it's going to go through just like it
2:16:55
so it's going to go through just like it
2:16:55
so it's going to go through just like it did with the other wordpress the next gs
2:16:57
did with the other wordpress the next gs
2:16:57
did with the other wordpress the next gs wordpress starter
2:16:58
wordpress starter
2:16:58
wordpress starter it's going to grab all those
2:17:00
it's going to grab all those
2:17:00
it's going to grab all those dependencies it's going to
2:17:02
dependencies it's going to
2:17:02
dependencies it's going to clone down that template and do exactly
2:17:04
clone down that template and do exactly
2:17:04
clone down that template and do exactly the same thing
2:17:05
the same thing
2:17:05
the same thing so now let's cd into that just like
2:17:08
so now let's cd into that just like
2:17:08
so now let's cd into that just like before
2:17:09
before
2:17:09
before it's going to have the same
2:17:10
it's going to have the same
2:17:10
it's going to have the same configuration that we saw with the with
2:17:12
configuration that we saw with the with
2:17:12
configuration that we saw with the with our other project
2:17:13
our other project
2:17:13
our other project so because of that i'm just going to
2:17:14
so because of that i'm just going to
2:17:14
so because of that i'm just going to simply copy and paste that same exact
2:17:16
simply copy and paste that same exact
2:17:16
simply copy and paste that same exact file that we did before
2:17:18
file that we did before
2:17:18
file that we did before i'm going to create my.env.local
2:17:22
i'm going to create my.env.local
2:17:22
i'm going to create my.env.local and i'm going to paste in that same
2:17:24
and i'm going to paste in that same
2:17:24
and i'm going to paste in that same exact configuration
2:17:27
exact configuration
2:17:27
exact configuration let's see what happens when we spin this
2:17:28
let's see what happens when we spin this
2:17:28
let's see what happens when we spin this one up
2:17:30
one up
2:17:30
one up that's not the right command
2:17:34
just like before it's now going to make
2:17:35
just like before it's now going to make
2:17:35
just like before it's now going to make our localhost ready
2:17:37
our localhost ready
2:17:37
our localhost ready i'm going to close that tab and open it
2:17:38
i'm going to close that tab and open it
2:17:38
i'm going to close that tab and open it up again
2:17:42
up again
2:17:42
up again and we can see that already it looks
2:17:44
and we can see that already it looks
2:17:44
and we can see that already it looks kind of similar to the other starter
2:17:47
kind of similar to the other starter
2:17:47
kind of similar to the other starter but this is a lot simpler and we'll see
2:17:49
but this is a lot simpler and we'll see
2:17:49
but this is a lot simpler and we'll see what that looks like in a second here
2:17:50
what that looks like in a second here
2:17:50
what that looks like in a second here but as we can see just like before we're
2:17:52
but as we can see just like before we're
2:17:52
but as we can see just like before we're actually dumping all these
2:17:54
actually dumping all these
2:17:54
actually dumping all these these posts inside of the default nextjs
2:17:56
these posts inside of the default nextjs
2:17:56
these posts inside of the default nextjs wordpress or nextjs starter site if
2:17:58
wordpress or nextjs starter site if
2:17:58
wordpress or nextjs starter site if you're familiar typically it looks like
2:18:00
you're familiar typically it looks like
2:18:00
you're familiar typically it looks like a few different cards that get added
2:18:02
a few different cards that get added
2:18:02
a few different cards that get added onto that home page
2:18:03
onto that home page
2:18:03
onto that home page so really i'm just dumping the content
2:18:05
so really i'm just dumping the content
2:18:05
so really i'm just dumping the content in there to show a proof of how it works
2:18:07
in there to show a proof of how it works
2:18:07
in there to show a proof of how it works in an example
2:18:08
in an example
2:18:08
in an example but just like before we can navigate to
2:18:10
but just like before we can navigate to
2:18:10
but just like before we can navigate to the page and while it's not the
2:18:11
the page and while it's not the
2:18:11
the page and while it's not the prettiest thing in the world
2:18:12
prettiest thing in the world
2:18:12
prettiest thing in the world it's just showing how it works from a
2:18:15
it's just showing how it works from a
2:18:15
it's just showing how it works from a basic perspective
2:18:16
basic perspective
2:18:16
basic perspective so now let's go over to the code and see
2:18:18
so now let's go over to the code and see
2:18:18
so now let's go over to the code and see what that actually looks like
2:18:20
what that actually looks like
2:18:20
what that actually looks like so just like before it's using the file
2:18:22
so just like before it's using the file
2:18:22
so just like before it's using the file system based routing that next guest
2:18:24
system based routing that next guest
2:18:24
system based routing that next guest gives us as part of the the next.js
2:18:28
gives us as part of the the next.js
2:18:28
gives us as part of the the next.js api so to start off we have our index.js
2:18:31
api so to start off we have our index.js
2:18:32
api so to start off we have our index.js file
2:18:32
file
2:18:32
file where as you can see here this is really
2:18:35
where as you can see here this is really
2:18:35
where as you can see here this is really just a react component right
2:18:36
just a react component right
2:18:36
just a react component right so what next.js is able to do is it
2:18:39
so what next.js is able to do is it
2:18:39
so what next.js is able to do is it provides apis
2:18:41
provides apis
2:18:41
provides apis uh that wraps react so that we can fetch
2:18:44
uh that wraps react so that we can fetch
2:18:44
uh that wraps react so that we can fetch that data
2:18:45
that data
2:18:45
that data and inject it into our react app and the
2:18:47
and inject it into our react app and the
2:18:47
and inject it into our react app and the way that we're doing this here is if we
2:18:48
way that we're doing this here is if we
2:18:48
way that we're doing this here is if we scroll
2:18:49
scroll
2:18:49
scroll all the way to the bottom we're using
2:18:51
all the way to the bottom we're using
2:18:51
all the way to the bottom we're using this function
2:18:52
this function
2:18:52
this function which is the next.js api called
2:18:54
which is the next.js api called
2:18:54
which is the next.js api called getstatic props
2:18:55
getstatic props
2:18:55
getstatic props where the first thing we do is we're
2:18:57
where the first thing we do is we're
2:18:57
where the first thing we do is we're going to get the apollo client
2:18:58
going to get the apollo client
2:18:58
going to get the apollo client which the apollo client is what we're
2:19:00
which the apollo client is what we're
2:19:00
which the apollo client is what we're using to actually make requests
2:19:02
using to actually make requests
2:19:02
using to actually make requests with the graphql api and once we do
2:19:07
with the graphql api and once we do
2:19:07
with the graphql api and once we do we can see we have this query here that
2:19:09
we can see we have this query here that
2:19:09
we can see we have this query here that we're simply sending up using the apollo
2:19:11
we're simply sending up using the apollo
2:19:11
we're simply sending up using the apollo client
2:19:12
client
2:19:12
client and it's going to send that to that url
2:19:14
and it's going to send that to that url
2:19:14
and it's going to send that to that url that we configured inside of here
2:19:16
that we configured inside of here
2:19:16
that we configured inside of here and it's going to grab all that post
2:19:18
and it's going to grab all that post
2:19:18
and it's going to grab all that post data it's going to create it as a prop
2:19:20
data it's going to create it as a prop
2:19:20
data it's going to create it as a prop and even the page settings that we have
2:19:22
and even the page settings that we have
2:19:22
and even the page settings that we have here and pass them as props
2:19:24
here and pass them as props
2:19:24
here and pass them as props into our react component where we can
2:19:26
into our react component where we can
2:19:26
into our react component where we can use to build out the api
2:19:27
use to build out the api
2:19:27
use to build out the api and we can prove what that looks like
2:19:29
and we can prove what that looks like
2:19:29
and we can prove what that looks like but let me take this query here
2:19:31
but let me take this query here
2:19:31
but let me take this query here i'm going to go back over to wordpress
2:19:33
i'm going to go back over to wordpress
2:19:33
i'm going to go back over to wordpress here for a second
2:19:34
here for a second
2:19:34
here for a second where if i paste this directly in to my
2:19:38
where if i paste this directly in to my
2:19:38
where if i paste this directly in to my graphical playground we can see the
2:19:40
graphical playground we can see the
2:19:40
graphical playground we can see the exact data that we're going to get
2:19:42
exact data that we're going to get
2:19:42
exact data that we're going to get inside of the browser the first thing
2:19:44
inside of the browser the first thing
2:19:44
inside of the browser the first thing we're going to get that configurable
2:19:45
we're going to get that configurable
2:19:45
we're going to get that configurable title
2:19:46
title
2:19:46
title and the description but then we can see
2:19:48
and the description but then we can see
2:19:48
and the description but then we can see all that post data which is exactly what
2:19:50
all that post data which is exactly what
2:19:50
all that post data which is exactly what we see
2:19:51
we see
2:19:51
we see on the home page of our next js
2:19:53
on the home page of our next js
2:19:53
on the home page of our next js application
2:19:54
application
2:19:54
application so what we're doing there is we're able
2:19:56
so what we're doing there is we're able
2:19:56
so what we're doing there is we're able to query all that data
2:19:57
to query all that data
2:19:57
to query all that data with graphql which makes it really nice
2:20:00
with graphql which makes it really nice
2:20:00
with graphql which makes it really nice to grab exactly what we want
2:20:01
to grab exactly what we want
2:20:02
to grab exactly what we want and dump it into our react page so
2:20:04
and dump it into our react page so
2:20:04
and dump it into our react page so that's just the home page
2:20:05
that's just the home page
2:20:05
that's just the home page now for creating those dynamic page
2:20:07
now for creating those dynamic page
2:20:08
now for creating those dynamic page routes we can see here we have this
2:20:10
routes we can see here we have this
2:20:10
routes we can see here we have this directory called posts
2:20:11
directory called posts
2:20:11
directory called posts which again nexjs uses the file system
2:20:14
which again nexjs uses the file system
2:20:14
which again nexjs uses the file system based routing
2:20:15
based routing
2:20:15
based routing so what this is first going to do is
2:20:17
so what this is first going to do is
2:20:17
so what this is first going to do is it's going to create a directory called
2:20:19
it's going to create a directory called
2:20:19
it's going to create a directory called posts
2:20:20
posts
2:20:20
posts and then inside of it we can see this
2:20:22
and then inside of it we can see this
2:20:22
and then inside of it we can see this urls or the
2:20:23
urls or the
2:20:23
urls or the file name is a little bit strange if
2:20:25
file name is a little bit strange if
2:20:25
file name is a little bit strange if you're not familiar with it
2:20:26
you're not familiar with it
2:20:26
you're not familiar with it where here we're wrapping that word post
2:20:29
where here we're wrapping that word post
2:20:29
where here we're wrapping that word post slug with brackets
2:20:30
slug with brackets
2:20:30
slug with brackets and what that's going to do is it's
2:20:32
and what that's going to do is it's
2:20:32
and what that's going to do is it's going to consider that
2:20:33
going to consider that
2:20:33
going to consider that post slug as a parameter or an argument
2:20:36
post slug as a parameter or an argument
2:20:36
post slug as a parameter or an argument where it's going to allow that route to
2:20:38
where it's going to allow that route to
2:20:38
where it's going to allow that route to be dynamic for us
2:20:39
be dynamic for us
2:20:39
be dynamic for us and the way that it works i accidentally
2:20:42
and the way that it works i accidentally
2:20:42
and the way that it works i accidentally clicked
2:20:42
clicked
2:20:42
clicked so if we look at this file this looks
2:20:46
so if we look at this file this looks
2:20:46
so if we look at this file this looks pretty similar to what we had on our
2:20:47
pretty similar to what we had on our
2:20:47
pretty similar to what we had on our home page
2:20:48
home page
2:20:48
home page where honestly for this basic default
2:20:50
where honestly for this basic default
2:20:50
where honestly for this basic default starter we can even see
2:20:51
starter we can even see
2:20:51
starter we can even see i just cloned the home page just to
2:20:54
i just cloned the home page just to
2:20:54
i just cloned the home page just to provide this as a proof of concept right
2:20:56
provide this as a proof of concept right
2:20:56
provide this as a proof of concept right but if we again scroll all the way down
2:20:58
but if we again scroll all the way down
2:20:58
but if we again scroll all the way down to the page
2:20:59
to the page
2:20:59
to the page we're actually scrolling past get static
2:21:01
we're actually scrolling past get static
2:21:01
we're actually scrolling past get static props first
2:21:02
props first
2:21:02
props first we're going to get static paths which is
2:21:05
we're going to get static paths which is
2:21:05
we're going to get static paths which is again
2:21:06
again
2:21:06
again another nexus api we're similar to
2:21:08
another nexus api we're similar to
2:21:08
another nexus api we're similar to before
2:21:09
before
2:21:09
before we're going to grab our apollo client
2:21:11
we're going to grab our apollo client
2:21:11
we're going to grab our apollo client and we're going to make that request to
2:21:13
and we're going to make that request to
2:21:13
and we're going to make that request to get all the posts
2:21:14
get all the posts
2:21:14
get all the posts because in order to create all the paths
2:21:17
because in order to create all the paths
2:21:17
because in order to create all the paths we have to know what all posts actually
2:21:18
we have to know what all posts actually
2:21:18
we have to know what all posts actually exist
2:21:19
exist
2:21:19
exist right so once we grab that we're able to
2:21:21
right so once we grab that we're able to
2:21:21
right so once we grab that we're able to loop through
2:21:22
loop through
2:21:22
loop through all these different posts and we're
2:21:24
all these different posts and we're
2:21:24
all these different posts and we're going to say for each of them i want
2:21:26
going to say for each of them i want
2:21:26
going to say for each of them i want to have a post slug that's going to be
2:21:28
to have a post slug that's going to be
2:21:28
to have a post slug that's going to be available
2:21:29
available
2:21:29
available for each of those posts so that means
2:21:31
for each of those posts so that means
2:21:31
for each of those posts so that means next.js is going to go through and it's
2:21:33
next.js is going to go through and it's
2:21:33
next.js is going to go through and it's going to say
2:21:33
going to say
2:21:33
going to say for every single one of those slugs i'm
2:21:36
for every single one of those slugs i'm
2:21:36
for every single one of those slugs i'm going to send you a parameter so i can
2:21:37
going to send you a parameter so i can
2:21:37
going to send you a parameter so i can help you build a page for every single
2:21:39
help you build a page for every single
2:21:39
help you build a page for every single one
2:21:40
one
2:21:40
one so let's go back up to get static props
2:21:42
so let's go back up to get static props
2:21:42
so let's go back up to get static props so this is where
2:21:43
so this is where
2:21:43
so this is where that comes in where every time it tries
2:21:46
that comes in where every time it tries
2:21:46
that comes in where every time it tries to create one of those new pages
2:21:47
to create one of those new pages
2:21:48
to create one of those new pages it's going to send in that parameter
2:21:49
it's going to send in that parameter
2:21:49
it's going to send in that parameter where here we're grabbing that post
2:21:51
where here we're grabbing that post
2:21:51
where here we're grabbing that post sub which is exactly what we had
2:21:53
sub which is exactly what we had
2:21:53
sub which is exactly what we had configured for the path
2:21:55
configured for the path
2:21:55
configured for the path and then we're going to inject that as a
2:21:57
and then we're going to inject that as a
2:21:57
and then we're going to inject that as a variable so that we can get that post
2:22:00
variable so that we can get that post
2:22:00
variable so that we can get that post by its slug which we're then able to
2:22:02
by its slug which we're then able to
2:22:02
by its slug which we're then able to capture that data
2:22:03
capture that data
2:22:03
capture that data similar to what we did on the home page
2:22:05
similar to what we did on the home page
2:22:05
similar to what we did on the home page and inject that as a prop right into our
2:22:07
and inject that as a prop right into our
2:22:07
and inject that as a prop right into our application
2:22:08
application
2:22:08
application where if we scroll back up just like
2:22:10
where if we scroll back up just like
2:22:10
where if we scroll back up just like before it's going to allow us to create
2:22:12
before it's going to allow us to create
2:22:12
before it's going to allow us to create our ui
2:22:13
our ui
2:22:13
our ui just like we would in any other react
2:22:15
just like we would in any other react
2:22:15
just like we would in any other react application but ultimately this all gets
2:22:17
application but ultimately this all gets
2:22:17
application but ultimately this all gets statically compiled
2:22:19
statically compiled
2:22:19
statically compiled so let's see how that actually works too
2:22:21
so let's see how that actually works too
2:22:21
so let's see how that actually works too where if i run yarn build
2:22:25
where if i run yarn build
2:22:25
where if i run yarn build i think i actually so in my build
2:22:28
i think i actually so in my build
2:22:28
i think i actually so in my build command
2:22:29
command
2:22:29
command if you want to actually have it
2:22:31
if you want to actually have it
2:22:31
if you want to actually have it statically output so the way that xjs
2:22:33
statically output so the way that xjs
2:22:33
statically output so the way that xjs works is when you run
2:22:34
works is when you run
2:22:34
works is when you run build it's going to build it as an xjs
2:22:37
build it's going to build it as an xjs
2:22:37
build it's going to build it as an xjs site
2:22:37
site
2:22:37
site which would be all contained inside of
2:22:39
which would be all contained inside of
2:22:39
which would be all contained inside of this.next.js folder
2:22:41
this.next.js folder
2:22:41
this.next.js folder but if you wanted to actually build it
2:22:43
but if you wanted to actually build it
2:22:43
but if you wanted to actually build it so that it outputs static html
2:22:45
so that it outputs static html
2:22:45
so that it outputs static html javascript and css
2:22:47
javascript and css
2:22:47
javascript and css so that you can deploy it anywhere with
2:22:48
so that you can deploy it anywhere with
2:22:48
so that you can deploy it anywhere with static storage you also need to export
2:22:51
static storage you also need to export
2:22:51
static storage you also need to export the site so we're going to do that just
2:22:52
the site so we're going to do that just
2:22:52
the site so we're going to do that just to show what that looks like
2:22:53
to show what that looks like
2:22:54
to show what that looks like and in our build command we're going to
2:22:55
and in our build command we're going to
2:22:55
and in our build command we're going to run next export
2:22:57
run next export
2:22:57
run next export so let me build that again
2:23:00
where it's going to go through it's
2:23:01
where it's going to go through it's
2:23:01
where it's going to go through it's going to perform that same operation as
2:23:03
going to perform that same operation as
2:23:03
going to perform that same operation as it did before
2:23:04
it did before
2:23:04
it did before we can see that it went through and
2:23:06
we can see that it went through and
2:23:06
we can see that it went through and built those posts
2:23:07
built those posts
2:23:07
built those posts just like before but this time it's
2:23:09
just like before but this time it's
2:23:09
just like before but this time it's going to provide that extra step
2:23:11
going to provide that extra step
2:23:11
going to provide that extra step and it's going to create a static copy
2:23:12
and it's going to create a static copy
2:23:12
and it's going to create a static copy of our site and we can see just that
2:23:14
of our site and we can see just that
2:23:14
of our site and we can see just that in this out folder where let me close
2:23:17
in this out folder where let me close
2:23:17
in this out folder where let me close these so it's a little easier to see but
2:23:18
these so it's a little easier to see but
2:23:18
these so it's a little easier to see but in this out folder
2:23:19
in this out folder
2:23:19
in this out folder we can open up our index file and we can
2:23:21
we can open up our index file and we can
2:23:21
we can open up our index file and we can see that's just a static html file
2:23:24
see that's just a static html file
2:23:24
see that's just a static html file that's something that we can serve to
2:23:26
that's something that we can serve to
2:23:26
that's something that we can serve to any browser and it's going to be super
2:23:28
any browser and it's going to be super
2:23:28
any browser and it's going to be super fast
2:23:29
fast
2:23:29
fast out of completely static storage but
2:23:31
out of completely static storage but
2:23:31
out of completely static storage but ultimately that's going to give us the
2:23:33
ultimately that's going to give us the
2:23:33
ultimately that's going to give us the same experience right inside of our
2:23:34
same experience right inside of our
2:23:34
same experience right inside of our wordpress site where we can deploy that
2:23:36
wordpress site where we can deploy that
2:23:36
wordpress site where we can deploy that anywhere
2:23:37
anywhere
2:23:37
anywhere we want but it's going to give the
2:23:38
we want but it's going to give the
2:23:38
we want but it's going to give the benefits of being able to manage your
2:23:40
benefits of being able to manage your
2:23:40
benefits of being able to manage your content with wordpress
2:23:41
content with wordpress
2:23:41
content with wordpress but also the same benefits of being able
2:23:44
but also the same benefits of being able
2:23:44
but also the same benefits of being able to deploy that statically
2:23:46
to deploy that statically
2:23:46
to deploy that statically anywhere that you want on the web and
2:23:47
anywhere that you want on the web and
2:23:47
anywhere that you want on the web and it's going to be super lightning fast
2:23:50
it's going to be super lightning fast
2:23:50
it's going to be super lightning fast so that's the end of my demo let me
2:23:52
so that's the end of my demo let me
2:23:52
so that's the end of my demo let me switch back over to
2:23:54
switch back over to
2:23:54
switch back over to the slides
2:24:08
okay
2:24:11
cool so let's recap
2:24:14
cool so let's recap
2:24:14
cool so let's recap recap a little bit about what we
2:24:16
recap a little bit about what we
2:24:16
recap a little bit about what we achieved here so we reviewed our
2:24:18
achieved here so we reviewed our
2:24:18
achieved here so we reviewed our starting point which was a basic
2:24:20
starting point which was a basic
2:24:20
starting point which was a basic wordpress instance
2:24:21
wordpress instance
2:24:21
wordpress instance we set up a next.js wordpress starter we
2:24:23
we set up a next.js wordpress starter we
2:24:24
we set up a next.js wordpress starter we even set up a second
2:24:25
even set up a second
2:24:25
even set up a second next.js site with the other basic
2:24:27
next.js site with the other basic
2:24:27
next.js site with the other basic wordpress starter
2:24:29
wordpress starter
2:24:29
wordpress starter and we dug into a little bit of it and
2:24:30
and we dug into a little bit of it and
2:24:30
and we dug into a little bit of it and we were able to see how it works
2:24:33
we were able to see how it works
2:24:33
we were able to see how it works so the goal here wasn't to get you all
2:24:35
so the goal here wasn't to get you all
2:24:35
so the goal here wasn't to get you all to jump ship from your current cms
2:24:37
to jump ship from your current cms
2:24:37
to jump ship from your current cms platform and go over to wordpress
2:24:39
platform and go over to wordpress
2:24:39
platform and go over to wordpress but to show the flexibility of it and
2:24:41
but to show the flexibility of it and
2:24:41
but to show the flexibility of it and why it's still a compelling
2:24:43
why it's still a compelling
2:24:43
why it's still a compelling cms to use along with all the other
2:24:45
cms to use along with all the other
2:24:45
cms to use along with all the other options available right now
2:24:47
options available right now
2:24:47
options available right now we can come up with some pretty powerful
2:24:48
we can come up with some pretty powerful
2:24:48
we can come up with some pretty powerful solutions that provide a really great
2:24:50
solutions that provide a really great
2:24:50
solutions that provide a really great user experience
2:24:51
user experience
2:24:51
user experience while also making it really performant
2:24:53
while also making it really performant
2:24:53
while also making it really performant and cheap
2:24:55
and cheap
2:24:55
and cheap if you want to check out that work
2:24:56
if you want to check out that work
2:24:56
if you want to check out that work please visit the next.js wordpress
2:24:58
please visit the next.js wordpress
2:24:58
please visit the next.js wordpress starter on github it's completely open
2:25:00
starter on github it's completely open
2:25:00
starter on github it's completely open source
2:25:01
source
2:25:01
source and if you want to learn more about the
2:25:02
and if you want to learn more about the
2:25:02
and if you want to learn more about the jam stack you can check out my book at
2:25:04
jam stack you can check out my book at
2:25:04
jam stack you can check out my book at jams.canbook.com
2:25:06
jams.canbook.com
2:25:06
jams.canbook.com and that's it if you want to learn more
2:25:08
and that's it if you want to learn more
2:25:08
and that's it if you want to learn more about anything you've seen here at the
2:25:09
about anything you've seen here at the
2:25:09
about anything you've seen here at the talk you can find me everywhere at colby
2:25:11
talk you can find me everywhere at colby
2:25:11
talk you can find me everywhere at colby fayok
2:25:12
fayok
2:25:12
fayok i'll tweet out a link with everything
2:25:13
i'll tweet out a link with everything
2:25:13
i'll tweet out a link with everything you've seen here today thanks everybody
2:25:17
all right kobe that was an absolutely
2:25:19
all right kobe that was an absolutely
2:25:19
all right kobe that was an absolutely amazing session as i as i always
2:25:22
amazing session as i as i always
2:25:22
amazing session as i as i always loved to host here and he did forget
2:25:24
loved to host here and he did forget
2:25:24
loved to host here and he did forget mentioned about your also on youtube
2:25:26
mentioned about your also on youtube
2:25:26
mentioned about your also on youtube i did check out your youtube channel you
2:25:27
i did check out your youtube channel you
2:25:28
i did check out your youtube channel you may make some amazing content over there
2:25:29
may make some amazing content over there
2:25:29
may make some amazing content over there oh thank you
2:25:30
oh thank you
2:25:30
oh thank you uh so we do have a couple of questions i
2:25:33
uh so we do have a couple of questions i
2:25:33
uh so we do have a couple of questions i know we are running
2:25:33
know we are running
2:25:33
know we are running a little lower over time um let's take
2:25:37
a little lower over time um let's take
2:25:37
a little lower over time um let's take one from maybe uh mode
2:25:39
one from maybe uh mode
2:25:39
one from maybe uh mode it says do you have to use any
2:25:41
it says do you have to use any
2:25:41
it says do you have to use any particular wordpress provider i believe
2:25:43
particular wordpress provider i believe
2:25:43
particular wordpress provider i believe no
2:25:43
no
2:25:44
no right no so you can use pretty much any
2:25:47
right no so you can use pretty much any
2:25:47
right no so you can use pretty much any wordpress provider you want like that's
2:25:48
wordpress provider you want like that's
2:25:48
wordpress provider you want like that's kind of the beauty of it like it's
2:25:50
kind of the beauty of it like it's
2:25:50
kind of the beauty of it like it's completely headless at that point so
2:25:52
completely headless at that point so
2:25:52
completely headless at that point so you're really just plugging in that
2:25:53
you're really just plugging in that
2:25:53
you're really just plugging in that endpoint
2:25:54
endpoint
2:25:54
endpoint as long as you install wp graphql you
2:25:56
as long as you install wp graphql you
2:25:56
as long as you install wp graphql you can get up and running with any site
2:25:59
can get up and running with any site
2:25:59
can get up and running with any site okay let's take one more from patricia
2:26:01
okay let's take one more from patricia
2:26:01
okay let's take one more from patricia what are the benefits of using uh
2:26:03
what are the benefits of using uh
2:26:03
what are the benefits of using uh wordpress graphql instead of the rest
2:26:05
wordpress graphql instead of the rest
2:26:05
wordpress graphql instead of the rest api i think you didn't see that that's
2:26:07
api i think you didn't see that that's
2:26:07
api i think you didn't see that that's amazing
2:26:08
amazing
2:26:08
amazing yeah so the the rest and the rest api
2:26:12
yeah so the the rest and the rest api
2:26:12
yeah so the the rest and the rest api is a completely valid approach and it's
2:26:13
is a completely valid approach and it's
2:26:13
is a completely valid approach and it's an awesome solution but
2:26:15
an awesome solution but
2:26:15
an awesome solution but if you start to get into some of the
2:26:17
if you start to get into some of the
2:26:17
if you start to get into some of the more complicated bits of
2:26:18
more complicated bits of
2:26:18
more complicated bits of uh trying to query your data you're
2:26:21
uh trying to query your data you're
2:26:21
uh trying to query your data you're going to notice that you're going to end
2:26:22
going to notice that you're going to end
2:26:22
going to notice that you're going to end up having a lot of chained requests for
2:26:24
up having a lot of chained requests for
2:26:24
up having a lot of chained requests for those api endpoints so for instance
2:26:26
those api endpoints so for instance
2:26:26
those api endpoints so for instance if i wanted to get all the posts and i
2:26:28
if i wanted to get all the posts and i
2:26:28
if i wanted to get all the posts and i wanted to get the data for each of those
2:26:29
wanted to get the data for each of those
2:26:29
wanted to get the data for each of those posts
2:26:30
posts
2:26:30
posts and i wanted to get some other metadata
2:26:31
and i wanted to get some other metadata
2:26:32
and i wanted to get some other metadata it ends up being a lot of things you
2:26:33
it ends up being a lot of things you
2:26:33
it ends up being a lot of things you have to change
2:26:34
have to change
2:26:34
have to change where what with graphql you can query
2:26:37
where what with graphql you can query
2:26:37
where what with graphql you can query that entire relationship with that one
2:26:39
that entire relationship with that one
2:26:39
that entire relationship with that one query
2:26:39
query
2:26:39
query so it just makes it really nice and easy
2:26:41
so it just makes it really nice and easy
2:26:41
so it just makes it really nice and easy to grab all the data that you need
2:26:44
to grab all the data that you need
2:26:44
to grab all the data that you need along with it also allows you to grab
2:26:46
along with it also allows you to grab
2:26:46
along with it also allows you to grab only the data you need
2:26:48
only the data you need
2:26:48
only the data you need all right makes sense uh we'll take last
2:26:50
all right makes sense uh we'll take last
2:26:50
all right makes sense uh we'll take last two questions it's from gunjin
2:26:52
two questions it's from gunjin
2:26:52
two questions it's from gunjin uh does wordpress have something similar
2:26:54
uh does wordpress have something similar
2:26:54
uh does wordpress have something similar to aws lambda at
2:26:55
to aws lambda at
2:26:55
to aws lambda at edge i don't think that that's really
2:26:59
edge i don't think that that's really
2:26:59
edge i don't think that that's really yeah so lambda at edge is kind of like a
2:27:01
yeah so lambda at edge is kind of like a
2:27:01
yeah so lambda at edge is kind of like a serverless function
2:27:03
serverless function
2:27:03
serverless function uh on a cdn right where wordpress is
2:27:05
uh on a cdn right where wordpress is
2:27:05
uh on a cdn right where wordpress is really like a server-hosted solution
2:27:07
really like a server-hosted solution
2:27:07
really like a server-hosted solution so i don't think they're really in the
2:27:09
so i don't think they're really in the
2:27:09
so i don't think they're really in the same bucket um
2:27:11
same bucket um
2:27:11
same bucket um yeah exactly exactly yeah okay let's
2:27:14
yeah exactly exactly yeah okay let's
2:27:14
yeah exactly exactly yeah okay let's take one from a static world how many
2:27:15
take one from a static world how many
2:27:15
take one from a static world how many posts does graph
2:27:16
posts does graph
2:27:16
posts does graph what does graphql support so my
2:27:19
what does graphql support so my
2:27:19
what does graphql support so my understanding is it can support really
2:27:21
understanding is it can support really
2:27:21
understanding is it can support really any number of posts
2:27:22
any number of posts
2:27:22
any number of posts the only thing that you're going to the
2:27:23
the only thing that you're going to the
2:27:24
the only thing that you're going to the only thing you're going to run into
2:27:25
only thing you're going to run into
2:27:25
only thing you're going to run into is as you have you know if you have
2:27:27
is as you have you know if you have
2:27:27
is as you have you know if you have thousands and thousands of posts
2:27:29
thousands and thousands of posts
2:27:29
thousands and thousands of posts you just might have long compiled times
2:27:30
you just might have long compiled times
2:27:30
you just might have long compiled times right but there's uh
2:27:32
right but there's uh
2:27:32
right but there's uh there's solutions for that where with
2:27:34
there's solutions for that where with
2:27:34
there's solutions for that where with for sell what they do is they have a
2:27:36
for sell what they do is they have a
2:27:36
for sell what they do is they have a hybrid approach where you can
2:27:37
hybrid approach where you can
2:27:38
hybrid approach where you can have it so that it'll only get rendered
2:27:40
have it so that it'll only get rendered
2:27:40
have it so that it'll only get rendered when you hit that particular route so
2:27:42
when you hit that particular route so
2:27:42
when you hit that particular route so that you're not rendering those all at
2:27:43
that you're not rendering those all at
2:27:43
that you're not rendering those all at compile time
2:27:44
compile time
2:27:44
compile time and similarly netlify has a solution
2:27:46
and similarly netlify has a solution
2:27:46
and similarly netlify has a solution that they've been
2:27:47
that they've been
2:27:47
that they've been uh releasing as well where what it does
2:27:50
uh releasing as well where what it does
2:27:50
uh releasing as well where what it does is it's going to still compile your site
2:27:52
is it's going to still compile your site
2:27:52
is it's going to still compile your site but only like the popular routes
2:27:54
but only like the popular routes
2:27:54
but only like the popular routes and then when somebody hits that it'll
2:27:55
and then when somebody hits that it'll
2:27:56
and then when somebody hits that it'll build that route
2:27:57
build that route
2:27:57
build that route and store it inside of a cache so that
2:27:59
and store it inside of a cache so that
2:27:59
and store it inside of a cache so that any subsequent request to that page will
2:28:01
any subsequent request to that page will
2:28:01
any subsequent request to that page will get that static html file
2:28:03
get that static html file
2:28:03
get that static html file wow that sounds so amazing do you take
2:28:05
wow that sounds so amazing do you take
2:28:06
wow that sounds so amazing do you take contributions
2:28:07
contributions
2:28:07
contributions yes please i would love anybody to help
2:28:10
yes please i would love anybody to help
2:28:10
yes please i would love anybody to help out
2:28:11
out
2:28:11
out i encourage you to check out the issues
2:28:13
i encourage you to check out the issues
2:28:13
i encourage you to check out the issues that are in there you know i
2:28:15
that are in there you know i
2:28:15
that are in there you know i i already am fortunate to have a bunch
2:28:17
i already am fortunate to have a bunch
2:28:17
i already am fortunate to have a bunch of contributors and
2:28:18
of contributors and
2:28:18
of contributors and really you know thankful and would be
2:28:20
really you know thankful and would be
2:28:20
really you know thankful and would be glad to have anybody
2:28:21
glad to have anybody
2:28:22
glad to have anybody all right so it looks like people really
2:28:23
all right so it looks like people really
2:28:23
all right so it looks like people really loved yes session kobe uh thank you so
2:28:26
loved yes session kobe uh thank you so
2:28:26
loved yes session kobe uh thank you so much
2:28:26
much
2:28:26
much uh thank you for accepting invitation
2:28:28
uh thank you for accepting invitation
2:28:28
uh thank you for accepting invitation and it was very hard time any final
2:28:30
and it was very hard time any final
2:28:30
and it was very hard time any final thing you want to plug in i know i'm
2:28:31
thing you want to plug in i know i'm
2:28:31
thing you want to plug in i know i'm gonna catch you i think i should find a
2:28:33
gonna catch you i think i should find a
2:28:33
gonna catch you i think i should find a way to bring you back again not like
2:28:34
way to bring you back again not like
2:28:34
way to bring you back again not like wait for next one yeah
2:28:36
wait for next one yeah
2:28:36
wait for next one yeah maybe you'll find more i i i'll hear
2:28:39
maybe you'll find more i i i'll hear
2:28:39
maybe you'll find more i i i'll hear your uh twitter
2:28:39
your uh twitter
2:28:40
your uh twitter spaces any time you want to plug in
2:28:41
spaces any time you want to plug in
2:28:41
spaces any time you want to plug in before we move to next session
2:28:43
before we move to next session
2:28:43
before we move to next session sure um i have a free nexus uh
2:28:46
sure um i have a free nexus uh
2:28:46
sure um i have a free nexus uh course on youtube you can go to from
2:28:49
course on youtube you can go to from
2:28:49
course on youtube you can go to from design2.dev
2:28:50
design2.dev
2:28:50
design2.dev um or just check it out on my youtube um
2:28:52
um or just check it out on my youtube um
2:28:52
um or just check it out on my youtube um yeah
2:28:53
yeah
2:28:53
yeah thanks everybody uh check me out yeah
2:28:56
thanks everybody uh check me out yeah
2:28:56
thanks everybody uh check me out yeah exactly thank you have a nice day
2:28:57
exactly thank you have a nice day
2:28:57
exactly thank you have a nice day uh thank you thank you
2:29:01
uh thank you thank you
2:29:01
uh thank you thank you see ya all right with that amazing
2:29:03
see ya all right with that amazing
2:29:03
see ya all right with that amazing session we moved to our next session uh
2:29:05
session we moved to our next session uh
2:29:05
session we moved to our next session uh i know i have to announce the winner but
2:29:07
i know i have to announce the winner but
2:29:07
i know i have to announce the winner but i'm going to do that after this session
2:29:08
i'm going to do that after this session
2:29:08
i'm going to do that after this session so our next session is
2:29:10
so our next session is
2:29:10
so our next session is going to be by maurice marvis is going
2:29:12
going to be by maurice marvis is going
2:29:12
going to be by maurice marvis is going to talk about a building variable i have
2:29:14
to talk about a building variable i have
2:29:14
to talk about a building variable i have reliable applications with react c-sharp
2:29:16
reliable applications with react c-sharp
2:29:16
reliable applications with react c-sharp and azure and i believe this should be
2:29:18
and azure and i believe this should be
2:29:18
and azure and i believe this should be of interest of
2:29:19
of interest of
2:29:19
of interest of many many people uh so without any
2:29:21
many many people uh so without any
2:29:21
many many people uh so without any further ado let's invite our next
2:29:22
further ado let's invite our next
2:29:22
further ado let's invite our next speaker maurice who is a microsoft mvp
2:29:25
speaker maurice who is a microsoft mvp
2:29:25
speaker maurice who is a microsoft mvp uh yeah let's do it
2:29:41
[Music]
2:29:59
hi maurice welcome to the react virtual
2:30:01
hi maurice welcome to the react virtual
2:30:01
hi maurice welcome to the react virtual conference hi simon
2:30:03
conference hi simon
2:30:03
conference hi simon great to be here uh i'm really sorry to
2:30:06
great to be here uh i'm really sorry to
2:30:06
great to be here uh i'm really sorry to make you wait i i'm really sorry
2:30:08
make you wait i i'm really sorry
2:30:08
make you wait i i'm really sorry for that uh but i believe people have
2:30:10
for that uh but i believe people have
2:30:10
for that uh but i believe people have been uh putting into the comments that
2:30:12
been uh putting into the comments that
2:30:12
been uh putting into the comments that they're really looking forward for your
2:30:13
they're really looking forward for your
2:30:13
they're really looking forward for your session
2:30:14
session
2:30:14
session and before we actually go ahead and get
2:30:16
and before we actually go ahead and get
2:30:16
and before we actually go ahead and get started uh where are you joining us
2:30:18
started uh where are you joining us
2:30:18
started uh where are you joining us today from by the way
2:30:19
today from by the way
2:30:19
today from by the way i'm in based in the netherlands uh
2:30:22
i'm in based in the netherlands uh
2:30:22
i'm in based in the netherlands uh a small town just outside of the hague
2:30:25
a small town just outside of the hague
2:30:25
a small town just outside of the hague okay
2:30:26
okay
2:30:26
okay and how how's house things of the house
2:30:28
and how how's house things of the house
2:30:28
and how how's house things of the house going it's all good i believe europe is
2:30:30
going it's all good i believe europe is
2:30:30
going it's all good i believe europe is doing good now
2:30:32
doing good now
2:30:32
doing good now yeah corona is pretty much running down
2:30:34
yeah corona is pretty much running down
2:30:34
yeah corona is pretty much running down the vaccination is
2:30:36
the vaccination is
2:30:36
the vaccination is pretty good so we're getting some more
2:30:38
pretty good so we're getting some more
2:30:38
pretty good so we're getting some more liberties here
2:30:39
liberties here
2:30:40
liberties here and we might even be able to go on
2:30:41
and we might even be able to go on
2:30:41
and we might even be able to go on holiday this summer
2:30:43
holiday this summer
2:30:43
holiday this summer uh you're making me jealous and everyone
2:30:45
uh you're making me jealous and everyone
2:30:45
uh you're making me jealous and everyone in the comments from asia let me tell
2:30:46
in the comments from asia let me tell
2:30:46
in the comments from asia let me tell you that i i hope it's solved for
2:30:48
you that i i hope it's solved for
2:30:48
you that i i hope it's solved for everyone soon
2:30:49
everyone soon
2:30:49
everyone soon yeah all right maurice i won't take much
2:30:51
yeah all right maurice i won't take much
2:30:51
yeah all right maurice i won't take much of your time i already see
2:30:53
of your time i already see
2:30:53
of your time i already see your screen uh your your screen i'm
2:30:55
your screen uh your your screen i'm
2:30:55
your screen uh your your screen i'm gonna add it to the broadcast
2:30:56
gonna add it to the broadcast
2:30:56
gonna add it to the broadcast maybe you want to click on that height a
2:30:59
maybe you want to click on that height a
2:30:59
maybe you want to click on that height a pop-up that's on your screen
2:31:02
pop-up that's on your screen
2:31:02
pop-up that's on your screen the next one yeah that's it so next 40
2:31:05
the next one yeah that's it so next 40
2:31:05
the next one yeah that's it so next 40 45 15
2:31:05
45 15
2:31:06
45 15 i mean whatever time you need it's all
2:31:07
i mean whatever time you need it's all
2:31:07
i mean whatever time you need it's all yours okay thank you
2:31:10
yours okay thank you
2:31:10
yours okay thank you so welcome everyone to this session on
2:31:12
so welcome everyone to this session on
2:31:12
so welcome everyone to this session on building
2:31:13
building
2:31:13
building reliable applications with react c-sharp
2:31:16
reliable applications with react c-sharp
2:31:16
reliable applications with react c-sharp and azure
2:31:17
and azure
2:31:17
and azure and i've got a little admission to make
2:31:19
and i've got a little admission to make
2:31:20
and i've got a little admission to make before i start
2:31:21
before i start
2:31:21
before i start most of the session isn't really about
2:31:23
most of the session isn't really about
2:31:23
most of the session isn't really about react if you
2:31:24
react if you
2:31:24
react if you use vue or spelt or any of those other
2:31:27
use vue or spelt or any of those other
2:31:27
use vue or spelt or any of those other front-end react frameworks
2:31:29
front-end react frameworks
2:31:29
front-end react frameworks most of it is not react-specific and
2:31:31
most of it is not react-specific and
2:31:32
most of it is not react-specific and would
2:31:32
would
2:31:32
would apply equally well there and on the
2:31:35
apply equally well there and on the
2:31:35
apply equally well there and on the server
2:31:36
server
2:31:36
server i'm using azure and azure functions and
2:31:39
i'm using azure and azure functions and
2:31:39
i'm using azure and azure functions and c-sharp
2:31:40
c-sharp
2:31:40
c-sharp but it's really like if you're using
2:31:43
but it's really like if you're using
2:31:43
but it's really like if you're using nodes or
2:31:45
nodes or
2:31:45
nodes or ruby or java and amazon instead of azure
2:31:50
ruby or java and amazon instead of azure
2:31:50
ruby or java and amazon instead of azure the same kind of things apply as well so
2:31:54
the same kind of things apply as well so
2:31:54
the same kind of things apply as well so it's actually quite broad so some of the
2:31:57
it's actually quite broad so some of the
2:31:57
it's actually quite broad so some of the topics i want to talk about
2:31:59
topics i want to talk about
2:31:59
topics i want to talk about is using javascript versus type scripts
2:32:02
is using javascript versus type scripts
2:32:02
is using javascript versus type scripts hosting your application both in
2:32:04
hosting your application both in
2:32:04
hosting your application both in development time
2:32:05
development time
2:32:05
development time and when it's deployed at runtime for
2:32:08
and when it's deployed at runtime for
2:32:08
and when it's deployed at runtime for your end users
2:32:10
your end users
2:32:10
your end users how to test your application how to work
2:32:13
how to test your application how to work
2:32:13
how to test your application how to work with apis
2:32:14
with apis
2:32:14
with apis and apis type updates
2:32:18
and apis type updates
2:32:18
and apis type updates and dealing with the invent the runtime
2:32:22
and dealing with the invent the runtime
2:32:22
and dealing with the invent the runtime errors which
2:32:23
errors which
2:32:23
errors which always seem to happen however carefully
2:32:26
always seem to happen however carefully
2:32:26
always seem to happen however carefully you test things
2:32:30
but the word of warning this is highly
2:32:32
but the word of warning this is highly
2:32:32
but the word of warning this is highly opinionated it's like
2:32:33
opinionated it's like
2:32:33
opinionated it's like how i think you should do things it's
2:32:36
how i think you should do things it's
2:32:36
how i think you should do things it's not
2:32:37
not
2:32:37
not like a silver bullet this will solve for
2:32:39
like a silver bullet this will solve for
2:32:39
like a silver bullet this will solve for your problems
2:32:40
your problems
2:32:40
your problems some of the things i'm gonna talk about
2:32:42
some of the things i'm gonna talk about
2:32:42
some of the things i'm gonna talk about might not apply to you
2:32:44
might not apply to you
2:32:44
might not apply to you maybe you're using graphql and then i'm
2:32:47
maybe you're using graphql and then i'm
2:32:47
maybe you're using graphql and then i'm talking about
2:32:48
talking about
2:32:48
talking about how rest structure should be updated
2:32:50
how rest structure should be updated
2:32:50
how rest structure should be updated well that's not going to apply
2:32:51
well that's not going to apply
2:32:52
well that's not going to apply to you maybe you're using node.js with
2:32:54
to you maybe you're using node.js with
2:32:54
to you maybe you're using node.js with typescript on the server
2:32:56
typescript on the server
2:32:56
typescript on the server in that case that problem is going to be
2:32:58
in that case that problem is going to be
2:32:58
in that case that problem is going to be solved
2:32:59
solved
2:32:59
solved in a completely different way so take
2:33:02
in a completely different way so take
2:33:02
in a completely different way so take from this
2:33:02
from this
2:33:02
from this what you like what you can use
2:33:06
what you like what you can use
2:33:06
what you like what you can use and ignore whatever doesn't apply to you
2:33:10
and ignore whatever doesn't apply to you
2:33:10
and ignore whatever doesn't apply to you another useful thing to know is i'm a
2:33:12
another useful thing to know is i'm a
2:33:12
another useful thing to know is i'm a big fan of the swiss cheese model
2:33:15
big fan of the swiss cheese model
2:33:15
big fan of the swiss cheese model method of risk prevention and the basic
2:33:18
method of risk prevention and the basic
2:33:18
method of risk prevention and the basic idea here is that you've got
2:33:20
idea here is that you've got
2:33:20
idea here is that you've got lots of small simple layers which
2:33:24
lots of small simple layers which
2:33:24
lots of small simple layers which will catch some errors but not all there
2:33:27
will catch some errors but not all there
2:33:27
will catch some errors but not all there is nothing you can do in software
2:33:29
is nothing you can do in software
2:33:29
is nothing you can do in software development which will catch all errors
2:33:31
development which will catch all errors
2:33:31
development which will catch all errors like you might do a code review and that
2:33:33
like you might do a code review and that
2:33:33
like you might do a code review and that will catch some coding errors
2:33:35
will catch some coding errors
2:33:36
will catch some coding errors now you could do two code reviews that
2:33:38
now you could do two code reviews that
2:33:38
now you could do two code reviews that might catch a few more
2:33:39
might catch a few more
2:33:39
might catch a few more you could do five code reviews but
2:33:41
you could do five code reviews but
2:33:41
you could do five code reviews but that's probably not gonna catch
2:33:43
that's probably not gonna catch
2:33:43
that's probably not gonna catch more it's just gonna make things slower
2:33:46
more it's just gonna make things slower
2:33:46
more it's just gonna make things slower and harder to work with
2:33:48
and harder to work with
2:33:48
and harder to work with so having code reviews is one of these
2:33:51
so having code reviews is one of these
2:33:51
so having code reviews is one of these slices
2:33:52
slices
2:33:52
slices having unit tests could be another slice
2:33:55
having unit tests could be another slice
2:33:55
having unit tests could be another slice having
2:33:55
having
2:33:56
having runtime error detection is another
2:33:58
runtime error detection is another
2:33:58
runtime error detection is another automating deployments
2:34:01
automating deployments
2:34:01
automating deployments is another there are lots of these
2:34:03
is another there are lots of these
2:34:03
is another there are lots of these little slices you should add
2:34:06
little slices you should add
2:34:06
little slices you should add which all catch different errors and
2:34:08
which all catch different errors and
2:34:08
which all catch different errors and work together
2:34:10
work together
2:34:10
work together to prevent well almost all errors
2:34:12
to prevent well almost all errors
2:34:12
to prevent well almost all errors reaching production
2:34:14
reaching production
2:34:14
reaching production but you'll still have some errors there
2:34:17
but you'll still have some errors there
2:34:17
but you'll still have some errors there like there is no
2:34:18
like there is no
2:34:18
like there is no bug free software there is no bug-free
2:34:21
bug free software there is no bug-free
2:34:21
bug free software there is no bug-free runtime environment so
2:34:23
runtime environment so
2:34:23
runtime environment so you will still always need to deal with
2:34:25
you will still always need to deal with
2:34:25
you will still always need to deal with errors
2:34:26
errors
2:34:26
errors at runtime but who am i
2:34:29
at runtime but who am i
2:34:29
at runtime but who am i my name is mr beyer also known as the
2:34:31
my name is mr beyer also known as the
2:34:31
my name is mr beyer also known as the problem solver
2:34:33
problem solver
2:34:33
problem solver i'm a microsoft mvp which explains the
2:34:36
i'm a microsoft mvp which explains the
2:34:36
i'm a microsoft mvp which explains the c-sharp and azure backgrounds
2:34:40
c-sharp and azure backgrounds
2:34:40
c-sharp and azure backgrounds which i use on the server i'm a
2:34:42
which i use on the server i'm a
2:34:42
which i use on the server i'm a freelance lead developer instructor
2:34:45
freelance lead developer instructor
2:34:45
freelance lead developer instructor architect i've got a twitter handle
2:34:48
architect i've got a twitter handle
2:34:48
architect i've got a twitter handle and a website although there isn't all
2:34:51
and a website although there isn't all
2:34:52
and a website although there isn't all that much interesting
2:34:53
that much interesting
2:34:53
that much interesting there my twitter handle is probably the
2:34:55
there my twitter handle is probably the
2:34:55
there my twitter handle is probably the most interested
2:34:57
most interested
2:34:57
most interested and if you want a copy of these slides i
2:34:59
and if you want a copy of these slides i
2:34:59
and if you want a copy of these slides i will
2:35:00
will
2:35:00
will post them on a slide
2:35:04
post them on a slide
2:35:04
post them on a slide share after the session and i'll tweet
2:35:07
share after the session and i'll tweet
2:35:07
share after the session and i'll tweet a link to them so just check my twitter
2:35:11
a link to them so just check my twitter
2:35:11
a link to them so just check my twitter account now if you're interested in
2:35:14
account now if you're interested in
2:35:14
account now if you're interested in react i've also got a react newsletter
2:35:17
react i've also got a react newsletter
2:35:17
react i've also got a react newsletter if you scan these qr codes it will take
2:35:19
if you scan these qr codes it will take
2:35:19
if you scan these qr codes it will take you to registration page
2:35:21
you to registration page
2:35:21
you to registration page if you register you'll get one email a
2:35:24
if you register you'll get one email a
2:35:24
if you register you'll get one email a week
2:35:24
week
2:35:24
week every wednesday afternoon i send out
2:35:28
every wednesday afternoon i send out
2:35:28
every wednesday afternoon i send out one newsletter there's six posts in
2:35:30
one newsletter there's six posts in
2:35:30
one newsletter there's six posts in there
2:35:31
there
2:35:31
there and one link to a video which i find
2:35:34
and one link to a video which i find
2:35:34
and one link to a video which i find interesting
2:35:35
interesting
2:35:35
interesting i'm not going to use your email for
2:35:37
i'm not going to use your email for
2:35:37
i'm not going to use your email for anything else you won't get any spam
2:35:39
anything else you won't get any spam
2:35:40
anything else you won't get any spam i'm not going to sell it to whoever
2:35:42
i'm not going to sell it to whoever
2:35:42
i'm not going to sell it to whoever wants to
2:35:43
wants to
2:35:43
wants to spam you there are plenty of people
2:35:46
spam you there are plenty of people
2:35:46
spam you there are plenty of people doing that
2:35:47
doing that
2:35:47
doing that i don't so perfectly safe and if you
2:35:49
i don't so perfectly safe and if you
2:35:49
i don't so perfectly safe and if you want to unsubscribe
2:35:51
want to unsubscribe
2:35:51
want to unsubscribe you can do so at any time
2:35:55
you can do so at any time
2:35:55
you can do so at any time now when it comes to building large
2:35:57
now when it comes to building large
2:35:57
now when it comes to building large applications first thing i want to take
2:35:59
applications first thing i want to take
2:35:59
applications first thing i want to take a look at
2:35:59
a look at
2:36:00
a look at is the language we actually use so
2:36:02
is the language we actually use so
2:36:02
is the language we actually use so traditionally on the web we use
2:36:04
traditionally on the web we use
2:36:04
traditionally on the web we use javascript
2:36:05
javascript
2:36:05
javascript but i really recommend you use
2:36:07
but i really recommend you use
2:36:07
but i really recommend you use typescript
2:36:09
typescript
2:36:09
typescript now javascript is a nice language but
2:36:12
now javascript is a nice language but
2:36:12
now javascript is a nice language but it has its quirks and typescript builds
2:36:15
it has its quirks and typescript builds
2:36:15
it has its quirks and typescript builds on top of that making a lot more
2:36:17
on top of that making a lot more
2:36:17
on top of that making a lot more reliable
2:36:18
reliable
2:36:18
reliable as the website says type javascript
2:36:21
as the website says type javascript
2:36:22
as the website says type javascript at any scale now it's true
2:36:25
at any scale now it's true
2:36:25
at any scale now it's true there is a bit of overhead there if i
2:36:27
there is a bit of overhead there if i
2:36:27
there is a bit of overhead there if i write a small
2:36:28
write a small
2:36:28
write a small demo i might write it in javascript
2:36:31
demo i might write it in javascript
2:36:31
demo i might write it in javascript because i can quickly
2:36:32
because i can quickly
2:36:32
because i can quickly whip things together throw things
2:36:34
whip things together throw things
2:36:34
whip things together throw things together and get it running
2:36:36
together and get it running
2:36:36
together and get it running but if i want to create a serious
2:36:38
but if i want to create a serious
2:36:38
but if i want to create a serious application which needs to run
2:36:40
application which needs to run
2:36:40
application which needs to run for years where multiple people are
2:36:42
for years where multiple people are
2:36:42
for years where multiple people are going to work in it
2:36:44
going to work in it
2:36:44
going to work in it presumably when the original developers
2:36:47
presumably when the original developers
2:36:47
presumably when the original developers me or someone else have left then
2:36:50
me or someone else have left then
2:36:50
me or someone else have left then it's really important that you share as
2:36:53
it's really important that you share as
2:36:54
it's really important that you share as much
2:36:54
much
2:36:54
much about the code as possible and you can't
2:36:57
about the code as possible and you can't
2:36:57
about the code as possible and you can't tell someone everything you can't
2:36:59
tell someone everything you can't
2:36:59
tell someone everything you can't remember anything
2:37:01
remember anything
2:37:01
remember anything i can't remember all the code i wrote so
2:37:04
i can't remember all the code i wrote so
2:37:04
i can't remember all the code i wrote so typescript
2:37:04
typescript
2:37:04
typescript really helps if you make some assumption
2:37:07
really helps if you make some assumption
2:37:07
really helps if you make some assumption about the code which is wrong
2:37:08
about the code which is wrong
2:37:08
about the code which is wrong well in javascript it would crash at
2:37:11
well in javascript it would crash at
2:37:11
well in javascript it would crash at runtime
2:37:12
runtime
2:37:12
runtime or maybe it would just silently do the
2:37:14
or maybe it would just silently do the
2:37:14
or maybe it would just silently do the wrong thing
2:37:15
wrong thing
2:37:15
wrong thing with typescript in a lot of cases you'll
2:37:17
with typescript in a lot of cases you'll
2:37:17
with typescript in a lot of cases you'll get a type
2:37:19
get a type
2:37:19
get a type compilation error and typescript is
2:37:21
compilation error and typescript is
2:37:21
compilation error and typescript is going to tell you oh you're using this
2:37:23
going to tell you oh you're using this
2:37:23
going to tell you oh you're using this react prop and that's
2:37:24
react prop and that's
2:37:24
react prop and that's actually type wrong you're passing in a
2:37:26
actually type wrong you're passing in a
2:37:26
actually type wrong you're passing in a string which should be in
2:37:28
string which should be in
2:37:28
string which should be in number or something like that
2:37:31
number or something like that
2:37:31
number or something like that so i highly recommend typescript for any
2:37:34
so i highly recommend typescript for any
2:37:34
so i highly recommend typescript for any serious work
2:37:37
serious work
2:37:37
serious work now the couple of features i want to
2:37:38
now the couple of features i want to
2:37:38
now the couple of features i want to highlight things like
2:37:40
highlight things like
2:37:40
highlight things like typed unions and tuples which are really
2:37:42
typed unions and tuples which are really
2:37:42
typed unions and tuples which are really nice
2:37:43
nice
2:37:43
nice with the type union you can be very
2:37:45
with the type union you can be very
2:37:45
with the type union you can be very strict about things you could say well
2:37:47
strict about things you could say well
2:37:47
strict about things you could say well i've got this property as a birthday
2:37:50
i've got this property as a birthday
2:37:50
i've got this property as a birthday which
2:37:51
which
2:37:51
which could be a string or a date because we
2:37:54
could be a string or a date because we
2:37:54
could be a string or a date because we sterilize dates as
2:37:55
sterilize dates as
2:37:55
sterilize dates as strings in json but you could also be
2:37:59
strings in json but you could also be
2:37:59
strings in json but you could also be much stricter like saying i've got a
2:38:02
much stricter like saying i've got a
2:38:02
much stricter like saying i've got a property here
2:38:03
property here
2:38:03
property here which is say search criteria and that
2:38:06
which is say search criteria and that
2:38:06
which is say search criteria and that could be
2:38:07
could be
2:38:08
could be either the string including or
2:38:11
either the string including or
2:38:11
either the string including or starts with or ends with or must be an
2:38:14
starts with or ends with or must be an
2:38:14
starts with or ends with or must be an exact match so it must be
2:38:17
exact match so it must be
2:38:17
exact match so it must be one of those four items not something
2:38:20
one of those four items not something
2:38:20
one of those four items not something else
2:38:22
else
2:38:22
else tuples are another nice one they kind of
2:38:24
tuples are another nice one they kind of
2:38:24
tuples are another nice one they kind of look like a race
2:38:26
look like a race
2:38:26
look like a race and an example of a tuple with react is
2:38:28
and an example of a tuple with react is
2:38:28
and an example of a tuple with react is if you use
2:38:29
if you use
2:38:29
if you use the u state hook it returns what looks
2:38:32
the u state hook it returns what looks
2:38:32
the u state hook it returns what looks like an array of two items the first is
2:38:35
like an array of two items the first is
2:38:35
like an array of two items the first is the
2:38:35
the
2:38:35
the state object the current state you're
2:38:39
state object the current state you're
2:38:39
state object the current state you're maintaining the second is a changer
2:38:41
maintaining the second is a changer
2:38:41
maintaining the second is a changer function well it's always that structure
2:38:44
function well it's always that structure
2:38:44
function well it's always that structure that's a tuple really nice to work with
2:38:47
that's a tuple really nice to work with
2:38:48
that's a tuple really nice to work with optional chaining null coalescence
2:38:49
optional chaining null coalescence
2:38:50
optional chaining null coalescence operator
2:38:51
operator
2:38:51
operator they're actually in javascript modern
2:38:52
they're actually in javascript modern
2:38:52
they're actually in javascript modern javascript as well
2:38:54
javascript as well
2:38:54
javascript as well they make working with undefined and
2:38:56
they make working with undefined and
2:38:56
they make working with undefined and null
2:38:58
null
2:38:58
null things like that which might be there
2:39:00
things like that which might be there
2:39:00
things like that which might be there might not be
2:39:01
might not be
2:39:01
might not be a lot safer a lot easier so highly
2:39:03
a lot safer a lot easier so highly
2:39:03
a lot safer a lot easier so highly recommended
2:39:04
recommended
2:39:04
recommended as well now
2:39:08
as well now
2:39:08
as well now you might be working on a project where
2:39:11
you might be working on a project where
2:39:11
you might be working on a project where you think well typescript is great
2:39:12
you think well typescript is great
2:39:12
you think well typescript is great but the people that actually started
2:39:15
but the people that actually started
2:39:15
but the people that actually started this project
2:39:16
this project
2:39:16
this project they didn't do that they started in
2:39:19
they didn't do that they started in
2:39:19
they didn't do that they started in javascript
2:39:20
javascript
2:39:20
javascript maybe that was a number of years ago
2:39:23
maybe that was a number of years ago
2:39:23
maybe that was a number of years ago maybe
2:39:24
maybe
2:39:24
maybe they don't really like typescript not
2:39:26
they don't really like typescript not
2:39:26
they don't really like typescript not everyone does
2:39:27
everyone does
2:39:27
everyone does that's fine so they started in
2:39:30
that's fine so they started in
2:39:30
that's fine so they started in javascript and then it grows becomes
2:39:32
javascript and then it grows becomes
2:39:32
javascript and then it grows becomes popular you want to get more reliability
2:39:35
popular you want to get more reliability
2:39:35
popular you want to get more reliability you want to
2:39:35
you want to
2:39:35
you want to start converting things to typescript
2:39:38
start converting things to typescript
2:39:38
start converting things to typescript while doing so is actually quite easy
2:39:40
while doing so is actually quite easy
2:39:40
while doing so is actually quite easy with react if you're using create react
2:39:43
with react if you're using create react
2:39:43
with react if you're using create react app
2:39:43
app
2:39:43
app you just start renaming files to
2:39:47
you just start renaming files to
2:39:47
you just start renaming files to ts or tsx
2:39:49
ts or tsx
2:39:49
ts or tsx [Music]
2:39:51
[Music]
2:39:51
[Music] import or npm install the typescript
2:39:54
import or npm install the typescript
2:39:54
import or npm install the typescript compiler create the ts config file or
2:39:57
compiler create the ts config file or
2:39:57
compiler create the ts config file or actually it will do that
2:39:59
actually it will do that
2:39:59
actually it will do that for you if you don't and you're good to
2:40:02
for you if you don't and you're good to
2:40:02
for you if you don't and you're good to go
2:40:03
go
2:40:03
go but then converting all those files
2:40:05
but then converting all those files
2:40:05
but then converting all those files takes a lot of time
2:40:07
takes a lot of time
2:40:07
takes a lot of time it would be kind of nice if you could go
2:40:09
it would be kind of nice if you could go
2:40:09
it would be kind of nice if you could go to your manager and say well
2:40:11
to your manager and say well
2:40:11
to your manager and say well we want to make the application more
2:40:13
we want to make the application more
2:40:13
we want to make the application more reliable give us a month and we'll
2:40:15
reliable give us a month and we'll
2:40:15
reliable give us a month and we'll convert everything to typescript
2:40:17
convert everything to typescript
2:40:17
convert everything to typescript by the way in the meantime in that month
2:40:19
by the way in the meantime in that month
2:40:19
by the way in the meantime in that month we're not going to release anything
2:40:21
we're not going to release anything
2:40:21
we're not going to release anything because we're kind of converting
2:40:22
because we're kind of converting
2:40:22
because we're kind of converting anything
2:40:24
anything
2:40:24
anything in all likelihoods they're going to say
2:40:27
in all likelihoods they're going to say
2:40:27
in all likelihoods they're going to say no we need to release features for our
2:40:30
no we need to release features for our
2:40:30
no we need to release features for our end users
2:40:31
end users
2:40:31
end users which makes sense because in the end
2:40:34
which makes sense because in the end
2:40:34
which makes sense because in the end they pay for the bills and they make
2:40:36
they pay for the bills and they make
2:40:36
they pay for the bills and they make sure that things
2:40:37
sure that things
2:40:37
sure that things can get done and they don't pay for you
2:40:41
can get done and they don't pay for you
2:40:41
can get done and they don't pay for you rewriting things from javascript to
2:40:42
rewriting things from javascript to
2:40:42
rewriting things from javascript to typescript
2:40:45
typescript
2:40:45
typescript now there are cases where just renaming
2:40:48
now there are cases where just renaming
2:40:48
now there are cases where just renaming files and adding type annotations
2:40:50
files and adding type annotations
2:40:50
files and adding type annotations is simple easy and will just work but
2:40:53
is simple easy and will just work but
2:40:53
is simple easy and will just work but there are other cases when that's not so
2:40:55
there are other cases when that's not so
2:40:55
there are other cases when that's not so easy
2:40:56
easy
2:40:56
easy in that case adding jsdocs commons will
2:40:59
in that case adding jsdocs commons will
2:40:59
in that case adding jsdocs commons will help a lot
2:41:00
help a lot
2:41:00
help a lot you can kind of take javascript file add
2:41:03
you can kind of take javascript file add
2:41:03
you can kind of take javascript file add js doc comments for things which are
2:41:05
js doc comments for things which are
2:41:05
js doc comments for things which are used in
2:41:06
used in
2:41:06
used in other typescript files the type
2:41:08
other typescript files the type
2:41:08
other typescript files the type annotations in those
2:41:10
annotations in those
2:41:10
annotations in those js doc annotations will be used by the
2:41:13
js doc annotations will be used by the
2:41:13
js doc annotations will be used by the typescript compiler
2:41:14
typescript compiler
2:41:14
typescript compiler but you're not forced to do the whole
2:41:16
but you're not forced to do the whole
2:41:16
but you're not forced to do the whole file yet so you can do partial
2:41:19
file yet so you can do partial
2:41:19
file yet so you can do partial file conversions and the nice thing is
2:41:21
file conversions and the nice thing is
2:41:21
file conversions and the nice thing is when you're
2:41:23
when you're
2:41:23
when you're actually going to convert that file to
2:41:25
actually going to convert that file to
2:41:26
actually going to convert that file to typescript
2:41:26
typescript
2:41:26
typescript you've already got most of your type
2:41:28
you've already got most of your type
2:41:28
you've already got most of your type annotations sorted out
2:41:30
annotations sorted out
2:41:30
annotations sorted out you just move them from jsdoc into the
2:41:32
you just move them from jsdoc into the
2:41:32
you just move them from jsdoc into the actual typescript annotations
2:41:34
actual typescript annotations
2:41:34
actual typescript annotations and you're good to go
2:41:38
other nice things are map types in
2:41:41
other nice things are map types in
2:41:41
other nice things are map types in typescript
2:41:42
typescript
2:41:42
typescript and specifically things like read only
2:41:45
and specifically things like read only
2:41:45
and specifically things like read only if you're using react you've got
2:41:46
if you're using react you've got
2:41:46
if you're using react you've got props and props should never be changed
2:41:49
props and props should never be changed
2:41:49
props and props should never be changed in the component
2:41:50
in the component
2:41:50
in the component if you pass a prop to a child component
2:41:52
if you pass a prop to a child component
2:41:52
if you pass a prop to a child component for that child component it should be
2:41:54
for that child component it should be
2:41:54
for that child component it should be considered read-only
2:41:56
considered read-only
2:41:56
considered read-only but javascript doesn't enforce that
2:41:59
but javascript doesn't enforce that
2:41:59
but javascript doesn't enforce that neither does react
2:42:02
neither does react
2:42:02
neither does react typescript by itself doesn't do so
2:42:04
typescript by itself doesn't do so
2:42:04
typescript by itself doesn't do so either you define a prop say as a type
2:42:06
either you define a prop say as a type
2:42:06
either you define a prop say as a type of person well
2:42:07
of person well
2:42:07
of person well in that case it's a person and a person
2:42:10
in that case it's a person and a person
2:42:10
in that case it's a person and a person type is by default read write
2:42:14
type is by default read write
2:42:14
type is by default read write but you can define them as read only and
2:42:16
but you can define them as read only and
2:42:16
but you can define them as read only and in that case you'll actually get a
2:42:17
in that case you'll actually get a
2:42:17
in that case you'll actually get a compile error
2:42:19
compile error
2:42:19
compile error so let me show you an example of that
2:42:23
i've got a component here single account
2:42:26
i've got a component here single account
2:42:26
i've got a component here single account and that takes an
2:42:27
and that takes an
2:42:27
and that takes an account prop and i've defined that
2:42:31
account prop and i've defined that
2:42:31
account prop and i've defined that account prop as
2:42:32
account prop as
2:42:32
account prop as read only here so i've basically said
2:42:35
read only here so i've basically said
2:42:35
read only here so i've basically said okay this is a read only
2:42:36
okay this is a read only
2:42:36
okay this is a read only property now if i did something
2:42:40
property now if i did something
2:42:40
property now if i did something silly i shouldn't do that but
2:42:43
silly i shouldn't do that but
2:42:43
silly i shouldn't do that but i could i could say account.balance
2:42:47
i could i could say account.balance
2:42:47
i could i could say account.balance is whatever i think it's a string
2:42:52
is whatever i think it's a string
2:42:52
is whatever i think it's a string now it actually complains oh it should
2:42:53
now it actually complains oh it should
2:42:54
now it actually complains oh it should be a number so
2:42:55
be a number so
2:42:55
be a number so which makes sense for a balance but now
2:42:57
which makes sense for a balance but now
2:42:57
which makes sense for a balance but now it complains that
2:42:59
it complains that
2:42:59
it complains that cannot assign balance because it's a
2:43:01
cannot assign balance because it's a
2:43:01
cannot assign balance because it's a read only
2:43:02
read only
2:43:02
read only but if i had left that redone read only
2:43:05
but if i had left that redone read only
2:43:05
but if i had left that redone read only out now it would compile just fine it
2:43:08
out now it would compile just fine it
2:43:08
out now it would compile just fine it would be happy
2:43:11
would be happy
2:43:11
would be happy big no no in react land so
2:43:14
big no no in react land so
2:43:14
big no no in react land so let's not do this let's get rid of this
2:43:17
let's not do this let's get rid of this
2:43:17
let's not do this let's get rid of this again so my code actually runs
2:43:21
other useful things are things like
2:43:24
other useful things are things like
2:43:24
other useful things are things like react.component props
2:43:26
react.component props
2:43:26
react.component props if someone maybe your own code maybe
2:43:28
if someone maybe your own code maybe
2:43:28
if someone maybe your own code maybe some code you get from a library
2:43:30
some code you get from a library
2:43:30
some code you get from a library exposes a component and you want to
2:43:33
exposes a component and you want to
2:43:33
exposes a component and you want to actually know the props well maybe they
2:43:35
actually know the props well maybe they
2:43:35
actually know the props well maybe they exposed them maybe they didn't
2:43:37
exposed them maybe they didn't
2:43:37
exposed them maybe they didn't but if they didn't you can actually
2:43:38
but if they didn't you can actually
2:43:38
but if they didn't you can actually retrieve the prop
2:43:40
retrieve the prop
2:43:40
retrieve the prop types for that component using component
2:43:43
types for that component using component
2:43:43
types for that component using component props
2:43:45
props
2:43:45
props really nice i use that a lot in fact you
2:43:48
really nice i use that a lot in fact you
2:43:48
really nice i use that a lot in fact you can do that with anything
2:43:49
can do that with anything
2:43:50
can do that with anything you can do that with the function if
2:43:51
you can do that with the function if
2:43:51
you can do that with the function if you've got a function
2:43:53
you've got a function
2:43:53
you've got a function you could do this give me the return
2:43:56
you could do this give me the return
2:43:56
you could do this give me the return type of that function
2:43:58
type of that function
2:43:58
type of that function or give me an array of the parameter
2:44:00
or give me an array of the parameter
2:44:00
or give me an array of the parameter types of that function
2:44:02
types of that function
2:44:02
types of that function and then you can combine those and map
2:44:04
and then you can combine those and map
2:44:04
and then you can combine those and map those to other types or do something
2:44:05
those to other types or do something
2:44:05
those to other types or do something with it
2:44:07
with it
2:44:07
with it doesn't matter if this comes from an npm
2:44:09
doesn't matter if this comes from an npm
2:44:09
doesn't matter if this comes from an npm package
2:44:10
package
2:44:10
package something you wrote yourself it will
2:44:13
something you wrote yourself it will
2:44:13
something you wrote yourself it will always work
2:44:14
always work
2:44:14
always work really convenient
2:44:18
really convenient
2:44:18
really convenient another great thing is es modules now
2:44:21
another great thing is es modules now
2:44:21
another great thing is es modules now again
2:44:21
again
2:44:21
again not specific to typescript you could use
2:44:24
not specific to typescript you could use
2:44:24
not specific to typescript you could use those with javascript and in fact i
2:44:26
those with javascript and in fact i
2:44:26
those with javascript and in fact i would highly recommend you
2:44:27
would highly recommend you
2:44:27
would highly recommend you always use es modules with typescript
2:44:32
always use es modules with typescript
2:44:32
always use es modules with typescript or javascript but with
2:44:35
or javascript but with
2:44:35
or javascript but with modules there are different ways you can
2:44:37
modules there are different ways you can
2:44:37
modules there are different ways you can import and export things
2:44:39
import and export things
2:44:39
import and export things now with react you typically see that a
2:44:43
now with react you typically see that a
2:44:43
now with react you typically see that a component is exported
2:44:44
component is exported
2:44:44
component is exported as a default export and then
2:44:47
as a default export and then
2:44:47
as a default export and then on where it's used it's imported as a
2:44:51
on where it's used it's imported as a
2:44:51
on where it's used it's imported as a default import now that works
2:44:54
default import now that works
2:44:54
default import now that works it's not a big problem per se
2:44:57
it's not a big problem per se
2:44:57
it's not a big problem per se but the thing is you can do this i could
2:45:00
but the thing is you can do this i could
2:45:00
but the thing is you can do this i could say
2:45:00
say
2:45:00
say exports default
2:45:04
exports default
2:45:04
exports default function single accounts now because i
2:45:06
function single accounts now because i
2:45:06
function single accounts now because i changed only this side the other was
2:45:08
changed only this side the other was
2:45:08
changed only this side the other was broken
2:45:09
broken
2:45:09
broken and i could make this single accounts
2:45:12
and i could make this single accounts
2:45:12
and i could make this single accounts stuff now i've got a file single account
2:45:16
stuff now i've got a file single account
2:45:16
stuff now i've got a file single account with psx i've got a component named
2:45:18
with psx i've got a component named
2:45:18
with psx i've got a component named single account stuff and it's used
2:45:20
single account stuff and it's used
2:45:20
single account stuff and it's used somewhere else under
2:45:22
somewhere else under
2:45:22
somewhere else under maybe yet another name which makes it
2:45:24
maybe yet another name which makes it
2:45:24
maybe yet another name which makes it hard to understand what's going on
2:45:27
hard to understand what's going on
2:45:27
hard to understand what's going on if i undo my changes so it's named
2:45:30
if i undo my changes so it's named
2:45:30
if i undo my changes so it's named export
2:45:31
export
2:45:31
export now i know that it's always used under
2:45:33
now i know that it's always used under
2:45:33
now i know that it's always used under this name
2:45:34
this name
2:45:34
this name if i want to rename it go to
2:45:37
if i want to rename it go to
2:45:37
if i want to rename it go to i pressed f2 so the rename refactor or
2:45:40
i pressed f2 so the rename refactor or
2:45:40
i pressed f2 so the rename refactor or you can do control dot
2:45:42
you can do control dot
2:45:42
you can do control dot convert actually
2:45:45
convert actually
2:45:45
convert actually no i'll do f2 for the rename
2:45:48
no i'll do f2 for the rename
2:45:48
no i'll do f2 for the rename i'll call it single account stuff
2:45:52
i'll call it single account stuff
2:45:52
i'll call it single account stuff and now you can see up here there are
2:45:56
and now you can see up here there are
2:45:56
and now you can see up here there are two changes two files and unchanged
2:46:00
two changes two files and unchanged
2:46:00
two changes two files and unchanged and the other is actually these bank
2:46:02
and the other is actually these bank
2:46:02
and the other is actually these bank accounts
2:46:04
accounts
2:46:04
accounts and whereas it's right here
2:46:08
and whereas it's right here
2:46:08
and whereas it's right here it actually changed that named import so
2:46:11
it actually changed that named import so
2:46:11
it actually changed that named import so tooling lots of stuff tends to work
2:46:14
tooling lots of stuff tends to work
2:46:14
tooling lots of stuff tends to work better with named
2:46:15
better with named
2:46:15
better with named import and exports than with default
2:46:17
import and exports than with default
2:46:17
import and exports than with default named
2:46:18
named
2:46:18
named exports so highly recommended
2:46:22
exports so highly recommended
2:46:22
exports so highly recommended to always use that
2:46:28
now in the future react is going to do
2:46:32
now in the future react is going to do
2:46:32
now in the future react is going to do that as well
2:46:33
that as well
2:46:33
that as well right now if you work with react what
2:46:35
right now if you work with react what
2:46:35
right now if you work with react what you see a lot
2:46:37
you see a lot
2:46:37
you see a lot is this import react from react
2:46:41
is this import react from react
2:46:41
is this import react from react works fine no problem in fact with react
2:46:44
works fine no problem in fact with react
2:46:44
works fine no problem in fact with react 17 you typically don't even need to do
2:46:47
17 you typically don't even need to do
2:46:47
17 you typically don't even need to do this anymore
2:46:48
this anymore
2:46:48
this anymore but you still see that quite a lot
2:46:49
but you still see that quite a lot
2:46:50
but you still see that quite a lot because then people
2:46:51
because then people
2:46:51
because then people use react.ustate for instance
2:46:55
use react.ustate for instance
2:46:55
use react.ustate for instance in the future react will stop publishing
2:46:58
in the future react will stop publishing
2:46:58
in the future react will stop publishing everything as a default export so that
2:47:00
everything as a default export so that
2:47:00
everything as a default export so that default import won't work anymore
2:47:03
default import won't work anymore
2:47:03
default import won't work anymore so you use either of these top two
2:47:07
so you use either of these top two
2:47:07
so you use either of these top two syntaxes use named imports which is my
2:47:09
syntaxes use named imports which is my
2:47:09
syntaxes use named imports which is my recommendation
2:47:10
recommendation
2:47:10
recommendation or used import stair us which is
2:47:13
or used import stair us which is
2:47:13
or used import stair us which is basically a wildcard import
2:47:16
basically a wildcard import
2:47:16
basically a wildcard import i don't recommend that second one unless
2:47:18
i don't recommend that second one unless
2:47:18
i don't recommend that second one unless you have to because it basically means
2:47:20
you have to because it basically means
2:47:20
you have to because it basically means you
2:47:20
you
2:47:20
you include everything from react whether
2:47:22
include everything from react whether
2:47:22
include everything from react whether you actually use it or not
2:47:25
you actually use it or not
2:47:25
you actually use it or not in the case of react probably not a big
2:47:27
in the case of react probably not a big
2:47:27
in the case of react probably not a big issue but if you import
2:47:29
issue but if you import
2:47:29
issue but if you import something from low dash that way you
2:47:31
something from low dash that way you
2:47:31
something from low dash that way you would include the complete low dash
2:47:33
would include the complete low dash
2:47:33
would include the complete low dash package whether you actually need it or
2:47:35
package whether you actually need it or
2:47:35
package whether you actually need it or not and you probably
2:47:37
not and you probably
2:47:37
not and you probably are only using a small subset of it
2:47:40
are only using a small subset of it
2:47:40
are only using a small subset of it keeps your bundle
2:47:41
keeps your bundle
2:47:41
keeps your bundle from growing way too large
2:47:45
from growing way too large
2:47:45
from growing way too large now react 18 is about to ship
2:47:48
now react 18 is about to ship
2:47:48
now react 18 is about to ship or will be relatively soon it's in alpha
2:47:51
or will be relatively soon it's in alpha
2:47:51
or will be relatively soon it's in alpha at the moment
2:47:52
at the moment
2:47:52
at the moment um this is not going to change in react
2:47:54
um this is not going to change in react
2:47:54
um this is not going to change in react 18 it's
2:47:55
18 it's
2:47:55
18 it's like it says here react 19 or 20
2:47:59
like it says here react 19 or 20
2:47:59
like it says here react 19 or 20 but it will change and it will kind of
2:48:01
but it will change and it will kind of
2:48:01
but it will change and it will kind of prepare
2:48:02
prepare
2:48:02
prepare us now of course this doesn't influence
2:48:05
us now of course this doesn't influence
2:48:05
us now of course this doesn't influence how we
2:48:05
how we
2:48:06
how we work with our own components but i would
2:48:08
work with our own components but i would
2:48:08
work with our own components but i would still recommend
2:48:09
still recommend
2:48:10
still recommend take the same approach skip the default
2:48:12
take the same approach skip the default
2:48:12
take the same approach skip the default exports
2:48:13
exports
2:48:13
exports and imports
2:48:17
and imports
2:48:17
and imports another thing i would recommend is use
2:48:20
another thing i would recommend is use
2:48:20
another thing i would recommend is use es build instead of webpack
2:48:23
es build instead of webpack
2:48:23
es build instead of webpack and babel to compile things
2:48:26
and babel to compile things
2:48:26
and babel to compile things this is screenshot from the eslint
2:48:28
this is screenshot from the eslint
2:48:28
this is screenshot from the eslint website and if you look here
2:48:31
website and if you look here
2:48:31
website and if you look here is build compiles something in 0.37
2:48:35
is build compiles something in 0.37
2:48:36
is build compiles something in 0.37 seconds now what does it compile here
2:48:38
seconds now what does it compile here
2:48:38
seconds now what does it compile here it's actually 10
2:48:39
it's actually 10
2:48:39
it's actually 10 copies as it says here from 3g js
2:48:43
copies as it says here from 3g js
2:48:43
copies as it says here from 3g js a graphical library
2:48:45
a graphical library
2:48:45
a graphical library [Music]
2:48:47
[Music]
2:48:47
[Music] create react app currently uses webpack
2:48:50
create react app currently uses webpack
2:48:50
create react app currently uses webpack 4
2:48:51
4
2:48:51
4 so the same compilation with webpack 4
2:48:54
so the same compilation with webpack 4
2:48:54
so the same compilation with webpack 4 takes 41 well almost 42 seconds
2:48:59
takes 41 well almost 42 seconds
2:48:59
takes 41 well almost 42 seconds that's more than 10 times faster
2:49:02
that's more than 10 times faster
2:49:02
that's more than 10 times faster kind of nice i like fast compilers
2:49:05
kind of nice i like fast compilers
2:49:05
kind of nice i like fast compilers i like fast feedback so i want my code
2:49:08
i like fast feedback so i want my code
2:49:08
i like fast feedback so i want my code to compile
2:49:10
to compile
2:49:10
to compile fast but that's kind of like hmm
2:49:13
fast but that's kind of like hmm
2:49:13
fast but that's kind of like hmm okay i'm using create react app
2:49:17
okay i'm using create react app
2:49:18
okay i'm using create react app a lot to host my application correct
2:49:21
a lot to host my application correct
2:49:21
a lot to host my application correct create react app uses webpack it uses
2:49:24
create react app uses webpack it uses
2:49:24
create react app uses webpack it uses babel
2:49:25
babel
2:49:25
babel so if i'm doing that how can i actually
2:49:29
so if i'm doing that how can i actually
2:49:29
so if i'm doing that how can i actually use
2:49:30
use
2:49:30
use eslint sorry is build not eslint of
2:49:33
eslint sorry is build not eslint of
2:49:33
eslint sorry is build not eslint of course
2:49:34
course
2:49:34
course well there are quite a few alternatives
2:49:37
well there are quite a few alternatives
2:49:37
well there are quite a few alternatives to create react app and one i've been
2:49:40
to create react app and one i've been
2:49:40
to create react app and one i've been using a lot lately
2:49:41
using a lot lately
2:49:42
using a lot lately is feed vt is french for fast it's
2:49:45
is feed vt is french for fast it's
2:49:45
is feed vt is french for fast it's created by avenue
2:49:46
created by avenue
2:49:46
created by avenue the creator of view
2:49:50
the creator of view
2:49:50
the creator of view and it's a slightly different way of
2:49:53
and it's a slightly different way of
2:49:53
and it's a slightly different way of hosting
2:49:54
hosting
2:49:54
hosting your application in development but it
2:49:57
your application in development but it
2:49:57
your application in development but it uses e is built
2:49:59
uses e is built
2:49:59
uses e is built under the hood so it's a lot faster
2:50:03
under the hood so it's a lot faster
2:50:03
under the hood so it's a lot faster and to give you an example of how fast
2:50:06
and to give you an example of how fast
2:50:06
and to give you an example of how fast it is i've got a little
2:50:07
it is i've got a little
2:50:07
it is i've got a little project here which i created with
2:50:10
project here which i created with
2:50:10
project here which i created with create react app but then i added
2:50:13
create react app but then i added
2:50:13
create react app but then i added veed to it so we can kind of see the
2:50:16
veed to it so we can kind of see the
2:50:16
veed to it so we can kind of see the difference
2:50:17
difference
2:50:17
difference if i do npm start it starts
2:50:21
if i do npm start it starts
2:50:21
if i do npm start it starts with create react app so babble and
2:50:23
with create react app so babble and
2:50:23
with create react app so babble and webpack
2:50:24
webpack
2:50:24
webpack now this isn't a huge project but i've
2:50:27
now this isn't a huge project but i've
2:50:27
now this isn't a huge project but i've generated
2:50:28
generated
2:50:28
generated some components here it's like i think
2:50:31
some components here it's like i think
2:50:31
some components here it's like i think there are a thousand components or so
2:50:33
there are a thousand components or so
2:50:33
there are a thousand components or so so it's not tiny but it's certainly not
2:50:35
so it's not tiny but it's certainly not
2:50:35
so it's not tiny but it's certainly not as large as
2:50:36
as large as
2:50:36
as large as some of the applications i've worked on
2:50:39
some of the applications i've worked on
2:50:39
some of the applications i've worked on and if i start it
2:50:40
and if i start it
2:50:40
and if i start it it takes a bit of time and in the
2:50:43
it takes a bit of time and in the
2:50:43
it takes a bit of time and in the meantime let me
2:50:44
meantime let me
2:50:44
meantime let me grab this browser window next to it so
2:50:47
grab this browser window next to it so
2:50:47
grab this browser window next to it so we can see when it's loaded
2:50:49
we can see when it's loaded
2:50:49
we can see when it's loaded so that took something like almost 10
2:50:52
so that took something like almost 10
2:50:52
so that took something like almost 10 seconds i didn't time it this time but i
2:50:54
seconds i didn't time it this time but i
2:50:54
seconds i didn't time it this time but i know from experience that it takes
2:50:56
know from experience that it takes
2:50:56
know from experience that it takes close to 10 seconds on my machine which
2:50:59
close to 10 seconds on my machine which
2:50:59
close to 10 seconds on my machine which is quite fast
2:51:02
is quite fast
2:51:02
is quite fast let me stop this and let me start this
2:51:04
let me stop this and let me start this
2:51:04
let me stop this and let me start this with fit
2:51:05
with fit
2:51:05
with fit npm one bit
2:51:09
npm one bit
2:51:09
npm one bit the exact same application no change
2:51:12
the exact same application no change
2:51:12
the exact same application no change does exactly the same thing
2:51:14
does exactly the same thing
2:51:14
does exactly the same thing and it starts up in 0.25 seconds
2:51:19
and it starts up in 0.25 seconds
2:51:19
and it starts up in 0.25 seconds 257 seconds 257
2:51:22
257 seconds 257
2:51:22
257 seconds 257 milliseconds that's actually
2:51:26
milliseconds that's actually
2:51:26
milliseconds that's actually a little faster than i'm used to it
2:51:28
a little faster than i'm used to it
2:51:28
a little faster than i'm used to it usually starts in around 0.3 to 0.4
2:51:31
usually starts in around 0.3 to 0.4
2:51:31
usually starts in around 0.3 to 0.4 seconds
2:51:32
seconds
2:51:32
seconds but still that's more than 20 times
2:51:35
but still that's more than 20 times
2:51:35
but still that's more than 20 times faster than
2:51:36
faster than
2:51:36
faster than create react app and it's the same
2:51:39
create react app and it's the same
2:51:39
create react app and it's the same application
2:51:41
application
2:51:41
application it runs just as well locally it compiles
2:51:45
it runs just as well locally it compiles
2:51:45
it runs just as well locally it compiles things much faster so it's a really nice
2:51:48
things much faster so it's a really nice
2:51:48
things much faster so it's a really nice development environment
2:51:50
development environment
2:51:50
development environment so i've been using that a lot as a
2:51:53
so i've been using that a lot as a
2:51:53
so i've been using that a lot as a replacement
2:51:53
replacement
2:51:53
replacement for great react app
2:51:57
for great react app
2:51:57
for great react app now does it work with everything
2:52:01
now does it work with everything
2:52:01
now does it work with everything no in some existing applications i
2:52:04
no in some existing applications i
2:52:04
no in some existing applications i worked on i tried to start using vit
2:52:06
worked on i tried to start using vit
2:52:06
worked on i tried to start using vit and we run into issues where stuff
2:52:09
and we run into issues where stuff
2:52:09
and we run into issues where stuff wouldn't work
2:52:12
wouldn't work
2:52:12
wouldn't work one problem i've been using of running
2:52:14
one problem i've been using of running
2:52:14
one problem i've been using of running into
2:52:15
into
2:52:15
into was this we've got environment files
2:52:19
was this we've got environment files
2:52:19
was this we've got environment files and in reacts if you are with create
2:52:21
and in reacts if you are with create
2:52:21
and in reacts if you are with create react app if you
2:52:22
react app if you
2:52:22
react app if you use these you have to prefix your
2:52:25
use these you have to prefix your
2:52:25
use these you have to prefix your variables with
2:52:26
variables with
2:52:26
variables with react underscore app underscore and then
2:52:29
react underscore app underscore and then
2:52:29
react underscore app underscore and then some name
2:52:30
some name
2:52:30
some name in this case config origin
2:52:33
in this case config origin
2:52:34
in this case config origin with fit you have to prefix it with feed
2:52:37
with fit you have to prefix it with feed
2:52:37
with fit you have to prefix it with feed to underscore
2:52:38
to underscore
2:52:38
to underscore so these change now having the same key
2:52:43
so these change now having the same key
2:52:43
so these change now having the same key here
2:52:43
here
2:52:43
here twice if you want to switch isn't a big
2:52:46
twice if you want to switch isn't a big
2:52:46
twice if you want to switch isn't a big deal
2:52:46
deal
2:52:46
deal but it turns out the change is a bit
2:52:48
but it turns out the change is a bit
2:52:48
but it turns out the change is a bit bigger if you want to consume them
2:52:52
bigger if you want to consume them
2:52:52
bigger if you want to consume them you run into this with create rectapp
2:52:55
you run into this with create rectapp
2:52:55
you run into this with create rectapp i would use that config origin like this
2:52:58
i would use that config origin like this
2:52:58
i would use that config origin like this process.m
2:52:59
process.m
2:52:59
process.m dot create underscore app underscore
2:53:04
dot create underscore app underscore
2:53:04
dot create underscore app underscore the name i specified with vit
2:53:08
the name i specified with vit
2:53:08
the name i specified with vit syntax is slightly different instead of
2:53:10
syntax is slightly different instead of
2:53:10
syntax is slightly different instead of process.m
2:53:11
process.m
2:53:12
process.m i use i have to use import.meta.m
2:53:16
i use i have to use import.meta.m
2:53:16
i use i have to use import.meta.m so if you're using
2:53:20
so if you're using
2:53:20
so if you're using environment settings like this switching
2:53:22
environment settings like this switching
2:53:22
environment settings like this switching is not
2:53:23
is not
2:53:23
is not as simple as straightforward as
2:53:26
as simple as straightforward as
2:53:26
as simple as straightforward as you'd like to i've run into some other
2:53:29
you'd like to i've run into some other
2:53:29
you'd like to i've run into some other issues where
2:53:30
issues where
2:53:30
issues where people were tweaking the way stuff was
2:53:32
people were tweaking the way stuff was
2:53:32
people were tweaking the way stuff was imported
2:53:33
imported
2:53:34
imported and things like that where you wouldn't
2:53:36
and things like that where you wouldn't
2:53:36
and things like that where you wouldn't use relative imports like this
2:53:37
use relative imports like this
2:53:38
use relative imports like this but you could do something like this
2:53:41
but you could do something like this
2:53:41
but you could do something like this and that didn't always work either
2:53:45
and that didn't always work either
2:53:45
and that didn't always work either but in most cases feed works
2:53:48
but in most cases feed works
2:53:48
but in most cases feed works really well now there is a very nice
2:53:51
really well now there is a very nice
2:53:51
really well now there is a very nice alternative to vit
2:53:52
alternative to vit
2:53:52
alternative to vit which is called snowpack which uses a
2:53:54
which is called snowpack which uses a
2:53:54
which is called snowpack which uses a very similar approach and achieves very
2:53:56
very similar approach and achieves very
2:53:56
very similar approach and achieves very similar speeds
2:53:58
similar speeds
2:53:58
similar speeds so if feed doesn't work for you snowpack
2:54:00
so if feed doesn't work for you snowpack
2:54:00
so if feed doesn't work for you snowpack is certainly
2:54:01
is certainly
2:54:01
is certainly one you can also try
2:54:06
one you can also try
2:54:06
one you can also try now that's nice in development because
2:54:08
now that's nice in development because
2:54:08
now that's nice in development because running your application
2:54:10
running your application
2:54:10
running your application fast having it load fast in development
2:54:12
fast having it load fast in development
2:54:12
fast having it load fast in development is really nice but
2:54:13
is really nice but
2:54:14
is really nice but we still need to host our application in
2:54:16
we still need to host our application in
2:54:16
we still need to host our application in production as well
2:54:18
production as well
2:54:18
production as well well with create react app if you build
2:54:21
well with create react app if you build
2:54:22
well with create react app if you build you end up with static files
2:54:25
you end up with static files
2:54:25
you end up with static files if you build with feet it's the same
2:54:27
if you build with feet it's the same
2:54:27
if you build with feet it's the same thing
2:54:28
thing
2:54:28
thing it still doesn't use bubble it uses roll
2:54:30
it still doesn't use bubble it uses roll
2:54:30
it still doesn't use bubble it uses roll up but
2:54:32
up but
2:54:32
up but it still ends up with a bunch of static
2:54:34
it still ends up with a bunch of static
2:54:34
it still ends up with a bunch of static files
2:54:35
files
2:54:35
files and it turns out that hosting those on
2:54:38
and it turns out that hosting those on
2:54:38
and it turns out that hosting those on azure is really really
2:54:40
azure is really really
2:54:40
azure is really really cheap and simple
2:54:43
in a storage account you've got this
2:54:45
in a storage account you've got this
2:54:45
in a storage account you've got this option static website
2:54:48
option static website
2:54:48
option static website and you can enable that the default it's
2:54:51
and you can enable that the default it's
2:54:51
and you can enable that the default it's disabled but you create a
2:54:54
disabled but you create a
2:54:54
disabled but you create a storage account and enable static
2:54:56
storage account and enable static
2:54:56
storage account and enable static website there
2:54:57
website there
2:54:57
website there and then you get a specific
2:55:00
and then you get a specific
2:55:00
and then you get a specific container dollar web and
2:55:04
container dollar web and
2:55:04
container dollar web and in there you just start dropping your
2:55:07
in there you just start dropping your
2:55:07
in there you just start dropping your files
2:55:07
files
2:55:07
files html files javascript files css files
2:55:10
html files javascript files css files
2:55:10
html files javascript files css files etc
2:55:12
etc
2:55:12
etc and you can serve them from there
2:55:15
it's really reliable
2:55:18
it's really reliable
2:55:18
it's really reliable it's really fast and really simple
2:55:23
it's really fast and really simple
2:55:23
it's really fast and really simple and let me find the right window
2:55:30
and let me find the right window
2:55:30
and let me find the right window this one here i've got
2:55:33
this one here i've got
2:55:34
this one here i've got an azure account and i've got a storage
2:55:36
an azure account and i've got a storage
2:55:36
an azure account and i've got a storage account
2:55:37
account
2:55:37
account right here where i've set up
2:55:42
where is their static website where i've
2:55:44
where is their static website where i've
2:55:44
where is their static website where i've set up the static website
2:55:47
set up the static website
2:55:47
set up the static website so i can grab this url if i
2:55:51
so i can grab this url if i
2:55:51
so i can grab this url if i my mouse cooperates
2:55:55
i can go there and my application loads
2:55:57
i can go there and my application loads
2:55:58
i can go there and my application loads and
2:55:58
and
2:55:58
and [Music]
2:55:59
[Music]
2:55:59
[Music] shows data and it serves up really well
2:56:04
shows data and it serves up really well
2:56:04
shows data and it serves up really well there's one slight problem with this
2:56:05
there's one slight problem with this
2:56:05
there's one slight problem with this though it loads really fast but if
2:56:08
though it loads really fast but if
2:56:08
though it loads really fast but if you're using
2:56:09
you're using
2:56:09
you're using single page applications styles with
2:56:11
single page applications styles with
2:56:11
single page applications styles with routing like i've got an
2:56:13
routing like i've got an
2:56:13
routing like i've got an accounts url here there is no file
2:56:16
accounts url here there is no file
2:56:16
accounts url here there is no file actually matching this
2:56:17
actually matching this
2:56:17
actually matching this and if i hit f5 to reload the browser i
2:56:20
and if i hit f5 to reload the browser i
2:56:20
and if i hit f5 to reload the browser i get this error
2:56:21
get this error
2:56:21
get this error the requested content does not exist
2:56:24
the requested content does not exist
2:56:24
the requested content does not exist because now i'm going
2:56:25
because now i'm going
2:56:25
because now i'm going to my blob storage and i'm actually
2:56:28
to my blob storage and i'm actually
2:56:28
to my blob storage and i'm actually requesting
2:56:29
requesting
2:56:29
requesting this specific url well
2:56:32
this specific url well
2:56:32
this specific url well doesn't exist doesn't work
2:56:36
doesn't exist doesn't work
2:56:36
doesn't exist doesn't work which is not so nice so
2:56:39
which is not so nice so
2:56:39
which is not so nice so i do something else i add a cdn and i've
2:56:42
i do something else i add a cdn and i've
2:56:42
i do something else i add a cdn and i've got
2:56:42
got
2:56:42
got cdn endpoint right here and i point that
2:56:46
cdn endpoint right here and i point that
2:56:46
cdn endpoint right here and i point that cdn
2:56:49
cdn
2:56:49
cdn right here
2:56:52
bottom one is the storage
2:56:55
bottom one is the storage
2:56:55
bottom one is the storage url so i point it right at my storage
2:56:58
url so i point it right at my storage
2:56:58
url so i point it right at my storage url now the cdn
2:57:01
url now the cdn
2:57:01
url now the cdn let me copy that url is a bit more
2:57:03
let me copy that url is a bit more
2:57:04
let me copy that url is a bit more flexible
2:57:06
it serves up the same application no
2:57:09
it serves up the same application no
2:57:09
it serves up the same application no difference
2:57:10
difference
2:57:10
difference nothing really visible there but now if
2:57:12
nothing really visible there but now if
2:57:12
nothing really visible there but now if i'm on the accounts page and i hit f5
2:57:15
i'm on the accounts page and i hit f5
2:57:15
i'm on the accounts page and i hit f5 it refreshes just fine
2:57:19
it refreshes just fine
2:57:19
it refreshes just fine so why does it work here well here we've
2:57:22
so why does it work here well here we've
2:57:22
so why does it work here well here we've got the rules engine
2:57:25
got the rules engine
2:57:25
got the rules engine which i don't have in the storage
2:57:27
which i don't have in the storage
2:57:27
which i don't have in the storage account
2:57:28
account
2:57:28
account so in storage it's just surf what's
2:57:32
so in storage it's just surf what's
2:57:32
so in storage it's just surf what's requested but here i can
2:57:34
requested but here i can
2:57:34
requested but here i can create a single page rule saying if
2:57:36
create a single page rule saying if
2:57:36
create a single page rule saying if there is no file extension
2:57:38
there is no file extension
2:57:38
there is no file extension then just serve up the index.html file
2:57:42
then just serve up the index.html file
2:57:42
then just serve up the index.html file and ignore all the others that will be
2:57:44
and ignore all the others that will be
2:57:44
and ignore all the others that will be taken care of
2:57:45
taken care of
2:57:45
taken care of client side so a pretty simple rule and
2:57:48
client side so a pretty simple rule and
2:57:48
client side so a pretty simple rule and it solves
2:57:49
it solves
2:57:49
it solves all of those problems now turns out cdns
2:57:53
all of those problems now turns out cdns
2:57:53
all of those problems now turns out cdns and blob storage are also really cheap
2:57:56
and blob storage are also really cheap
2:57:56
and blob storage are also really cheap which is another nice benefit
2:57:58
which is another nice benefit
2:57:58
which is another nice benefit if i go to the cost analysis for this
2:58:01
if i go to the cost analysis for this
2:58:01
if i go to the cost analysis for this service these different things here
2:58:03
service these different things here
2:58:03
service these different things here azure
2:58:05
azure
2:58:05
azure functions are running here as well we
2:58:07
functions are running here as well we
2:58:07
functions are running here as well we can see a
2:58:09
can see a
2:58:09
can see a projected cost for this month of less
2:58:11
projected cost for this month of less
2:58:11
projected cost for this month of less than one cent
2:58:13
than one cent
2:58:13
than one cent now this doesn't get a lot of traffic so
2:58:15
now this doesn't get a lot of traffic so
2:58:15
now this doesn't get a lot of traffic so it's not going to be
2:58:16
it's not going to be
2:58:16
it's not going to be very expensive but this is a really
2:58:19
very expensive but this is a really
2:58:19
very expensive but this is a really cheap way of hosting a static
2:58:22
cheap way of hosting a static
2:58:22
cheap way of hosting a static application
2:58:23
application
2:58:23
application and deployment is really simple as well
2:58:27
and deployment is really simple as well
2:58:27
and deployment is really simple as well so that was the storage that was the cdm
2:58:30
so that was the storage that was the cdm
2:58:30
so that was the storage that was the cdm that was the rule
2:58:32
that was the rule
2:58:32
that was the rule this is how i could deploy things i'm
2:58:35
this is how i could deploy things i'm
2:58:35
this is how i could deploy things i'm storing all my
2:58:36
storing all my
2:58:36
storing all my source codes on github
2:58:39
source codes on github
2:58:39
source codes on github and i've got a github action and that
2:58:42
and i've got a github action and that
2:58:42
and i've got a github action and that action basically says
2:58:44
action basically says
2:58:44
action basically says if we've got a push to main
2:58:47
if we've got a push to main
2:58:47
if we've got a push to main or a pull request to main merged
2:58:51
or a pull request to main merged
2:58:51
or a pull request to main merged then run this little job
2:58:54
then run this little job
2:58:54
then run this little job and basically well this part first
2:58:58
and basically well this part first
2:58:58
and basically well this part first builds it this part says
2:59:01
builds it this part says
2:59:01
builds it this part says okay deploy whatever is produced
2:59:04
okay deploy whatever is produced
2:59:04
okay deploy whatever is produced in the dist folder to that lob storage
2:59:09
in the dist folder to that lob storage
2:59:09
in the dist folder to that lob storage it takes all the files there drops them
2:59:11
it takes all the files there drops them
2:59:11
it takes all the files there drops them in there
2:59:12
in there
2:59:12
in there and you're all done nothing to worry
2:59:15
and you're all done nothing to worry
2:59:15
and you're all done nothing to worry about
2:59:17
about
2:59:17
about now if you're using continuous
2:59:18
now if you're using continuous
2:59:18
now if you're using continuous deployment and you've run your tests or
2:59:20
deployment and you've run your tests or
2:59:20
deployment and you've run your tests or no no tests in here but you typically
2:59:22
no no tests in here but you typically
2:59:22
no no tests in here but you typically would have them in there
2:59:24
would have them in there
2:59:24
would have them in there then this would be your continuous
2:59:27
then this would be your continuous
2:59:27
then this would be your continuous deployments if you're
2:59:28
deployments if you're
2:59:28
deployments if you're not into continuous deployment yet i
2:59:30
not into continuous deployment yet i
2:59:30
not into continuous deployment yet i recommend you do but
2:59:33
recommend you do but
2:59:33
recommend you do but you might not be ready for it or you
2:59:35
you might not be ready for it or you
2:59:35
you might not be ready for it or you might not even be allowed to
2:59:37
might not even be allowed to
2:59:37
might not even be allowed to do so for some reason in that case i
2:59:39
do so for some reason in that case i
2:59:39
do so for some reason in that case i would highly recommend you do this for a
2:59:41
would highly recommend you do this for a
2:59:41
would highly recommend you do this for a test environment so
2:59:43
test environment so
2:59:43
test environment so you've gotten at least an automatically
2:59:45
you've gotten at least an automatically
2:59:45
you've gotten at least an automatically deployed test environment
2:59:49
now another thing i would highly
2:59:51
now another thing i would highly
2:59:51
now another thing i would highly recommend is
2:59:53
recommend is
2:59:53
recommend is to use test driven development
2:59:57
and typically when people talk about
2:59:59
and typically when people talk about
3:00:00
and typically when people talk about test driven development they talk about
3:00:01
test driven development they talk about
3:00:01
test driven development they talk about the testing pyramid and it looks a bit
3:00:03
the testing pyramid and it looks a bit
3:00:03
the testing pyramid and it looks a bit like this
3:00:04
like this
3:00:04
like this there is a big section on unit testing
3:00:07
there is a big section on unit testing
3:00:07
there is a big section on unit testing which is
3:00:08
which is
3:00:08
which is fine unit testing is good and you should
3:00:10
fine unit testing is good and you should
3:00:10
fine unit testing is good and you should definitely do it
3:00:12
definitely do it
3:00:12
definitely do it then there's some integration testing
3:00:14
then there's some integration testing
3:00:14
then there's some integration testing there's some end-to-end testing
3:00:16
there's some end-to-end testing
3:00:16
there's some end-to-end testing and there is a large tip which is manual
3:00:18
and there is a large tip which is manual
3:00:18
and there is a large tip which is manual testing
3:00:20
testing
3:00:20
testing now manual testing is tedious and it's
3:00:23
now manual testing is tedious and it's
3:00:23
now manual testing is tedious and it's difficult for people to do the same kind
3:00:25
difficult for people to do the same kind
3:00:25
difficult for people to do the same kind of thing
3:00:26
of thing
3:00:26
of thing time and time again so
3:00:30
time and time again so
3:00:30
time and time again so it's easy to think well only this small
3:00:33
it's easy to think well only this small
3:00:33
it's easy to think well only this small change was made i don't need to test
3:00:35
change was made i don't need to test
3:00:35
change was made i don't need to test everything let's just
3:00:37
everything let's just
3:00:37
everything let's just deploy the application and it turns out
3:00:39
deploy the application and it turns out
3:00:39
deploy the application and it turns out that that
3:00:40
that that
3:00:40
that that small change has an unwanted side effect
3:00:42
small change has an unwanted side effect
3:00:42
small change has an unwanted side effect and it actually brings down
3:00:44
and it actually brings down
3:00:44
and it actually brings down the application just before the
3:00:47
the application just before the
3:00:47
the application just before the ceo is doing a demo for an important new
3:00:50
ceo is doing a demo for an important new
3:00:50
ceo is doing a demo for an important new customer
3:00:51
customer
3:00:51
customer the bad timing you always get with those
3:00:53
the bad timing you always get with those
3:00:53
the bad timing you always get with those kind of things
3:00:55
kind of things
3:00:55
kind of things so maybe relying on manual testing
3:00:59
so maybe relying on manual testing
3:00:59
so maybe relying on manual testing isn't all that good because unit testing
3:01:02
isn't all that good because unit testing
3:01:02
isn't all that good because unit testing isn't exactly perfect either i
3:01:06
isn't exactly perfect either i
3:01:06
isn't exactly perfect either i grabbed some memes from the internet
3:01:09
grabbed some memes from the internet
3:01:09
grabbed some memes from the internet about what would happen with unit
3:01:11
about what would happen with unit
3:01:11
about what would happen with unit testing and this is about
3:01:13
testing and this is about
3:01:13
testing and this is about two windows windows open and they were
3:01:16
two windows windows open and they were
3:01:16
two windows windows open and they were both tested and they were just fine but
3:01:18
both tested and they were just fine but
3:01:18
both tested and they were just fine but together and you might have guessed
3:01:19
together and you might have guessed
3:01:20
together and you might have guessed it from how the handles are stick
3:01:21
it from how the handles are stick
3:01:21
it from how the handles are stick together it's not so fine
3:01:24
together it's not so fine
3:01:24
together it's not so fine try to open one and the other actually
3:01:26
try to open one and the other actually
3:01:26
try to open one and the other actually blocks it
3:01:27
blocks it
3:01:27
blocks it so unit test passed but application
3:01:31
so unit test passed but application
3:01:31
so unit test passed but application fails i like this one
3:01:34
fails i like this one
3:01:34
fails i like this one even better i've got a deadbolt here
3:01:37
even better i've got a deadbolt here
3:01:37
even better i've got a deadbolt here latch which locks the door you can close
3:01:40
latch which locks the door you can close
3:01:40
latch which locks the door you can close it
3:01:40
it
3:01:40
it looks really solid looks well bolted
3:01:43
looks really solid looks well bolted
3:01:43
looks really solid looks well bolted onto the door
3:01:44
onto the door
3:01:44
onto the door so looks like if we close that that door
3:01:47
so looks like if we close that that door
3:01:47
so looks like if we close that that door is definitely
3:01:48
is definitely
3:01:48
is definitely closed so it's locked right
3:01:53
closed so it's locked right
3:01:53
closed so it's locked right actually turns out that was a sliding
3:01:55
actually turns out that was a sliding
3:01:55
actually turns out that was a sliding door so it doesn't do anything
3:01:57
door so it doesn't do anything
3:01:57
door so it doesn't do anything at all well that's what unit tests are
3:02:00
at all well that's what unit tests are
3:02:00
at all well that's what unit tests are like
3:02:00
like
3:02:00
like they test things in isolation
3:02:04
they test things in isolation
3:02:04
they test things in isolation and that's not bad but it's not how your
3:02:08
and that's not bad but it's not how your
3:02:08
and that's not bad but it's not how your application actually works how your
3:02:10
application actually works how your
3:02:10
application actually works how your application actually runs
3:02:13
application actually runs
3:02:13
application actually runs unit testing is fine you should
3:02:15
unit testing is fine you should
3:02:15
unit testing is fine you should definitely do so
3:02:16
definitely do so
3:02:16
definitely do so for all sorts of details about your code
3:02:19
for all sorts of details about your code
3:02:19
for all sorts of details about your code algorithms things like that
3:02:22
algorithms things like that
3:02:22
algorithms things like that and make sure they work correctly
3:02:25
and make sure they work correctly
3:02:25
and make sure they work correctly but for your application you want to
3:02:27
but for your application you want to
3:02:28
but for your application you want to prove that your whole application works
3:02:30
prove that your whole application works
3:02:30
prove that your whole application works and that takes a bit more than unit
3:02:32
and that takes a bit more than unit
3:02:32
and that takes a bit more than unit testing because it's not just a
3:02:34
testing because it's not just a
3:02:34
testing because it's not just a sum of units it's that they actually
3:02:38
sum of units it's that they actually
3:02:38
sum of units it's that they actually sum up to something working
3:02:41
sum up to something working
3:02:42
sum up to something working well that's why i prefer
3:02:45
well that's why i prefer
3:02:45
well that's why i prefer a testing pyramid like this unit testing
3:02:47
a testing pyramid like this unit testing
3:02:47
a testing pyramid like this unit testing integration testing still there
3:02:49
integration testing still there
3:02:49
integration testing still there still important but the majority of my
3:02:52
still important but the majority of my
3:02:52
still important but the majority of my testing is focused on end-to-end testing
3:02:55
testing is focused on end-to-end testing
3:02:55
testing is focused on end-to-end testing and there are still manual testing
3:02:57
and there are still manual testing
3:02:57
and there are still manual testing because you won't be able to test
3:02:58
because you won't be able to test
3:02:58
because you won't be able to test everything in an automated fashion but
3:03:01
everything in an automated fashion but
3:03:01
everything in an automated fashion but try to keep it as small
3:03:03
try to keep it as small
3:03:03
try to keep it as small as possible now let me show you an
3:03:06
as possible now let me show you an
3:03:06
as possible now let me show you an example and first let me
3:03:08
example and first let me
3:03:08
example and first let me run the application um
3:03:12
run the application um
3:03:12
run the application um that's the one i need to stop that's
3:03:15
that's the one i need to stop that's
3:03:15
that's the one i need to stop that's just a demo and this is
3:03:17
just a demo and this is
3:03:17
just a demo and this is the actual application i'm using
3:03:22
the same client application as i showed
3:03:25
the same client application as i showed
3:03:25
the same client application as i showed online but now
3:03:25
online but now
3:03:26
online but now running locally and here i've got
3:03:29
running locally and here i've got
3:03:29
running locally and here i've got cyprus which is the tool i prefer
3:03:32
cyprus which is the tool i prefer
3:03:32
cyprus which is the tool i prefer and looks like there is an update there
3:03:34
and looks like there is an update there
3:03:34
and looks like there is an update there as well
3:03:36
as well
3:03:36
as well i can say run all the integration tests
3:03:40
i can say run all the integration tests
3:03:40
i can say run all the integration tests it starts running and i'm testing all
3:03:42
it starts running and i'm testing all
3:03:42
it starts running and i'm testing all the screens that are there
3:03:44
the screens that are there
3:03:44
the screens that are there and it runs in less than six seconds and
3:03:47
and it runs in less than six seconds and
3:03:47
and it runs in less than six seconds and it's basically
3:03:47
it's basically
3:03:47
it's basically tested my complete ui
3:03:51
tested my complete ui
3:03:51
tested my complete ui but this does real testing it actually
3:03:54
but this does real testing it actually
3:03:54
but this does real testing it actually goes to the back end
3:03:55
goes to the back end
3:03:55
goes to the back end where the back end is available i can
3:03:57
where the back end is available i can
3:03:57
where the back end is available i can fake out the back end if i want to
3:04:00
fake out the back end if i want to
3:04:00
fake out the back end if i want to and in fact this vehicles page wasn't
3:04:03
and in fact this vehicles page wasn't
3:04:03
and in fact this vehicles page wasn't available
3:04:03
available
3:04:03
available on the website because the back end for
3:04:06
on the website because the back end for
3:04:06
on the website because the back end for that page wasn't there
3:04:08
that page wasn't there
3:04:08
that page wasn't there but the accounts in the movies were
3:04:10
but the accounts in the movies were
3:04:10
but the accounts in the movies were there and this uses the same data
3:04:13
there and this uses the same data
3:04:13
there and this uses the same data it does exactly the same thing
3:04:18
now how tests like that actually look
3:04:22
now how tests like that actually look
3:04:22
now how tests like that actually look um that's the cypress screenshot
3:04:25
um that's the cypress screenshot
3:04:25
um that's the cypress screenshot tests are typically very simple okay
3:04:29
tests are typically very simple okay
3:04:29
tests are typically very simple okay you use psi dot and psi
3:04:32
you use psi dot and psi
3:04:32
you use psi dot and psi is the global cyprus object you can do
3:04:35
is the global cyprus object you can do
3:04:35
is the global cyprus object you can do something like dot
3:04:35
something like dot
3:04:36
something like dot visit or dot find by role
3:04:39
visit or dot find by role
3:04:39
visit or dot find by role or dot gets with a css query
3:04:43
or dot gets with a css query
3:04:43
or dot gets with a css query and you get an element back and you call
3:04:45
and you get an element back and you call
3:04:45
and you get an element back and you call dot click
3:04:46
dot click
3:04:46
dot click now you might think well hang on i visit
3:04:48
now you might think well hang on i visit
3:04:48
now you might think well hang on i visit i go to the home page for the
3:04:50
i go to the home page for the
3:04:50
i go to the home page for the application
3:04:51
application
3:04:51
application and then it needs to load so if i
3:04:53
and then it needs to load so if i
3:04:53
and then it needs to load so if i immediately
3:04:54
immediately
3:04:54
immediately find for or search for a movies link and
3:04:58
find for or search for a movies link and
3:04:58
find for or search for a movies link and click on it
3:04:59
click on it
3:04:59
click on it isn't that going to fail because it
3:05:02
isn't that going to fail because it
3:05:02
isn't that going to fail because it application hasn't actually
3:05:03
application hasn't actually
3:05:04
application hasn't actually loaded yet well lots of other
3:05:08
loaded yet well lots of other
3:05:08
loaded yet well lots of other automated end-to-end testing frameworks
3:05:10
automated end-to-end testing frameworks
3:05:10
automated end-to-end testing frameworks would require you
3:05:12
would require you
3:05:12
would require you to loop there and or wait a bit for it
3:05:15
to loop there and or wait a bit for it
3:05:15
to loop there and or wait a bit for it to be loaded
3:05:16
to be loaded
3:05:16
to be loaded but cyprus doesn't cyprus will say well
3:05:18
but cyprus doesn't cyprus will say well
3:05:18
but cyprus doesn't cyprus will say well if you do find by role on something and
3:05:21
if you do find by role on something and
3:05:21
if you do find by role on something and then dot click
3:05:22
then dot click
3:05:22
then dot click if it can't find it it will
3:05:25
if it can't find it it will
3:05:25
if it can't find it it will automatically repeat
3:05:26
automatically repeat
3:05:26
automatically repeat this action after a brief pause and
3:05:29
this action after a brief pause and
3:05:29
this action after a brief pause and only if it hasn't failed at least by
3:05:32
only if it hasn't failed at least by
3:05:32
only if it hasn't failed at least by default for
3:05:33
default for
3:05:33
default for four and a half seconds it hasn't been
3:05:35
four and a half seconds it hasn't been
3:05:35
four and a half seconds it hasn't been able to find
3:05:37
able to find
3:05:37
able to find the element you're looking for for four
3:05:38
the element you're looking for for four
3:05:38
the element you're looking for for four and a half seconds
3:05:40
and a half seconds
3:05:40
and a half seconds then it's going to fill the test that's
3:05:42
then it's going to fill the test that's
3:05:42
then it's going to fill the test that's configurable you can make that longer if
3:05:44
configurable you can make that longer if
3:05:44
configurable you can make that longer if you want to
3:05:45
you want to
3:05:45
you want to but four and a half seconds is pretty
3:05:47
but four and a half seconds is pretty
3:05:47
but four and a half seconds is pretty decent
3:05:48
decent
3:05:48
decent so even if there are ajax requests
3:05:51
so even if there are ajax requests
3:05:51
so even if there are ajax requests around this
3:05:52
around this
3:05:52
around this like loading data from an api
3:05:56
like loading data from an api
3:05:56
like loading data from an api things like that it waits and as long as
3:05:59
things like that it waits and as long as
3:05:59
things like that it waits and as long as things load in a reasonable time
3:06:02
things load in a reasonable time
3:06:02
things load in a reasonable time it will work fine you don't have to
3:06:05
it will work fine you don't have to
3:06:05
it will work fine you don't have to explicitly wait for things
3:06:07
explicitly wait for things
3:06:07
explicitly wait for things our actions taking longer you can
3:06:10
our actions taking longer you can
3:06:10
our actions taking longer you can specify
3:06:10
specify
3:06:10
specify a default weight period which is longer
3:06:14
a default weight period which is longer
3:06:14
a default weight period which is longer or you can do it on a command by command
3:06:17
or you can do it on a command by command
3:06:17
or you can do it on a command by command base
3:06:17
base
3:06:17
base just depends on what you need
3:06:21
another nice option is what i mentioned
3:06:23
another nice option is what i mentioned
3:06:24
another nice option is what i mentioned you can fake
3:06:25
you can fake
3:06:25
you can fake data if you want to now in general i
3:06:27
data if you want to now in general i
3:06:27
data if you want to now in general i don't recommend you do that because you
3:06:29
don't recommend you do that because you
3:06:29
don't recommend you do that because you want to do an
3:06:30
want to do an
3:06:30
want to do an end-to-end test but sometimes
3:06:33
end-to-end test but sometimes
3:06:33
end-to-end test but sometimes doing an end-to-end test means that for
3:06:35
doing an end-to-end test means that for
3:06:35
doing an end-to-end test means that for a specific test case you have to massage
3:06:37
a specific test case you have to massage
3:06:37
a specific test case you have to massage the data in a very specific way
3:06:40
the data in a very specific way
3:06:40
the data in a very specific way or maybe in an endpoint isn't available
3:06:43
or maybe in an endpoint isn't available
3:06:43
or maybe in an endpoint isn't available yet
3:06:44
yet
3:06:44
yet well using site.intercept here i can say
3:06:46
well using site.intercept here i can say
3:06:46
well using site.intercept here i can say will
3:06:47
will
3:06:47
will intercept all api requests to api slash
3:06:50
intercept all api requests to api slash
3:06:50
intercept all api requests to api slash vehicles
3:06:51
vehicles
3:06:51
vehicles and then with this fixture i say well
3:06:54
and then with this fixture i say well
3:06:54
and then with this fixture i say well return the vehicle.json file in the
3:06:57
return the vehicle.json file in the
3:06:57
return the vehicle.json file in the fixtures
3:06:58
fixtures
3:06:58
fixtures folder you can also write code here say
3:07:01
folder you can also write code here say
3:07:01
folder you can also write code here say i want to return this and that
3:07:03
i want to return this and that
3:07:03
i want to return this and that data or return an error code or
3:07:06
data or return an error code or
3:07:06
data or return an error code or something like that you got full control
3:07:09
something like that you got full control
3:07:09
something like that you got full control then below i just have my normal test
3:07:13
then below i just have my normal test
3:07:13
then below i just have my normal test and the test actually here says okay
3:07:15
and the test actually here says okay
3:07:15
and the test actually here says okay wait for that response
3:07:17
wait for that response
3:07:17
wait for that response to be done and then the response
3:07:21
to be done and then the response
3:07:21
to be done and then the response body is the actual json
3:07:24
body is the actual json
3:07:24
body is the actual json response so i can actually look through
3:07:26
response so i can actually look through
3:07:26
response so i can actually look through that and i'm actually testing here
3:07:28
that and i'm actually testing here
3:07:28
that and i'm actually testing here whether the data
3:07:30
whether the data
3:07:30
whether the data from the body from the api request body
3:07:34
from the body from the api request body
3:07:34
from the body from the api request body is found in my response
3:07:38
is found in my response
3:07:38
is found in my response resulting page which is kind of nice
3:07:41
resulting page which is kind of nice
3:07:41
resulting page which is kind of nice because
3:07:41
because
3:07:41
because if the api becomes available and i
3:07:44
if the api becomes available and i
3:07:44
if the api becomes available and i remove that mock
3:07:45
remove that mock
3:07:45
remove that mock then it just starts working against the
3:07:47
then it just starts working against the
3:07:47
then it just starts working against the real api and it checks that the data
3:07:49
real api and it checks that the data
3:07:50
real api and it checks that the data from the real api
3:07:51
from the real api
3:07:51
from the real api is rendered so if i buy accident
3:07:54
is rendered so if i buy accident
3:07:54
is rendered so if i buy accident hard code fuel to gasoline for instance
3:07:57
hard code fuel to gasoline for instance
3:07:57
hard code fuel to gasoline for instance it would find that and say oh hang on
3:08:00
it would find that and say oh hang on
3:08:00
it would find that and say oh hang on this
3:08:01
this
3:08:01
this is well aviation fuel for instance
3:08:04
is well aviation fuel for instance
3:08:04
is well aviation fuel for instance and it finds gasoline so that's a
3:08:07
and it finds gasoline so that's a
3:08:07
and it finds gasoline so that's a mismatch
3:08:09
mismatch
3:08:09
mismatch so really nice
3:08:14
the next thing i want to talk about is
3:08:16
the next thing i want to talk about is
3:08:16
the next thing i want to talk about is working with apis in
3:08:18
working with apis in
3:08:18
working with apis in api updates now
3:08:21
api updates now
3:08:21
api updates now quite often if you're using dot net on
3:08:25
quite often if you're using dot net on
3:08:25
quite often if you're using dot net on the back end
3:08:25
the back end
3:08:26
the back end like i am and typescript on the front
3:08:28
like i am and typescript on the front
3:08:28
like i am and typescript on the front end
3:08:29
end
3:08:29
end then there is a mid match between those
3:08:33
then there is a mid match between those
3:08:33
then there is a mid match between those the backend is written in c-sharp
3:08:35
the backend is written in c-sharp
3:08:36
the backend is written in c-sharp g-sharp code
3:08:37
g-sharp code
3:08:37
g-sharp code the front-end is written in typescript
3:08:39
the front-end is written in typescript
3:08:39
the front-end is written in typescript there is
3:08:41
there is
3:08:41
there is a similarity between the two they're
3:08:43
a similarity between the two they're
3:08:43
a similarity between the two they're actually
3:08:44
actually
3:08:44
actually both languages designed by anders
3:08:46
both languages designed by anders
3:08:46
both languages designed by anders helberg but they're not
3:08:48
helberg but they're not
3:08:48
helberg but they're not compatible so it's not like the front
3:08:51
compatible so it's not like the front
3:08:51
compatible so it's not like the front end can
3:08:51
end can
3:08:52
end can directly tap into the types of the back
3:08:55
directly tap into the types of the back
3:08:55
directly tap into the types of the back end and use them
3:08:56
end and use them
3:08:56
end and use them well this tool swagger or in general the
3:09:00
well this tool swagger or in general the
3:09:00
well this tool swagger or in general the open ace
3:09:02
open ace
3:09:02
open ace bi specification will help a lot it will
3:09:05
bi specification will help a lot it will
3:09:05
bi specification will help a lot it will let you define
3:09:07
let you define
3:09:07
let you define what the shapes look like and if i go
3:09:11
what the shapes look like and if i go
3:09:11
what the shapes look like and if i go back
3:09:13
back
3:09:13
back to my console for a moment and let me
3:09:15
to my console for a moment and let me
3:09:15
to my console for a moment and let me stop this and restart them
3:09:17
stop this and restart them
3:09:17
stop this and restart them these are the azure functions i'm
3:09:19
these are the azure functions i'm
3:09:19
these are the azure functions i'm restarting and i'm doing that so
3:09:21
restarting and i'm doing that so
3:09:21
restarting and i'm doing that so i actually have to url this url
3:09:25
i actually have to url this url
3:09:25
i actually have to url this url which i'm trying to open there it is
3:09:30
which i'm trying to open there it is
3:09:30
which i'm trying to open there it is it returns me a ui specifying okay well
3:09:34
it returns me a ui specifying okay well
3:09:34
it returns me a ui specifying okay well you've got these and these endpoints and
3:09:35
you've got these and these endpoints and
3:09:35
you've got these and these endpoints and they've returned this data so there is a
3:09:37
they've returned this data so there is a
3:09:37
they've returned this data so there is a bank accounts
3:09:38
bank accounts
3:09:38
bank accounts apis bank accounts api slash movies apis
3:09:42
apis bank accounts api slash movies apis
3:09:42
apis bank accounts api slash movies apis list movies
3:09:42
list movies
3:09:42
list movies with some id and it returns these types
3:09:45
with some id and it returns these types
3:09:45
with some id and it returns these types of restaurant
3:09:46
of restaurant
3:09:46
of restaurant transaction type a bank account type
3:09:49
transaction type a bank account type
3:09:49
transaction type a bank account type now these are inferred from the c-sharp
3:09:52
now these are inferred from the c-sharp
3:09:52
now these are inferred from the c-sharp types and
3:09:55
types and
3:09:55
types and actually served up in adjacent or
3:09:58
actually served up in adjacent or
3:09:58
actually served up in adjacent or yaml format on the
3:10:01
yaml format on the
3:10:02
yaml format on the client in the client project i can now
3:10:04
client in the client project i can now
3:10:04
client in the client project i can now use some tooling to generate typescript
3:10:07
use some tooling to generate typescript
3:10:07
use some tooling to generate typescript types
3:10:08
types
3:10:08
types from this so
3:10:12
from this so
3:10:12
from this so on the server i'm using swashbuckle to
3:10:14
on the server i'm using swashbuckle to
3:10:14
on the server i'm using swashbuckle to generate this
3:10:17
generate this
3:10:17
generate this um on the client i'm using nswag to
3:10:20
um on the client i'm using nswag to
3:10:20
um on the client i'm using nswag to generate
3:10:21
generate
3:10:21
generate typescript from those
3:10:24
typescript from those
3:10:24
typescript from those generated specifications and swag is
3:10:27
generated specifications and swag is
3:10:27
generated specifications and swag is actually very
3:10:29
actually very
3:10:29
actually very useful for other types as well i'm using
3:10:31
useful for other types as well i'm using
3:10:31
useful for other types as well i'm using it for typescript types but you could
3:10:32
it for typescript types but you could
3:10:32
it for typescript types but you could generate
3:10:33
generate
3:10:33
generate c-sharp or some other code using n-swag
3:10:36
c-sharp or some other code using n-swag
3:10:36
c-sharp or some other code using n-swag there are lots of options
3:10:40
there are lots of options
3:10:40
there are lots of options um i'm going to skip over this in the
3:10:44
um i'm going to skip over this in the
3:10:44
um i'm going to skip over this in the interest of time
3:10:45
interest of time
3:10:45
interest of time this as well that's back and stuff let
3:10:48
this as well that's back and stuff let
3:10:48
this as well that's back and stuff let me quickly
3:10:49
me quickly
3:10:49
me quickly show you how that back-end works
3:10:53
show you how that back-end works
3:10:53
show you how that back-end works so where's my front end
3:10:56
so where's my front end
3:10:56
so where's my front end application here the client
3:11:00
application here the client
3:11:00
application here the client in my package json i've got a command
3:11:03
in my package json i've got a command
3:11:04
in my package json i've got a command and swag that basically says run and
3:11:06
and swag that basically says run and
3:11:06
and swag that basically says run and swag
3:11:07
swag
3:11:07
swag against a specific swagger file
3:11:11
against a specific swagger file
3:11:11
against a specific swagger file and that has a definition of what should
3:11:13
and that has a definition of what should
3:11:13
and that has a definition of what should be generated
3:11:14
be generated
3:11:14
be generated and what should that look like so
3:11:18
and what should that look like so
3:11:18
and what should that look like so if i go here and stop this and do
3:11:22
if i go here and stop this and do
3:11:22
if i go here and stop this and do npm run and
3:11:26
track it will generate
3:11:29
track it will generate
3:11:29
track it will generate the current form of the api types for me
3:11:32
the current form of the api types for me
3:11:32
the current form of the api types for me and update a typescript file now my
3:11:35
and update a typescript file now my
3:11:35
and update a typescript file now my typescript file was
3:11:36
typescript file was
3:11:36
typescript file was up to date so it didn't actually
3:11:38
up to date so it didn't actually
3:11:38
up to date so it didn't actually generate a new one
3:11:40
generate a new one
3:11:40
generate a new one but the file it was it generated was
3:11:44
but the file it was it generated was
3:11:44
but the file it was it generated was this
3:11:45
this
3:11:45
this so it has the typescript definition for
3:11:48
so it has the typescript definition for
3:11:48
so it has the typescript definition for that bank account that transaction
3:11:51
that bank account that transaction
3:11:51
that bank account that transaction movies and so more stuff
3:11:55
suppose a change was made in here then
3:11:58
suppose a change was made in here then
3:11:58
suppose a change was made in here then it would
3:11:59
it would
3:11:59
it would or on the server you shouldn't change
3:12:01
or on the server you shouldn't change
3:12:01
or on the server you shouldn't change this file obviously
3:12:02
this file obviously
3:12:02
this file obviously then it would automatically generate a
3:12:05
then it would automatically generate a
3:12:05
then it would automatically generate a new file
3:12:05
new file
3:12:06
new file and you would presumably get compile
3:12:08
and you would presumably get compile
3:12:08
and you would presumably get compile errors
3:12:10
errors
3:12:10
errors so this command
3:12:14
so this command
3:12:14
so this command where is it here is something i run
3:12:17
where is it here is something i run
3:12:17
where is it here is something i run locally but i
3:12:18
locally but i
3:12:18
locally but i also run on my cnci server
3:12:21
also run on my cnci server
3:12:21
also run on my cnci server continuous integration server when i do
3:12:23
continuous integration server when i do
3:12:23
continuous integration server when i do a build so i know that my on my server i
3:12:26
a build so i know that my on my server i
3:12:26
a build so i know that my on my server i always run against the latest version of
3:12:29
always run against the latest version of
3:12:29
always run against the latest version of the api
3:12:29
the api
3:12:30
the api and i compile against the latest version
3:12:32
and i compile against the latest version
3:12:32
and i compile against the latest version of the types
3:12:33
of the types
3:12:34
of the types so if there is a mismatch my build fails
3:12:39
now another thing i want to do is
3:12:41
now another thing i want to do is
3:12:41
now another thing i want to do is actually want to validate
3:12:43
actually want to validate
3:12:43
actually want to validate my apis or i should say the data
3:12:47
my apis or i should say the data
3:12:47
my apis or i should say the data from my apis let me show you
3:12:50
from my apis let me show you
3:12:50
from my apis let me show you why i'm running the application here and
3:12:53
why i'm running the application here and
3:12:53
why i'm running the application here and i've got accounts and i've got movies so
3:12:56
i've got accounts and i've got movies so
3:12:56
i've got accounts and i've got movies so all looks good
3:12:57
all looks good
3:12:57
all looks good i can check different accounts
3:13:00
i can check different accounts
3:13:00
i can check different accounts everything looks good but it turns out
3:13:03
everything looks good but it turns out
3:13:03
everything looks good but it turns out if i click on donovan
3:13:05
if i click on donovan
3:13:05
if i click on donovan an error occurred cannot read property
3:13:08
an error occurred cannot read property
3:13:08
an error occurred cannot read property map
3:13:09
map
3:13:09
map of null so i've got some kind of runtime
3:13:13
of null so i've got some kind of runtime
3:13:13
of null so i've got some kind of runtime error not quite sure why that happened
3:13:16
error not quite sure why that happened
3:13:16
error not quite sure why that happened but i can see here that it happened in a
3:13:19
but i can see here that it happened in a
3:13:19
but i can see here that it happened in a specific
3:13:20
specific
3:13:20
specific component single account stuff the one i
3:13:22
component single account stuff the one i
3:13:22
component single account stuff the one i just renamed
3:13:24
just renamed
3:13:24
just renamed on line 27 so normally
3:13:27
on line 27 so normally
3:13:27
on line 27 so normally with that information you would go there
3:13:30
with that information you would go there
3:13:30
with that information you would go there so
3:13:30
so
3:13:30
so where is my single account
3:13:36
on what was the line again
3:13:39
on what was the line again
3:13:39
on what was the line again o line 192. which
3:13:42
o line 192. which
3:13:42
o line 192. which doesn't actually make a lot of sense but
3:13:45
doesn't actually make a lot of sense but
3:13:45
doesn't actually make a lot of sense but i can tell you
3:13:47
i can tell you
3:13:47
i can tell you it was this line because for donovan
3:13:50
it was this line because for donovan
3:13:50
it was this line because for donovan this transactions wasn't actually an
3:13:53
this transactions wasn't actually an
3:13:53
this transactions wasn't actually an array it was a null
3:13:54
array it was a null
3:13:54
array it was a null object and that's because the types on
3:13:58
object and that's because the types on
3:13:58
object and that's because the types on the server
3:13:59
the server
3:13:59
the server are actually wrong if i would check the
3:14:02
are actually wrong if i would check the
3:14:02
are actually wrong if i would check the types on the server it would determine
3:14:04
types on the server it would determine
3:14:04
types on the server it would determine that the transaction was set as required
3:14:07
that the transaction was set as required
3:14:07
that the transaction was set as required so it's always an
3:14:09
so it's always an
3:14:09
so it's always an object and it really isn't
3:14:13
object and it really isn't
3:14:13
object and it really isn't and as a result if i go here
3:14:16
and as a result if i go here
3:14:16
and as a result if i go here this is set as an array of transactions
3:14:19
this is set as an array of transactions
3:14:19
this is set as an array of transactions well
3:14:20
well
3:14:20
well well it really should be transactions or
3:14:23
well it really should be transactions or
3:14:23
well it really should be transactions or no
3:14:28
but that's kind of like well my server
3:14:31
but that's kind of like well my server
3:14:31
but that's kind of like well my server didn't throw an
3:14:31
didn't throw an
3:14:31
didn't throw an error either apparently the code runs
3:14:35
error either apparently the code runs
3:14:35
error either apparently the code runs just fine so i want to know that these
3:14:38
just fine so i want to know that these
3:14:38
just fine so i want to know that these kind of errors occurred
3:14:41
kind of errors occurred
3:14:41
kind of errors occurred without doing a lot of debugging
3:14:44
without doing a lot of debugging
3:14:44
without doing a lot of debugging a lot of hunting down because it's kind
3:14:47
a lot of hunting down because it's kind
3:14:47
a lot of hunting down because it's kind of like well
3:14:48
of like well
3:14:48
of like well why did that transactions object all of
3:14:51
why did that transactions object all of
3:14:51
why did that transactions object all of a sudden become null
3:14:52
a sudden become null
3:14:52
a sudden become null when according to the server it can't be
3:14:54
when according to the server it can't be
3:14:54
when according to the server it can't be null in my code it shouldn't compile
3:14:57
null in my code it shouldn't compile
3:14:57
null in my code it shouldn't compile when i try to make it null so something
3:15:00
when i try to make it null so something
3:15:00
when i try to make it null so something is definitely wrong there
3:15:03
is definitely wrong there
3:15:03
is definitely wrong there well what i can do is
3:15:06
well what i can do is
3:15:06
well what i can do is i can validate data now people tend to
3:15:10
i can validate data now people tend to
3:15:10
i can validate data now people tend to validate data
3:15:11
validate data
3:15:11
validate data at the edge of their application which
3:15:14
at the edge of their application which
3:15:14
at the edge of their application which typically means when the user inputs
3:15:17
typically means when the user inputs
3:15:17
typically means when the user inputs data
3:15:18
data
3:15:18
data through the browser into the application
3:15:20
through the browser into the application
3:15:20
through the browser into the application and that's
3:15:21
and that's
3:15:21
and that's perfectly fine you should definitely do
3:15:23
perfectly fine you should definitely do
3:15:23
perfectly fine you should definitely do that but is
3:15:25
that but is
3:15:25
that but is that the only edge of your application
3:15:28
that the only edge of your application
3:15:28
that the only edge of your application well if you're doing full stack
3:15:30
well if you're doing full stack
3:15:30
well if you're doing full stack application you probably
3:15:31
application you probably
3:15:31
application you probably think that the front end and the back
3:15:33
think that the front end and the back
3:15:33
think that the front end and the back end is all one big application
3:15:36
end is all one big application
3:15:36
end is all one big application and it kind of is but in practice with
3:15:40
and it kind of is but in practice with
3:15:40
and it kind of is but in practice with most larger applications there are
3:15:42
most larger applications there are
3:15:42
most larger applications there are different
3:15:42
different
3:15:42
different teams working on the front and the back
3:15:44
teams working on the front and the back
3:15:44
teams working on the front and the back ends and then it's actually much better
3:15:46
ends and then it's actually much better
3:15:46
ends and then it's actually much better to consider
3:15:47
to consider
3:15:47
to consider both of those as two different related
3:15:51
both of those as two different related
3:15:51
both of those as two different related but different applications
3:15:54
but different applications
3:15:54
but different applications and if they're different applications
3:15:56
and if they're different applications
3:15:56
and if they're different applications that means that my api
3:15:58
that means that my api
3:15:58
that means that my api is called is actually an application
3:16:00
is called is actually an application
3:16:00
is called is actually an application boundary being crossed
3:16:02
boundary being crossed
3:16:02
boundary being crossed so i'm requesting data from the server
3:16:05
so i'm requesting data from the server
3:16:05
so i'm requesting data from the server the api
3:16:06
the api
3:16:06
the api application i'm retrieving that i'm
3:16:09
application i'm retrieving that i'm
3:16:09
application i'm retrieving that i'm crossing a boundary
3:16:10
crossing a boundary
3:16:10
crossing a boundary so i should validate data
3:16:13
so i should validate data
3:16:13
so i should validate data so if i set api validate to true
3:16:16
so if i set api validate to true
3:16:16
so if i set api validate to true let me first show you what actually
3:16:19
let me first show you what actually
3:16:19
let me first show you what actually happens
3:16:21
happens
3:16:21
happens and let's go to the home page now if i
3:16:24
and let's go to the home page now if i
3:16:24
and let's go to the home page now if i click on
3:16:25
click on
3:16:25
click on accounts i immediately get an error
3:16:29
accounts i immediately get an error
3:16:29
accounts i immediately get an error the data returned from the server is
3:16:31
the data returned from the server is
3:16:31
the data returned from the server is validated and it says here
3:16:33
validated and it says here
3:16:33
validated and it says here okay there is some invalid type i
3:16:35
okay there is some invalid type i
3:16:35
okay there is some invalid type i expected an
3:16:36
expected an
3:16:36
expected an array but received a null and where did
3:16:39
array but received a null and where did
3:16:39
array but received a null and where did we do that well the
3:16:41
we do that well the
3:16:41
we do that well the api the path is the ninth element of
3:16:45
api the path is the ninth element of
3:16:45
api the path is the ninth element of the array being returned which is an
3:16:47
the array being returned which is an
3:16:47
the array being returned which is an array of accounts
3:16:48
array of accounts
3:16:48
array of accounts and the transaction property expected
3:16:51
and the transaction property expected
3:16:51
and the transaction property expected array received null
3:16:53
array received null
3:16:54
array received null so now i know that that error actually
3:16:57
so now i know that that error actually
3:16:58
so now i know that that error actually quickly
3:16:58
quickly
3:16:58
quickly do that
3:17:01
[Music]
3:17:03
[Music]
3:17:03
[Music] this one so this required shouldn't be
3:17:06
this one so this required shouldn't be
3:17:06
this one so this required shouldn't be true
3:17:09
i have restarts
3:17:14
function to pick that up
3:17:20
i regenerate the client types
3:17:23
i regenerate the client types
3:17:23
i regenerate the client types now they should be different
3:17:27
now they should be different
3:17:27
now they should be different so now i should see a change here in
3:17:30
so now i should see a change here in
3:17:30
so now i should see a change here in function.ts and now i see that
3:17:32
function.ts and now i see that
3:17:32
function.ts and now i see that the transactions is transactions or null
3:17:36
the transactions is transactions or null
3:17:36
the transactions is transactions or null but now i also get a compile error here
3:17:39
but now i also get a compile error here
3:17:39
but now i also get a compile error here in bank accounts where it says here well
3:17:43
in bank accounts where it says here well
3:17:43
in bank accounts where it says here well there is something wrong here
3:17:45
there is something wrong here
3:17:45
there is something wrong here and if i hover over we can actually see
3:17:47
and if i hover over we can actually see
3:17:47
and if i hover over we can actually see what's wrong if i scroll down a bit
3:17:51
what's wrong if i scroll down a bit
3:17:51
what's wrong if i scroll down a bit it's right at the bottom it says the
3:17:52
it's right at the bottom it says the
3:17:52
it's right at the bottom it says the property of transactions are
3:17:55
property of transactions are
3:17:55
property of transactions are incompatible
3:17:57
incompatible
3:17:57
incompatible um
3:17:57
um
3:17:57
um [Music]
3:18:01
it's a little hard to read but in the
3:18:03
it's a little hard to read but in the
3:18:03
it's a little hard to read but in the end it boils down to
3:18:05
end it boils down to
3:18:05
end it boils down to array or null is not assignable to an
3:18:07
array or null is not assignable to an
3:18:07
array or null is not assignable to an array of
3:18:10
array of
3:18:10
array of types so i can actually fix that
3:18:14
types so i can actually fix that
3:18:14
types so i can actually fix that by saying okay let's default for
3:18:16
by saying okay let's default for
3:18:16
by saying okay let's default for instance
3:18:17
instance
3:18:17
instance to an empty array and my error is fixed
3:18:23
to an empty array and my error is fixed
3:18:23
to an empty array and my error is fixed now if i refresh this
3:18:27
runs just fine again and with donovan i
3:18:30
runs just fine again and with donovan i
3:18:30
runs just fine again and with donovan i get
3:18:30
get
3:18:30
get a nice list of empty items whether this
3:18:36
a nice list of empty items whether this
3:18:36
a nice list of empty items whether this is the correct fix
3:18:37
is the correct fix
3:18:37
is the correct fix defaulting to an empty array maybe i
3:18:39
defaulting to an empty array maybe i
3:18:40
defaulting to an empty array maybe i should propagate that null through my
3:18:41
should propagate that null through my
3:18:41
should propagate that null through my application that really depends
3:18:43
application that really depends
3:18:43
application that really depends on the use case in this case
3:18:47
on the use case in this case
3:18:47
on the use case in this case there is no semantic meaning to null so
3:18:50
there is no semantic meaning to null so
3:18:50
there is no semantic meaning to null so defaulting to an empty array is nice it
3:18:53
defaulting to an empty array is nice it
3:18:53
defaulting to an empty array is nice it means that i don't have to
3:18:54
means that i don't have to
3:18:54
means that i don't have to propagate that null through my whole
3:18:56
propagate that null through my whole
3:18:56
propagate that null through my whole application and
3:18:57
application and
3:18:58
application and test my whole application for nulls
3:19:02
so validate
3:19:06
so validate
3:19:06
so validate data that comes through an api
3:19:09
data that comes through an api
3:19:09
data that comes through an api another thing i quite often do is i do
3:19:12
another thing i quite often do is i do
3:19:12
another thing i quite often do is i do actually do a mapping
3:19:14
actually do a mapping
3:19:14
actually do a mapping beside validating
3:19:17
if i look at the structure of my rest
3:19:20
if i look at the structure of my rest
3:19:20
if i look at the structure of my rest requests then
3:19:21
requests then
3:19:21
requests then my backend typically has a database
3:19:24
my backend typically has a database
3:19:24
my backend typically has a database there
3:19:24
there
3:19:24
there and the http response for a rest request
3:19:29
and the http response for a rest request
3:19:29
and the http response for a rest request typically looks like the back end it's
3:19:32
typically looks like the back end it's
3:19:32
typically looks like the back end it's kind of like the
3:19:33
kind of like the
3:19:33
kind of like the tables i store in my database
3:19:37
tables i store in my database
3:19:37
tables i store in my database but in my front end i probably have a
3:19:39
but in my front end i probably have a
3:19:40
but in my front end i probably have a very different
3:19:41
very different
3:19:41
very different view of data i've have the browser there
3:19:44
view of data i've have the browser there
3:19:44
view of data i've have the browser there i might have different cards and say
3:19:45
i might have different cards and say
3:19:45
i might have different cards and say well
3:19:46
well
3:19:46
well each card has its own data so i get
3:19:49
each card has its own data so i get
3:19:49
each card has its own data so i get this flat set of data back but i want to
3:19:52
this flat set of data back but i want to
3:19:52
this flat set of data back but i want to pass different
3:19:53
pass different
3:19:53
pass different objects to different components to
3:19:55
objects to different components to
3:19:55
objects to different components to render and not just pass
3:19:56
render and not just pass
3:19:56
render and not just pass everything to everyone well
3:20:00
everything to everyone well
3:20:00
everything to everyone well i didn't actually do that but i've got a
3:20:02
i didn't actually do that but i've got a
3:20:02
i didn't actually do that but i've got a simple
3:20:03
simple
3:20:03
simple mapping here actually i've got two
3:20:05
mapping here actually i've got two
3:20:05
mapping here actually i've got two mappings here
3:20:06
mappings here
3:20:06
mappings here and it helps
3:20:10
and it helps
3:20:10
and it helps if i don't hover over something which
3:20:11
if i don't hover over something which
3:20:11
if i don't hover over something which blocks what i want to show
3:20:14
blocks what i want to show
3:20:14
blocks what i want to show so on the back end there is this
3:20:16
so on the back end there is this
3:20:16
so on the back end there is this convention that says well i want to use
3:20:18
convention that says well i want to use
3:20:18
convention that says well i want to use underscores to separate different words
3:20:20
underscores to separate different words
3:20:20
underscores to separate different words so we've got favored underscore movies
3:20:23
so we've got favored underscore movies
3:20:23
so we've got favored underscore movies i might not want to do that on the front
3:20:25
i might not want to do that on the front
3:20:25
i might not want to do that on the front end so i do name mapping here
3:20:28
end so i do name mapping here
3:20:28
end so i do name mapping here here's another one there is this
3:20:31
here's another one there is this
3:20:31
here's another one there is this transaction date
3:20:33
transaction date
3:20:33
transaction date and on the back end that's probably a
3:20:35
and on the back end that's probably a
3:20:35
and on the back end that's probably a date
3:20:36
date
3:20:36
date in the database as well but in json a
3:20:39
in the database as well but in json a
3:20:39
in the database as well but in json a date doesn't exist
3:20:40
date doesn't exist
3:20:40
date doesn't exist so it's serialized as an iso string
3:20:43
so it's serialized as an iso string
3:20:43
so it's serialized as an iso string but in the front end i want to use that
3:20:45
but in the front end i want to use that
3:20:45
but in the front end i want to use that as a date again so i map that from that
3:20:48
as a date again so i map that from that
3:20:48
as a date again so i map that from that iso string to an actual date
3:20:50
iso string to an actual date
3:20:50
iso string to an actual date object again and the rest of my
3:20:52
object again and the rest of my
3:20:52
object again and the rest of my application works with
3:20:53
application works with
3:20:53
application works with the date object again
3:20:56
the date object again
3:20:56
the date object again i typically do more mappings here i
3:20:58
i typically do more mappings here i
3:20:58
i typically do more mappings here i typically do mappings
3:21:00
typically do mappings
3:21:00
typically do mappings split out objects like i mentioned in
3:21:02
split out objects like i mentioned in
3:21:02
split out objects like i mentioned in two different sub-objects so
3:21:04
two different sub-objects so
3:21:04
two different sub-objects so it makes sense for the client
3:21:06
it makes sense for the client
3:21:06
it makes sense for the client applications
3:21:07
applications
3:21:07
applications and then when i send data back to the
3:21:09
and then when i send data back to the
3:21:09
and then when i send data back to the server i have to reverse mapping
3:21:12
server i have to reverse mapping
3:21:12
server i have to reverse mapping there as well so
3:21:16
there as well so
3:21:16
there as well so another thing to do
3:21:19
another thing to do
3:21:19
another thing to do turns out there are some more issues
3:21:20
turns out there are some more issues
3:21:20
turns out there are some more issues with http requests
3:21:22
with http requests
3:21:22
with http requests you have to deal with one which is not
3:21:25
you have to deal with one which is not
3:21:25
you have to deal with one which is not very obvious
3:21:27
very obvious
3:21:27
very obvious certainly not when you're developing is
3:21:29
certainly not when you're developing is
3:21:29
certainly not when you're developing is still applications
3:21:31
still applications
3:21:31
still applications so when i'm developing i tend to press
3:21:33
so when i'm developing i tend to press
3:21:34
so when i'm developing i tend to press f5 quite often
3:21:35
f5 quite often
3:21:35
f5 quite often and reload the application with changes
3:21:38
and reload the application with changes
3:21:38
and reload the application with changes and with create react app and vit you
3:21:41
and with create react app and vit you
3:21:41
and with create react app and vit you actually get the changes pushed to the
3:21:43
actually get the changes pushed to the
3:21:43
actually get the changes pushed to the browser so in most cases you don't
3:21:45
browser so in most cases you don't
3:21:45
browser so in most cases you don't even have to refresh the browser
3:21:49
even have to refresh the browser
3:21:49
even have to refresh the browser so you're kind of always running the
3:21:51
so you're kind of always running the
3:21:51
so you're kind of always running the latest
3:21:52
latest
3:21:52
latest but it turns out that end users don't do
3:21:55
but it turns out that end users don't do
3:21:55
but it turns out that end users don't do that
3:21:56
that
3:21:56
that end users start the browser they
3:21:58
end users start the browser they
3:21:58
end users start the browser they navigate to your application
3:22:01
navigate to your application
3:22:01
navigate to your application and they work in there and they do
3:22:04
and they work in there and they do
3:22:04
and they work in there and they do whatever they need and if it's an
3:22:05
whatever they need and if it's an
3:22:05
whatever they need and if it's an application
3:22:06
application
3:22:06
application they use a lot they will probably leave
3:22:08
they use a lot they will probably leave
3:22:08
they use a lot they will probably leave it active
3:22:10
it active
3:22:10
it active like my wife for instance she opens her
3:22:12
like my wife for instance she opens her
3:22:12
like my wife for instance she opens her computer she opens
3:22:14
computer she opens
3:22:14
computer she opens gmail and then when she's done
3:22:17
gmail and then when she's done
3:22:17
gmail and then when she's done at the end of the day she just
3:22:19
at the end of the day she just
3:22:19
at the end of the day she just shuts lit
3:22:20
shuts lit
3:22:20
shuts lit for on her computer she doesn't stop the
3:22:23
for on her computer she doesn't stop the
3:22:23
for on her computer she doesn't stop the browser
3:22:24
browser
3:22:24
browser she doesn't turn the machine off she
3:22:27
she doesn't turn the machine off she
3:22:27
she doesn't turn the machine off she just suspends it
3:22:28
just suspends it
3:22:28
just suspends it next morning she opens it up and gmail
3:22:31
next morning she opens it up and gmail
3:22:31
next morning she opens it up and gmail is right there in front of her so she
3:22:33
is right there in front of her so she
3:22:33
is right there in front of her so she sees
3:22:34
sees
3:22:34
sees all the new emails that's fine lots of
3:22:37
all the new emails that's fine lots of
3:22:37
all the new emails that's fine lots of people do that
3:22:39
people do that
3:22:39
people do that but that does mean with the single page
3:22:41
but that does mean with the single page
3:22:41
but that does mean with the single page application
3:22:42
application
3:22:42
application that your application didn't actually
3:22:44
that your application didn't actually
3:22:44
that your application didn't actually reload even if they start clicking
3:22:46
reload even if they start clicking
3:22:46
reload even if they start clicking through the application
3:22:48
through the application
3:22:48
through the application it's the old previously loaded
3:22:50
it's the old previously loaded
3:22:50
it's the old previously loaded application which is still active
3:22:54
and that might mean that an application
3:22:58
and that might mean that an application
3:22:58
and that might mean that an application which
3:22:58
which
3:22:58
which was deployed two weeks ago could still
3:23:02
was deployed two weeks ago could still
3:23:02
was deployed two weeks ago could still be active in some browsers
3:23:03
be active in some browsers
3:23:03
be active in some browsers even if you deployed a newer version of
3:23:06
even if you deployed a newer version of
3:23:06
even if you deployed a newer version of the application
3:23:08
the application
3:23:08
the application a day later so 13 days ago
3:23:11
a day later so 13 days ago
3:23:11
a day later so 13 days ago and single page applications suffer from
3:23:14
and single page applications suffer from
3:23:14
and single page applications suffer from that
3:23:15
that
3:23:15
that now by itself that isn't that bad
3:23:19
now by itself that isn't that bad
3:23:19
now by itself that isn't that bad but suppose there are api updates star
3:23:22
but suppose there are api updates star
3:23:22
but suppose there are api updates star types that have
3:23:23
types that have
3:23:23
types that have updated properties been added or removed
3:23:27
updated properties been added or removed
3:23:27
updated properties been added or removed or renamed then your clients
3:23:31
or renamed then your clients
3:23:31
or renamed then your clients might actually get data it didn't expect
3:23:36
might actually get data it didn't expect
3:23:36
might actually get data it didn't expect well validation will help you detect
3:23:38
well validation will help you detect
3:23:38
well validation will help you detect that
3:23:39
that
3:23:39
that and detect that something is wrong
3:23:42
and detect that something is wrong
3:23:42
and detect that something is wrong but it's still okay there is a mismatch
3:23:44
but it's still okay there is a mismatch
3:23:44
but it's still okay there is a mismatch why did that mismatch occur
3:23:46
why did that mismatch occur
3:23:46
why did that mismatch occur well in that case we want to know a bit
3:23:48
well in that case we want to know a bit
3:23:48
well in that case we want to know a bit more
3:23:50
more
3:23:50
more and what i typically do is i save
3:23:54
and what i typically do is i save
3:23:54
and what i typically do is i save the version of the application of the
3:23:57
the version of the application of the
3:23:57
the version of the application of the api
3:23:58
api
3:23:58
api the application was built against so
3:24:00
the application was built against so
3:24:00
the application was built against so when i
3:24:01
when i
3:24:01
when i run that nsware command i also generate
3:24:05
run that nsware command i also generate
3:24:05
run that nsware command i also generate this file
3:24:07
this file
3:24:07
this file and this actually says okay i'm
3:24:10
and this actually says okay i'm
3:24:10
and this actually says okay i'm this client was built against version
3:24:17
1.2.7832.34422
3:24:19
1.2.7832.34422
3:24:19
1.2.7832.34422 off the back-end api
3:24:22
great now i know if i send this
3:24:25
great now i know if i send this
3:24:25
great now i know if i send this along with every request back to the api
3:24:28
along with every request back to the api
3:24:28
along with every request back to the api the api can say well
3:24:30
the api can say well
3:24:30
the api can say well this client was built against this old
3:24:32
this client was built against this old
3:24:32
this client was built against this old version
3:24:34
version
3:24:34
version time to let them know that that version
3:24:36
time to let them know that that version
3:24:36
time to let them know that that version is no longer supported and we need to
3:24:39
is no longer supported and we need to
3:24:39
is no longer supported and we need to update so you can return an http status
3:24:42
update so you can return an http status
3:24:42
update so you can return an http status response saying okay your version is no
3:24:46
response saying okay your version is no
3:24:46
response saying okay your version is no longer supported
3:24:47
longer supported
3:24:47
longer supported refresh or you can even automate that
3:24:50
refresh or you can even automate that
3:24:50
refresh or you can even automate that refreshing
3:24:51
refreshing
3:24:51
refreshing some code like this
3:24:58
running out of time so
3:25:02
another thing to keep in mind is
3:25:04
another thing to keep in mind is
3:25:04
another thing to keep in mind is networks networks are not reliable
3:25:07
networks networks are not reliable
3:25:07
networks networks are not reliable i might be with my laptop in the trainer
3:25:09
i might be with my laptop in the trainer
3:25:09
i might be with my laptop in the trainer or with an ipad or something like that
3:25:11
or with an ipad or something like that
3:25:11
or with an ipad or something like that and the train grows to a tunnel well if
3:25:14
and the train grows to a tunnel well if
3:25:14
and the train grows to a tunnel well if i'm
3:25:14
i'm
3:25:14
i'm if my or my application is doing an ajax
3:25:16
if my or my application is doing an ajax
3:25:16
if my or my application is doing an ajax request it's gonna fail because
3:25:18
request it's gonna fail because
3:25:18
request it's gonna fail because connectivity is down
3:25:20
connectivity is down
3:25:20
connectivity is down for a minute use a retry policy like
3:25:23
for a minute use a retry policy like
3:25:23
for a minute use a retry policy like this
3:25:23
this
3:25:24
this this basically says okay go and do the
3:25:26
this basically says okay go and do the
3:25:26
this basically says okay go and do the request
3:25:27
request
3:25:27
request if for some reason it fails wait one
3:25:30
if for some reason it fails wait one
3:25:30
if for some reason it fails wait one second and try it again
3:25:31
second and try it again
3:25:32
second and try it again if it still fails wait two seconds and
3:25:34
if it still fails wait two seconds and
3:25:34
if it still fails wait two seconds and try it again
3:25:36
try it again
3:25:36
try it again i could put additional weights in here
3:25:39
i could put additional weights in here
3:25:39
i could put additional weights in here but it will basically handle most
3:25:43
but it will basically handle most
3:25:43
but it will basically handle most network errors now if your network is
3:25:45
network errors now if your network is
3:25:45
network errors now if your network is really down it's
3:25:46
really down it's
3:25:46
really down it's still going to fail eventually but if
3:25:49
still going to fail eventually but if
3:25:49
still going to fail eventually but if it's one of those
3:25:50
it's one of those
3:25:50
it's one of those small transient problems then this will
3:25:53
small transient problems then this will
3:25:53
small transient problems then this will take care
3:25:55
take care
3:25:55
take care of those it will just retry it will
3:25:59
of those it will just retry it will
3:25:59
of those it will just retry it will fix the problem
3:26:02
last time thing i briefly want to
3:26:04
last time thing i briefly want to
3:26:04
last time thing i briefly want to mention is
3:26:06
mention is
3:26:06
mention is runtime errors all the error
3:26:10
runtime errors all the error
3:26:10
runtime errors all the error handling the error detection strategies
3:26:13
handling the error detection strategies
3:26:13
handling the error detection strategies or air prevention
3:26:14
or air prevention
3:26:14
or air prevention strategies you apply um
3:26:18
strategies you apply um
3:26:18
strategies you apply um you will still have runtime errors
3:26:21
you will still have runtime errors
3:26:21
you will still have runtime errors make sure you catch them errors that
3:26:23
make sure you catch them errors that
3:26:24
make sure you catch them errors that happen
3:26:24
happen
3:26:24
happen in a react application in the browser
3:26:28
in a react application in the browser
3:26:28
in a react application in the browser are maybe locked to the console there
3:26:31
are maybe locked to the console there
3:26:31
are maybe locked to the console there but they're not sent to you by default
3:26:35
but they're not sent to you by default
3:26:35
but they're not sent to you by default you need to take care of that
3:26:38
you need to take care of that
3:26:38
you need to take care of that track them somehow i
3:26:41
track them somehow i
3:26:42
track them somehow i typically use azure application insights
3:26:45
typically use azure application insights
3:26:45
typically use azure application insights works really well
3:26:46
works really well
3:26:46
works really well it will let you track unhandled
3:26:49
it will let you track unhandled
3:26:49
it will let you track unhandled exceptions
3:26:50
exceptions
3:26:50
exceptions but it won't track react errors by
3:26:53
but it won't track react errors by
3:26:53
but it won't track react errors by default
3:26:54
default
3:26:54
default if your error is inside the react
3:26:56
if your error is inside the react
3:26:56
if your error is inside the react component you do need to add an
3:26:58
component you do need to add an
3:26:58
component you do need to add an error boundary and track those yourself
3:27:01
error boundary and track those yourself
3:27:01
error boundary and track those yourself and send them to application insights
3:27:04
and send them to application insights
3:27:04
and send them to application insights it's actually pretty simple this is all
3:27:06
it's actually pretty simple this is all
3:27:06
it's actually pretty simple this is all the code you need
3:27:08
the code you need
3:27:08
the code you need i'm using the error boundary npm package
3:27:11
i'm using the error boundary npm package
3:27:12
i'm using the error boundary npm package which is really good it has a fallback
3:27:15
which is really good it has a fallback
3:27:15
which is really good it has a fallback component this is the one you
3:27:17
component this is the one you
3:27:17
component this is the one you actually saw me running in code
3:27:20
actually saw me running in code
3:27:20
actually saw me running in code it tracks evelyn to application insights
3:27:24
it tracks evelyn to application insights
3:27:24
it tracks evelyn to application insights and using this application insights it's
3:27:27
and using this application insights it's
3:27:27
and using this application insights it's all loaded
3:27:27
all loaded
3:27:28
all loaded there so if i go back
3:27:31
there so if i go back
3:27:31
there so if i go back to azure i go back
3:27:35
to azure i go back
3:27:35
to azure i go back to the list of services i should have
3:27:37
to the list of services i should have
3:27:37
to the list of services i should have application insights here
3:27:40
application insights here
3:27:40
application insights here i can go to failures i can go to
3:27:43
i can go to failures i can go to
3:27:43
i can go to failures i can go to browser failures exceptions and i see
3:27:46
browser failures exceptions and i see
3:27:46
browser failures exceptions and i see different exceptions that occurred there
3:27:49
different exceptions that occurred there
3:27:49
different exceptions that occurred there so we can see that i had
3:27:51
so we can see that i had
3:27:52
so we can see that i had two different exceptions and then i can
3:27:54
two different exceptions and then i can
3:27:54
two different exceptions and then i can say well i want to see that's
3:27:56
say well i want to see that's
3:27:56
say well i want to see that's the map of null zoom
3:27:59
the map of null zoom
3:27:59
the map of null zoom in check the details see
3:28:03
in check the details see
3:28:03
in check the details see all the other different errors that
3:28:05
all the other different errors that
3:28:05
all the other different errors that occurred for that user session
3:28:07
occurred for that user session
3:28:07
occurred for that user session all other use things you tracked i might
3:28:10
all other use things you tracked i might
3:28:10
all other use things you tracked i might say view also
3:28:11
say view also
3:28:11
say view also telemetry not tracking anything else so
3:28:14
telemetry not tracking anything else so
3:28:14
telemetry not tracking anything else so there isn't more but
3:28:15
there isn't more but
3:28:15
there isn't more but you could track user events like a user
3:28:19
you could track user events like a user
3:28:19
you could track user events like a user open this page close that page click on
3:28:22
open this page close that page click on
3:28:22
open this page close that page click on this button etc
3:28:24
this button etc
3:28:24
this button etc and it's all visible in here
3:28:27
and it's all visible in here
3:28:27
and it's all visible in here call stack is visible in here in this
3:28:29
call stack is visible in here in this
3:28:29
call stack is visible in here in this case there isn't much because this was
3:28:31
case there isn't much because this was
3:28:31
case there isn't much because this was on localhost
3:28:33
on localhost
3:28:33
on localhost but if it's minified you can actually
3:28:35
but if it's minified you can actually
3:28:35
but if it's minified you can actually click this unminify option
3:28:37
click this unminify option
3:28:37
click this unminify option if you've set it up it's not set up here
3:28:40
if you've set it up it's not set up here
3:28:40
if you've set it up it's not set up here but it will unminify your code and show
3:28:43
but it will unminify your code and show
3:28:43
but it will unminify your code and show you the
3:28:43
you the
3:28:44
you the correct stack trace which is really nice
3:28:46
correct stack trace which is really nice
3:28:46
correct stack trace which is really nice as well
3:28:49
so highly recommended to add that
3:28:52
so highly recommended to add that
3:28:52
so highly recommended to add that in one form or another
3:28:55
in one form or another
3:28:56
in one form or another so conclusion wrap things up typescript
3:28:59
so conclusion wrap things up typescript
3:28:59
so conclusion wrap things up typescript i would say a must-have for any serious
3:29:01
i would say a must-have for any serious
3:29:01
i would say a must-have for any serious development
3:29:02
development
3:29:02
development blob storage with the cdn in front of it
3:29:05
blob storage with the cdn in front of it
3:29:05
blob storage with the cdn in front of it on azure
3:29:06
on azure
3:29:06
on azure really fast and cheap way of hosting can
3:29:09
really fast and cheap way of hosting can
3:29:09
really fast and cheap way of hosting can do exactly the same thing
3:29:10
do exactly the same thing
3:29:10
do exactly the same thing on amazon or other hosting services
3:29:15
on amazon or other hosting services
3:29:16
on amazon or other hosting services do end-to-end testing proof your whole
3:29:17
do end-to-end testing proof your whole
3:29:18
do end-to-end testing proof your whole application works
3:29:19
application works
3:29:19
application works using tools like cypress
3:29:22
using tools like cypress
3:29:22
using tools like cypress automate your api updates your type
3:29:26
automate your api updates your type
3:29:26
automate your api updates your type updates as much as possible
3:29:28
updates as much as possible
3:29:28
updates as much as possible make sure to do that in your continuous
3:29:30
make sure to do that in your continuous
3:29:30
make sure to do that in your continuous integration build so you're always
3:29:32
integration build so you're always
3:29:32
integration build so you're always compiling against the current version
3:29:35
compiling against the current version
3:29:35
compiling against the current version not some old version where you depend on
3:29:38
not some old version where you depend on
3:29:38
not some old version where you depend on developers to update it especially if
3:29:40
developers to update it especially if
3:29:40
developers to update it especially if it's manual
3:29:41
it's manual
3:29:41
it's manual don't want to do that and track runtime
3:29:45
don't want to do that and track runtime
3:29:45
don't want to do that and track runtime errors
3:29:45
errors
3:29:45
errors it's not a question if they happen they
3:29:48
it's not a question if they happen they
3:29:48
it's not a question if they happen they will happen
3:29:49
will happen
3:29:49
will happen make sure you track them make sure
3:29:51
make sure you track them make sure
3:29:51
make sure you track them make sure you're aware of them
3:29:53
you're aware of them
3:29:53
you're aware of them so you can fix them if you don't track
3:29:55
so you can fix them if you don't track
3:29:55
so you can fix them if you don't track them you won't know
3:29:57
them you won't know
3:29:57
them you won't know and you might be under the illusion that
3:30:00
and you might be under the illusion that
3:30:00
and you might be under the illusion that there are no serious problems because
3:30:02
there are no serious problems because
3:30:02
there are no serious problems because your users are not calling but
3:30:06
your users are not calling but
3:30:06
your users are not calling but quite possibly there are some serious
3:30:09
quite possibly there are some serious
3:30:09
quite possibly there are some serious errors
3:30:09
errors
3:30:09
errors maybe there aren't and you're lucky but
3:30:12
maybe there aren't and you're lucky but
3:30:12
maybe there aren't and you're lucky but quite
3:30:13
quite
3:30:13
quite likely you're wrong there so thank you
3:30:16
likely you're wrong there so thank you
3:30:16
likely you're wrong there so thank you for attending
3:30:17
for attending
3:30:17
for attending this session um i'll
3:30:20
this session um i'll
3:30:20
this session um i'll upload my slides to the clouds later
3:30:23
upload my slides to the clouds later
3:30:23
upload my slides to the clouds later today
3:30:24
today
3:30:24
today and i'll tweet it so if you want to get
3:30:25
and i'll tweet it so if you want to get
3:30:26
and i'll tweet it so if you want to get a copy
3:30:27
a copy
3:30:27
a copy feel free all the sl or
3:30:31
feel free all the sl or
3:30:31
feel free all the sl or all the pages with code in there the
3:30:34
all the pages with code in there the
3:30:34
all the pages with code in there the code is actually a link to a git
3:30:36
code is actually a link to a git
3:30:36
code is actually a link to a git repository where you can see
3:30:38
repository where you can see
3:30:38
repository where you can see find that code so that makes it a little
3:30:40
find that code so that makes it a little
3:30:40
find that code so that makes it a little easier if you want to
3:30:41
easier if you want to
3:30:41
easier if you want to check things out and with that
3:30:45
check things out and with that
3:30:45
check things out and with that i'd like to thank you all for being here
3:30:47
i'd like to thank you all for being here
3:30:47
i'd like to thank you all for being here and
3:30:48
and
3:30:48
and i'm wondering if there are any questions
3:30:50
i'm wondering if there are any questions
3:30:50
i'm wondering if there are any questions i need to answer
3:30:52
i need to answer
3:30:52
i need to answer all right maurice that was a very very
3:30:54
all right maurice that was a very very
3:30:54
all right maurice that was a very very detailed session i
3:30:56
detailed session i
3:30:56
detailed session i believe we covered the entire ecosystem
3:30:58
believe we covered the entire ecosystem
3:30:58
believe we covered the entire ecosystem of react
3:30:59
of react
3:31:00
of react c-sharp azure how you can just get
3:31:02
c-sharp azure how you can just get
3:31:02
c-sharp azure how you can just get started you went to in very depth
3:31:04
started you went to in very depth
3:31:04
started you went to in very depth testing and all so i believe when people
3:31:07
testing and all so i believe when people
3:31:07
testing and all so i believe when people are going to watch it even later on
3:31:09
are going to watch it even later on
3:31:09
are going to watch it even later on there's a lot that they can take away in
3:31:11
there's a lot that they can take away in
3:31:11
there's a lot that they can take away in just 50 minutes
3:31:12
just 50 minutes
3:31:12
just 50 minutes yeah it is a lot i yeah
3:31:16
yeah it is a lot i yeah
3:31:16
yeah it is a lot i yeah that's a really i i i'm not gonna ask
3:31:18
that's a really i i i'm not gonna ask
3:31:18
that's a really i i i'm not gonna ask you how by the way let me ask you how
3:31:20
you how by the way let me ask you how
3:31:20
you how by the way let me ask you how long it took you to build those slides
3:31:21
long it took you to build those slides
3:31:22
long it took you to build those slides and there was
3:31:23
and there was
3:31:23
and there was um i'm not sure that the actual original
3:31:27
um i'm not sure that the actual original
3:31:27
um i'm not sure that the actual original slide deck is quite a bit larger i had
3:31:29
slide deck is quite a bit larger i had
3:31:29
slide deck is quite a bit larger i had to
3:31:29
to
3:31:29
to cut a number of items and even when i
3:31:31
cut a number of items and even when i
3:31:31
cut a number of items and even when i was creating it's like i want to add
3:31:33
was creating it's like i want to add
3:31:33
was creating it's like i want to add this and i want to add that
3:31:35
this and i want to add that
3:31:35
this and i want to add that and i want to add say graphql and
3:31:38
and i want to add say graphql and
3:31:38
and i want to add say graphql and but i can't i've already got so much i
3:31:41
but i can't i've already got so much i
3:31:41
but i can't i've already got so much i no conference is going to be
3:31:42
no conference is going to be
3:31:42
no conference is going to be give me a four hour session
3:31:45
give me a four hour session
3:31:46
give me a four hour session there is so much you can alright there's
3:31:48
there is so much you can alright there's
3:31:48
there is so much you can alright there's a couple of questions that
3:31:50
a couple of questions that
3:31:50
a couple of questions that maurizio may like to take the first one
3:31:52
maurizio may like to take the first one
3:31:52
maurizio may like to take the first one is coming from omisha
3:31:53
is coming from omisha
3:31:53
is coming from omisha she's asking is it possible to provide
3:31:55
she's asking is it possible to provide
3:31:55
she's asking is it possible to provide payload for unit testing
3:31:57
payload for unit testing
3:31:57
payload for unit testing i mean passing data from external file
3:31:59
i mean passing data from external file
3:31:59
i mean passing data from external file instead of from data
3:32:02
instead of from data
3:32:02
instead of from data um yes well with unit testing you're
3:32:05
um yes well with unit testing you're
3:32:05
um yes well with unit testing you're completely free to
3:32:07
completely free to
3:32:07
completely free to do the data whatever you want in with
3:32:09
do the data whatever you want in with
3:32:09
do the data whatever you want in with unit testing i typically just create
3:32:11
unit testing i typically just create
3:32:11
unit testing i typically just create objects
3:32:12
objects
3:32:12
objects and if i unit test react components
3:32:17
and if i unit test react components
3:32:17
and if i unit test react components what was the tool called again msw mock
3:32:21
what was the tool called again msw mock
3:32:21
what was the tool called again msw mock service worker
3:32:22
service worker
3:32:22
service worker is the tool i use to mock things
3:32:25
is the tool i use to mock things
3:32:26
is the tool i use to mock things if you're referring to the cyprus test i
3:32:28
if you're referring to the cyprus test i
3:32:28
if you're referring to the cyprus test i showed
3:32:29
showed
3:32:29
showed the the cyprus test where i
3:32:33
the the cyprus test where i
3:32:33
the the cyprus test where i did the intercept there the payload
3:32:36
did the intercept there the payload
3:32:36
did the intercept there the payload actually comes from a json file which is
3:32:39
actually comes from a json file which is
3:32:39
actually comes from a json file which is stored along with the test
3:32:41
stored along with the test
3:32:42
stored along with the test all right so again yes yeah yeah yes
3:32:45
all right so again yes yeah yeah yes
3:32:45
all right so again yes yeah yeah yes and i think one question you just
3:32:47
and i think one question you just
3:32:47
and i think one question you just answered is can we use aws club hosting
3:32:49
answered is can we use aws club hosting
3:32:49
answered is can we use aws club hosting you didn't say yes
3:32:50
you didn't say yes
3:32:50
you didn't say yes but that's yes in the end it's just
3:32:53
but that's yes in the end it's just
3:32:53
but that's yes in the end it's just static html
3:32:54
static html
3:32:54
static html javascript css files so any
3:32:57
javascript css files so any
3:32:57
javascript css files so any hosts which will serve that which i
3:32:59
hosts which will serve that which i
3:32:59
hosts which will serve that which i guess is pretty much
3:33:00
guess is pretty much
3:33:00
guess is pretty much any web host will serve
3:33:04
any web host will serve
3:33:04
any web host will serve all right so people say uh thank you
3:33:06
all right so people say uh thank you
3:33:06
all right so people say uh thank you very much indeed very detailed session
3:33:08
very much indeed very detailed session
3:33:08
very much indeed very detailed session people feel the same
3:33:09
people feel the same
3:33:09
people feel the same says amazing sashima race uh well
3:33:12
says amazing sashima race uh well
3:33:12
says amazing sashima race uh well explained
3:33:13
explained
3:33:13
explained uh let us see if you have any questions
3:33:15
uh let us see if you have any questions
3:33:15
uh let us see if you have any questions uh
3:33:16
uh
3:33:16
uh kunjun says learn new test case to be
3:33:18
kunjun says learn new test case to be
3:33:18
kunjun says learn new test case to be included
3:33:19
included
3:33:19
included long-living clients ah yeah
3:33:23
long-living clients ah yeah
3:33:23
long-living clients ah yeah yeah that's one of the things if you're
3:33:24
yeah that's one of the things if you're
3:33:24
yeah that's one of the things if you're developing you don't think about it
3:33:26
developing you don't think about it
3:33:26
developing you don't think about it because
3:33:27
because
3:33:27
because every client is by definition
3:33:28
every client is by definition
3:33:28
every client is by definition short-lived but in
3:33:30
short-lived but in
3:33:30
short-lived but in production it really happens that you've
3:33:32
production it really happens that you've
3:33:32
production it really happens that you've got clients that stay alive for two
3:33:34
got clients that stay alive for two
3:33:34
got clients that stay alive for two weeks
3:33:35
weeks
3:33:35
weeks or longer okay let's take one final
3:33:37
or longer okay let's take one final
3:33:37
or longer okay let's take one final question then we can
3:33:38
question then we can
3:33:38
question then we can move to the next part of the conference
3:33:40
move to the next part of the conference
3:33:40
move to the next part of the conference is asking
3:33:41
is asking
3:33:42
is asking is it possible to have error boundaries
3:33:43
is it possible to have error boundaries
3:33:44
is it possible to have error boundaries same as app with initial props
3:33:46
same as app with initial props
3:33:46
same as app with initial props not creating a new component and using
3:33:48
not creating a new component and using
3:33:48
not creating a new component and using same app component
3:33:50
same app component
3:33:50
same app component you can in the end your error boundary
3:33:52
you can in the end your error boundary
3:33:52
you can in the end your error boundary is just a component
3:33:55
is just a component
3:33:55
is just a component the only restriction is it can't be a
3:33:56
the only restriction is it can't be a
3:33:56
the only restriction is it can't be a functional component with a hook it has
3:33:58
functional component with a hook it has
3:33:58
functional component with a hook it has to be a class class-based component but
3:34:00
to be a class class-based component but
3:34:00
to be a class class-based component but it's just a component
3:34:01
it's just a component
3:34:02
it's just a component the one thing you need to be careful
3:34:04
the one thing you need to be careful
3:34:04
the one thing you need to be careful with with an
3:34:05
with with an
3:34:05
with with an error boundary is it will not catch
3:34:07
error boundary is it will not catch
3:34:07
error boundary is it will not catch errors in that same component
3:34:10
errors in that same component
3:34:10
errors in that same component so if you create turn your app component
3:34:13
so if you create turn your app component
3:34:13
so if you create turn your app component into
3:34:13
into
3:34:14
into an error boundary only do that if you
3:34:16
an error boundary only do that if you
3:34:16
an error boundary only do that if you don't have additional logic in there
3:34:18
don't have additional logic in there
3:34:18
don't have additional logic in there because
3:34:19
because
3:34:19
because if there's an error in that logic it
3:34:21
if there's an error in that logic it
3:34:21
if there's an error in that logic it blows up it will not catch that error
3:34:23
blows up it will not catch that error
3:34:23
blows up it will not catch that error and report it it will just
3:34:24
and report it it will just
3:34:24
and report it it will just unload your application all right i'll
3:34:27
unload your application all right i'll
3:34:27
unload your application all right i'll write my over down to that we'll just
3:34:29
write my over down to that we'll just
3:34:29
write my over down to that we'll just say
3:34:29
say
3:34:29
say awesome session morris sir um what did
3:34:32
awesome session morris sir um what did
3:34:32
awesome session morris sir um what did say is deep like with mares
3:34:35
say is deep like with mares
3:34:35
say is deep like with mares mocha says appreciate the effort put in
3:34:37
mocha says appreciate the effort put in
3:34:37
mocha says appreciate the effort put in further
3:34:38
further
3:34:38
further for the session i i mean if you look at
3:34:40
for the session i i mean if you look at
3:34:40
for the session i i mean if you look at the comments people really appreciate
3:34:41
the comments people really appreciate
3:34:41
the comments people really appreciate you all that knowledge you just put in
3:34:43
you all that knowledge you just put in
3:34:43
you all that knowledge you just put in in just 50 minutes and you're telling
3:34:45
in just 50 minutes and you're telling
3:34:45
in just 50 minutes and you're telling there's a lot more so definitely reach
3:34:47
there's a lot more so definitely reach
3:34:47
there's a lot more so definitely reach out to maurice db at twitter
3:34:49
out to maurice db at twitter
3:34:49
out to maurice db at twitter i believe he's going to share his light
3:34:50
i believe he's going to share his light
3:34:50
i believe he's going to share his light some people are asking it so
3:34:52
some people are asking it so
3:34:52
some people are asking it so follow him on twitter that's maurice tv
3:34:54
follow him on twitter that's maurice tv
3:34:54
follow him on twitter that's maurice tv and then you can skip it for any of the
3:34:56
and then you can skip it for any of the
3:34:56
and then you can skip it for any of the other conferences that he speaks and
3:34:58
other conferences that he speaks and
3:34:58
other conferences that he speaks and also for this one
3:34:59
also for this one
3:34:59
also for this one uh maurice that was an amazing question
3:35:01
uh maurice that was an amazing question
3:35:01
uh maurice that was an amazing question before we move to the next
3:35:02
before we move to the next
3:35:02
before we move to the next part of this conference any final thing
3:35:04
part of this conference any final thing
3:35:04
part of this conference any final thing you want to plug in
3:35:06
you want to plug in
3:35:06
you want to plug in i just want to say enjoy the session it
3:35:09
i just want to say enjoy the session it
3:35:09
i just want to say enjoy the session it was great that i could present
3:35:10
was great that i could present
3:35:10
was great that i could present this and maybe i can do some more some
3:35:13
this and maybe i can do some more some
3:35:13
this and maybe i can do some more some other time
3:35:14
other time
3:35:14
other time yeah exactly we would love to host you
3:35:17
yeah exactly we would love to host you
3:35:17
yeah exactly we would love to host you back whenever you're available
3:35:19
back whenever you're available
3:35:19
back whenever you're available i mean we have an azure summit coming up
3:35:21
i mean we have an azure summit coming up
3:35:21
i mean we have an azure summit coming up in the month of september that's a
3:35:22
in the month of september that's a
3:35:22
in the month of september that's a week-long
3:35:23
week-long
3:35:23
week-long conference with over 120 speakers that
3:35:25
conference with over 120 speakers that
3:35:25
conference with over 120 speakers that run for seven days
3:35:27
run for seven days
3:35:27
run for seven days uh if you if you have time and it's time
3:35:29
uh if you if you have time and it's time
3:35:29
uh if you if you have time and it's time for mercy we would love to host you
3:35:30
for mercy we would love to host you
3:35:30
for mercy we would love to host you there too
3:35:31
there too
3:35:31
there too and yeah at c-sharp corner we do 21
3:35:33
and yeah at c-sharp corner we do 21
3:35:33
and yeah at c-sharp corner we do 21 conferences
3:35:35
conferences
3:35:35
conferences in in this in this year unless you focus
3:35:37
in in this in this year unless you focus
3:35:37
in in this in this year unless you focus on different technologies
3:35:39
on different technologies
3:35:39
on different technologies and i say that we stream eight days in a
3:35:41
and i say that we stream eight days in a
3:35:41
and i say that we stream eight days in a week we have different live shows that
3:35:43
week we have different live shows that
3:35:43
week we have different live shows that we use every day
3:35:44
we use every day
3:35:44
we use every day it's on it's on ask many things it's on
3:35:46
it's on it's on ask many things it's on
3:35:46
it's on it's on ask many things it's on sometime dot net and all have we have
3:35:48
sometime dot net and all have we have
3:35:48
sometime dot net and all have we have different
3:35:49
different
3:35:49
different live shows that are uh stream so i'll
3:35:52
live shows that are uh stream so i'll
3:35:52
live shows that are uh stream so i'll stay in touch with you
3:35:53
stay in touch with you
3:35:53
stay in touch with you and would love to host you back very
3:35:55
and would love to host you back very
3:35:55
and would love to host you back very soon
3:35:57
soon
3:35:57
soon uh thank you so much for your time i on
3:35:59
uh thank you so much for your time i on
3:35:59
uh thank you so much for your time i on behalf of enthusiastic thank you
3:36:02
behalf of enthusiastic thank you
3:36:02
behalf of enthusiastic thank you thank you bye bye thank you how are you
3:36:05
thank you bye bye thank you how are you
3:36:05
thank you bye bye thank you how are you speaking bye
3:36:07
speaking bye
3:36:07
speaking bye all right with an amazing session of
3:36:09
all right with an amazing session of
3:36:09
all right with an amazing session of maurice i know you have all
3:36:11
maurice i know you have all
3:36:11
maurice i know you have all have been staying absolutely especially
3:36:12
have been staying absolutely especially
3:36:12
have been staying absolutely especially from asia and parts of europe i know
3:36:14
from asia and parts of europe i know
3:36:14
from asia and parts of europe i know it's getting time for for dinner
3:36:16
it's getting time for for dinner
3:36:16
it's getting time for for dinner uh but it's actually time to do some
3:36:18
uh but it's actually time to do some
3:36:18
uh but it's actually time to do some giveaway
3:36:19
giveaway
3:36:19
giveaway i know that i know you all are very
3:36:21
i know that i know you all are very
3:36:21
i know that i know you all are very excited so let's do one thing so we
3:36:23
excited so let's do one thing so we
3:36:23
excited so let's do one thing so we already have
3:36:24
already have
3:36:24
already have eight entries okay we already have eight
3:36:27
eight entries okay we already have eight
3:36:27
eight entries okay we already have eight entries for these
3:36:28
entries for these
3:36:28
entries for these winners but before i do that right
3:36:30
winners but before i do that right
3:36:30
winners but before i do that right before i do that i just
3:36:31
before i do that i just
3:36:31
before i do that i just i just want to spend couple of minutes
3:36:33
i just want to spend couple of minutes
3:36:33
i just want to spend couple of minutes over here that is the agile summit 2021
3:36:36
over here that is the agile summit 2021
3:36:36
over here that is the agile summit 2021 uh definitely go ahead and register for
3:36:39
uh definitely go ahead and register for
3:36:39
uh definitely go ahead and register for azure submit 2020 it's entirely free
3:36:41
azure submit 2020 it's entirely free
3:36:41
azure submit 2020 it's entirely free it's going to run for seven days in a
3:36:43
it's going to run for seven days in a
3:36:43
it's going to run for seven days in a week from september 30 to 19
3:36:45
week from september 30 to 19
3:36:46
week from september 30 to 19 with around 120 more than 120 speakers
3:36:48
with around 120 more than 120 speakers
3:36:48
with around 120 more than 120 speakers uh they will be for microsoft uh or
3:36:51
uh they will be for microsoft uh or
3:36:51
uh they will be for microsoft uh or vice president uh program managers the
3:36:54
vice president uh program managers the
3:36:54
vice president uh program managers the engineers the people who actually go
3:36:55
engineers the people who actually go
3:36:55
engineers the people who actually go ahead and build these amazing products
3:36:57
ahead and build these amazing products
3:36:58
ahead and build these amazing products on azure so definitely go ahead and
3:36:59
on azure so definitely go ahead and
3:36:59
on azure so definitely go ahead and check that out it's azure summit.live i
3:37:01
check that out it's azure summit.live i
3:37:01
check that out it's azure summit.live i have dropped the comment in the
3:37:03
have dropped the comment in the
3:37:03
have dropped the comment in the i've dropped the url in the comments so
3:37:05
i've dropped the url in the comments so
3:37:05
i've dropped the url in the comments so that should be definitely helpful
3:37:07
that should be definitely helpful
3:37:07
that should be definitely helpful definitely go and check that out
3:37:08
definitely go and check that out
3:37:08
definitely go and check that out and also uh to visit global tech
3:37:11
and also uh to visit global tech
3:37:11
and also uh to visit global tech conferences this is a platform this
3:37:13
conferences this is a platform this
3:37:13
conferences this is a platform this website where we actually go ahead
3:37:15
website where we actually go ahead
3:37:15
website where we actually go ahead and all are at our upcoming conferences
3:37:18
and all are at our upcoming conferences
3:37:18
and all are at our upcoming conferences so if you want to attend any of the
3:37:20
so if you want to attend any of the
3:37:20
so if you want to attend any of the conferences that we are doing
3:37:22
conferences that we are doing
3:37:22
conferences that we are doing please visit globaltechconferences.com
3:37:24
please visit globaltechconferences.com
3:37:24
please visit globaltechconferences.com and you will find all the conferences
3:37:26
and you will find all the conferences
3:37:26
and you will find all the conferences and the past conferences with the
3:37:27
and the past conferences with the
3:37:27
and the past conferences with the recording links available
3:37:29
recording links available
3:37:29
recording links available having said that let's do it i think it
3:37:32
having said that let's do it i think it
3:37:32
having said that let's do it i think it is the time that we go ahead and
3:37:34
is the time that we go ahead and
3:37:34
is the time that we go ahead and announce
3:37:35
announce
3:37:35
announce our winner so arjun law was the winner
3:37:38
our winner so arjun law was the winner
3:37:38
our winner so arjun law was the winner from the previous
3:37:39
from the previous
3:37:40
from the previous uh previous uh lucky draw i keep your
3:37:42
uh previous uh lucky draw i keep your
3:37:42
uh previous uh lucky draw i keep your comments coming in and
3:37:44
comments coming in and
3:37:44
comments coming in and in the count of three i'm gonna click on
3:37:47
in the count of three i'm gonna click on
3:37:47
in the count of three i'm gonna click on this
3:37:47
this
3:37:47
this lucky draw again so are you guys ready
3:37:50
lucky draw again so are you guys ready
3:37:50
lucky draw again so are you guys ready so it's one
3:37:53
so it's one
3:37:53
so it's one three two one
3:37:58
three two one
3:37:58
three two one zero let's see who wins this time 50
3:38:00
zero let's see who wins this time 50
3:38:00
zero let's see who wins this time 50 amazon gift card who wins it
3:38:02
amazon gift card who wins it
3:38:02
amazon gift card who wins it let's see
3:38:06
[Music]
3:38:09
all right oh my goodness
3:38:14
fifty dollar amazon gift card
3:38:16
fifty dollar amazon gift card
3:38:16
fifty dollar amazon gift card congratulations deepak uh
3:38:17
congratulations deepak uh
3:38:18
congratulations deepak uh he has been very very active in the
3:38:20
he has been very very active in the
3:38:20
he has been very very active in the community so congratulations on that
3:38:22
community so congratulations on that
3:38:22
community so congratulations on that so deepak please reach out to us me on
3:38:25
so deepak please reach out to us me on
3:38:25
so deepak please reach out to us me on tw on twitter
3:38:25
tw on twitter
3:38:26
tw on twitter that is code with simon and i'll make
3:38:27
that is code with simon and i'll make
3:38:27
that is code with simon and i'll make sure i'll do that but hold on
3:38:29
sure i'll do that but hold on
3:38:30
sure i'll do that but hold on hold on guys i think you all have been
3:38:32
hold on guys i think you all have been
3:38:32
hold on guys i think you all have been very very consistent so what we'll do
3:38:34
very very consistent so what we'll do
3:38:34
very very consistent so what we'll do is i believe we will do another second
3:38:37
is i believe we will do another second
3:38:37
is i believe we will do another second uh
3:38:37
uh
3:38:37
uh uh gift card right we'll do another uh
3:38:40
uh gift card right we'll do another uh
3:38:40
uh gift card right we'll do another uh we'll do second time but for that i need
3:38:42
we'll do second time but for that i need
3:38:42
we'll do second time but for that i need to see some of the comments coming in
3:38:44
to see some of the comments coming in
3:38:44
to see some of the comments coming in please check uh please let your comments
3:38:46
please check uh please let your comments
3:38:46
please check uh please let your comments uh flow in
3:38:48
uh flow in
3:38:48
uh flow in in the chats and then we will roll up
3:38:50
in the chats and then we will roll up
3:38:50
in the chats and then we will roll up the
3:38:51
the
3:38:51
the second round of this amazon gift card
3:38:55
second round of this amazon gift card
3:38:55
second round of this amazon gift card do that so questions deeper we are going
3:38:57
do that so questions deeper we are going
3:38:57
do that so questions deeper we are going to do it again
3:38:58
to do it again
3:38:58
to do it again so please let the comments coming in i
3:39:01
so please let the comments coming in i
3:39:01
so please let the comments coming in i really appreciate that
3:39:02
really appreciate that
3:39:02
really appreciate that let's see um what else can done
3:39:08
let's see um what else can done
3:39:08
let's see um what else can done i see people were very very active keep
3:39:10
i see people were very very active keep
3:39:10
i see people were very very active keep your comments coming and we're gonna
3:39:12
your comments coming and we're gonna
3:39:12
your comments coming and we're gonna we're gonna do the second round of the
3:39:15
we're gonna do the second round of the
3:39:16
we're gonna do the second round of the amazon gift card it's gonna be 50 dollar
3:39:18
amazon gift card it's gonna be 50 dollar
3:39:18
amazon gift card it's gonna be 50 dollar once again
3:39:19
once again
3:39:19
once again it doesn't matter from which location
3:39:20
it doesn't matter from which location
3:39:20
it doesn't matter from which location you are keep your comments coming in
3:39:23
you are keep your comments coming in
3:39:23
you are keep your comments coming in uh uh misha says a nice lesson thanks
3:39:26
uh uh misha says a nice lesson thanks
3:39:26
uh uh misha says a nice lesson thanks omisha
3:39:27
omisha
3:39:27
omisha misha was one of the winners from our
3:39:28
misha was one of the winners from our
3:39:28
misha was one of the winners from our previous conferences uh she should be
3:39:30
previous conferences uh she should be
3:39:30
previous conferences uh she should be receiving her
3:39:31
receiving her
3:39:31
receiving her swag pack uh by early next week keep
3:39:33
swag pack uh by early next week keep
3:39:34
swag pack uh by early next week keep your comments coming in
3:39:35
your comments coming in
3:39:35
your comments coming in um and i see if i get a few more i'll
3:39:38
um and i see if i get a few more i'll
3:39:38
um and i see if i get a few more i'll run it through
3:39:39
run it through
3:39:39
run it through let's see let's see let's see all right
3:39:42
let's see let's see let's see all right
3:39:42
let's see let's see let's see all right let's do
3:39:42
let's do
3:39:42
let's do these second time okay so we have around
3:39:46
these second time okay so we have around
3:39:46
these second time okay so we have around 28
3:39:47
28
3:39:47
28 29 always has joined many more to come
3:39:51
29 always has joined many more to come
3:39:51
29 always has joined many more to come right so shall we do it drop yes in the
3:39:53
right so shall we do it drop yes in the
3:39:53
right so shall we do it drop yes in the comments
3:39:54
comments
3:39:54
comments shall we do the second round drop yes
3:39:57
shall we do the second round drop yes
3:39:57
shall we do the second round drop yes then i'll do it
3:39:59
then i'll do it
3:39:59
then i'll do it if you drop yes i'm gonna do it for the
3:40:02
if you drop yes i'm gonna do it for the
3:40:02
if you drop yes i'm gonna do it for the second round of this amazon gift card
3:40:05
second round of this amazon gift card
3:40:05
second round of this amazon gift card uh people said enjoyed it thanks ah
3:40:07
uh people said enjoyed it thanks ah
3:40:07
uh people said enjoyed it thanks ah sorry you were very consistent
3:40:09
sorry you were very consistent
3:40:09
sorry you were very consistent mara says good okay right um it's good
3:40:12
mara says good okay right um it's good
3:40:12
mara says good okay right um it's good all right so it's time to go ahead and
3:40:14
all right so it's time to go ahead and
3:40:14
all right so it's time to go ahead and do it
3:40:14
do it
3:40:14
do it all right guys let's do it and the
3:40:17
all right guys let's do it and the
3:40:17
all right guys let's do it and the second round
3:40:18
second round
3:40:18
second round for amazon 15 50
3:40:21
for amazon 15 50
3:40:21
for amazon 15 50 gift card winner is
3:40:27
let's see let's see keep your comments
3:40:28
let's see let's see keep your comments
3:40:28
let's see let's see keep your comments coming and keep your comments coming and
3:40:29
coming and keep your comments coming and
3:40:29
coming and keep your comments coming and let's see who wins let's see who wins
3:40:32
let's see who wins let's see who wins
3:40:32
let's see who wins let's see who wins and the winner is all right
3:40:36
and the winner is all right
3:40:36
and the winner is all right well he says who won it who came in
3:40:38
well he says who won it who came in
3:40:38
well he says who won it who came in towards
3:40:39
towards
3:40:40
towards yeah only says you are the winner for
3:40:41
yeah only says you are the winner for
3:40:42
yeah only says you are the winner for amazon 50
3:40:43
amazon 50
3:40:43
amazon 50 gift card please reach out to me on
3:40:45
gift card please reach out to me on
3:40:45
gift card please reach out to me on twitter
3:40:46
twitter
3:40:46
twitter rights and i'll make sure that you get
3:40:48
rights and i'll make sure that you get
3:40:48
rights and i'll make sure that you get your 50 grams on gift card
3:40:50
your 50 grams on gift card
3:40:50
your 50 grams on gift card and thank you so much everyone who has
3:40:52
and thank you so much everyone who has
3:40:52
and thank you so much everyone who has joined especially people who have been
3:40:54
joined especially people who have been
3:40:54
joined especially people who have been very very consistent for instance uh
3:40:56
very very consistent for instance uh
3:40:56
very very consistent for instance uh asari you have been very very consistent
3:40:59
asari you have been very very consistent
3:40:59
asari you have been very very consistent then we also had mudit you were also
3:41:01
then we also had mudit you were also
3:41:01
then we also had mudit you were also very very consistent
3:41:03
very very consistent
3:41:03
very very consistent thanks puja jan then we also had
3:41:06
thanks puja jan then we also had
3:41:06
thanks puja jan then we also had omisha who has been consistent from a
3:41:08
omisha who has been consistent from a
3:41:08
omisha who has been consistent from a past couple of conferences
3:41:10
past couple of conferences
3:41:10
past couple of conferences patricia then pooja san and i also
3:41:14
patricia then pooja san and i also
3:41:14
patricia then pooja san and i also remember gunjan joshi has been asking
3:41:15
remember gunjan joshi has been asking
3:41:15
remember gunjan joshi has been asking really really amazing questions so
3:41:17
really really amazing questions so
3:41:17
really really amazing questions so uh if you reach out to us i'll do that
3:41:20
uh if you reach out to us i'll do that
3:41:20
uh if you reach out to us i'll do that uh
3:41:21
uh
3:41:21
uh please please stay connected with us on
3:41:23
please please stay connected with us on
3:41:23
please please stay connected with us on me on twitter and on c job corner we
3:41:25
me on twitter and on c job corner we
3:41:25
me on twitter and on c job corner we keep on doing these conferences
3:41:27
keep on doing these conferences
3:41:27
keep on doing these conferences and we do a lot of giveaways so thank
3:41:29
and we do a lot of giveaways so thank
3:41:29
and we do a lot of giveaways so thank you so much for joining us today
3:41:31
you so much for joining us today
3:41:32
you so much for joining us today and looking forward for more sessions
3:41:34
and looking forward for more sessions
3:41:34
and looking forward for more sessions have a very nice weekend stay safe
3:41:36
have a very nice weekend stay safe
3:41:36
have a very nice weekend stay safe um get you get get yourself vaccinated
3:41:39
um get you get get yourself vaccinated
3:41:39
um get you get get yourself vaccinated and yeah my name is stephen simon
3:41:41
and yeah my name is stephen simon
3:41:41
and yeah my name is stephen simon signing
3:41:41
signing
3:41:42
signing off with the sweet smile on my face
3:41:45
off with the sweet smile on my face
3:41:45
off with the sweet smile on my face i'll see you every day if you want to
3:41:48
i'll see you every day if you want to
3:41:48
i'll see you every day if you want to see me just come
3:41:49
see me just come
3:41:49
see me just come visit c sharp dot live and i'll see you
3:41:50
visit c sharp dot live and i'll see you
3:41:50
visit c sharp dot live and i'll see you until then take a look yourself
3:41:52
until then take a look yourself
3:41:52
until then take a look yourself my name is stephen sam and i'll see you
3:41:54
my name is stephen sam and i'll see you
3:41:54
my name is stephen sam and i'll see you in the next
3:41:55
in the next
3:41:55
in the next live show bye
3:42:25
[Music]
3:42:35
you