1 00:00:00,110 --> 00:00:05,780 In this lecture, we're going to turn on production mode to boost the performance of our application. 2 00:00:05,780 --> 00:00:10,460 It's one of the most important steps we can take to have a performant app. 3 00:00:10,490 --> 00:00:15,630 To understand why, we need to talk about a feature called change detection. 4 00:00:15,650 --> 00:00:20,670 If you're familiar with React or Vue, you may know this feature as reactivity. 5 00:00:20,690 --> 00:00:22,790 If not, that's fine as well. 6 00:00:22,820 --> 00:00:29,270 Change detection is the process of updating the HTML document whenever data changes in an app. 7 00:00:29,270 --> 00:00:36,980 For example, if you press a button, upload a file, send a request or type in a form change detection 8 00:00:36,980 --> 00:00:37,820 will run. 9 00:00:38,000 --> 00:00:40,580 Angular will check the data in an app. 10 00:00:40,580 --> 00:00:45,050 If the data changes, it will reflect those changes in the HTML. 11 00:00:45,080 --> 00:00:47,600 It's the main selling point of Angular. 12 00:00:47,600 --> 00:00:54,040 Instead of refreshing the page like regular sites, bits and pieces of an app can be updated dynamically. 13 00:00:54,050 --> 00:00:57,860 It can synchronize the data in our app with HTML. 14 00:00:57,950 --> 00:01:01,710 Change detection occurs on one of three occasions. 15 00:01:01,710 --> 00:01:04,650 It'll run when our app loads for the first time. 16 00:01:04,650 --> 00:01:09,690 This will give Angular an opportunity to display the default data in your app. 17 00:01:09,690 --> 00:01:14,940 The second occasion is when an event occurs, like clicks or form submissions. 18 00:01:14,940 --> 00:01:18,720 Lastly, we can manually trigger change detection. 19 00:01:18,720 --> 00:01:22,890 It's not common to force change detection, but it is possible. 20 00:01:22,890 --> 00:01:27,740 It's rare, but change detection can introduce some problems in our app. 21 00:01:27,750 --> 00:01:32,940 They can be difficult to debug since change detection is a complex system. 22 00:01:33,060 --> 00:01:37,710 Angular helps us by running change detection twice during development. 23 00:01:37,740 --> 00:01:39,330 Think of it like this. 24 00:01:39,330 --> 00:01:42,390 Have you ever played the game called Spot the Difference? 25 00:01:42,420 --> 00:01:46,110 It's a game where two images are shown side by side. 26 00:01:46,140 --> 00:01:49,800 The goal is to find the differences between each image. 27 00:01:49,890 --> 00:01:52,170 Angular does something similar. 28 00:01:52,170 --> 00:01:56,840 When our app is initialized, it'll run change detection twice. 29 00:01:56,850 --> 00:02:00,000 It doesn't matter if the data changes in our app. 30 00:02:00,000 --> 00:02:05,400 After running change detection twice, it'll compare the results of both outputs. 31 00:02:05,400 --> 00:02:10,110 If the app outputs different results, that means we've done something wrong. 32 00:02:10,110 --> 00:02:15,030 If our data doesn't change, that means the template shouldn't change either. 33 00:02:15,150 --> 00:02:18,240 Consistency is key in any application. 34 00:02:18,270 --> 00:02:23,670 Users should be able to refresh their browser without seeing a completely different app. 35 00:02:23,670 --> 00:02:26,670 This additional check can be helpful for debugging. 36 00:02:26,670 --> 00:02:33,180 It's rare to experience this issue, but it can happen as long as you follow best practices, you should 37 00:02:33,180 --> 00:02:35,790 be able to avoid this issue altogether. 38 00:02:37,130 --> 00:02:39,530 This behavior is great for debugging. 39 00:02:39,530 --> 00:02:43,300 However, it's not something we should want in a production app. 40 00:02:43,310 --> 00:02:47,600 If we leave it enabled, it could impact the performance of our app. 41 00:02:47,630 --> 00:02:52,130 We should turn off this behavior when we ship our app to production. 42 00:02:52,190 --> 00:02:54,920 Let's try doing that by default. 43 00:02:54,950 --> 00:02:59,880 Angular has configured our application to enable this behavior for development. 44 00:02:59,900 --> 00:03:02,630 Open the angular JSON file. 45 00:03:04,570 --> 00:03:08,170 In this file search for a property called projects. 46 00:03:08,530 --> 00:03:13,090 Basic architect.build dot configuration. 47 00:03:14,960 --> 00:03:18,530 There are two objects called production and development. 48 00:03:18,530 --> 00:03:23,330 As you can guess, the production object contains settings for production mode. 49 00:03:23,360 --> 00:03:26,900 The development object contains settings for development mode. 50 00:03:26,930 --> 00:03:31,430 If we look inside the development object, there's a setting called optimization. 51 00:03:31,460 --> 00:03:34,070 This option is the most important setting. 52 00:03:34,070 --> 00:03:39,910 By setting it to true, Angular will not run change detection twice on initialization. 53 00:03:39,920 --> 00:03:43,820 Remember, this behavior is helpful for debugging an app. 54 00:03:43,820 --> 00:03:46,910 It's a feature we should leave on during development. 55 00:03:46,910 --> 00:03:52,520 Since this object configures the development environment, it makes sense to turn this setting off by 56 00:03:52,520 --> 00:03:53,720 setting it to false. 57 00:03:53,720 --> 00:03:54,680 By default. 58 00:03:54,710 --> 00:03:59,210 The value is true, which is why you won't find it in the production object. 59 00:03:59,210 --> 00:04:04,190 Even though we didn't have to change anything, I wanted to point out change detection. 60 00:04:04,340 --> 00:04:07,340 Let's go back to the Main.ts file. 61 00:04:07,340 --> 00:04:09,620 We're finished preparing this file. 62 00:04:09,620 --> 00:04:14,300 The code we've written is the same code in a default angular project. 63 00:04:14,330 --> 00:04:18,010 Hopefully you have a better understanding of what's going on. 64 00:04:18,019 --> 00:04:23,510 However, there's one file we overlooked, which was the app module file. 65 00:04:23,510 --> 00:04:27,980 In the following lecture, we're going to start exploring modules.