1 00:00:02,280 --> 00:00:07,500 So again I'm in a brand new project with you as always find attached and it's the project structure 2 00:00:07,500 --> 00:00:08,500 you already know, 3 00:00:08,640 --> 00:00:14,460 it's a very simple index.html, got a style import, got a script import and got this div which doesn't 4 00:00:14,460 --> 00:00:17,310 hold any content, it will become important later 5 00:00:17,310 --> 00:00:22,200 and then we got some styles which you can of course browse through and we got this empty app.js 6 00:00:22,200 --> 00:00:22,870 file. 7 00:00:22,950 --> 00:00:27,060 Now I will build this very simple dummy shop here, 8 00:00:27,090 --> 00:00:32,560 not a real shop where we can really place orders because for that, we would also need a backend, 9 00:00:32,580 --> 00:00:38,360 we would need a server with a database and much more than we are able to build right now 10 00:00:38,670 --> 00:00:41,470 but we will build a part of the frontend here, 11 00:00:41,640 --> 00:00:47,640 a list of products where we can click an Add To Cart button which will then increment the total amount 12 00:00:47,730 --> 00:00:49,270 in a shopping cart 13 00:00:49,270 --> 00:00:54,720 and this will allow us to dive into the concepts which are important when you think about object oriented 14 00:00:54,720 --> 00:00:55,540 programming 15 00:00:55,650 --> 00:00:58,950 and then later in this module when we work with classes. 16 00:00:59,280 --> 00:01:05,970 So let's go to the app.js file and as I mentioned, I want to render a list of products and I want to 17 00:01:05,970 --> 00:01:08,220 make sure that we can click on a button. 18 00:01:08,280 --> 00:01:14,340 Now the traditional way of doing that which we used thus far would be to simply execute a sequence of 19 00:01:14,340 --> 00:01:19,050 steps here, to have a couple of functions in here which we probably connect to some event listeners 20 00:01:19,050 --> 00:01:23,970 and which we also call ourselves from inside to code and then write our logic with that. 21 00:01:24,000 --> 00:01:30,000 Now let me make it very clear that this traditional approach doesn't have to be bad by any means, 22 00:01:30,000 --> 00:01:36,470 indeed you can also write big Javascript applications only in a functional way, 23 00:01:36,480 --> 00:01:42,920 so only where you have all your code split up into different functions which you then call in each other 24 00:01:42,940 --> 00:01:47,250 basically but this object oriented approach might also be worth a look, 25 00:01:47,250 --> 00:01:48,760 so let's have a look here. 26 00:01:48,780 --> 00:01:56,250 So we need a list of products and for that, we probably need a products array first of all with a couple of 27 00:01:56,250 --> 00:01:57,690 products in there. 28 00:01:57,690 --> 00:02:02,770 Now let's say in there we create products which should be objects, where every product has a title let's 29 00:02:02,790 --> 00:02:06,780 say a pillow, has an imageUrl 30 00:02:06,900 --> 00:02:11,060 and for that of course you can take any image you want, here 31 00:02:11,070 --> 00:02:18,210 I picked one in advance simply on google image search, so find your favorite imageUrl there. 32 00:02:18,210 --> 00:02:23,240 Let's say we also want the price in the product, maybe 19.99 and a short description where 33 00:02:23,240 --> 00:02:24,780 I say a soft pillow, 34 00:02:24,790 --> 00:02:27,060 so this again is a string, 35 00:02:27,060 --> 00:02:29,330 this would be one product here. 36 00:02:29,460 --> 00:02:38,690 Now I'll add a second one and here I picked a carpet, also again a URL I found on google image search 37 00:02:39,350 --> 00:02:40,120 and I mean I'd 38 00:02:40,130 --> 00:02:45,680 say it's a pretty expensive carpet or cheap one depending on which carpets you regularly shop 39 00:02:46,310 --> 00:02:52,390 and a carpet which you might like or not. 40 00:02:52,430 --> 00:02:55,400 So we got only two products here but that should do the trick. 41 00:02:55,400 --> 00:02:57,370 So thus far we're doing nothing 42 00:02:57,410 --> 00:02:58,790 object oriented 43 00:02:58,790 --> 00:03:03,890 other than that we store our product data and objects but that's what we did before already, 44 00:03:03,890 --> 00:03:08,990 it makes sense to group that data together instead of working with a couple of independent variables 45 00:03:09,230 --> 00:03:11,890 where it's not clear that they're related. 46 00:03:11,900 --> 00:03:13,420 Now comes the interesting part, 47 00:03:13,430 --> 00:03:17,330 now let's add a product list object and that's new. 48 00:03:17,330 --> 00:03:19,350 Previously, we wouldn't have done it that way, 49 00:03:19,490 --> 00:03:23,680 previously we would instead now have selected a part in our HTML code, 50 00:03:23,720 --> 00:03:27,760 probably a button but we don't have a button here so we'll have to render one 51 00:03:27,860 --> 00:03:32,060 but anyways we would have selected some part in our HTML code and then we would have executed some 52 00:03:32,060 --> 00:03:36,070 logic to for example in this case render a button. 53 00:03:36,080 --> 00:03:42,760 Now I want to move all my code into objects so that I only work with objects in my code 54 00:03:42,770 --> 00:03:48,890 and the idea here is that the code then becomes easier to understand because since all logic is attached 55 00:03:48,890 --> 00:03:54,770 to an object, it's easier to just look at an object and you know okay, everything in there has to be related 56 00:03:55,340 --> 00:03:57,160 to rendering a product list 57 00:03:57,160 --> 00:04:03,600 for example. If we then also have a cart object later, everything in there has to be related to 58 00:04:03,620 --> 00:04:05,030 working with a cart. 59 00:04:05,030 --> 00:04:11,840 So here, I have my product list object and now actually we might want to move our products array into 60 00:04:11,840 --> 00:04:17,270 that if we think about it like that because rendering a list of products, the products themselves 61 00:04:17,270 --> 00:04:19,690 should probably be stored in that object then, 62 00:04:19,730 --> 00:04:25,100 so let's turn products here into a property of product list by replacing the equals sign with a colon 63 00:04:25,250 --> 00:04:27,470 and removing a semicolon at the end 64 00:04:27,470 --> 00:04:30,240 and let's add a method, maybe a render method 65 00:04:30,270 --> 00:04:33,260 and here I'm using that method shorthand notation. 66 00:04:33,260 --> 00:04:38,450 Now the idea behind the render method is that it should render that list of products. 67 00:04:38,450 --> 00:04:44,480 So now in here I will need to select that part of my application, in this case this div here where 68 00:04:44,480 --> 00:04:45,940 I want to render everything 69 00:04:46,180 --> 00:04:54,810 and then do render everything in there. So I'll go here to the render method, get my render hook or 70 00:04:54,810 --> 00:04:56,090 however we want to name it, 71 00:04:56,100 --> 00:04:59,720 so basically a reference to the place where the app should be rendered to 72 00:04:59,910 --> 00:05:05,960 and since this is a div with an ID of app, we can of course select the element by ID with 73 00:05:05,970 --> 00:05:13,290 get element by ID, the ID is app and then in this render hook, we can append some content but 74 00:05:13,290 --> 00:05:15,740 for that, we need to create some content first. 75 00:05:15,780 --> 00:05:25,360 So here, I'll create a prod list and for that, I can create a new element of course with document create 76 00:05:25,390 --> 00:05:25,880 element, 77 00:05:25,900 --> 00:05:31,340 that should be an unordered list probably because I want to have a list of product, 78 00:05:31,340 --> 00:05:37,960 so it makes sense to have an unordered list to render all these products thereafter, it could of course also 79 00:05:37,960 --> 00:05:39,760 be an ordered list if you prefer to 80 00:05:39,770 --> 00:05:47,620 but here I'm going with an unordered list and to that prod list, I also want to add a class name, 81 00:05:48,050 --> 00:05:54,900 so I'll set the class name equal to product-list, simply because that is a CSS class which is 82 00:05:54,900 --> 00:05:57,420 prepared in here in the app.css file 83 00:05:57,420 --> 00:05:59,730 to provides a nice styling. 84 00:05:59,730 --> 00:06:09,240 So now that's that and now on that list, I want to render my different product items, so in a different products 85 00:06:09,240 --> 00:06:10,470 I have here. 86 00:06:10,470 --> 00:06:15,000 So now we need to add the logic to render a single product here. 87 00:06:15,030 --> 00:06:20,760 So for that we can go through all the products of this product, 88 00:06:20,760 --> 00:06:27,240 so this here if we call render correctly should refer to this product list object and therefore this 89 00:06:27,240 --> 00:06:28,710 product refers to this array, 90 00:06:28,710 --> 00:06:30,680 so I'm going through all the elements in there 91 00:06:31,020 --> 00:06:36,760 and then for every product there, we also need to create a new element which we can append to the DOM. 92 00:06:37,290 --> 00:06:46,290 So let's create a prod el here with document create element, here a list item makes sense. 93 00:06:46,290 --> 00:06:55,320 Now on that prod el, I also want to set a class name and there we can set it equal to product-item, 94 00:06:55,410 --> 00:06:59,010 another CSS class which I predefined in app.css 95 00:06:59,280 --> 00:07:10,210 and then to prod list, I want to append my prod el. Now this prod el however, this product element, should 96 00:07:10,210 --> 00:07:15,020 of course also output some content about the product. So we can set prod el 97 00:07:15,250 --> 00:07:21,490 and then maybe innerHTML to some HTML code in the end which has the structure we want. 98 00:07:21,490 --> 00:07:26,080 So here I am using back ticks so that I can write a multiline string here simply because that makes 99 00:07:26,080 --> 00:07:31,020 it easier to structure the HTML code which should be rendered here and there, 100 00:07:31,040 --> 00:07:39,580 I want to have a div that surrounds everything let's say and then in there, an image with a source of and 101 00:07:39,580 --> 00:07:46,090 now we can use this interpolation syntax to interpolate product.imageUrl, every product here 102 00:07:46,090 --> 00:07:51,190 has an imageUrl property and since we're looping through all products, we can access this here, alt 103 00:07:51,310 --> 00:07:54,250 so this alt text before we close that, 104 00:07:54,250 --> 00:08:01,960 that can be product.title. Below the image source, we can now add another div let's say, a div which should 105 00:08:01,960 --> 00:08:07,950 have a CSS class for some proper styling, a CSS class of product-item__content 106 00:08:07,970 --> 00:08:08,660 , 107 00:08:08,710 --> 00:08:16,120 so these are two underscores here and then in there, a h2 tag which we also have to close where 108 00:08:16,120 --> 00:08:23,730 we can output the title again. Then below that, maybe a h3 tag which we should also close where 109 00:08:23,730 --> 00:08:26,640 I output the price and for that, I want to have a normal dollar sign, 110 00:08:26,670 --> 00:08:32,820 we have to escape that here to make clear that we want to use the dollar sign character in this template 111 00:08:32,820 --> 00:08:38,230 literal here and not the meaning of the dollar sign which would allow us to inject some content 112 00:08:38,430 --> 00:08:42,220 and then here I can refer to the price and thereafter 113 00:08:42,230 --> 00:08:47,460 let's add a paragraph here where we output the description let's say, so 114 00:08:47,480 --> 00:08:53,870 this, not this, prod.description. So that's wrong, 115 00:08:53,870 --> 00:08:55,080 this should not be this, 116 00:08:55,090 --> 00:08:57,400 this should be prod of course in here as well 117 00:08:59,110 --> 00:09:06,040 and then below that, we can also add a button where we say add to cart. For now this button won't do anything 118 00:09:06,040 --> 00:09:08,710 of course, we'll have to select it in add an event listener 119 00:09:08,710 --> 00:09:10,600 but let's worry about that later. 120 00:09:10,600 --> 00:09:12,330 So with that, we're setting some innerHTML, 121 00:09:12,340 --> 00:09:15,800 then I'm adding product el to the product list. Product list 122 00:09:15,800 --> 00:09:22,900 therefore probably is finished and now we can append this product list here to the render hook, so render 123 00:09:22,900 --> 00:09:30,510 it into this div. Now with all of that, we got all the logic stored in the product list object and now 124 00:09:30,510 --> 00:09:40,040 we can go to product list here and call render. If we do that and we save that entire file and I reload, 125 00:09:40,070 --> 00:09:43,020 then indeed we get the products rendered here. 126 00:09:43,040 --> 00:09:47,960 Now the obvious question you probably have at that point is, what's the advantage of that? 127 00:09:47,960 --> 00:09:50,170 We put all the code into an object here, 128 00:09:50,360 --> 00:09:51,950 we don't really save much by that. 129 00:09:52,400 --> 00:09:55,920 Well that's the problem with this object literal notation here. 130 00:09:56,030 --> 00:10:03,020 It's hard to write proper object oriented code because with that object literal notation which is great 131 00:10:03,020 --> 00:10:06,990 if we just need to create an object on the fly or just want to group some data together 132 00:10:07,100 --> 00:10:14,120 but with that notation, it's hard to write reusable object code, for example these objects here, 133 00:10:14,270 --> 00:10:16,230 they always have the same structure. 134 00:10:16,250 --> 00:10:22,400 Now whenever we add a new object here, we have to add it manually with an object literal notation and 135 00:10:22,400 --> 00:10:26,990 we have to make sure that we don't mistype or forget a property. 136 00:10:27,050 --> 00:10:33,200 It would be nicer if we had some way of getting some blueprint for this object which we can just 137 00:10:33,440 --> 00:10:39,200 call, some function we can call which gives us such an object or anything like that, which in the end just 138 00:10:39,200 --> 00:10:44,750 makes sure that we have to pass in a certain amount of arguments and then we always get such an object 139 00:10:44,810 --> 00:10:45,710 generated 140 00:10:45,710 --> 00:10:50,540 and of course we could write a function which builds such an object, a simple function which returns 141 00:10:50,540 --> 00:10:54,110 such an object, that would be possible and the same here. 142 00:10:54,110 --> 00:10:59,850 This logic for rendering a single product element, it's now part of the product list. 143 00:10:59,960 --> 00:11:06,170 It would be nice if we could have a standalone object which we could create multiple times, once for 144 00:11:06,260 --> 00:11:12,380 every product we have here in our products array which holds all that logic so that we don't have to 145 00:11:12,380 --> 00:11:17,150 put that logic in here but have that logic stored somewhere else in our code 146 00:11:17,150 --> 00:11:19,000 and then here we just execute it. 147 00:11:19,190 --> 00:11:22,940 Of course that can all be achieved by splitting our code into functions, 148 00:11:22,940 --> 00:11:29,180 don't get me wrong and that's not wrong and that's also not a wrong approach but it might be easier to reason 149 00:11:29,180 --> 00:11:29,690 about it 150 00:11:30,080 --> 00:11:36,080 if you split it into objects where you have a product component object let's say which is responsible 151 00:11:36,080 --> 00:11:41,900 for rendering that part, a product list component which is responsible for rendering the overall list 152 00:11:42,370 --> 00:11:47,450 and later also a cart component, maybe a header component which renders some header 153 00:11:47,690 --> 00:11:53,450 and besides these components which should be normal objects that just know how to render something, we 154 00:11:53,450 --> 00:11:59,780 also have non-component objects which are just regular objects that hold some data and that's something 155 00:11:59,780 --> 00:12:01,540 which we can build with classes 156 00:12:01,550 --> 00:12:05,900 and once we work with classes, it will also be clearer what I mean. 157 00:12:05,960 --> 00:12:08,060 So let's have a look at what classes are.