00:00:03.545 --> 00:00:07.199 Talked about it, but the goal is that we start branching client
00:00:07.199 --> 00:00:10.854 projects off of React in July. That's our lofty goal right now,
00:00:09.545 --> 00:00:09.885 Yes.
00:00:10.845 --> 00:00:15.855 End of Q2, beginning of Q3, react becomes the storefront.
00:00:10.854 --> 00:00:11.025 so.
00:00:16.925 --> 00:00:20.405 Angular JS storefront goes the way of the dodo.
00:00:20.875 --> 00:00:21.025 So.
00:00:21.085 --> 00:00:24.285 So I know that everybody always, always pays attention during
00:00:24.285 --> 00:00:27.485 these trainings, like always. But in case you haven't before,
00:00:27.485 --> 00:00:30.324 this one would probably be a good one to seriously pay
00:00:30.324 --> 00:00:30.995 attention to.
00:00:35.485 --> 00:00:37.685 OK, cool. Can everybody hear me?
00:00:38.635 --> 00:00:39.205 Yes, Sir.
00:00:40.485 --> 00:00:43.634 My internet's been well, I realized I was on 2G, and
00:00:43.634 --> 00:00:47.257 normally I should be on the 5G. And so it seems to be decent
00:00:47.257 --> 00:00:47.495 now.
00:00:48.035 --> 00:00:52.427 Umm. If I do suddenly drop, I will call back on my phone and
00:00:52.427 --> 00:00:55.235 then, you know, do something about it.
00:00:55.735 --> 00:00:57.705 Umm so.
00:00:59.665 --> 00:01:03.147 As everybody knows, like Brandon just said, we're going live with
00:01:03.147 --> 00:01:03.675 the react.
00:01:05.955 --> 00:01:08.843 At the end of next month or while, I shouldn't say going
00:01:08.843 --> 00:01:12.085 live, but you know, starting all new client projects and react.
00:01:13.285 --> 00:01:17.384 And I think Justin, can you confirm for me, you went over
00:01:17.384 --> 00:01:21.342 like how to add a button and kind of the basics of like
00:01:21.342 --> 00:01:23.815 writing React code already, right?
00:01:25.215 --> 00:01:29.015 I did and I believe that was either last training or the one
00:01:29.015 --> 00:01:30.635 prior the one prior, yeah.
00:01:31.125 --> 00:01:33.085 OK, I thought you did OK so.
00:01:31.995 --> 00:01:33.085 Yep, one prior. Yep.
00:01:33.945 --> 00:01:37.737 So I'm gonna try to avoid that because obviously I don't wanna
00:01:37.737 --> 00:01:41.409 just give people information they already have. So I'm gonna
00:01:41.409 --> 00:01:45.141 go over more of like, what is the react and how do you set it
00:01:45.141 --> 00:01:48.692 up with Seth so that when you run into problems, which you
00:01:48.692 --> 00:01:49.655 inevitably will?
00:01:52.255 --> 00:01:55.283 If you know because of the installer you're installing
00:01:55.283 --> 00:01:58.752 manually and whatever something comes up like you want to know
00:01:58.752 --> 00:02:01.945 where to look, right? So that's what my my goal today is.
00:02:02.445 --> 00:02:07.919 Umm so can anyone tell me any backhanders tell me what is
00:02:07.919 --> 00:02:08.485 react.
00:02:10.985 --> 00:02:12.135 Send it up front enters no.
00:02:13.725 --> 00:02:18.535 Is a modular framework for.
00:02:19.815 --> 00:02:22.145 Dynamically displaying.
00:02:24.165 --> 00:02:25.985 Uh. Content logically.
00:02:28.595 --> 00:02:30.165 Yes.
00:02:32.485 --> 00:02:37.218 So yeah, it's a it's a front end framework. It's technically not
00:02:37.218 --> 00:02:41.661 a framework. It's technically a library, but it's so flushed
00:02:41.661 --> 00:02:46.394 out. And I mean very few people use react with something else in
00:02:46.394 --> 00:02:47.195 their site.
00:02:48.555 --> 00:02:51.625 But react is very dynamic and it like you know if we wanted to
00:02:51.625 --> 00:02:53.185 put react into angular we could.
00:02:53.825 --> 00:02:57.394 Right. Like it's not a big deal, but if we put Angular into react
00:02:57.394 --> 00:02:59.395 it would. It would break everything.
00:03:00.915 --> 00:03:04.487 So reactive, just a front end framework. UM, it's very
00:03:04.487 --> 00:03:08.579 component driven. So in angular you have directives and react.
00:03:08.579 --> 00:03:12.347 You have components which is going into kind of the stuff
00:03:12.347 --> 00:03:14.425 that Justin already covered, so.
00:03:15.565 --> 00:03:19.462 OK, So what do you need to do to set up what's the? What are the
00:03:19.462 --> 00:03:23.178 files you need to look at and how do you kind of debug it? If
00:03:23.178 --> 00:03:26.955 you're running into problems, right? That's what I'm going for
00:03:26.955 --> 00:03:27.135 so.
00:03:28.535 --> 00:03:29.575 The first thing is.
00:03:32.705 --> 00:03:35.454 Let's see. I think I'll start with IS cause that's gonna be
00:03:35.454 --> 00:03:38.386 like probably the first thing. One of the first things everyone
00:03:38.386 --> 00:03:38.615 does.
00:03:39.155 --> 00:03:43.636 Umm. So NIS you need a new app pool. We've been calling it
00:03:43.636 --> 00:03:47.965 shop. There's not any particular reason to call it shop.
00:03:49.715 --> 00:03:53.971 It's just that if we change it, we need to change it. If you
00:03:53.971 --> 00:03:58.017 places so in this app pool is going to point to the build
00:03:58.017 --> 00:03:58.505 folder.
00:03:59.495 --> 00:04:00.145 Of.
00:04:00.815 --> 00:04:04.585 React so react kind of like especially for the back end is
00:04:04.585 --> 00:04:05.415 kind of like.
00:04:07.335 --> 00:04:11.051 Blazer has a publish right there. React is just it has a
00:04:11.051 --> 00:04:14.963 build that's the same thing, right? So when you're pointing
00:04:14.963 --> 00:04:19.005 to the full site, you want to see the the the minified build.
00:04:20.805 --> 00:04:24.078 And so that's, that's all it's there's no like, there's no
00:04:24.078 --> 00:04:27.573 magic to it, right? It's just it's just a minified folder with
00:04:27.573 --> 00:04:29.515 all the minified JavaScript in it.
00:04:32.875 --> 00:04:37.802 You do. You have to build react first before you can point this
00:04:37.802 --> 00:04:38.495 to there.
00:04:39.275 --> 00:04:42.944 So let's say you just run the installer, you've got a full
00:04:42.944 --> 00:04:46.924 step setup normally. What do I what do you need to do to change
00:04:46.924 --> 00:04:50.655 it? OK, so the first thing you would probably want to do is
00:04:50.655 --> 00:04:54.075 install the dependencies so everyone's used to this in
00:04:54.075 --> 00:04:57.806 angular, right? You go to 7 Portal, storefront, Angular you
00:04:57.806 --> 00:05:01.599 run mcmi and it installs the dependencies right node package
00:05:01.599 --> 00:05:02.345 manager. So.
00:05:04.875 --> 00:05:06.185 In react, it's the same thing.
00:05:06.815 --> 00:05:10.665 You'll just go to store front, like I said, went to high there.
00:05:12.785 --> 00:05:16.171 Storefront react in here you'll see that I have a node modules
00:05:16.171 --> 00:05:19.611 folder. It's obviously not there when you pull because we don't
00:05:19.611 --> 00:05:22.621 track node modules in Git because that's stupid. And so
00:05:22.621 --> 00:05:26.008 here you can run mcmi. I'm not gonna do it, but if you did, it
00:05:26.008 --> 00:05:28.695 would install dependencies once you've installed.
00:05:29.375 --> 00:05:32.265 Then you can run MPM run build.
00:05:33.765 --> 00:05:37.025 And that I will run, uh, actually it'll probably.
00:05:37.885 --> 00:05:42.155 Potentially fail here? No. OK.
00:05:42.835 --> 00:05:43.445 UM.
00:05:44.635 --> 00:05:48.304 And that build will create the build folder that you just saw
00:05:48.304 --> 00:05:51.974 IIS pointing to. So you have to do those two steps before you
00:05:51.974 --> 00:05:54.045 set up the shop apple you need to.
00:05:57.365 --> 00:06:00.125 You mean installed pensees? You need to run NPM run build.
00:06:01.155 --> 00:06:02.535 OK so.
00:06:03.165 --> 00:06:06.589 You've got the build folder, you've got your IIS app pool.
00:06:06.589 --> 00:06:09.085 What else do you need to know about right?
00:06:10.015 --> 00:06:13.165 The next thing you probably want to know is that in here.
00:06:15.555 --> 00:06:18.885 You have to define the skin.
00:06:19.555 --> 00:06:24.931 That you want to use within react. OK, so there's now 2
00:06:24.931 --> 00:06:26.275 skins folders.
00:06:27.395 --> 00:06:28.465 Which no one's used to.
00:06:29.395 --> 00:06:33.062 One of them is the one you're used to, which is storefront
00:06:33.062 --> 00:06:36.854 skin wins. OK, that's where. Like in there? That's where the
00:06:36.854 --> 00:06:38.035 DNN skin is, right?
00:06:40.395 --> 00:06:41.645 Thanks to Brendan Lyon.
00:06:42.395 --> 00:06:46.175 He got overrides and skins working in react. There's also
00:06:46.175 --> 00:06:46.305 a.
00:06:47.205 --> 00:06:49.475 React skins folder.
00:06:50.355 --> 00:06:54.121 So you're gonna. This is where you going to put all your client
00:06:54.121 --> 00:06:57.887 code here you can see I have bid clarity, couple test ones. AFP
00:06:57.887 --> 00:07:01.535 will be in here soon. That's a new React project we're doing.
00:07:02.995 --> 00:07:03.575 And.
00:07:05.415 --> 00:07:09.361 Whatever you're working on needs to match what you have in
00:07:09.361 --> 00:07:13.374 package dot Jason in all the different places where you see
00:07:13.374 --> 00:07:14.645 clarity, so namely.
00:07:17.045 --> 00:07:20.779 Those five places. OK, so if you don't do that, your skins aren't
00:07:20.779 --> 00:07:24.401 gonna work. You're going to edit files, the stuff won't change,
00:07:24.401 --> 00:07:28.022 and you'll be confused by. So if even if you're not, you're not
00:07:28.022 --> 00:07:31.360 paying attention, maybe just make a quick note. Be like if
00:07:31.360 --> 00:07:34.698 the skins aren't working in React, go to package dot JSON.
00:07:34.698 --> 00:07:36.905 That's the place to fix the stuff, OK.
00:07:40.955 --> 00:07:44.345 Does anybody have any questions so far about the setup?
00:07:45.115 --> 00:07:46.545 And what's different? What's not?
00:07:52.285 --> 00:07:54.045 I will assume not. OK.
00:07:56.435 --> 00:07:58.433 Everyone can still hear me, right? Just somebody give me
00:07:58.433 --> 00:07:59.485 like a thumbs up or something.
00:07:59.415 --> 00:08:00.065 I can hear you.
00:07:59.855 --> 00:08:00.165 OK.
00:08:00.605 --> 00:08:02.035 OK, cool. Thank you.
00:08:02.855 --> 00:08:05.585 Umm, so that'll that'll take your skin.
00:08:08.075 --> 00:08:12.190 And that is most of the setup process. I did write a whole new
00:08:12.190 --> 00:08:16.239 cleaner article on all the steps so you don't have to call me
00:08:16.239 --> 00:08:20.354 right away if you want to, you can, but everything's in there.
00:08:20.354 --> 00:08:24.338 It goes over the building, the skins, the IIS app pool, like
00:08:24.338 --> 00:08:28.583 all of its well documented, it's not in the set config repo yet.
00:08:28.583 --> 00:08:32.045 That's what needs to be, but it's not there yet. KB.
00:08:29.155 --> 00:08:29.365 But.
00:08:32.405 --> 00:08:32.585 And.
00:08:33.235 --> 00:08:35.826 Do you have a link of that you can you can we add that to the
00:08:35.826 --> 00:08:36.035 chat?
00:08:36.655 --> 00:08:38.675 Yeah, it's in the I just put it in the chat just now.
00:08:38.635 --> 00:08:40.025 Ah, thank you. Alright, perfectly.
00:08:40.335 --> 00:08:40.735 Yep.
00:08:43.985 --> 00:08:47.201 So now you've got your apple. You're pointing to. You know,
00:08:47.201 --> 00:08:50.470 you've got your shop apple. You're pointing to build. You've
00:08:50.470 --> 00:08:51.595 got your react build.
00:08:52.335 --> 00:08:55.574 You do? I did say things a little bit out of order, so I
00:08:55.574 --> 00:08:59.154 wanna go back. You probably you do wanna specify the skin here
00:08:59.154 --> 00:09:00.745 before you do NPM run build.
00:09:01.405 --> 00:09:04.626 Because in the build process and Brendan, I don't know if you
00:09:04.626 --> 00:09:07.691 wanna speak to this or not. Brendan Lyon. But in the build
00:09:07.691 --> 00:09:10.757 process it basically like takes that string and uses it to
00:09:10.757 --> 00:09:12.575 determine which folder to look at.
00:09:13.485 --> 00:09:16.454 And you'd have to do it before you run the build for it to
00:09:16.295 --> 00:09:21.016 That's correct. It appends that on to a path to figure out which
00:09:16.454 --> 00:09:16.705 work.
00:09:21.016 --> 00:09:25.736 skin to use and effectively what it does is it copies every core
00:09:22.175 --> 00:09:22.395 OK.
00:09:25.736 --> 00:09:30.093 file into the build source directory, and then copies every
00:09:30.093 --> 00:09:34.596 skin file and overwrites core files in build source. That way
00:09:34.596 --> 00:09:39.244 the the skin files always have precedence. That also means that
00:09:39.244 --> 00:09:43.456 with react you don't have to specifically override a file
00:09:43.456 --> 00:09:48.031 that's in core for it to build with your client project. So if
00:09:48.031 --> 00:09:48.685 you have.
00:09:48.825 --> 00:09:53.472 A component that's not going to be part of core. You can just
00:09:52.145 --> 00:09:52.455 Yep.
00:09:53.472 --> 00:09:55.495 make that component in the.
00:09:56.535 --> 00:10:00.383 In the skin and it will still be there. You don't have to make
00:10:00.383 --> 00:10:03.375 like an empty stub in core like we do right now.
00:10:01.175 --> 00:10:01.345 Yep.
00:10:03.965 --> 00:10:04.155 Yeah.
00:10:04.765 --> 00:10:08.365 Which is super cool. I'm saying here's an example. The auction
00:10:08.365 --> 00:10:11.851 Finder is not in core, or at least not yet, but it is in the
00:10:11.851 --> 00:10:15.451 bid skin and it will work like it will show up for you because
00:10:15.451 --> 00:10:19.165 they both just get compiled down to the build source, which then
00:10:19.165 --> 00:10:21.565 turns into the build. Patrick, what's up?
00:10:24.065 --> 00:10:27.431 Yeah. I would just throw out there. I don't know if it's
00:10:27.431 --> 00:10:31.152 possible, but what would be able to put in some sort of script
00:10:31.152 --> 00:10:34.872 that uses the leverages off of MVVM and then changes the local
00:10:34.872 --> 00:10:38.711 environmental node and packages all stuff while this is building
00:10:38.711 --> 00:10:42.313 because I assume that we're gonna use a different version of
00:10:39.725 --> 00:10:40.025 Yeah.
00:10:42.313 --> 00:10:43.435 node and NPM stuff.
00:10:42.855 --> 00:10:43.775 Yes.
00:10:44.595 --> 00:10:47.882 So that's a question I think probably for Brendan Lyon, but I
00:10:47.882 --> 00:10:51.275 imagine he could put it in here where, if NBM existed, it would
00:10:51.275 --> 00:10:51.805 switch it.
00:10:52.675 --> 00:10:55.894 One more to oh says to which to the correct version of NVM or to
00:10:55.845 --> 00:10:56.195 Mm-hmm.
00:10:55.894 --> 00:10:58.965 switch the correct version of node? I mean, I'm sure I could.
00:10:57.315 --> 00:10:57.685 Yeah.
00:11:01.585 --> 00:11:05.065 I honestly so this was like a first pass at getting all of the
00:11:05.065 --> 00:11:08.159 UM like skin overrides implemented and it was just done
00:11:08.159 --> 00:11:11.529 in PowerShell. I'd love to see if I can't find a more robust
00:11:11.529 --> 00:11:14.954 way to do this. I might build like a C sharp application that
00:11:14.954 --> 00:11:18.435 runs silently or something at some point in the future because
00:11:18.435 --> 00:11:21.970 that's a lot easier. It's more familiar for us to debug, easier
00:11:21.970 --> 00:11:23.075 to debug in general.
00:11:24.295 --> 00:11:27.591 Et cetera and so on and so forth and easier, you know, more
00:11:27.591 --> 00:11:30.942 control. And when it comes to building a more robust version
00:11:30.942 --> 00:11:34.183 of this functionality, that would probably where I'd start
00:11:34.183 --> 00:11:37.644 building an additional features like that as well as some more
00:11:37.644 --> 00:11:41.105 logging about which files are overwritten and all that kind of
00:11:41.105 --> 00:11:44.511 fun stuff. Being able to switch the skin on. I've run time or
00:11:44.511 --> 00:11:45.005 whatever.
00:11:46.175 --> 00:11:49.745 Cool stuff like that. But like I said, this was just kind of a
00:11:49.745 --> 00:11:51.955 first shot at getting this to work so.
00:11:52.455 --> 00:11:53.355 Uh, yeah.
00:11:55.005 --> 00:11:55.365 Cool.
00:11:57.235 --> 00:12:00.728 So yeah, the in good call out Patrick, the current node
00:12:00.728 --> 00:12:02.225 version is 16 point 9.1.
00:12:02.675 --> 00:12:07.752 Umm I it won't work on anything 17 or higher. I did start it on
00:12:07.752 --> 00:12:12.829 like 16.3 point something so but I don't know why you would use
00:12:12.829 --> 00:12:14.495 .3 if you can use .9.
00:12:16.605 --> 00:12:21.195 So far as I can tell, it does actually.
00:12:22.305 --> 00:12:26.343 The webpack server runs fine if you're using 11.15 point one,
00:12:26.343 --> 00:12:30.120 but the installation of the dependencies will not work if
00:12:30.120 --> 00:12:33.833 you're using an old version node. Of course, if you have
00:12:33.833 --> 00:12:38.001 NVM, why would you use the old version when you're working on a
00:12:38.001 --> 00:12:40.085 React project anyway, right? So.
00:12:40.155 --> 00:12:40.395 Cool.
00:12:42.575 --> 00:12:46.355 Yeah. There you go. And I, I don't know if anyone knows pages
00:12:46.355 --> 00:12:50.073 my screen, but I did pull up where the skin path is defined.
00:12:50.073 --> 00:12:53.792 Here you can see also in skin and that is I'm sure referring
00:12:53.792 --> 00:12:53.975 to.
00:12:54.765 --> 00:12:55.165 This.
00:12:56.005 --> 00:12:57.985 So in build that PS one that's.
00:12:58.635 --> 00:12:59.945 Where the magic happens.
00:13:02.125 --> 00:13:04.867 Alright, so we've got your react built. You know the node
00:13:04.867 --> 00:13:07.704 version, you know you gotta change package dot Jason before
00:13:07.704 --> 00:13:10.635 you run the build and you know you have to do a new app pool.
00:13:11.325 --> 00:13:14.184 With the standard naming convention and then here skull
00:13:14.184 --> 00:13:16.175 shop. But I think in here it's called.
00:13:17.615 --> 00:13:22.962 Yeah, clearing client.com clarity, local shop. So that's
00:13:22.962 --> 00:13:25.025 all of that stuff now.
00:13:25.835 --> 00:13:30.466 One of the biggest questions I imagine people might have is how
00:13:30.466 --> 00:13:31.985 does it tie into DNN?
00:13:32.815 --> 00:13:36.406 Right. Because let's say you're making a new DNN page and you
00:13:36.406 --> 00:13:38.085 need to make a new component.
00:13:38.805 --> 00:13:40.065 For that page.
00:13:40.725 --> 00:13:43.115 How do you like get it to work?
00:13:43.975 --> 00:13:44.525 So.
00:13:46.605 --> 00:13:47.325 DNN.
00:13:48.665 --> 00:13:51.937 We essentially trying to DNN and someone can correct me if I'm
00:13:51.937 --> 00:13:54.793 wrong, but it's it's pretty similar to the way Angular
00:13:54.793 --> 00:13:55.105 works.
00:13:56.645 --> 00:13:59.960 So in angular you have directives, right? Not
00:13:59.960 --> 00:14:04.428 technically components, but here you can see an ASX file. You
00:14:04.428 --> 00:14:08.823 have a CEF purchase which just lands up in the name of it or
00:14:08.823 --> 00:14:13.363 directive right in kebab case and Angular knows hey, you wanna
00:14:13.363 --> 00:14:17.614 put this view there right? In react it's pretty similar in
00:14:17.614 --> 00:14:20.785 React, we just have a data react component.
00:14:21.585 --> 00:14:22.835 The name of the component you want.
00:14:23.525 --> 00:14:25.925 And then you can pass in props if you want to.
00:14:26.855 --> 00:14:29.978 From here again, I'm not gonna go props because I assume Justin
00:14:29.978 --> 00:14:33.101 went over that. If you need help to understanding props, let me
00:14:33.101 --> 00:14:33.345 know.
00:14:34.485 --> 00:14:39.658 So that's where react gets into DNN is from in the ASX files
00:14:39.658 --> 00:14:44.747 data react component and then the name. Now what checks the
00:14:44.747 --> 00:14:45.595 name well.
00:14:46.605 --> 00:14:50.645 That's in index dot JS, so react source index dot JS.
00:14:51.395 --> 00:14:54.981 And here it's kind of it's not a really long file, it's a little
00:14:54.981 --> 00:14:57.795 bit longer. You think it would be, but most of it.
00:14:58.555 --> 00:15:00.385 It's just importing components.
00:15:01.885 --> 00:15:05.379 Create a map for the components so whatever the the name is if
00:15:05.379 --> 00:15:07.875 we here like data React component check out.
00:15:08.715 --> 00:15:11.485 That needs to be a key in the component map.
00:15:12.275 --> 00:15:13.785 So here you can see.
00:15:14.655 --> 00:15:18.093 That check out this 147 and then it maps to the checkout
00:15:18.093 --> 00:15:21.892 component right? So if I wanted to build a new page, I'll just
00:15:21.892 --> 00:15:25.571 do a dummy 1 real quick. Let's just say we have like I don't
00:15:25.571 --> 00:15:26.355 know bidding.
00:15:27.555 --> 00:15:32.141 Some special unique to be page right or unique. Yeah. So we can
00:15:32.141 --> 00:15:35.795 just copy this one pretty much right. Put it here.
00:15:36.455 --> 00:15:40.180 But I don't want to the checkout component. I wanna load the
00:15:40.180 --> 00:15:41.585 bidding page component.
00:15:42.695 --> 00:15:45.619 So you put data react component bidding page if you need props,
00:15:45.619 --> 00:15:47.035 you can pass them if you don't.
00:15:48.345 --> 00:15:48.785 Then don't.
00:15:49.945 --> 00:15:53.648 Do you notice you can look at the examples for this, but this
00:15:53.648 --> 00:15:54.245 is a very.
00:15:54.925 --> 00:15:57.701 Specific like the way the clothes work is very specific.
00:15:57.701 --> 00:16:00.867 You can't switch the singles for the Devils. I don't know why it
00:16:00.867 --> 00:16:03.693 doesn't work, but you gotta do singles. Anything outside.
00:16:03.693 --> 00:16:06.372 Double something inside, something to do with JSON I'm
00:16:06.372 --> 00:16:06.615 sure.
00:16:08.895 --> 00:16:11.886 So now we have bidding page there. So now if we go in here
00:16:11.886 --> 00:16:12.545 into our map.
00:16:13.265 --> 00:16:13.855 Add a new one.
00:16:14.975 --> 00:16:18.705 Make sure it matches and then of course you know in theory you'd
00:16:18.705 --> 00:16:22.206 have a component here, right? I don't have it, but you would
00:16:22.206 --> 00:16:22.665 have it.
00:16:23.355 --> 00:16:27.305 So that's how it gets some react into DNN.
00:16:28.885 --> 00:16:30.885 Umm, lower down in this file.
00:16:31.895 --> 00:16:35.350 Basically, there's a check to see hey, are you running the NPM
00:16:35.350 --> 00:16:38.806 like the webpack server or not which I'll get into in a little
00:16:38.806 --> 00:16:39.025 bit?
00:16:40.205 --> 00:16:44.354 But if you're not, it just says, hey, wait until the Dom content
00:16:44.354 --> 00:16:48.120 is loaded by DNN, then go through every element that has a
00:16:48.120 --> 00:16:50.035 data react component property.
00:16:50.965 --> 00:16:55.515 Go find the component name and then load it with some.
00:16:56.515 --> 00:16:57.905 Some you know I'm.
00:16:58.935 --> 00:17:03.232 Not attributes, but some like helpful. You know like browser
00:17:03.232 --> 00:17:07.388 router, right? So you can use the React router or suspense
00:17:07.388 --> 00:17:11.403 fall back which will load something while you're waiting
00:17:11.403 --> 00:17:13.375 for reactive finish loading.
00:17:13.895 --> 00:17:18.191 Umm, but then, namely the magic happens like right here this
00:17:18.191 --> 00:17:18.895 comp temp.
00:17:19.595 --> 00:17:23.225 Is whatever your component is up here in the map.
00:17:25.845 --> 00:17:27.035 So that's.
00:17:27.775 --> 00:17:30.727 How it all gets in? You really shouldn't have to edit any of
00:17:30.727 --> 00:17:33.485 this stuff very often unless you're building a new page.
00:17:34.025 --> 00:17:37.988 UM, also notice everything here is a high level component, so we
00:17:37.988 --> 00:17:42.013 don't have like the mini cart or well we have mini cart. We don't
00:17:42.013 --> 00:17:45.549 have like a product card, right, because the product card
00:17:45.549 --> 00:17:49.451 shouldn't be alone on a page. It should always be loaded in the
00:17:49.451 --> 00:17:52.805 catalog so you wouldn't be loading the product card in
00:17:52.805 --> 00:17:56.585 here. So it doesn't have all the components and it shouldn't.
00:17:57.335 --> 00:17:57.925 Umm.
00:17:59.355 --> 00:18:02.182 So that's where all that happens. Does anyone have any
00:18:02.182 --> 00:18:05.318 questions about how react ties into DNN or how to make a new
00:18:05.318 --> 00:18:05.575 page?
00:18:09.995 --> 00:18:14.755 Yeah. So you went to the ASX file.
00:18:14.715 --> 00:18:15.945 Hmm hmm.
00:18:16.275 --> 00:18:23.248 Would it be possible to drop that snippets on line 22 into a
00:18:23.248 --> 00:18:23.705 DNN?
00:18:25.375 --> 00:18:27.755 HTML block and it work.
00:18:30.095 --> 00:18:33.547 You know, I haven't tried it yet, but in theory it should
00:18:33.547 --> 00:18:33.845 work.
00:18:33.775 --> 00:18:36.645 Yeah, it did. It should work solely 100%.
00:18:37.585 --> 00:18:37.755 OK.
00:18:37.795 --> 00:18:38.045 Yep.
00:18:37.825 --> 00:18:38.205 OK.
00:18:39.445 --> 00:18:43.607 Because it it like that HTML block is on the page and it is
00:18:43.607 --> 00:18:48.115 on the Dom which means that this loop down here should catch it.
00:18:49.175 --> 00:18:51.725 And it should treat it like a normal one so.
00:18:52.505 --> 00:18:53.195 UM.
00:18:54.415 --> 00:18:57.063 Yeah. The only reason I can think of is that like somehow
00:18:57.063 --> 00:18:59.802 that was loading before this event fired, but that would be
00:18:59.802 --> 00:19:01.445 very weird. So yeah, good question.
00:19:01.955 --> 00:19:03.415 Umm anybody else?
00:19:03.145 --> 00:19:04.815 OK DNN somehow.
00:19:06.285 --> 00:19:07.595 Escapes the characters.
00:19:08.665 --> 00:19:08.945 Yeah.
00:19:10.405 --> 00:19:12.888 Yeah, I mean, you could try it out, Michael. Yeah, I think you
00:19:12.888 --> 00:19:15.134 have a rack local. So if you wanna try it out and let me
00:19:15.134 --> 00:19:16.355 know, that'd be that'd be cool.
00:19:17.455 --> 00:19:17.895 Umm.
00:19:18.195 --> 00:19:18.515 I know.
00:19:20.295 --> 00:19:23.715 So another thing to note down here and I I I tried and tried
00:19:23.715 --> 00:19:27.135 for like 2 hours to get around this problem and it couldn't.
00:19:27.595 --> 00:19:28.085 Umm.
00:19:29.255 --> 00:19:30.865 React will always.
00:19:32.075 --> 00:19:33.145 Always it's to mount.
00:19:33.995 --> 00:19:35.045 Into an element.
00:19:35.925 --> 00:19:41.348 So whatever the bidding page component does will be inside of
00:19:41.348 --> 00:19:42.135 this dev.
00:19:42.875 --> 00:19:44.615 It won't replace the dev.
00:19:45.985 --> 00:19:49.295 That doesn't seem that important, except when it comes
00:19:49.295 --> 00:19:52.965 to styling, right. So you wanna put the class? You know your
00:19:52.965 --> 00:19:56.335 column class? Or maybe it's container or whatever, but.
00:19:57.555 --> 00:19:59.245 You basically can't like.
00:19:59.895 --> 00:20:03.445 Make the top thing in bidding page a column 12.
00:20:04.155 --> 00:20:07.809 And then not break the row called chain. You have to put
00:20:07.809 --> 00:20:11.783 the call here and then put this here. So why is that? Another
00:20:11.783 --> 00:20:15.886 reason that's important is that that means the top thing in the
00:20:15.886 --> 00:20:19.988 bidding page needs to either be a normal element or it needs to
00:20:19.988 --> 00:20:20.565 be a row.
00:20:21.665 --> 00:20:24.525 It can't be a column, because then you'll have a call 12
00:20:24.525 --> 00:20:27.636 followed by another call class which if anyone knows anything
00:20:27.636 --> 00:20:30.295 about front end you know that gets strange behavior.
00:20:30.875 --> 00:20:31.375 Umm.
00:20:32.225 --> 00:20:35.415 So that's just another call out. That is how most of our
00:20:35.415 --> 00:20:38.605 components work in Angular. Angular does have a replace.
00:20:42.205 --> 00:20:46.024 What would you call it? Like property in the new directives
00:20:46.024 --> 00:20:49.908 which would replace the element instead of putting something
00:20:49.908 --> 00:20:50.735 into it, but.
00:20:51.515 --> 00:20:55.057 We don't use it that often and it actually sucks, which is why
00:20:55.057 --> 00:20:58.543 they removed it in like Angular 1.9 it's deprecated, so yeah,
00:20:58.543 --> 00:21:01.973 reactive basically works the same way as most of our angular
00:21:01.973 --> 00:21:03.435 stuff does in that regard.
00:21:05.745 --> 00:21:08.519 So that's how to make your component. That's how where the
00:21:08.519 --> 00:21:10.635 magic happens. But how does it get into DNN?
00:21:12.725 --> 00:21:16.028 How to make new page? Obviously you'd have to go pick to the
00:21:16.028 --> 00:21:19.440 page in DNN like you always do, right? You have to make a page
00:21:19.440 --> 00:21:22.798 and then go pick the right skin and then go pick the you know
00:21:22.798 --> 00:21:26.318 the specific ASX file you want, so that's no different from what
00:21:26.318 --> 00:21:27.455 we've been doing for.
00:21:28.425 --> 00:21:29.755 However long we've been doing it.
00:21:30.265 --> 00:21:33.867 So would it be possible to make like a checkout page without
00:21:33.867 --> 00:21:37.232 having to have a particular skin? You could just add the
00:21:37.232 --> 00:21:38.295 directive for the.
00:21:39.115 --> 00:21:40.105 React component.
00:21:43.505 --> 00:21:47.920 Umm no cause reacts if if I understand your question
00:21:47.920 --> 00:21:50.335 correctly, react gets loaded.
00:21:51.015 --> 00:21:54.857 In the header actually. Sorry I lied, it gets loaded in the
00:21:54.857 --> 00:21:55.305 footer.
00:21:56.965 --> 00:21:58.735 And the footer is specific to the skin.
00:22:00.315 --> 00:22:03.775 So I don't think that would work.
00:22:08.035 --> 00:22:12.198 So another thing is how does the JavaScript actually get on the
00:22:12.198 --> 00:22:16.232 page? So I talked about how the JavaScript here to here index
00:22:16.232 --> 00:22:20.005 dot JS checks the stuff in the skin and how it mounts the
00:22:20.005 --> 00:22:24.038 components. Well, JavaScript actually gets loaded here in the
00:22:24.038 --> 00:22:26.965 footer with these couple of DNN JS includes.
00:22:29.425 --> 00:22:34.131 Normally the path like when you first pull the path I I should
00:22:34.131 --> 00:22:36.745 just look at the the history here.
00:22:38.665 --> 00:22:39.915 Normally it's just gonna be.
00:22:40.595 --> 00:22:44.699 It's Tilda slash desktop modules, clarity, commerce shop,
00:22:44.699 --> 00:22:49.227 and then there's two JavaScript files. Everything gets compiled
00:22:49.227 --> 00:22:49.935 down into.
00:22:52.385 --> 00:22:55.703 This is only going to pull, so this is another thing that
00:22:55.703 --> 00:22:56.675 you're just like.
00:22:57.505 --> 00:22:58.345 If you know.
00:22:59.175 --> 00:23:01.999 If you want to remember like two things out of this meeting, this
00:23:01.999 --> 00:23:03.325 is the other thing to remember.
00:23:04.105 --> 00:23:04.875 Is that?
00:23:06.315 --> 00:23:11.378 This is only going to pull the stuff from the last time you ran
00:23:11.378 --> 00:23:12.485 NPM run build.
00:23:13.765 --> 00:23:16.881 Right. So it's not going. It's not good for development. It's
00:23:16.881 --> 00:23:20.048 the point. This is what we need in production. This is what we
00:23:20.048 --> 00:23:23.114 need on a QA environment. But when you're developing on your
00:23:23.114 --> 00:23:23.415 local.
00:23:24.125 --> 00:23:26.375 What you want is to be able to just save the file.
00:23:27.155 --> 00:23:28.325 Webpack rebuilds it.
00:23:29.105 --> 00:23:31.625 And then you refresh the page and you see your changes.
00:23:32.345 --> 00:23:32.655 Right.
00:23:33.725 --> 00:23:37.135 If you don't change this path, that's not going to happen.
00:23:37.785 --> 00:23:40.359 Because it's only going to pull from the last build. So that
00:23:40.359 --> 00:23:42.934 means you have to run NPM run build after every change which
00:23:42.934 --> 00:23:44.495 would take to make development take.
00:23:45.435 --> 00:23:48.225 Like 7 times as long, so we don't do that.
00:23:48.915 --> 00:23:52.323 So what you do instead? This is the next thing really is like
00:23:52.323 --> 00:23:55.457 how do I develop if I'm, you know, like if you're a back
00:23:55.457 --> 00:23:58.315 under is getting into front end or if you're gonna.
00:23:58.965 --> 00:23:59.415 I don't know.
00:24:00.835 --> 00:24:04.226 You're just building out a widget, right? You're just like,
00:24:04.226 --> 00:24:07.731 I just want to build the widget, right? So you have to open a
00:24:07.731 --> 00:24:11.405 terminal. You do currently have to open it in administrator mode
00:24:11.405 --> 00:24:12.705 because it generates a.
00:24:13.455 --> 00:24:14.135 Certificate.
00:24:14.925 --> 00:24:18.540 And we need to figure out how to get around that because we don't
00:24:18.540 --> 00:24:21.990 have to generate a certificate every time you start the server
00:24:21.990 --> 00:24:24.455 because it creates a lot of certificates so.
00:24:25.415 --> 00:24:29.185 For now it generates it and we need it because we need to.
00:24:30.315 --> 00:24:30.765 Umm.
00:24:31.445 --> 00:24:35.585 Oh, thank you, KB, that's awesome. UM, we need to.
00:24:37.125 --> 00:24:41.278 Not have to, you know, click. You know when you go on like
00:24:41.278 --> 00:24:44.445 like arcs one has that where like it'll say.
00:24:46.545 --> 00:24:49.425 What is it? Home to R1 QA. That'll probably do it.
00:24:51.625 --> 00:24:55.206 You talking about the cert thing works one where you have to like
00:24:52.055 --> 00:24:52.975 We're basically.
00:24:54.835 --> 00:24:55.335 Yeah.
00:24:55.206 --> 00:24:58.135 open best in a new tab and then accept that cert too.
00:24:58.635 --> 00:25:00.205 Exactly, yeah.
00:24:59.965 --> 00:25:03.196 That's fixed arcs one, but I know exactly what problem you're
00:25:03.196 --> 00:25:06.427 talking about on that on this subject, though, anybody who is
00:25:06.427 --> 00:25:09.554 working on react that comes across little things like this,
00:25:09.554 --> 00:25:12.994 like where it's like. Ohh I have to change this URL and this file
00:25:12.994 --> 00:25:16.121 so I can hot reload or this thing installs a million certs.
00:25:16.121 --> 00:25:19.352 Please make sure that you are communicating little annoyances
00:25:19.352 --> 00:25:22.218 like that because I know it may seem nitpicky now, but
00:25:22.218 --> 00:25:25.605 ultimately those are the things that get us more productive with
00:25:25.605 --> 00:25:28.784 this longer term and those are the things that need to be we
00:25:28.784 --> 00:25:30.035 need to improve tooling.
00:25:30.475 --> 00:25:30.945 Yep.
00:25:30.475 --> 00:25:33.635 As we adopt this more, more globally, so any little things
00:25:33.635 --> 00:25:36.903 like that, even if it feels nitpicky, bring it up. And worst
00:25:36.903 --> 00:25:40.010 case we'll say yeah, we're aware of it. It's probably not
00:25:40.010 --> 00:25:43.009 something we can do anything about, but if you bring up
00:25:43.009 --> 00:25:46.062 something that we're not aware of and we can improve the
00:25:46.062 --> 00:25:49.330 tooling for it, then we should and we will give it the time.
00:25:49.330 --> 00:25:52.651 Obviously we can't do it all, you know overnight or whatever,
00:25:49.645 --> 00:25:50.055 Yep.
00:25:52.651 --> 00:25:52.865 but.
00:25:53.975 --> 00:25:56.872 Improving the tooling around, we act like I was saying earlier
00:25:56.872 --> 00:25:59.630 with improving the the skin override code and all that kind
00:25:59.630 --> 00:26:02.619 of stuff. That's all stuff that we know needs to happen. We kind
00:26:02.619 --> 00:26:05.285 of have these like first pass implementations of a lot of
00:26:05.285 --> 00:26:08.182 stuff, but we will be improving those with time and we need we
00:26:08.182 --> 00:26:10.848 need feedback from you guys, especially those of you that
00:26:10.848 --> 00:26:13.883 have been working and react this whole time to please let us know
00:26:13.883 --> 00:26:16.687 if there's any other little things, annoyances, whatever. So
00:26:16.687 --> 00:26:19.400 we know what to focus on, what's the most annoying, what's
00:26:19.400 --> 00:26:20.825 costing you guys the most time.
00:26:21.875 --> 00:26:24.859 That kind of thing, so that we can target our tooling
00:26:24.859 --> 00:26:26.295 improvements around those.
00:26:27.535 --> 00:26:27.885 Yep.
00:26:28.935 --> 00:26:29.605 Thank you, Brendan.
00:26:29.915 --> 00:26:34.075 Umm yeah, absolutely. Couldn't agree more. Please bring up any
00:26:34.075 --> 00:26:38.301 little you know, especially if it's something that's like every
00:26:38.301 --> 00:26:42.462 project. Right. I think that's what he was getting at is like,
00:26:42.462 --> 00:26:46.490 yeah, this is annoying in every project, it's broken all the
00:26:46.490 --> 00:26:49.395 because it's just a core fixed we need. So.
00:26:51.015 --> 00:26:55.425 Yeah. OK. So here is where you start.
00:26:56.445 --> 00:26:59.225 Actually developing, so you've already won NPM run build.
00:26:59.945 --> 00:27:03.373 You've already got your React build server. Uh, well, you
00:27:03.373 --> 00:27:07.214 already ran NPM install, you ran NPM run build, you created your
00:27:07.214 --> 00:27:10.937 app pool, you've changed your skins path in the DB, O dot tabs
00:27:10.937 --> 00:27:14.423 table just like you normally would. Write point to a react
00:27:14.423 --> 00:27:16.255 skin instead of an angular one.
00:27:17.015 --> 00:27:20.469 UM, you've done all that stuff and you're like, hey, I'm ready
00:27:20.469 --> 00:27:21.565 to start developing.
00:27:22.405 --> 00:27:26.303 It's so NPM start is gonna run this script and package dot
00:27:26.303 --> 00:27:29.804 Jason which is just gonna run the start script which
00:27:29.804 --> 00:27:32.645 ultimately just starts the webpack server.
00:27:34.685 --> 00:27:37.255 This is the equivalent of GULP watch.
00:27:37.995 --> 00:27:39.095 OK so.
00:27:40.095 --> 00:27:42.730 Don't try to run dolphin react. It won't work because we don't
00:27:42.730 --> 00:27:43.775 use gold. Please webpack.
00:27:44.415 --> 00:27:45.975 So you're an MPM start.
00:27:47.295 --> 00:27:51.594 That will start your development server for you so that you get
00:27:51.594 --> 00:27:55.625 hot reloading, which is cool. Well, kind of. You mostly get
00:27:55.625 --> 00:27:56.565 hot reloading.
00:27:57.865 --> 00:28:00.663 Doesn't actually load the browser, but it compiles for
00:28:00.663 --> 00:28:01.935 you, so I guess it's not.
00:28:03.035 --> 00:28:06.308 I don't know detect all definition of relating. Anyway
00:28:06.308 --> 00:28:07.795 it's gonna open this tab.
00:28:11.315 --> 00:28:16.389 In my in my dreams for the next, within the next year, I'm hoping
00:28:16.389 --> 00:28:18.695 to get it to where developing.
00:28:19.895 --> 00:28:23.246 With hot Reloading is a very like convenient out of box
00:28:23.246 --> 00:28:27.016 thing. There's a lot of cores problems around it, and so we're
00:28:27.016 --> 00:28:30.845 not there yet, so when it opens this tab, you'll just close it.
00:28:31.865 --> 00:28:36.391 And then you'll keep waiting until it's done starting so very
00:28:36.391 --> 00:28:40.989 can see all this stuff it, you know, creates certificate, runs
00:28:40.989 --> 00:28:42.595 the the start dot PS1.
00:28:43.645 --> 00:28:47.435 And then here now we're now we're good, right?
00:28:48.685 --> 00:28:51.650 So to get around like I said earlier, having to build every
00:28:51.650 --> 00:28:54.911 time you make a change, what you do is you change the footer from
00:28:54.911 --> 00:28:57.035 what's on the left to what's on the right.
00:28:58.455 --> 00:29:01.085 Don't commit this change. This is just for development.
00:29:02.245 --> 00:29:02.635 So.
00:29:03.655 --> 00:29:05.565 You you just put the path.
00:29:06.295 --> 00:29:09.688 So this is obviously HTTPS, that's easy clarity, local will
00:29:09.688 --> 00:29:13.080 just be whatever your project is, right, submit local, AFP,
00:29:13.080 --> 00:29:13.985 local, whatever.
00:29:15.135 --> 00:29:17.185 Claireclient.com and then.
00:29:18.015 --> 00:29:22.025 Let's all remember this ultimately just points to.
00:29:22.815 --> 00:29:23.695 The local host.
00:29:24.415 --> 00:29:24.645 Right.
00:29:27.825 --> 00:29:28.005 Yep.
00:29:28.815 --> 00:29:32.415 So this only points to your local host, right? Well, that's
00:29:32.415 --> 00:29:35.895 where the server is being served from. Is from your local
00:29:35.895 --> 00:29:38.655 machine, so then webpack automatically picks.
00:29:39.565 --> 00:29:41.235 The 3000 port.
00:29:41.935 --> 00:29:43.875 Like out of box. That's just how it is.
00:29:44.555 --> 00:29:46.525 So you're pointing to Localhost 3000.
00:29:47.165 --> 00:29:50.404 Which is going to point to this server, right? Which is where
00:29:50.404 --> 00:29:53.748 you want to get your where you get the react files from and the
00:29:53.748 --> 00:29:55.995 cool thing about this is this will update.
00:29:56.965 --> 00:30:01.013 Right away, right after you save like these JS files will update
00:30:01.013 --> 00:30:04.875 right away, right? You saved so you can save and I guess I'll
00:30:04.875 --> 00:30:08.674 just do it real quick just to show an example. So if I go to
00:30:08.674 --> 00:30:08.985 home.
00:30:10.475 --> 00:30:13.235 I'm already on home so here if I.
00:30:16.365 --> 00:30:17.475 Let's see.
00:30:18.405 --> 00:30:20.675 I don't have anything at home that's interesting.
00:30:22.455 --> 00:30:25.995 Do I have something I changed?
00:30:27.845 --> 00:30:28.355 I don't know.
00:30:32.565 --> 00:30:35.385 Not sure why home wouldn't be. Ohh I didn't.
00:30:36.085 --> 00:30:37.515 Probably because I haven't refreshed.
00:30:45.835 --> 00:30:47.485 Oh, it's not the loading, that's why.
00:30:50.665 --> 00:30:54.149 So you can see, here's, you know, blooding widget. You can
00:30:54.149 --> 00:30:58.047 see the products is missing. You can see that react is not on the
00:30:58.047 --> 00:31:01.826 page yet. If you look down here, you'll see this little loading
00:31:01.826 --> 00:31:05.251 thing that comes from the suspense thing that Jesse built
00:31:05.251 --> 00:31:08.736 out, which is super dope. So down here it has suspense and
00:31:08.736 --> 00:31:12.161 then it has the get fall back and ultimately it doing one
00:31:12.161 --> 00:31:12.515 thing.
00:31:14.445 --> 00:31:15.635 I'm gonna wait for this to start.
00:31:20.345 --> 00:31:20.635 OK.
00:31:22.485 --> 00:31:25.653 Oh, because home isn't used. That's why I know why it's I
00:31:25.653 --> 00:31:29.258 know why it's missing. OK, so if we just go to catalog instead or
00:31:29.258 --> 00:31:31.115 maybe something on the dashboard.
00:31:32.325 --> 00:31:33.095 Go to my profile.
00:31:43.905 --> 00:31:45.675 And we got any questions while we wait for this?
00:31:47.375 --> 00:31:49.494 Anything. I mean, react in general doesn't have to be
00:31:49.494 --> 00:31:50.475 something I talked about.
00:32:02.375 --> 00:32:02.975 Oh, OK.
00:32:08.785 --> 00:32:09.575 OK, well.
00:32:10.685 --> 00:32:12.995 That's interesting that it doesn't work.
00:32:13.845 --> 00:32:17.635 I wonder why Michael could look into it.
00:32:22.725 --> 00:32:26.015 Some reason this thinks that I'm there we go.
00:32:26.785 --> 00:32:28.195 There is the magic, OK.
00:32:30.595 --> 00:32:34.708 So here we got my profile. You can see it's still fetching the
00:32:34.708 --> 00:32:38.625 profile hence why it's taking time. But if we go over here.
00:32:39.815 --> 00:32:44.228 So I did remove the for better or for worse, removed all the
00:32:44.228 --> 00:32:47.989 CEF prefixes so I know everyone's used to that from
00:32:47.989 --> 00:32:52.546 Angular, but I felt like it was redundant and so it's not like
00:32:52.546 --> 00:32:55.295 CEF my profile, it's just my profile.
00:32:56.005 --> 00:32:58.135 Umm so going here.
00:32:58.865 --> 00:33:01.035 Again, not going to go into too much of how to.
00:33:01.955 --> 00:33:04.265 How to write you know?
00:33:05.085 --> 00:33:08.381 React code because Justin already did that, but for going
00:33:08.381 --> 00:33:08.665 here.
00:33:12.035 --> 00:33:12.885 Type something in.
00:33:13.605 --> 00:33:17.230 Here you can see I'll put this on the right. Well, that's on
00:33:17.230 --> 00:33:17.765 the left.
00:33:18.505 --> 00:33:22.095 So click save. You can see the server says compiling.
00:33:23.045 --> 00:33:26.363 Once it's done, it'll go back to this nice compile successfully,
00:33:26.363 --> 00:33:29.425 tell you where it's, you know, where it's coming from. Even
00:33:29.425 --> 00:33:32.385 tells you at their local is 3000. Now you have to go over
00:33:32.385 --> 00:33:35.550 here and to get it to actually see it, you have to reload the
00:33:35.550 --> 00:33:35.805 page.
00:33:39.075 --> 00:33:42.410 So this is where the technically not hot reloading cause it's not
00:33:42.410 --> 00:33:45.492 reloading the page doesn't just happen, you know on the page
00:33:45.492 --> 00:33:45.745 live.
00:33:49.235 --> 00:33:51.615 Things are being weird. I don't know why it's taking forever.
00:33:53.495 --> 00:33:54.445 But if it'll go.
00:33:55.515 --> 00:33:58.905 You will see that we'll have a giant old H1.
00:34:04.265 --> 00:34:05.295 With some stuff in it.
00:34:07.165 --> 00:34:07.655 Somewhere.
00:34:11.135 --> 00:34:12.905 Checking out all these roles and.
00:34:15.175 --> 00:34:15.975 All this stuff.
00:34:25.595 --> 00:34:27.325 I don't know why this is taking so long.
00:34:28.885 --> 00:34:29.935 Normally it doesn't.
00:34:33.135 --> 00:34:34.665 They have pools are on.
00:34:39.905 --> 00:34:41.425 They're just functioning poorly.
00:34:45.425 --> 00:34:48.055 Yeah, Microsoft team takes quite a bit of resources to share.
00:34:49.115 --> 00:34:49.605 Screen.
00:34:51.605 --> 00:34:52.675 That's probably what's going on.
00:34:51.745 --> 00:34:52.155 Why?
00:34:51.805 --> 00:34:52.895 Thank you, Microsoft.
00:34:53.985 --> 00:34:57.202 Yeah, always there to screw us over. OK, so there you go.
00:34:57.202 --> 00:35:00.585 Clarity ventures. There it is. So it showed up. So again for
00:35:00.585 --> 00:35:04.191 the back end, there's especially and for we all know we're gonna
00:35:04.191 --> 00:35:07.851 run a new front Enders who don't really understand how skins work
00:35:07.851 --> 00:35:08.295 because.
00:35:09.335 --> 00:35:11.265 They just don't and so.
00:35:12.065 --> 00:35:16.123 Here you go. So it has to it save it. Here you have to change
00:35:16.123 --> 00:35:19.985 the footer for it to update immediately, just like it did.
00:35:20.675 --> 00:35:24.006 So that you don't have to run the build every time and so you
00:35:24.006 --> 00:35:27.497 see your changes right away. You know waste like, you know, half
00:35:27.497 --> 00:35:30.882 an hour being like, I don't know why it's not showing up. It's
00:35:30.882 --> 00:35:34.158 like, well, here's here's why it's in the footer either here
00:35:34.158 --> 00:35:37.328 or because package dot Jason doesn't have the skin. One of
00:35:37.328 --> 00:35:39.745 those two reasons is undoubtedly the reason.
00:35:42.585 --> 00:35:45.953 I think that's pretty much, I mean now you can see you know
00:35:45.953 --> 00:35:49.434 you can see the whole setup. So here's my profile. Here's the
00:35:49.434 --> 00:35:49.995 component.
00:35:50.655 --> 00:35:53.135 It gets pulled into index dot JS.
00:35:54.025 --> 00:35:54.495 And.
00:35:55.895 --> 00:35:56.985 Let's see, wherever it is.
00:35:58.665 --> 00:36:02.877 Somewhere in the well in the dashboard. So it's pulled in a
00:36:02.877 --> 00:36:06.737 dashboard dashboard, gets pulled, and index dot JS and
00:36:06.737 --> 00:36:09.545 then if you go open dashboard dot aspx.
00:36:11.785 --> 00:36:15.051 In your react skin, make sure it's react one. You'll see
00:36:15.051 --> 00:36:18.662 dashboard right there and then the JavaScript gets loaded into
00:36:18.662 --> 00:36:21.813 the footer right here. JavaScript waits for the Dom to
00:36:21.813 --> 00:36:25.366 load, it runs searches for this, puts all the dashboard stuff
00:36:25.366 --> 00:36:28.575 inside of that dev and that's how you get your content.
00:36:31.575 --> 00:36:35.731 Another thing worth noting, just want to cover this is let's say
00:36:35.731 --> 00:36:37.265 you have something that.
00:36:39.135 --> 00:36:40.325 You want to load.
00:36:42.135 --> 00:36:43.005 Every time.
00:36:44.055 --> 00:36:46.555 And you want it to be in a global state so.
00:36:48.335 --> 00:36:51.996 Angular doesn't really have this as far as I know Angular has
00:36:51.996 --> 00:36:55.598 services you can share and it has a broadcast system, but it
00:36:55.598 --> 00:36:57.015 doesn't actually have a.
00:36:57.645 --> 00:36:59.665 Global state per se.
00:37:01.175 --> 00:37:04.386 React does well and not I shouldn't say react. It's
00:37:04.386 --> 00:37:08.215 actually technically a separate package, but in store dot TS.
00:37:09.055 --> 00:37:11.745 For Redux, Redux is global state management.
00:37:12.735 --> 00:37:16.804 Meaning that any component can access it, right? That's what it
00:37:16.804 --> 00:37:20.556 means by by global, like any component anywhere can access
00:37:20.556 --> 00:37:24.561 this shared store. So this is where all the stuff happens when
00:37:24.561 --> 00:37:26.405 the when the app first loads.
00:37:28.345 --> 00:37:33.747 And here sees a lot of a lot of stuff that's behind settings,
00:37:33.747 --> 00:37:35.315 right? So it will.
00:37:36.155 --> 00:37:39.238 Go get the CEF config. Try to get the current user needs to
00:37:39.238 --> 00:37:41.705 check for a cookie, but we're not doing it yet.
00:37:42.025 --> 00:37:45.387 UM, go get a cart, check all these things. If they're
00:37:45.387 --> 00:37:46.695 enabled, go get them.
00:37:47.585 --> 00:37:50.950 And it will make that you know, for instance, the wallet items
00:37:50.950 --> 00:37:54.368 are available to any component on any page and the wallet loads
00:37:54.368 --> 00:37:57.465 on every page. And that's because the wallet is needed so
00:37:57.465 --> 00:38:00.456 often that it makes sense to load it very often, right,
00:38:00.456 --> 00:38:03.287 because you need it and check out you need it in the
00:38:03.287 --> 00:38:04.675 dashboard. You need it in.
00:38:05.365 --> 00:38:08.450 You know, sometimes in the catalog like bid, they require
00:38:08.450 --> 00:38:11.536 the catalog, the wallet in the catalog because you're not
00:38:11.536 --> 00:38:14.887 allowed to bid unless you have a wallet item, right? So if you
00:38:14.887 --> 00:38:18.344 run across something that you're just like, ohh wow, I need this
00:38:18.344 --> 00:38:19.355 in a lot of places.
00:38:19.995 --> 00:38:22.995 I want to load it once and just share it everywhere.
00:38:23.765 --> 00:38:27.177 Redux is the place to go to do that, so I don't necessarily
00:38:27.177 --> 00:38:30.816 expect people to remember all of that. If you can just remember
00:38:30.816 --> 00:38:33.375 that Redux is where to go to load something.
00:38:34.245 --> 00:38:38.124 For every page such as the sub config or the current user,
00:38:38.124 --> 00:38:39.505 that's enough for me.
00:38:42.685 --> 00:38:43.675 And there's only.
00:38:44.645 --> 00:38:46.945 One store, thankfully.
00:38:47.765 --> 00:38:51.423 Per page. So even if you have multiple components in your ASX
00:38:51.423 --> 00:38:55.081 files, so you're loading like. Check out here and then you're
00:38:55.081 --> 00:38:56.615 loading like I don't know.
00:38:57.985 --> 00:39:01.986 Related products or something right? Like in a new dev. So you
00:39:01.986 --> 00:39:03.065 make another row.
00:39:08.515 --> 00:39:10.565 Well, here, let me just do this short way.
00:39:12.005 --> 00:39:13.405 So you make another one down here.
00:39:14.585 --> 00:39:18.396 And this one's your related products to the ones you have in
00:39:18.396 --> 00:39:22.019 your cart. This and the one below it or the one before it
00:39:22.019 --> 00:39:25.705 will both share the same Redux store. So you don't have to
00:39:25.705 --> 00:39:26.455 worry about.
00:39:27.915 --> 00:39:28.335 Umm.
00:39:29.875 --> 00:39:33.544 Like whatever you put in here in the reader store getting called
00:39:33.544 --> 00:39:36.817 multiple times, right? It doesn't get called once per per
00:39:36.817 --> 00:39:39.075 component is called once per page load.
00:39:41.385 --> 00:39:45.196 So I think that's all of it, talked about the Apple talked
00:39:45.196 --> 00:39:48.685 about installing the dependencies, running the build,
00:39:48.685 --> 00:39:50.235 how react ties into DNN.
00:39:52.345 --> 00:39:54.075 A little bit of the naming convention.
00:39:56.285 --> 00:39:57.695 Talked about the skins.
00:40:01.215 --> 00:40:03.085 Another good thing to know and this is.
00:40:04.515 --> 00:40:08.695 In so, everybody knows every front end, or at least knows
00:40:08.695 --> 00:40:11.145 that sometimes, like you have to.
00:40:12.685 --> 00:40:15.835 You have to gulp build again after you make a new file.
00:40:16.585 --> 00:40:16.875 Right.
00:40:17.995 --> 00:40:20.385 So the same thing is true in react.
00:40:21.695 --> 00:40:24.758 And from my experience in Brendan, this is another one of
00:40:24.758 --> 00:40:28.032 those things like hey should mention it to you so that we can
00:40:28.032 --> 00:40:29.035 fix it potentially.
00:40:30.375 --> 00:40:32.965 For whatever reason, when you make the file.
00:40:34.395 --> 00:40:39.080 And you, you quit the webpack server and you run NPM run
00:40:39.080 --> 00:40:42.615 build. If the file already existed before.
00:40:43.635 --> 00:40:47.821 And you haven't deleted build or build source, it will just not
00:40:47.821 --> 00:40:48.475 update it.
00:40:50.245 --> 00:40:50.795 So.
00:40:51.555 --> 00:40:56.015 A nother common fix to things is to just delete, build, delete,
00:40:56.015 --> 00:40:59.918 build source and run NPM run build again. That's a very
00:40:59.918 --> 00:41:03.890 common fix too, like being confused as to why your stuff
00:41:03.890 --> 00:41:07.375 isn't showing up. So yeah, you're gonna say some.
00:41:06.715 --> 00:41:10.165 And so that's something I need to look into for the.
00:41:11.775 --> 00:41:12.235 Uh.
00:41:12.905 --> 00:41:17.325 The next Inc incarnation of the override handler, which I think
00:41:17.325 --> 00:41:21.606 I am probably build in C sharp and just turn it into like a A
00:41:17.445 --> 00:41:17.585 Yeah.
00:41:21.606 --> 00:41:25.818 like a fully zipped up self contained like single deployment
00:41:25.818 --> 00:41:30.238 EXE console thing that runs kind of transparently and I think I
00:41:29.195 --> 00:41:29.585 OK.
00:41:30.238 --> 00:41:31.895 do that. I can also get.
00:41:34.005 --> 00:41:37.240 I can also get hot reloading to work without having to do
00:41:37.240 --> 00:41:40.531 anything without having to run like a local webpack server
00:41:40.531 --> 00:41:41.535 without having to.
00:41:42.195 --> 00:41:45.443 Change that file like being able to actually hot reload and DNN
00:41:45.443 --> 00:41:48.488 as we do right now with Gold Watch. I should be able to get
00:41:48.488 --> 00:41:51.533 that too in whatever second version of this I do right now.
00:41:51.533 --> 00:41:54.730 Obviously the higher priority is making sure that react itself
00:41:54.730 --> 00:41:57.471 the the front end build is stable and ready to go for
00:41:57.471 --> 00:42:00.465 production, but that'll part some things up focused on for
00:41:57.525 --> 00:41:57.815 Right.
00:42:00.465 --> 00:42:03.612 like early Q3 stuff that might roll out would like to express
00:42:03.612 --> 00:42:05.185 version of CEF Q3 or something.
00:42:05.785 --> 00:42:06.275 Yeah.
00:42:07.715 --> 00:42:08.415 OK, cool.
00:42:09.525 --> 00:42:13.026 Well, for now then you know another KB. If you want another
00:42:13.026 --> 00:42:16.586 time stamp. If you're having another reason you might not be
00:42:16.586 --> 00:42:20.145 seeing your changes is because you need to run NPM run build
00:42:20.145 --> 00:42:20.495 again.
00:42:21.255 --> 00:42:25.000 Make sure you delete build and delete build source. Then run
00:42:25.000 --> 00:42:27.395 NPM run build again to see everything.
00:42:28.155 --> 00:42:28.575 Umm.
00:42:29.495 --> 00:42:32.767 Again, haven't dug into exactly why it happens. We'll probably
00:42:32.767 --> 00:42:34.585 fix it in the future, but for now.
00:42:35.405 --> 00:42:36.195 It's another.
00:42:37.285 --> 00:42:41.168 Common it's an uncommon thing, so if we could, let's see. I'm
00:42:41.168 --> 00:42:42.045 gonna do this.
00:42:42.765 --> 00:42:45.335 So if there were like 3 takeaways from this.
00:42:47.975 --> 00:42:48.795 What's he like?
00:42:50.165 --> 00:42:51.495 I'm not seeing my changes.
00:42:52.345 --> 00:42:56.028 Hi can anybody tell me one of the reasons you might not be
00:42:56.028 --> 00:42:56.465 seeing?
00:42:57.195 --> 00:42:58.645 Changes you expect to see.
00:43:00.565 --> 00:43:01.935 Talked about three of them.
00:43:08.805 --> 00:43:11.835 The wrong skin and the and the.
00:43:14.155 --> 00:43:14.415 Yeah.
00:43:15.845 --> 00:43:19.435 Yeah. So if you have the wrong skin in package dot Jason.
00:43:20.455 --> 00:43:23.589 Which is of course in react, as you probably could have gathered
00:43:23.589 --> 00:43:26.626 from, you know, the fact that this whole conversation has been
00:43:26.626 --> 00:43:27.205 about react.
00:43:28.665 --> 00:43:30.814 Yeah, if you had the wrong skin package dot Jason, that would
00:43:30.814 --> 00:43:32.235 make you change, not show up. What else?
00:43:36.675 --> 00:43:40.659 Editing a core file that has a an override in the skin you're
00:43:40.659 --> 00:43:41.045 using.
00:43:41.955 --> 00:43:42.435 Yep.
00:43:44.495 --> 00:43:45.845 I didn't mention that one, but it's a good one.
00:43:48.245 --> 00:43:48.865 Using.
00:43:50.865 --> 00:43:51.135 OK.
00:43:51.065 --> 00:43:54.455 Needing to delete the build and build source folders.
00:43:55.235 --> 00:44:01.025 Yep, so created a new file and didn't delete build source.
00:44:02.255 --> 00:44:04.265 And build before running.
00:44:06.525 --> 00:44:07.755 And PM run build again.
00:44:11.285 --> 00:44:14.005 And then I think I talked about one more.
00:44:23.055 --> 00:44:25.393 I know at common one that happens is not changing the
00:44:25.393 --> 00:44:26.345 lengths of the footer.
00:44:27.975 --> 00:44:30.055 Yep, that's that's the other one.
00:44:40.335 --> 00:44:43.945 The links in footer dot SCX, that's another reason.
00:44:44.755 --> 00:44:48.305 Umm. And obviously one of the newer ones is.
00:44:49.175 --> 00:44:52.545 You're not pointing to a react skin.
00:44:54.105 --> 00:44:55.775 And by this I mean like.
00:44:56.815 --> 00:44:58.925 IE from storefront.
00:44:59.685 --> 00:45:02.365 The 07 portals storefront.
00:45:03.085 --> 00:45:04.095 Skins.
00:45:05.015 --> 00:45:06.805 So like over here.
00:45:09.225 --> 00:45:13.010 I don't have it. Yeah, I do. This is good. So what I mean by
00:45:13.010 --> 00:45:16.795 that is this skin, like, not inside of react, but the normal
00:45:16.795 --> 00:45:20.207 skins. You're all used to. If you're still pointing to
00:45:20.207 --> 00:45:24.178 clarity, for instance in DBO dot tabs in the DNN database, then
00:45:24.178 --> 00:45:28.149 you're not gonna load any react because obviously everything in
00:45:28.149 --> 00:45:30.445 here is made for angular, not react.
00:45:31.435 --> 00:45:31.825 So.
00:45:32.805 --> 00:45:35.115 That would be a another reason you might answer your changes.
00:45:35.745 --> 00:45:36.395 Umm.
00:45:37.645 --> 00:45:40.253 I think that's pretty much it and I feel like that's one of
00:45:40.253 --> 00:45:41.775 the most frustrating things about.
00:45:43.425 --> 00:45:47.455 Developing in the front end is not singular changes so.
00:45:52.735 --> 00:45:52.965 OK.
00:45:55.265 --> 00:45:58.531 Anybody have any questions, anything, anything to add from
00:45:55.555 --> 00:45:56.105 Awesome.
00:45:58.531 --> 00:46:01.908 the front Enders to been working on this for a while, namely
00:46:01.908 --> 00:46:02.295 Justin?
00:46:03.205 --> 00:46:03.855 Are Jesse.
00:46:09.555 --> 00:46:11.525 When I include the branch in the chat.
00:46:13.415 --> 00:46:14.845 The branch, she said.
00:46:15.405 --> 00:46:15.885 Yes.
00:46:18.275 --> 00:46:19.025 What do you mean?
00:46:18.365 --> 00:46:21.495 I've assume he means if people wanna set up react.
00:46:22.105 --> 00:46:22.415 Yeah.
00:46:22.735 --> 00:46:27.372 Right now it should be released 2021.4, but starting soon it
00:46:23.535 --> 00:46:23.885 So.
00:46:26.805 --> 00:46:27.015 Yep.
00:46:27.372 --> 00:46:30.945 will be a release candidate branch for 2022.2.
00:46:32.945 --> 00:46:36.015 Which we'll talk more about that next week. But right now the
00:46:36.015 --> 00:46:38.045 latest react stuff is in release 2021.4.
00:46:39.225 --> 00:46:39.615 Yep.
00:46:40.845 --> 00:46:46.525 All the PR's are going so going into 2021 support release 2024
00:46:46.525 --> 00:46:46.795 so.
00:46:52.265 --> 00:46:55.498 And you can use as you probably gathered, you can use the
00:46:55.498 --> 00:46:56.055 installer.
00:46:56.815 --> 00:46:59.758 For everything up until a certain point, I'm assuming
00:46:59.758 --> 00:47:03.192 Brendan has that in the back of his mind to one day making saw
00:47:03.192 --> 00:47:06.735 her handle React fine, but to my knowledge right now it doesn't.
00:47:06.135 --> 00:47:06.815 And you mean?
00:47:07.205 --> 00:47:08.085 No, never.
00:47:07.405 --> 00:47:07.655 So.
00:47:07.835 --> 00:47:09.705 Next two weeks, yes.
00:47:09.055 --> 00:47:09.315 Uh.
00:47:09.855 --> 00:47:12.745 Oh, OK. In the next two weeks so.
00:47:11.625 --> 00:47:11.815 Yeah.
00:47:12.955 --> 00:47:17.976 Yeah, install support for React is and every part of 2022.2 is
00:47:17.976 --> 00:47:20.925 going to be done by the end of June.
00:47:22.045 --> 00:47:24.978 Our intent is that no version of stuff will be released where you
00:47:22.095 --> 00:47:22.735 Oh, OK.
00:47:24.978 --> 00:47:27.155 can't install the whole thing via the installer.
00:47:28.445 --> 00:47:28.895 Sweet.
00:47:28.745 --> 00:47:31.575 So yeah, it's not there yet, but it will be soon.
00:47:32.765 --> 00:47:33.975 OK, cool. Well.
00:47:34.705 --> 00:47:37.749 This will still be good for reference, but uh, or if you
00:47:37.749 --> 00:47:40.793 want to do the manual process, but it sounds like, yeah,
00:47:40.793 --> 00:47:43.997 that'll be all set up soon. So if you want to know what the
00:47:43.997 --> 00:47:47.255 installer is doing, additionally this article will tell you.
00:47:48.525 --> 00:47:48.855 So.
00:47:50.065 --> 00:47:52.867 But if the installer works, please don't do the manual
00:47:50.215 --> 00:47:50.655 Anyway.
00:47:52.867 --> 00:47:53.275 process.
00:47:53.695 --> 00:47:54.435 Yes.
00:47:56.725 --> 00:47:56.985 Yeah.
00:48:00.885 --> 00:48:02.185 I wish seeding would work.
00:48:03.905 --> 00:48:06.642 It's seeding working for anyone else with the installer and
00:48:06.642 --> 00:48:08.375 never works for me. I don't know why.
00:48:09.555 --> 00:48:12.105 Who's it depends on what project you're on.
00:48:13.225 --> 00:48:16.910 There was a time for a while with 2021.4. Some projects are
00:48:16.910 --> 00:48:20.657 branched off with this, where the unit test projects app.com
00:48:20.657 --> 00:48:24.465 config does not actually point to the real database, which is
00:48:24.465 --> 00:48:28.211 99% of the time a good thing, but it's necessary when you're
00:48:28.211 --> 00:48:31.897 trying to see the database and a more recent version of the
00:48:31.897 --> 00:48:35.459 installer. I fixed that. However, the installer is out of
00:48:35.459 --> 00:48:39.083 updating. If anybody has noticed it's broken. So I've been
00:48:39.083 --> 00:48:41.785 working on fixing that in this Sprint well.
00:48:39.465 --> 00:48:39.915 He.
00:48:42.195 --> 00:48:46.288 So hopefully towards the end of this Sprint, the installer will
00:48:46.288 --> 00:48:49.741 be part of CLT and it will include CLT photo updating
00:48:49.741 --> 00:48:53.642 functionality if you have it installed that way. So both CLT
00:48:53.642 --> 00:48:57.224 and the installer will auto update more robustly moving
00:48:57.224 --> 00:49:01.317 forward and the installer will contain a lot of fixes for stuff
00:49:01.317 --> 00:49:04.962 like database seeding not working, a couple other little
00:49:04.962 --> 00:49:08.735 small bug fixes with various things. I can't remember what
00:49:08.735 --> 00:49:12.764 they were and then eventually automatically you'll get support
00:49:12.764 --> 00:49:16.665 for 2020, 2020, 2.2 and react and pay hub and whatever else.
00:49:17.195 --> 00:49:19.175 As we roll those things out in the installer so.
00:49:19.585 --> 00:49:22.622 And look out for that, I'll probably I'll probably talk
00:49:22.622 --> 00:49:24.195 about that next week as well.
00:49:24.775 --> 00:49:28.036 Umm. And I'm sure they'll be like a post in the general
00:49:28.036 --> 00:49:31.005 channel about it once. Once it's finally all done.
00:49:32.875 --> 00:49:33.125 Well.
00:49:34.685 --> 00:49:38.781 And another other things I just thought about that are like a
00:49:38.781 --> 00:49:43.142 lot more, you know, abstract not writing React code, but there is
00:49:43.142 --> 00:49:45.785 a readme for react in the React folder.
00:49:47.225 --> 00:49:49.135 Please read it just once.
00:49:49.955 --> 00:49:54.106 Umm, the biggest things out of here are probably that you can
00:49:54.106 --> 00:49:57.922 format your code now just automatically, so we're trying
00:49:57.922 --> 00:50:02.340 to get away from James happening to look at that and for everyone
00:50:02.340 --> 00:50:06.290 else to have to be concerned about it. So in react, if you
00:50:06.290 --> 00:50:07.495 just go to a file.
00:50:08.115 --> 00:50:12.355 You mess up the formatting, so I just like tap this way over hit
00:50:12.355 --> 00:50:13.985 shift alt F it will just.
00:50:14.985 --> 00:50:15.715 Do it all for you.
00:50:16.755 --> 00:50:18.465 So you have to do with a problem anymore.
00:50:19.865 --> 00:50:23.037 I think James is still working out like the exact rules we're
00:50:23.037 --> 00:50:26.108 gonna follow. So there's a branch for. I mean, there's a PR
00:50:26.108 --> 00:50:29.485 for it, but it's not in yet. I'm assuming that's another one that
00:50:29.485 --> 00:50:30.815 will go in the next month.
00:50:31.355 --> 00:50:36.007 Umm, but yeah, that's another huge advantage of react. And
00:50:36.007 --> 00:50:40.501 then there's other, you know, other stuff in here that's
00:50:40.501 --> 00:50:42.235 common conventions or.
00:50:43.855 --> 00:50:46.425 Not not just common, but like literally used everywhere.
00:50:46.975 --> 00:50:50.446 Umm so for instance, like the name of the file should match
00:50:50.446 --> 00:50:53.743 the name of the component contains, so that's not always
00:50:53.743 --> 00:50:56.635 the case in angular. I felt like it was weird so.
00:50:57.775 --> 00:51:00.569 For instance, like contact editor is called the CEF contact
00:51:00.569 --> 00:51:00.895 widget.
00:51:02.205 --> 00:51:05.605 An angular, but here it's just called contact widget right?
00:51:06.195 --> 00:51:09.886 Umm, so there's a few other things to look at in here. I'm
00:51:09.886 --> 00:51:12.075 also working on trying to get the.
00:51:13.455 --> 00:51:16.572 3000 port work with hot reloading to work. I've got it
00:51:16.572 --> 00:51:20.085 mostly sorted out, but right now you can't log in when you're
00:51:20.085 --> 00:51:23.202 developing on that, so we're stuck with the footer and
00:51:23.202 --> 00:51:23.825 refreshing.
00:51:24.435 --> 00:51:28.834 Umm. Hopefully if I find time in the next month, if I get ahead
00:51:28.834 --> 00:51:32.958 on the bugs, which is very doubtful, then I will try to get
00:51:32.958 --> 00:51:34.195 that working. But.
00:51:35.165 --> 00:51:38.032 Anyway, OK, cool. Ohh, and there's also additional
00:51:38.032 --> 00:51:41.349 installation tips and how to format all files and a lot of
00:51:41.349 --> 00:51:44.610 other good stuff in here, so feel free to check that out,
00:51:44.610 --> 00:51:44.835 but.
00:51:44.905 --> 00:51:48.195 I love that. Read me. Use it every time, every project.
00:51:47.995 --> 00:51:48.215 Yeah.
00:51:48.995 --> 00:51:49.185 Yeah.
00:51:50.765 --> 00:51:54.800 Yeah, if you if you, if you have no idea what's wrong to best
00:51:50.805 --> 00:51:51.165 Thanks. Yeah.
00:51:54.800 --> 00:51:58.705 places to go first are this readme and the Nuclino article.
00:51:59.805 --> 00:52:01.785 Between those two, you should be able to figure out.
00:52:02.865 --> 00:52:06.305 Why? What you're expecting to happen isn't happening though.
00:52:08.955 --> 00:52:11.120 Cool. Well, I think that's all I got. Brandon. I don't if there
00:52:11.120 --> 00:52:11.255 was.
00:52:12.295 --> 00:52:13.355 Stuff you wanted to add or.
00:52:12.515 --> 00:52:15.568 No, I was. Yeah. No, I was gonna, if nobody else had any
00:52:15.568 --> 00:52:18.622 questions. I I know we have, like, 20 minutes left. So I
00:52:18.622 --> 00:52:21.997 wanted to see if anybody wanted David to maybe kind of go over
00:52:21.997 --> 00:52:25.372 like one of the features and we can kind of take a look at how
00:52:25.372 --> 00:52:26.925 it might differ from angular.
00:52:29.575 --> 00:52:31.585 And if anybody had a request?
00:52:31.495 --> 00:52:31.885 Yeah.
00:52:37.085 --> 00:52:38.555 How about just best example?
00:52:40.895 --> 00:52:43.917 Had what I'm curious about is what you do with the steps so
00:52:41.635 --> 00:52:42.035 OK.
00:52:43.917 --> 00:52:46.788 registration and check out did you do that or did you do
00:52:46.788 --> 00:52:47.795 something different?
00:52:48.615 --> 00:52:51.865 So they still build off the back end as they should.
00:52:52.565 --> 00:52:54.495 Umm, but the?
00:52:55.265 --> 00:52:59.441 They're, in my opinion, very simplified, so for one thing,
00:52:59.441 --> 00:53:04.113 inside of steps billing, there's just one file. Check out billing
00:53:04.113 --> 00:53:08.573 step. There's not like the body and the view and the I. I felt
00:53:08.573 --> 00:53:13.032 like it was confusing to have so many. And I mean this file is
00:53:13.032 --> 00:53:16.925 only 111 lines along anyway. So like, why do all that?
00:53:17.435 --> 00:53:19.835 Umm, so if you go up.
00:53:20.545 --> 00:53:24.053 Obviously, everything starts here in and I guess they should
00:53:24.053 --> 00:53:26.065 probably be inside of the payment.
00:53:26.825 --> 00:53:29.625 We should move to those UM, but.
00:53:30.355 --> 00:53:32.785 In checkout is where.
00:53:33.495 --> 00:53:37.925 Everything this is kind of like the purchase dot TS or.
00:53:38.745 --> 00:53:42.391 If you combined purchase dot TS and see we purchase service dot
00:53:42.391 --> 00:53:44.955 initialize this is where that stuff happens.
00:53:45.535 --> 00:53:49.345 Umm, so it's like hey, you know.
00:53:50.695 --> 00:53:51.815 Build the steps.
00:53:52.375 --> 00:53:53.035 Umm.
00:53:55.675 --> 00:53:56.715 Let's see here.
00:53:58.025 --> 00:54:01.685 I don't want to get too into the weeds, but for instance,
00:54:01.685 --> 00:54:04.335 somewhere in here it has like full steps.
00:54:03.305 --> 00:54:04.885 You're in the weeds. Get in the weeds, man.
00:54:06.165 --> 00:54:06.675 What's that?
00:54:08.045 --> 00:54:09.905 I said get in the weeds, get in the weeds, man.
00:54:10.255 --> 00:54:10.825 Ohk OK.
00:54:10.385 --> 00:54:10.745 No.
00:54:11.685 --> 00:54:17.378 All right, so here you can see this use effect runs, so use
00:54:17.378 --> 00:54:23.166 effect is kind of like a watch in Angular if you're familiar
00:54:23.166 --> 00:54:24.115 with that.
00:54:24.755 --> 00:54:29.705 Umm. Basically you pass it a function that you wanna run.
00:54:30.595 --> 00:54:35.472 Which is all the way down to there. And then you pass it in
00:54:35.472 --> 00:54:38.805 array of the things that if they change.
00:54:39.675 --> 00:54:41.905 This function might need to run again.
00:54:43.205 --> 00:54:46.776 Right, if that makes sense. So it's like, what are the things
00:54:46.776 --> 00:54:50.519 that this function depends on or needs to know about in order to
00:54:50.519 --> 00:54:54.032 run and run successfully. So for instance, if the SEV config
00:54:54.032 --> 00:54:57.545 isn't loaded, well hey, we want to check for that and not do
00:54:57.545 --> 00:55:00.770 something. But hey, if it is loaded, we wanna build the
00:55:00.770 --> 00:55:01.115 steps.
00:55:03.335 --> 00:55:09.444 So this purchase step factory we have a few custom hooks in
00:55:09.444 --> 00:55:10.055 React.
00:55:11.335 --> 00:55:13.185 And if you few factories.
00:55:14.955 --> 00:55:17.942 And they basically all they do, they're kind of like, Jesse,
00:55:17.942 --> 00:55:21.026 feel free to correct me if I'm wrong, but they're kind of like
00:55:21.026 --> 00:55:22.005 services in angular.
00:55:23.815 --> 00:55:25.939 It's pretty much, I think that's what you were thinking of when
00:55:25.939 --> 00:55:27.665 you when you built the first couple of them, right?
00:55:30.105 --> 00:55:30.765 I don't remember.
00:55:31.935 --> 00:55:32.265 OK.
00:55:34.485 --> 00:55:37.854 Yeah, so basically all it does is basically all this does is
00:55:37.854 --> 00:55:41.279 just like, hey, here's the stuff config. Go find the purchase
00:55:41.279 --> 00:55:44.704 sections for me and turn them into something that matches the
00:55:44.704 --> 00:55:46.195 model I'm expecting, right?
00:55:46.785 --> 00:55:50.398 Umm, so it builds full full steps and then it checks hey
00:55:50.398 --> 00:55:54.075 like it's anything getting shipped cause if it's not then
00:55:54.075 --> 00:55:57.752 let's remove shipping, split shipping and shipping rates.
00:55:57.752 --> 00:56:01.555 Shipping rates isn't in the current release but it will be.
00:56:02.265 --> 00:56:03.635 In the next release.
00:56:06.515 --> 00:56:10.611 And then it just gets the full steps and sets them in the
00:56:10.611 --> 00:56:11.035 state.
00:56:11.765 --> 00:56:15.867 So that we can repeat over them. So closer back to your question
00:56:15.867 --> 00:56:19.843 Brandon, of like, how does it work in here, it's like well, it
00:56:19.843 --> 00:56:23.756 builds all the steps and then here is where a maps. So if you
00:56:23.756 --> 00:56:25.965 anybody remembers I think in like.
00:56:27.085 --> 00:56:29.365 Purchase dot HTML.
00:56:31.435 --> 00:56:35.722 There's that Ng repeat. Yeah. OK, so this end repeat of step
00:56:35.722 --> 00:56:38.955 in purchase controller dot service dot steps.
00:56:39.685 --> 00:56:45.405 This guy right here is the equivalent of this dot map.
00:56:46.525 --> 00:56:48.885 It's the same. It's doing the same thing.
00:56:50.755 --> 00:56:53.295 Here it checks hey, what's the name of the step?
00:56:54.145 --> 00:56:57.835 OK. For if we have that name, let's load this component.
00:56:58.595 --> 00:57:01.226 And then it puts, you know, has them all. They're already in
00:57:01.226 --> 00:57:01.485 order.
00:57:02.215 --> 00:57:04.045 And then it just loads the header for each one.
00:57:04.735 --> 00:57:06.785 And loads the component for each one.
00:57:09.735 --> 00:57:14.556 When each step is completed, it gets it. It calls like a on
00:57:14.556 --> 00:57:16.485 complete something step.
00:57:17.685 --> 00:57:21.881 And what that does is it updates the parent which is check out
00:57:21.881 --> 00:57:26.011 with. Hey here's the data from this step. So whatever like is
00:57:26.011 --> 00:57:30.207 relevant to that right. So like the billing step gives you the
00:57:30.207 --> 00:57:34.137 cart billing contact, so it updates that in a little state
00:57:34.137 --> 00:57:35.735 that's just in checkout.
00:57:37.135 --> 00:57:38.455 And then again up here.
00:57:39.205 --> 00:57:40.415 Use effect is really cool.
00:57:42.475 --> 00:57:44.685 Up here we have another use effect.
00:57:45.585 --> 00:57:49.395 That will handle. Hey, any time that we get data.
00:57:50.505 --> 00:57:54.227 From a step, let's go see if we're supposed to proceed or
00:57:54.227 --> 00:57:54.805 purchase.
00:57:55.635 --> 00:57:56.985 So we're supposed to proceed?
00:57:57.855 --> 00:57:58.675 Then we'll just.
00:57:59.825 --> 00:58:00.665 Go to the next step.
00:58:01.385 --> 00:58:04.245 If we're done, then we're going to try to confirm in purchase.
00:58:05.335 --> 00:58:08.567 Umm. And so that's another example of like how we use
00:58:08.567 --> 00:58:12.158 effect would be used where it's like hey, run this function
00:58:12.158 --> 00:58:13.415 anytime this changes.
00:58:14.195 --> 00:58:20.175 Umm the dashboard sections are also fairly similar.
00:58:20.795 --> 00:58:24.406 Umm. If anyones looked at the menu menu you will recognize
00:58:24.406 --> 00:58:28.261 basically all of this code it checks. Do you have you know are
00:58:28.261 --> 00:58:31.811 there any roles required? If there is, does the user have
00:58:31.811 --> 00:58:35.238 that role? Are there any permissions required? If there
00:58:35.238 --> 00:58:38.665 is just the user have that permission. If they do then.
00:58:39.795 --> 00:58:42.945 Put it into an array. If they don't, then don't step.
00:58:45.505 --> 00:58:46.575 So and then.
00:58:47.675 --> 00:58:50.907 Obviously the dashboard doesn't have like the same kind of
00:58:50.907 --> 00:58:53.645 doesn't really have steps. Now registration does.
00:58:55.565 --> 00:58:58.489 But yeah, the dashboard just has like the different dashboard
00:58:58.489 --> 00:59:01.414 sections and then of course you can see if you go to like the
00:59:01.414 --> 00:59:03.725 top of the file, every component is loaded here.
00:59:04.645 --> 00:59:09.255 And each one of these represents a a page, right? A tap.
00:59:09.895 --> 00:59:10.505 UM.
00:59:12.325 --> 00:59:12.745 And then it.
00:59:13.695 --> 00:59:16.212 Yeah, it's some kind of complicated stuff to build all
00:59:16.212 --> 00:59:16.715 the routes.
00:59:17.375 --> 00:59:20.465 Umm. And then if we get over to registration.
00:59:22.305 --> 00:59:22.985 Let's see here.
00:59:24.175 --> 00:59:24.525 5.
00:59:26.085 --> 00:59:29.915 Where is registration? Ohh I'm. I'm in the skin. Is that why I
00:59:29.915 --> 00:59:30.705 don't see it?
00:59:32.935 --> 00:59:34.685 It's an authentication. That's where it is OK.
00:59:35.805 --> 00:59:39.554 Umm, so you'll see the right if you look at the restoration code
00:59:39.554 --> 00:59:43.303 or the checkout code, they both looked really similar. So if you
00:59:43.303 --> 00:59:46.648 understand one you understand both the both build off the
00:59:46.648 --> 00:59:50.051 section in the back end. They both required to set config.
00:59:50.051 --> 00:59:52.992 They both switch over the different names that are
00:59:52.992 --> 00:59:56.395 possible. They both load the header and then the component
00:59:56.395 --> 00:59:58.125 like. It's all really similar.
00:59:58.885 --> 01:00:02.455 Umm, so I think the biggest difference is just that.
01:00:03.205 --> 01:00:05.525 Registration and checkout are both.
01:00:06.325 --> 01:00:10.645 More or less than controlled by 1 master file instead of
01:00:10.645 --> 01:00:12.615 multiple and they're both.
01:00:14.625 --> 01:00:18.795 That each step is only one file, with the exception of.
01:00:19.495 --> 01:00:22.943 Check out split shipping cause I've as everyone knows,
01:00:22.943 --> 01:00:24.385 especially on the well.
01:00:25.175 --> 01:00:27.886 Probably everyone knows for front in the background back
01:00:27.886 --> 01:00:30.835 end. Check out is like the most complicated part of the site.
01:00:32.595 --> 01:00:37.597 So split shipping has some stuff kind of offloaded from it, so
01:00:37.597 --> 01:00:40.535 the file isn't like 1300 lines long.
01:00:43.395 --> 01:00:44.145 So.
01:00:45.555 --> 01:00:48.801 Did that make sense or did I just ramble? Did it make sense
01:00:48.801 --> 01:00:50.965 like how the checkout steps kinda work?
01:00:52.525 --> 01:00:54.055 Anybody have any questions about them?
01:00:57.365 --> 01:00:58.495 It being sense to me.
01:01:01.875 --> 01:01:03.205 Yeah, it made sense to me as well.
01:01:03.665 --> 01:01:07.356 Umm anybody have any any other questions for David or anything
01:01:04.175 --> 01:01:04.365 OK.
01:01:07.356 --> 01:01:09.055 that you want him to go over?
01:01:12.005 --> 01:01:12.625 I.
01:01:12.255 --> 01:01:13.625 Does anybody go ahead?
01:01:13.625 --> 01:01:14.155 OK.
01:01:15.925 --> 01:01:19.100 I was just going to say, does anybody have a question that's
01:01:19.100 --> 01:01:22.171 like, where would I go to find that? If I can answer those
01:01:22.171 --> 01:01:25.294 questions, that's that'd be great. But you can ask whatever
01:01:25.294 --> 01:01:26.595 you're gonna ask, friend.
01:01:27.405 --> 01:01:31.012 Alright. Uh, so I'm a backend there and I haven't really
01:01:31.012 --> 01:01:35.125 looked at any of this yet. What are the biggest differences that
01:01:35.125 --> 01:01:39.111 I'll have trouble with compared to Angular or what things will
01:01:39.111 --> 01:01:41.705 be easier now that I'm I'll be in react?
01:01:43.645 --> 01:01:44.455 So.
01:01:45.805 --> 01:01:49.855 I think one of the biggest things that's easier.
01:01:53.155 --> 01:01:57.180 There's probably 22 big things, so one of them is the component
01:01:57.180 --> 01:01:59.695 nature of React is a little bit easier.
01:02:00.095 --> 01:02:03.285 Umm, because Angular has directives that aren't
01:02:03.285 --> 01:02:07.538 technically components. How they kind of go into each other and
01:02:07.538 --> 01:02:11.525 exactly how they interact is a little bit more complicated.
01:02:14.355 --> 01:02:15.825 So for instance.
01:02:17.045 --> 01:02:17.645 Like.
01:02:21.225 --> 01:02:25.488 OK, so for instance, like what we expose to a component is very
01:02:25.488 --> 01:02:28.885 limited, right? So like the checkout payment step?
01:02:29.645 --> 01:02:33.716 It doesn't get to know about a service that's shared among all
01:02:33.716 --> 01:02:37.399 of them, right? It doesn't get to just access some other
01:02:37.399 --> 01:02:41.211 controller somewhere in the parent tree. It doesn't get to
01:02:41.211 --> 01:02:45.282 do that. It only gets to know about the stuff it needs to know
01:02:45.282 --> 01:02:49.223 about. So in this case, these four things, that's it. That's
01:02:49.223 --> 01:02:53.358 all you need to know about. So that's all you get. So I think I
01:02:53.358 --> 01:02:54.715 think they call that.
01:02:56.985 --> 01:02:57.865 Encapsulation.
01:02:59.055 --> 01:03:01.545 In uh, like computer science theory.
01:03:03.495 --> 01:03:06.992 So I think that that's a lot easier. And then really closely
01:03:06.992 --> 01:03:10.375 related to the component moon structure is the whole like.
01:03:11.965 --> 01:03:13.275 You know sometimes an angular.
01:03:13.895 --> 01:03:17.225 It's hard to figure out what exactly you have access to.
01:03:18.545 --> 01:03:21.430 So like you're like, do I have access to that controller or
01:03:21.430 --> 01:03:22.055 that service?
01:03:25.605 --> 01:03:28.275 It it's not immediately obvious what.
01:03:28.965 --> 01:03:29.425 You know.
01:03:30.365 --> 01:03:34.715 What's in the scope, right? Or what's in the tree of all the
01:03:34.715 --> 01:03:39.065 scope right in Angular? I mean in react I think that's a lot
01:03:39.065 --> 01:03:39.635 clearer.
01:03:40.315 --> 01:03:42.965 Because everything is just like, OK, well, it's either.
01:03:44.215 --> 01:03:45.415 Imported at the top.
01:03:46.775 --> 01:03:47.245 Or.
01:03:48.465 --> 01:03:50.075 It's a piece of state.
01:03:50.955 --> 01:03:54.758 And your state here is essentially just your properties
01:03:54.758 --> 01:03:55.845 in a controller.
01:03:56.935 --> 01:03:58.005 Right. So like.
01:03:58.865 --> 01:04:02.006 Completed order ID is be stay here. That could be just a
01:04:02.006 --> 01:04:04.375 property in the purchase controller right?
01:04:07.155 --> 01:04:11.337 So I think there's not nearly as much like navigating through.
01:04:11.337 --> 01:04:15.254 Another thing is a lot easier. Is that because this is all
01:04:15.254 --> 01:04:19.104 actually JavaScript? You have types support always. So in
01:04:19.104 --> 01:04:22.489 Angular when you're typing in the HTML, there's no
01:04:22.489 --> 01:04:23.485 autocompletion.
01:04:24.135 --> 01:04:24.865 Right, like.
01:04:25.735 --> 01:04:30.392 The HTML and VS code don't know what might be coming next after
01:04:30.392 --> 01:04:31.265 that period.
01:04:31.935 --> 01:04:32.455 Umm.
01:04:33.275 --> 01:04:37.184 In react you do so just like you just like you're used to in the
01:04:37.184 --> 01:04:40.732 back end. You're used to in Visual Studio, right? You type
01:04:40.732 --> 01:04:42.115 in service strings dot.
01:04:43.265 --> 01:04:45.255 And it's going to give you everything that's under that.
01:04:47.325 --> 01:04:50.700 So that's another thing that'll be a lot. You know, a lot, a lot
01:04:50.700 --> 01:04:52.205 better Intellisense in react.
01:04:53.655 --> 01:04:56.676 And then the last thing I think is a lot easier and anybody
01:04:56.676 --> 01:04:59.847 who's worked on front end for more than like a couple hours in
01:04:59.847 --> 01:05:00.955 angular, you'll agree.
01:05:02.075 --> 01:05:06.423 Figuring out the freaking scope problems in Angular is really
01:05:06.423 --> 01:05:07.265 frustrating.
01:05:09.455 --> 01:05:15.077 Sometimes the scope doesn't update because like you're using
01:05:15.077 --> 01:05:17.565 async code or because your.
01:05:18.385 --> 01:05:22.315 You have a typo right? Like in the view or.
01:05:22.885 --> 01:05:23.535 Umm.
01:05:25.275 --> 01:05:28.034 What's another example? I don't know, but sometimes the scope
01:05:28.034 --> 01:05:29.725 just doesn't. It just doesn't update.
01:05:30.985 --> 01:05:32.195 Like you think it should.
01:05:33.705 --> 01:05:36.853 In react, you don't really have that problem. Now I'm a big
01:05:36.853 --> 01:05:39.895 gotcha. I'm really glad you asked this question, Brendan.
01:05:41.355 --> 01:05:42.615 A huge gotcha.
01:05:43.395 --> 01:05:47.559 Is that react state and I'm I'm putting together the react
01:05:47.559 --> 01:05:50.805 course which will cover this very thoroughly.
01:05:52.845 --> 01:05:53.875 React state.
01:05:54.745 --> 01:05:58.535 Depends on knowing that you've updated the state.
01:05:59.265 --> 01:06:03.840 So here's what I mean by that. In Angular you don't really have
01:06:03.840 --> 01:06:08.201 to worry about this in angular if you just wanna be like you
01:06:08.201 --> 01:06:12.418 know this dot myvar equals something new like a new object
01:06:12.418 --> 01:06:15.635 and just whatever my name David. Right like.
01:06:16.625 --> 01:06:20.136 You don't have to worry about angular watching my bar and
01:06:20.136 --> 01:06:22.375 knowing if you've updated it or not.
01:06:24.525 --> 01:06:27.525 Which sounds convenient, but it's also kind of irritating.
01:06:27.525 --> 01:06:29.355 It's not as clear what's happening.
01:06:30.675 --> 01:06:34.165 So in react this would be the last big thing to take away. The
01:06:34.165 --> 01:06:37.599 other 12 minutes is a good time to give it to you, is that if
01:06:37.599 --> 01:06:39.095 you're ever updating state.
01:06:40.075 --> 01:06:43.585 You have to make sure that the thing you're providing.
01:06:44.485 --> 01:06:47.135 Is a new object in memory.
01:06:48.195 --> 01:06:54.505 So if I for instance do set completed suborder ID here.
01:06:56.125 --> 01:06:59.015 And I just said it to.
01:07:02.425 --> 01:07:03.445 What's the example?
01:07:04.345 --> 01:07:09.200 This is something that, like all new people to react to this they
01:07:09.200 --> 01:07:13.467 do like completed suborder ID dot push, right. And I just
01:07:13.467 --> 01:07:18.101 wanna push a number in there. This react doesn't know about it
01:07:18.101 --> 01:07:22.000 because the array that is completed, suborder IDs in
01:07:22.000 --> 01:07:23.545 memory didn't change.
01:07:25.145 --> 01:07:28.676 Because it didn't change, react doesn't know you changed it like
01:07:28.676 --> 01:07:30.795 it doesn't know that it should update.
01:07:32.115 --> 01:07:32.755 So.
01:07:33.595 --> 01:07:37.687 You can't do this. You can't do some manipulate the state
01:07:37.687 --> 01:07:40.085 directly. You also can't do like.
01:07:42.285 --> 01:07:45.345 What's the example off to type? A little bit of code too to get
01:07:45.345 --> 01:07:45.775 this but.
01:07:48.255 --> 01:07:50.245 Pass an empty array and then here.
01:07:50.955 --> 01:07:52.055 Say OK like.
01:07:52.135 --> 01:07:55.685 Umm consed my copy equals.
01:07:58.345 --> 01:08:00.305 Or here's the perfect example.
01:08:03.035 --> 01:08:05.795 Pops is hit the wrong keys OK.
01:08:07.585 --> 01:08:10.415 So if I do completed suborder ID dot push.
01:08:11.225 --> 01:08:14.365 And then let's say I set completed suborder ID to
01:08:14.365 --> 01:08:18.134 complete suborder ID thinking hey like I gotta tell react I
01:08:18.134 --> 01:08:19.955 just push something in there.
01:08:20.875 --> 01:08:22.065 Let me set the state again.
01:08:22.915 --> 01:08:24.425 Well, this will run.
01:08:25.695 --> 01:08:29.509 But if anything is looping over these IDs, it won't update in
01:08:29.509 --> 01:08:33.385 the Dom. It's not gonna change because this array here has the
01:08:33.385 --> 01:08:37.138 same like it's the same object in memory as this array. Here
01:08:37.138 --> 01:08:41.137 react looks at the two objects, says those are the same thing in
01:08:41.137 --> 01:08:43.475 memory. They're completely identical.
01:08:44.115 --> 01:08:45.305 We don't need to update anything.
01:08:46.395 --> 01:08:49.174 So that was probably a lot more words than I needed, but did
01:08:49.174 --> 01:08:51.999 that make sense, Brendan? Or did that make sense to everybody
01:08:51.999 --> 01:08:52.865 else? This is like.
01:08:54.195 --> 01:08:55.525 React 101 here so.
01:08:54.495 --> 01:08:58.607 Sorry. So how do you how do you trigger uh, react and now that
01:08:58.607 --> 01:08:59.455 it's changed?
01:08:59.435 --> 01:09:01.325 Yeah. So.
01:09:03.545 --> 01:09:04.715 We'll put an arrow here.
01:09:06.275 --> 01:09:07.375 Don't do this.
01:09:08.335 --> 01:09:12.322 What you do instead is you create a new array, so in react
01:09:12.322 --> 01:09:16.309 there's a lot of new ways. There's a lot of ways to create
01:09:16.309 --> 01:09:20.498 a new array. What I would do here the easiest way would be to
01:09:20.498 --> 01:09:24.755 use the spread operator so you create your new array, your new
01:09:24.755 --> 01:09:28.675 list, you spread what it currently is, and then you add a
01:09:28.675 --> 01:09:28.945 one.
01:09:30.075 --> 01:09:33.705 And the spread operator creates a new array in memory and then
01:09:33.705 --> 01:09:35.895 you can just add what you want to it.
01:09:36.785 --> 01:09:39.045 And this will cause it to update.
01:09:43.765 --> 01:09:47.236 In the same thing would be true of an object. So if I go to
01:09:47.236 --> 01:09:47.525 like.
01:09:51.755 --> 01:09:52.785 What's the next sample?
01:09:53.955 --> 01:09:56.749 I don't know. I don't. I didn't have an example ready in my
01:09:56.749 --> 01:09:57.215 head, but.
01:09:58.235 --> 01:09:59.395 Let's just see if we find 1.
01:10:04.535 --> 01:10:06.565 Function no.
01:10:08.915 --> 01:10:12.600 Log in might be an example. No logging will be simple. Well,
01:10:12.600 --> 01:10:14.835 I'll just make a new piece of steak.
01:10:16.615 --> 01:10:19.055 So Conn's my objects.
01:10:20.055 --> 01:10:21.135 Set my objects.
01:10:22.205 --> 01:10:22.935 You statement.
01:10:23.585 --> 01:10:28.370 And then we have an object. Here the same thing would apply. So
01:10:28.370 --> 01:10:31.435 you can't say my object dot name equals.
01:10:33.915 --> 01:10:37.575 And then set my object to my object.
01:10:39.395 --> 01:10:40.225 This.
01:10:41.555 --> 01:10:42.815 Will not cause.
01:10:43.595 --> 01:10:44.745 And update in react.
01:10:46.665 --> 01:10:51.238 Because my object name my object here is the same object in
01:10:51.238 --> 01:10:55.810 memory as it was before, so react doesn't know about it. So
01:10:55.810 --> 01:10:58.935 instead what you do is set my object to.
01:11:00.755 --> 01:11:01.455 My object.
01:11:02.465 --> 01:11:04.945 Like what it already is and then add name.
01:11:05.885 --> 01:11:07.045 Whatever, right?
01:11:07.585 --> 01:11:09.415 What is name saying it's complaining?
01:11:11.615 --> 01:11:13.965 Probably because I don't have a type on the use state.
01:11:16.075 --> 01:11:18.505 Because TypeScript is complaining.
01:11:21.565 --> 01:11:24.966 Yeah, doesn't exist on plane object, but if I say it's any
01:11:24.966 --> 01:11:28.310 now now it goes my don't do that. I'm just doing that for
01:11:28.310 --> 01:11:31.884 the demo. Don't type stuff as any. Pick some type even if you
01:11:31.884 --> 01:11:33.095 make it do something.
01:11:34.235 --> 01:11:36.405 So yeah, this right here.
01:11:37.815 --> 01:11:38.925 New object in memory.
01:11:40.205 --> 01:11:41.445 Will cause an update.
01:11:42.335 --> 01:11:42.845 In react.
01:11:46.765 --> 01:11:47.075 So.
01:11:48.715 --> 01:11:51.861 Now the timing from a front end perspective, we have been more
01:11:51.861 --> 01:11:54.706 cognizant of how much stuff we're calling to potentially
01:11:54.706 --> 01:11:55.655 reduce memory load.
01:12:01.555 --> 01:12:04.795 Do you mean like how often you're doing state updates?
01:12:07.595 --> 01:12:08.085 What do you mean?
01:12:09.125 --> 01:12:09.555 Well.
01:12:09.215 --> 01:12:13.365 Yes, because you're creating a new object and sensually.
01:12:14.215 --> 01:12:14.735 Yeah.
01:12:14.935 --> 01:12:16.125 Right. OK, got it.
01:12:16.885 --> 01:12:17.475 So there.
01:12:16.915 --> 01:12:17.655 Yeah, it's.
01:12:18.865 --> 01:12:19.405 Sorry, go ahead.
01:12:22.715 --> 01:12:24.735 The Cohen finish where things are.
01:12:24.785 --> 01:12:28.509 Uh, I was gonna say yeah, it it's a little bit of a concern
01:12:28.509 --> 01:12:30.495 and it's something I want to do.
01:12:32.475 --> 01:12:37.017 There are ways to make sure that you don't create as many objects
01:12:37.017 --> 01:12:37.705 in memory.
01:12:38.205 --> 01:12:41.785 Umm, so for instance, one great way to do that is like.
01:12:42.795 --> 01:12:45.245 A lot of times you'll have a function.
01:12:46.345 --> 01:12:50.147 And so like for instance this function confirm in purchase?
01:12:50.147 --> 01:12:53.125 Well, every time this whole component renders.
01:12:53.865 --> 01:12:56.195 It's going to create this function again.
01:12:57.425 --> 01:13:00.602 Which means I know. Obviously if you know JavaScript, you know
01:13:00.602 --> 01:13:03.779 that functions are just objects, right? They're just a special
01:13:03.779 --> 01:13:04.535 kind of object.
01:13:05.235 --> 01:13:08.770 So it's going to create this again. So what you want to do is
01:13:08.770 --> 01:13:12.077 like you want to put this outside of the component if you
01:13:12.077 --> 01:13:12.305 can.
01:13:13.275 --> 01:13:18.300 So that you save on is how much memory recreation there is. Now
01:13:18.300 --> 01:13:19.635 all of that said.
01:13:21.545 --> 01:13:25.319 One, there's good good react ways to get around this problem
01:13:25.319 --> 01:13:29.031 that they've built out and like we really could do a lot of
01:13:29.031 --> 01:13:32.929 maximizing once react is stable. I would love for somebody who
01:13:32.929 --> 01:13:34.785 who has the mind for it to go.
01:13:35.845 --> 01:13:40.313 Prevent as many updates from happening. The other thing is
01:13:40.313 --> 01:13:45.008 modern browsers are very, very good at garbage collection and
01:13:45.008 --> 01:13:45.235 so.
01:13:45.935 --> 01:13:48.425 It's not gonna create a huge.
01:13:49.305 --> 01:13:52.177 Like it'll be a very, very because I've looked it up
01:13:52.177 --> 01:13:55.319 before. It's a pretty minor impact to performance because
01:13:55.319 --> 01:13:57.215 garbage collection is so good now.
01:13:57.955 --> 01:13:58.445 Umm.
01:13:59.435 --> 01:14:01.675 So the answer is yes. Ish.
01:14:05.135 --> 01:14:09.133 Would it be a big impact if I have like a big account and this
01:14:05.295 --> 01:14:05.585 So.
01:14:09.133 --> 01:14:13.067 account has, you know 10,000 account contacts because they're
01:14:13.067 --> 01:14:17.001 IBM and they have lots of people on the site and I just wanna
01:14:17.001 --> 01:14:20.935 update one of the contacts swept update the account contacts.
01:14:21.945 --> 01:14:22.435 List.
01:14:23.755 --> 01:14:24.795 With that one object.
01:14:26.165 --> 01:14:26.625 Yeah.
01:14:29.695 --> 01:14:33.745 I've never like in all my time working react and react native.
01:14:34.925 --> 01:14:38.705 I've never encountered a list that was too big.
01:14:41.035 --> 01:14:44.772 And another thing is like you probably if you're loading that
01:14:44.772 --> 01:14:47.845 many account contacts, you should be using paging.
01:14:48.935 --> 01:14:52.685 So that you're not updating like holding all 1000.
01:14:53.705 --> 01:14:55.335 In the front end at once.
01:14:56.335 --> 01:14:56.615 Right.
01:14:57.275 --> 01:15:00.855 Like you should just be using 8 or 32 or 64, you know.
01:15:01.755 --> 01:15:05.425 Some beer, some variation at once, so.
01:15:06.665 --> 01:15:09.837 Yeah, I agree. It's an unusual case. So in that case in
01:15:09.837 --> 01:15:13.519 particular, it probably would be all loaded at once because most
01:15:13.519 --> 01:15:15.955 accounts only have three or four contacts.
01:15:16.715 --> 01:15:17.145 Right.
01:15:18.845 --> 01:15:22.715 Yeah. So good question in theory.
01:15:23.425 --> 01:15:24.945 It might cause some sort of.
01:15:25.895 --> 01:15:30.007 Delay. I mean, I don't know that another great thing about react
01:15:30.007 --> 01:15:33.803 is that it is pretty optimized to minimize renders and it's
01:15:33.803 --> 01:15:37.409 really good at performance. That's part of why it got so
01:15:37.409 --> 01:15:38.105 popular so.
01:15:41.215 --> 01:15:43.515 Anything else? These are great questions. I'm glad you're OK.
01:15:43.235 --> 01:15:45.491 I'm sorry I missed that. What you say. Uh, could you repeat
01:15:45.491 --> 01:15:45.905 that again?
01:15:46.565 --> 01:15:48.215 Ohh I just said that like.
01:15:50.435 --> 01:15:53.797 I could theoretically imagine it causing a problem, but I've
01:15:53.797 --> 01:15:57.214 never worked for the list that was so big that it would cause
01:15:57.214 --> 01:16:00.466 no problem. If you have a huge list. So like you have 1000
01:16:00.466 --> 01:16:03.938 contacts, you should probably just be using paging so that you
01:16:03.938 --> 01:16:07.135 don't have to load all thousand on the front end at once.
01:16:09.085 --> 01:16:12.862 And I also is going to say that like react is very optimized to
01:16:12.862 --> 01:16:13.275 handle.
01:16:13.965 --> 01:16:17.639 Big lists and handle big. You know it's I shouldn't say handle
01:16:17.639 --> 01:16:21.254 big list, but it's part of the things. One of the things that
01:16:21.254 --> 01:16:24.345 people love about react is that it is so performant.
01:16:25.095 --> 01:16:25.685 So.
01:16:26.605 --> 01:16:30.214 It would be a very unique case that you really had to worry
01:16:30.214 --> 01:16:30.875 about like.
01:16:32.235 --> 01:16:36.212 Updating state too often or with too big of objects like it would
01:16:36.212 --> 01:16:36.815 be a very.
01:16:37.615 --> 01:16:38.275 Miche.
01:16:39.575 --> 01:16:41.285 Case you had so.
01:16:43.535 --> 01:16:45.335 I could definitely see a lot of people.
01:16:46.665 --> 01:16:50.575 Getting stuck on that part since it is very different.
01:16:52.125 --> 01:16:52.435 Yeah.
01:16:54.355 --> 01:16:54.645 So.
01:16:56.995 --> 01:16:59.974 But I mean there there's some loaded angular too, right? Like
01:16:59.974 --> 01:17:02.905 if you update a list of contacts that's being repeated over.
01:17:03.785 --> 01:17:08.323 And you push something into the like, you know, into the front
01:17:08.323 --> 01:17:09.475 or into the end.
01:17:10.115 --> 01:17:13.055 And it has to handle that whole list change like.
01:17:13.835 --> 01:17:17.202 You're still going to have the problem, so I don't really think
01:17:17.202 --> 01:17:17.465 it's.
01:17:18.755 --> 01:17:20.305 Two different from what we have now.
01:17:23.685 --> 01:17:23.965 Anyway.
01:17:25.155 --> 01:17:28.135 OK, cool. Well, uh, anybody have any last minute questions?
01:17:29.315 --> 01:17:30.825 It's almost 5:00 o'clock so.
01:17:34.475 --> 01:17:36.315 May it is 5:00 o'clock.
01:17:37.125 --> 01:17:39.955 It is five. Well, it's 459 in my laptop so.
01:17:37.875 --> 01:17:38.075 Yeah.
01:17:38.735 --> 01:17:40.615 Nay, it's 501 here.
01:17:41.235 --> 01:17:44.397 Ohh man. Well we only need to go look at the official clock and
01:17:44.397 --> 01:17:46.225 figure out what time it is. Go stay.
01:17:48.245 --> 01:17:50.245 Appreciate. Thank you so much, David. This is really helpful.
01:17:48.525 --> 01:17:48.875 Alright.
01:17:50.115 --> 01:17:53.767 Sure. Yeah, no problem. If if anybody needs any help, please
01:17:51.425 --> 01:17:51.845 Thank you.
01:17:53.767 --> 01:17:57.298 please, please feel free to reach out, especially over the
01:17:57.298 --> 01:18:00.710 next six months because obviously it's new to everybody.
01:18:00.710 --> 01:18:02.985 So please feel free to ask questions.
01:18:04.425 --> 01:18:06.615 OK, have a good weekend, guys. I'll talk to you later.
01:18:07.805 --> 01:18:08.075 Alright.
01:18:09.135 --> 01:18:10.745 Thanks, David. Thanks guys. Have a good weekend.
01:18:12.015 --> 01:18:12.195 Right.