Placeholder Image

字幕表 動画を再生する

  • in today's video, I'm going to be doing a review of a project sent to me by a viewer, and I'm going to be talking about all the different things that I would change to clean up the code and make it easier to work with and understand.

  • If you wanna have your project reviewed in a similar video to this, make sure to send me a link on Twitter at Dead of Simplified, or leave a comment down below with a link to your project.

  • So let's get started now.

  • The first thing that we need to do in order to re factor this code is to actually understand what the code is doing for this project.

  • We're only gonna be taking a look at this single page that you see here on the right, and we're going to be focusing mostly on the Java script that runs this page.

  • The purpose of this project is that when you fill up your car with gasoline, you then are affecting.

  • The environment is a negative way with your carbon emissions.

  • So this project is attempting to have people pay back to the environment to plant trees to counter act the carbon emission that they put into the environment.

  • So you have put in the amount of gas that you have for example, 12 leaders, Jews of its normal fuel or diesel.

  • Down here, you get some information about the actual transactions, such as if I change this number, you could see it updates in real time and also if we wanted to enter in a additional sum.

  • For example, if we only wanted to pay 10 weeks enduring 10 here and we can pay $10 instead and this site is originally in Swedish.

  • So if some of the words don't actually make too much sense, it's just Google translate, doing its best job to make it English.

  • So for this project who were going to do is we're going to re factor all the job script code in here in order to make this project easier to reason with an easier to change in the future.

  • One thing to note is that there are no test for any of the Java script in this project, so it's incredibly important that we fully understand how this page works before we start making our changes.

  • Let's dive into the actual JavaScript that runs this page to get a better understanding of how the code works.

  • First thing that happens is they're using normal striped checkout, so they're just removing the default striped button and replacing it with their own straight button.

  • Then we have a couple variables here for the amount of trees that are going to be planted and whether or not it's using diesel or normal gasoline.

  • As you can see, this check box here is what determines that value in this job script and then most of the code.

  • Inside the Java script is a single update.

  • Total function and dysfunction does a ton of stuff.

  • It has a bunch of constant variables.

  • In it.

  • It updates all the different text boxes on the field.

  • So, for example, if we change this leader amount, you can see that this leader amounts being updated.

  • This values being updated, the amount of trees is being updated, costs being updated, and this update total function is doing all of that.

  • It's calculated all those numbers and updating all the text in the Java script on HTML for us doing all of our different rounding as you can see doing tons of it, and it's also changing the girl for the form so that the correct amount is being applied for the different payments.

  • Also, we have other function calculate final amount, which is mostly used for calculating the actual cost value that's associated with the amount of gasoline that they're using.

  • So this is just doing a bunch of different fi checking and such in orderto add up the cost and add that cost number down here to this button.

  • So, as you see, we removed this optional value, and we change this to be 15.

  • As you can see, this number up states down here and as we increase it, a continuing updates.

  • So this function of calculate final amount is really just taking care of that for us.

  • And then finally, we have a helper function just for adding text to the page.

  • And then this toggle fuel type buttoned down here is our last function, which is just for that fuel type toggle button that we saw.

  • It just controls whether or not we're using gasoline or not, as you see it talk.

  • Was that variable down here for us now that we have a little bit of an understanding of what the code does.

  • I would talk about the first thing I would change, which is the usage of stripe in this application.

  • Stripe has a couple ways that you can use it one which is just the default check out, which is what they're using here.

  • But there's another way, which is a custom check out, which allows you to cook up your own button instead of having to remove the striped button and then add your own button So we can completely remove all of this code to remove the default button and add in the other stripe way of doing things which I already have entire video dedicated on.

  • So check that out is going to be linked in the cards of above, and I'm not gonna focus any more on what I would do for the strike changes just because I have a whole video already dedicated that the next most important thing I think we can do to clean up this code is to take this update total function and break it out into much smaller pieces.

  • This function right here does so many different things.

  • It updates the HTML it does mathematical calculations.

  • It updates our business logic because it has our business logic in here, such as multipliers that we need to use in order to do certain mathematical calculations.

  • It also updates are striped checkout, so it touches almost every single part of our application in this one single function, which makes testing this function incredibly difficult, and it makes changing it difficult, since if we change one thing, we may inadvertently destroy something else later on.

  • In that function which causes it to break.

  • One of the most important aspects of making clean and easy to use code is to make not only small functions but functions which serve one singular purpose.

  • You could say that the purpose of this function is to update the total, but it does so much more than just updating the total.

  • It updates the total cost.

  • It updates the leader around and updates this Theo to mission amount updates, the tree amount, it changes the html, it changes Java script variables.

  • It does everything.

  • And we wanted to only do one thing for example, so we want to break this update total function into a ton of different smaller functions.

  • We want one function for updating certain text on our HTML page because we never want presentation, which is the age to mill to be mixed with our logic.

  • We want these to be a separated as possible so that we can always perform our logic separately to make that testing easy and we could perform are updating of the HTML separately.

  • And that way we can call these update Beth.

  • It's for either the HTML or the logic, different places.

  • And we don't have to worry about accidentally updating either the logic or the HTML when we only wanted to update the other one.

  • Let's look at an example of breaking out part of this function into its own function.

  • One of the easiest things I can see is this mission multiplier is always going to be a constant variable based on this using gasoline variable, and we can easily break this into its own function because we're probably going to be using this in other places in our application.

  • So we just wanna have one easy function we can get this from, So let's create a function and what we're gonna call it, get a mission multiplier, and this is not actually going to take any parameters.

  • And inside of this function, we're just going to use this logic right here.

  • So we're gonna say if we're using gasoline, then we want to return the gasoline multiplier.

  • And if we're using diesel or if we're not using gasoline, then we returned the diesel multiplier.

  • And down here we can change this to say, get a mission.

  • Multiplier is going to be our mission multiplier right there.

  • And then these variables right here, these constant these never actually changed.

  • So we want to pull them out into their own constant variable, which we're gonna use cost for.

  • And usually when you have a constant variable that is actually a constant, such as just a string of numbers.

  • Usually you want to have that in all capital letters.

  • So in our cases would be gasoline underscore multiplier.

  • And this is the standard for when you want to define a constant variable that never, ever changes and usually represents a mathematical value.

  • And we could just copy this up into here and do the same thing.

  • But for diesel and copy that diesel value up into here now we can remove those two different, very post here.

  • And as you can see, just this little bit of code.

  • We've abstracted out what it means to get in the mission multiplier actually return here, and we've also abstracted are constant out so that they're not stuck deep inside of our code, and we know what they actually mean.

  • Another easy thing that we can do to abstract some of the logic from this update.

  • Total function is to create a function for updating for example, this Theo to a mission value so we can just create another function here would just call it update mission text.

  • But again, I'm going to take absolutely nothing.

  • And this admission text is going to come from the leader amount, and it's going to come from the emission multiplier.

  • So to get the leader amount, all we need to do is get the value of this leader element.

  • And again, we can abstract this out into a variable since it's always going to be the same.

  • And we don't wanna have to always have to copy the string over every time we want to get this so we can just say const leader amount input.

  • That woman's so we know this is the element that represents the leader amount.

  • We could just say document.

  • I get owned by D and pass it that I d.

  • Now in our updated mission text, we can say that we want to let the leader amount equal to leader amount element input dot value and then we want to set the text.

  • So we'll call that set text function will pass it in this Theo to admission value here.

  • So we know that that's what we want to update.

  • And we can say that we want to set the text equal to this leader amount.

  • And we want to multiply that by our get a mission multiplier.

  • As you can see, creating this function has already been incredibly useful since we have been able to use it in multiple different places in our application.

  • Now we can change this coat down here to say updated mission text instead of actually having to call all of this right here We came in copies to fixed over, so it's exactly the same.

  • And now this updated mission text is going to make it work exactly as it did before.

  • We can see that by if we go to our application here, our mission text is this Theo to value?

  • Let's translate this back to English.

  • Go to value right here.

  • So if we update this, we can see that our value here is not actually updating.

  • And we know that since there should be updated that we clearly broke something in our code.

  • So it was Take a look at our code real quick and oh, I see right away that we didn't change these gasoline multiplier and diesel multiply variables to the constant values that we created.

  • So let's change those, save it and go back to our application now and now if we update this leader value, we see that our C 02 ton value is being updated, which is perfect.

  • Another thing that we can change about this application is you notice this update total function is being called when we're updating that, or when we change that leader value on the HTML page.

  • But nowhere in our JavaScript are we setting up on click listener anything for that?

  • So where is it actually getting called?

  • How is this actually being hooked up?

  • And it's actually being hooked up in the HTML.

  • If we go and look at the HTML and try to find the element with this I d.

  • So we just do a search for it.

  • We'll see that we get this input moment here and there, using the on input listener in the actual HTML in order to call this update Total function.

  • As you can see through out here, there's a bunch of places where these on submit on click and so on.

  • Listeners are being used inside the HTML, and this is definitely bad practice.

  • You should be using these listeners hooking them up in your job a script.

  • So that way, all of the logic of your application sits in the Java script, and you have no logic in your HTML by having these in the HTML.

  • It makes it really difficult to find where different parts of your job a script code are being called from.

  • So this should be removed from here.

  • We can just copy this all delete this on input completely go back to our JavaScript, and we could just call our leader amount.

  • Since we distract this into a variable don't ad event listener and we want to do on input we want to call a function, and inside this function we're going to do exactly what was in that code.

  • In the HTML, we just need to update thes value variables to say this dog value.

  • Since it's actually using this object inside of the Java script, it works slightly differently than an HTML.

  • So once we have that done, get the code, format it nice and clean, move this quotation and there we go.

  • Now we actually have our input listener event being hooked up in our job script, so it's much easier to see how this is actually working.

  • Now, if we save that and we open up our page over here, we should see that everything works just fine as before.

  • And it does perfectly as we update this all our values down here being updated, and that's perfect.

  • So really, the only main thing left to do in this application to clean up the code is to move all these different event listeners into the Java script.

  • So that's easier to follow what's going on in the Java script and then to split out this update total function to get all of the view related logic.

  • Such is updating the text out of here and on Lee have the actual business logic in here, so there should be split into multiple different functions that do those different tasks.

  • So instead of showing you live me doing that, I'm going to show you a side by side comparison of the before, which is what we have here and the after.

  • So on the left side here I have our current code that we've been working through.

  • And on the right side, I have the newer, updated version of the code.

  • As you can see, I have a bunch of striper by the logic here which word is going to completely ignore it?

  • Because I told you.

  • Like I said, I have a video that covers this and this code really on.

  • Lee gets rid of this small little section of code here, so we're going to scroll all the way down.

  • And as you can see, I pulled every single constant variable in the application out into their own variables.

  • And I used names that are descriptive to describe these variables.

  • As you can see in the code here.

  • If we scroll down a little ways.

  • Here we have a bunch of different variables, but the descriptions for these variables are in the comments next to the variables.

  • So instead of using comments to describe what the variables do, I decided to make variable names as descriptive as possible.

  • So that way, just by looking at the variable name you can see this is the service fee multiplier.

  • You can see this is yearly tree, so teak consumption in kilograms and so on.

  • So we don't have to worry about moving these different variables around and putting comments next to them, because it's easy to tell that this isn't kilograms when you see it right here on this line.

  • But when you see this yearly tree, so to consumption down here, you don't really know that it's in kilograms because it's not in the variable mate.

  • So that's one really important thing is to always make sure to use variable names and function names that are descriptive.

  • Instead of relying on comments to describe what those things mean.

  • It's much easier to see a variable name and know what's going on, then, to have to scroll up to some form of comment that may be describing it, and maybe out of date, you're not really sure.

  • I err on the side of using the least amount of comments as possible and trying to make my code speak for itself as much as possible.

  • Next you can see down here.

  • I'll just make this full screen for you to make it easier to read.

  • You can see that I have all of the different elements on the page extracted out here into different variables so that we can use them later on without having to repeat any of these different strings.

  • So, for example, the idea of this element changes toe money to later on.

  • We only updated in one place.

  • We don't have to update it everywhere else in our application.

  • This also slightly saves us a little bit of time in performance, since we don't have to re get this element every single time we call a function that uses that element.

  • But that's such a minor performance gain.

  • It's really not worth it.

  • The main point of pulling this out, like I said, is that we can update these I.

  • D.

  • S without having to change it everywhere in our application.

  • Just one single spot.

  • Next, we still have the same using gasoline variable here and then I have all these different event listeners.

  • This is where I pulled out all those on input related codes in here.

  • As you can see on submit Gotten on, click down here.

  • All of those.

  • I got rid of all of those in the HTML, and now instead they're event listeners here that are hooking up to these variables that we called up here, make this full screen again.

  • So it's a little bit easier to see.

  • And as you see, we have our input event listener and such.

  • And instead of calling that update total function, they're calling functions that only actually update the text of the application.

  • In this case, this is updating all of the text fields.

  • This is just updating the total amount and so on.

  • And the only time that we're ever getting an actual total amount calculation and doing logic and getting back a number is when we are clicking the button to submit the form and we're getting the total amount then.

  • So that way we can send that to our server, which will handle the payments for us and then I have a bunch of different functions down here.

  • These are essentially that update total function broken down into all of its smallest parts as possible.

  • Each one of these functions does exactly one thing.

  • For example, this get total amount is the most complex function, and all it does is call a bunch of different helper functions that get the amounts for us and turned that amount from leaders and the leader fuel type.

  • And it converts that into a dollar amount down here.

  • In essence, this get total amount function is almost exactly the same as calculate final amount here, except for instead of taking in two different parameters, it gets those parameters from functions we've already to find and does all these calculations in other functions to make it easier to figure out what these different sections are doing.

  • We're also using those constant variables here, such as dollar to S E.

  • K, instead of using just hard coded values in the code.

  • So it's easier to see what's going on inside of this get total about function.

  • I also have a bunch of helper functions down here which are essentially checking values to see if they're valid or not.

  • And it's also getting values for us from the HTML so that we can use them in our functions.

  • As you can see, we have her get a mission multiplier function here we created in our example on the other side and essentially all these other functions, like get fuel type, get tree amount, get description.

  • They're all in the same idea.

  • They're very simple functions that get us of value that we can use in her application later without having to repeat that logic all over again.

  • Because inside this update, total function, who's multiple places where logic is repeated?

  • That's doing the exact same thing.

  • For example, checking if something is a valid amount that's in multiple places inside of this function.

  • So I witches have it here in one single place, so we don't have to worry about copying and pasting that code and changing if it changes in the future.

  • The next most important thing to note is that none of these functions here actually have anything to do with updating the HTML itself.

  • All it does is essentially math on different numbers in order to get different values force or It's just returning strings for us based on the HTML itself.

  • But it never changes the HTML.

  • All the functions that changed the edge trail are down here.

  • They all are for updating the text.

  • We have one function that allows us to update all the text at once because some of our elements need to update all the text ones.

  • And then we have individual functions for updating each section of text in case we only wanna update one section at a time.

  • And these different functions all they do is update the text.

  • They don't do any calculations.

  • They don't save any variables.

  • They don't do anything else except for get the value that they need to update the text.

  • And a lot of times they're able to call these helper functions that we created, such as getting tree amount, which is a fairly large function here, and it just calls it and we don't have to repeat that logic every time we want to update the tree text.

  • Since we have this smaller helper function and we have that for all the different ways of upping the text instead of the application and then down here we have a toggle fuel type button.

  • I didn't actually change this.

  • This is just exactly as it was before, so that's perfectly fine.

  • And you may be thinking that I'm going through this code fairly quickly, but that's okay.

  • It's not important that you understand what's actually going on with the code, but it's important that you understand how the code is structured and why it's structured in a certain way.

  • We go back to our previous example.

  • Over here, you can see that this update total function is really large, and it's really hard to figure out what it does.

  • You have to go through and read each code section line by line to figure out exactly what this function does.

  • And it took me quite a while to parse through this function and pull it out into all these different, smaller functions.

  • But now, if you, for example, look at this get tree amount function, you know exactly what it does.

  • It's a in the name, it gets a value for us, and since it has the word get at the beginning, we assume that it makes no changes anything.

  • All that does is returning value for us And since it's only a couple lines, we could just read this code really quickly and understand exactly how it works.

  • Same with these updating functions.

  • We know that since it's starting with update that it most likely is changing something, and right here we could see update leader text.

  • So it's updating the leader text on our screen for us, and the naming of these makes it really easy.

  • They all have a very similar name with update at the beginning, the text at the end and then what we're actually updating in the middle.

  • So it makes it easy to follow what's actually going on with their different names.

  • And we have the same thing here with all of our get values.

  • When you're using the word get in a function name, you want to be 100% sure that that function doesn't do anything except the return of value.

  • You don't want it to update anything.

  • You don't want it to change your HTML.

  • All I should do is get you a value, and it should always do that every time you call it.

  • If you call it multiple times, for example, it shouldn't return different things each time.

  • It should always return the same thing for you, and it should never change anything.

  • Your application.

  • We also have these two functions that start with the word is, and any function that you create that starts, it is you should assume that it's going to return to you a Boolean, so either true or false, and you can always rely on it returning sure or false for you.

  • It also just like these get functions should never change anything in your application and only ever return something to you.

  • Another important thing about these functions, compared to the old functions is that you can see that all these functions are about five lines or less.

  • A couple of a may go little over five lines, but none of these air really over 10 lines, so they're all very short and easy to read.

  • While this update total function here is quite long, you can see that it starts at Line 36.

  • It goes all the way down to 71 so it's about 35 lines, and then this calculate final amount is also about 30 lines, so those were fairly long functions, and they do a lot.

  • As you can see, there's tons of comments in here to describe what's going on when in actuality would be much easier if we pulled these different commented sections and to function.

  • And those function names would describe what these comments are doing.

  • One final note that I want to make is that these functions that over here these newer functions, the fact that they are smaller and they do exactly one thing makes them much easier to test.

  • So, for example, we could test this get emission multiplier function manually, or we could do it automatically, which is ideal.

  • We could write automatic unit test for it.

  • And since this is a small function, that only does one thing, it's incredibly easy to test, which, if you have test for your code, it makes it much easier to change in the future.

  • Since you know, if you break something immediately without having to manually test everything, which makes it very easy to miss things, and that's really all I would change about this original code is just break apart those large functions making them do one thing in specific with a bunch of different functions that are really short.

  • While this code here is slightly longer at 170 lines, while our other example is more like 100 lines 138 most of the code in this example on the right here is from this section of 30 lines just for stripe.

  • So in actuality, the A number of lines of code is very similar between the two.

  • But this right hand section, you could read and understand almost immediately while this code on the left took me quite some time of reading and testing with application to figure out what was going on in these two really big functions.

  • So I hope you guys enjoyed Listen to me, ramble on about what?

  • I would change about this project.

  • If you did enjoy it, please make sure to leave a wink to a project that you have that you would like me to review, because I would love to take a look at it and make a video on reviewing your project as well.

  • Also, make sure you subscribe to the channel for more videos just like this and check on my other videos, which you're going to be linked over here for more content.

in today's video, I'm going to be doing a review of a project sent to me by a viewer, and I'm going to be talking about all the different things that I would change to clean up the code and make it easier to work with and understand.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

コードレビュー - JavaScriptのインタラクティブなWebページ (Code Review - JavaScript Interactive Web Page)

  • 1 1
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語