Junior Vs Senior Code - How To Write Better Code - Part 2

[@WebDevSimplified]

Here is part one in case you missed it. kzbin.info/www/bejne/nWPRfn6wndCprtk

[@yt-sh]

was waiting for this, I used part 1 lessons well, kindly make more video like this!

[@kevmac9967]

Thanking you

[@agentstona]

Mate there is no one correct way to write code .. the fact that you think that there is means you are a novice noob your self ...... Also there is no good way or not so goodway , It's all about OPTIMIZATION MATE , Debugging and Transpiliing your code . There is a difference , you wrote the code in this crappy way to just prove a point , but at the end of the day NO ONE and I MEAN noone who codes day in day out writes all the code that way ....CHRIST

[@SeamusMcMichael]

Are you doing any more of these?

[@bedrockcoder5169]

I love these noob vs pro code videos, they're really good, thanks!

[@dominicnzl]

how convenient, I just finished watching part 1 when this showed up. Thanks for your videos mister

[@sofianebm7492]

he was wating for you

[@abdellatiflabreche9518]

Please make noob vs pro code a weekly show, your demos are AWESOME

[@ayushpaharia5452]

This is my favourite web dev channel. I don't usually comment but I want to show much I appreciate you content. Thank you.

[@zm690]

This is so helpful , when the companies give me interview assignments, later they help me to review the code, they always point out my unclean codes. I wish I could knew this vedio earlier ...

[@Shmeeps_phd]

I finished my second week in a coding bootcamp today, currently on JS branching. the fat-function section hit realllllllllllly close to home looking at my project submission for the week. haha

[@TheRealBigYang]

I've been trying to understand the SOLID principles to make my code better and more readable, and this video really helped with the SRP. Thank you for making these videos!

[@aerialaspects]

Thank you Kyle. One things i like about your video is that you are very specific about things. I love it. Keep making awesome video.

[@Kawasakifanboy]

This is the best topic you cover in your videos bro. Im a FS javascript dev who makes sure to write the "advanced" but doesn't bother to make it "pro". Nonetheless, It's super helpful and satisfying to watch these videos. Keep up the good work :)

[@TheSawAndTheCarnage]

Thanks

[@WebDevSimplified]

You are very welcome!

[@hiteshgupta7591]

Hey Kyle, thanks for your effort please make this kind of video "How To Write Better Code", because this helped me so much. Thanks again

[@SethWilson]

Great content! This is really helpful. One suggestion I’d make is that the user validation even in the pro version still requires understanding the implementation details ftrue/false, error array, etc.). To make it cleaner and less dependent on implementation, I would have the user validation throw an error, and then wrap it in a try/catch block. Either that, or I’d rename the function to “isValidUser” so it’s clearer that it’s returning a Boolean.

[@ShawnRitch]

It works that way in PHP also using PDO.

[@abdellatiflabreche9518]

The bad thing about the pro code is that you open a new interface & close it on every auestion, i suggest using an array of question than return an array of answers in order, to get responses variables names use array destruction.

[@iancuvlad7368]

Tried to follow along and do it myself: In the first example i have replaced the nesting with a recursive function. The program works with 14 lines of code in file total (without blank lines).

[@AJax2012]

I think the keyword missed in the pro version in the async example, even though you explained it very well, is "Separation of Concerns." Each file, function, and if you're an OOP developer, class, has a very limited, preferably single, responsibility and dependency, which makes your code flexible. Your code for the async example is very clean/good btw :) I have a single major issue with the save or update user implementation. You should *never* be able to save something to a database without validating it. This means you should not be able to call the saveUser function without having validation checks inside the save function. I'm not saying that validate user is done incorrectly, but no senior server-side dev I know would create an API endpoint that saves data to the database that doesn't have a call to a validation method. Yes, I know the point is that you don't expect a "save" function to return errors, but think about this.. if I were a hacker and I find your function name and parameters in your JS in your client code (which is generally super simple to do using chrome debugging tools), I will just open up Postman and put in whatever I want. You have no checks in place to stop me, so the data will just get entered into your database without validation. If you have retrieve user information without validation that I should be able to access it... well, you could probably guess how much damage I could cause there. Consider this instead: Return an object "result" from your saveUser function. Many languages have a very easy way to do this, including JS (I'm a C# developer, which calls it an IActionResult). Call validate user from your save user function. then save your user if valid. If you don't like how it's named, consider renaming it to "registerUser", because I would fully expect error results if I attempt to register a user incorrectly. This is fairly common practice. So much so, that the library MediatR in C# has the process of validating upon saving/updating an object built into their pipeline without even having to write "validate object" in the storage method; you create a class that implements a generic Interface to save the data, then create a class that extends another generic interface to validate the data. The pipeline validates the data, then saves the data without calling it based on (I believe) reflection.

[@-Jason-L]

I watched this series, thinking I was going to be able pick it totally apart. But I was wrong :) Good job. I'm a director of engineering - want a job? :) 99% of experienced devs write your "advanced" examples from series 1, and stop there. Without guard clauses. I almost always need to guide them to refactor to the "pro" level code. even devs with 20 years experience (who typically refuse to change).

[@kauanmocelin]

Good example of use SRP on fat function refactoring, go ahead and publish more videos about this subject. Very good!

[@rajendra222php]

we need more videos like this.

[@soulehshaikh8799]

You can use top level await in Node. Update your node version to latest. Use command "node --harmony-top-level-await filename.js". No need to put await statements inside async functions.

[@oskar42314]

These are really useful. Thanks. Please make more examples of how to improve the quality of one's code.

[@rooroadadventures]

It would have been really cool if in the noob version you say you are 25, and in the advanced version 26 and the pro version 28 or something because that's how it really happens. Uber cool video, learnt a lot. Thanks.

[@scriptydude]

Great content! This could help enhance developers skills. I'd like to see more stuff like that.

[@capriccz]

Keep these kinds of videos coming!

[@thingsiplay]

To make the code even more readable, I would chose naming schemes like "is_valid_username()". This makes it more natural to read and forces the code to be boolean where the answer is yes or no anyway without side effects. And the name of the function reflects that. "validate_user()" to me implies the possibility that something else would be done, including printing error messages. And is something else than the username validated too? If so, then the function name is okay. But if it returns just yes or no, then the "is_" naming structure is more appropiate to me. Btw I am between noob and advanced I believe. Maybe.

[@KomentatorBre]

I don't even need to watch the full video to know that it's gonna be a great one. Thanks for the great work!

[@markgyverguardiana8928]

10:54 , it relates to SOLID principles- S as in Single Responsibility as you said, its doing 3 different things and has unintended side effects

[@the_bitcoin_guy]

these kind of videos are so helpful ! Thank you very much.

[@leandrolobo]

Really usefull info, I'm a noob, and this helpme a lot

[@perkin524]

Intensely interesting. I code mainly in PHP but the principles seem equally applicable to most/all programming languages so I learnt a lot. I am now a subscriber. But how great it would be Kyle if you could do similar videos for PHP, which after all is still very much the main language of the web.

[@Aaronmoreno]

this series is so so so good!

[@pahvalrehljkov]

ok, i went from jun vs dev 1 video, to second one, but i needed async video, for that i needed promise video, for that i needed arrow function video... i learned today how to code javascript in half hour... tnx mate!

[@WebDevSimplified]

That is awesome! Congratulations.

[@andyd5235]

The thing is now you need to: 1. code like a pro, 2. solve 2 medium-level leetcode questions in 45 min 3. explain what you think and your solutions as clear as Kyle's video. then you have 80% chance to go to the onsite round

[@erniejeashvillahermosa5699]

I really like the validation part. Thank you!

[@kishoreandra]

Thanks for this part 2 Kyle .....Keep Going Bloke

[@deepakkaithwas8281]

Great information again, loving this series, this is giving me a lot of new ideas. I have been reading book on “Clean code” but the way you demonstrated it, I must say you are genius.

[@huyphan377]

i hope you have many part with this topic

[@alamin_firdows]

Waiting for part 3!

[@DuraanAli]

You guys should really read "Clean Code" book, it covers this and a lot more ways to have professional clean code. Thanks Kyle.

[@agentstona]

You should really stop reading a book and actually READ THE RFC Guidelines and API documentation of the CODE in itstelf which has in detail on how to actually properly use the code and all of it is available for FREE . You should also make sure you use a Debugger that its self will show you if you are coding properly or not . You should also use a Transpiler to compile and optimize your code . With that said STOP reading books by idiots who call themselves experts and teach you only one way to CODE .....When in fact the original developers of the coding language have given you a API reference that clearly explains how to use the code and clearly shows that it can be used in NUMEROUS ways and that their is no one good way over the other ... ITS ALL ABOUT OPTIMIZATION .....ps stop reading trashy books and start reading the API !!!!!!!

[@DuraanAli]

@@agentstona Your whole comment shows that you didn't read the book, so It's hard to take your advice. How about doing both, reading proven books and reading docs.

[@agentstona]

@@DuraanAli the only book any one has to read is the book that is created by the developers of the code and are to be followed as guidelines hence the coding documentation api .docs by the original authors .... anything else thats written by anyone else that did not invent , write or contribute to the code creation is pure opinion aka good as FUD ... because an opinion is an opinion and not a real world guideline . thats the bottom line ..... if the guy didnt create the code he has no right to go around preaching on whats right or wrong about the coding language hes word is simple as fiction and not a real world guidline..

[@RyanKHawkins]

Awesome. I would love to see more examples.

[@no-one6790]

Though I code python, ti's helps a lot, because the logic is basically the same. Thank you for this video!

[@adamthedev]

Another great video, man! Thanks

[@MarshallSC1]

GOLD! This is pure GOLD! Moooore... Moooore, please.

[@TechDecryptor]

need more videos like this

[@abhayganti8662]

THis is soooo good Web deb Simplified

[@christophercheok4814]

Keep up the good work mate :D ! you help different it out the great point on noob vs pro, thanks

[@SusonS]

Great video, used this to prove a point to a fellow developer! :D

[@adrianfletcher8963]

Another reason to do a more intermediate to master video 👍

[@akshay__sood]

Can you tell me how much time does it take for you to write pro code when you start coding something? I am asking this because I was cleaning up my code today and it took me decent amount of time as I ran into errors too.

[@shivetay]

do you plan maybe explore some advance useReff usage?

[@truongpm2144]

Thanks you so much, great videos

[@engespress]

I prefer callbacks because they require a lesser degree of abstraction to write, and if they work, who cares if it looks messy? They make more intuitive sense to compose. I really don't like Promises as I don't understand it, and async and await is the same, but easier to write. I just copy async and await scripts and use it without understanding it, but if I am writing code de novo that involves multiple functions in a row that depend on each other, and I don't have any templates to work off, I use callbacks. The flow makes more sense to me, and it's straightforward feeding the result of one function as a parameter to another.

[@shutterradio]

Thank you for this very useful video!

[@yonatan_song]

Love your video series about this topic. Until now i have never maintain my own code because its hard to read 😂 Hope to see your next video soon

[@LavotiJoelVinayKumar]

Hey dude, I want to raise 2 issues. 1. Use of try-catch block when using async-await is missing 2. You should also reject the promise upon edge cases like undefined/null/wrong answers

[@swapnilkuwar7040]

Please create video on functional programming

[@bartkl]

First of all: nice job! I do have a one remark though. Near the end of the video, in the validateMessages() function, you use reduce() in a way that (although it works) I would think is somewhat inappropriate. You are using side-effects (object mutation, to update the errors object) in the reducer function to ultimately build the errors object, which suggests to me that iteration is more suitable. I would choose reduce() only if you intend to use it purely, i.e. to declare it such that it 'builds out' the desired result recursively, without mutation. When you mutate the result object the way you did, iteration seems more straight-forward to me. Feel free to disagree with me of course or point out to me where I might miss some advantage of your using reduce over a loop :).

[@DieterPrivate]

Using reduce is point free, and thus more fp. Though using forEach like you suggest is eventually the same thing, and I see it preferred by peeps that like imperative code. Also, because immutability is often the best way, that doesn't mean mutation is bad. In this case it's actually good and even preferred for performance reasons. If the one that mutates the object created it, then you will not have the cons off mutation.

[@bartkl]

@@DieterPrivate I think we mainly agree. But the core point I was making is that in pure FP you can't even use reduce the way Kyle did here since he uses mutation. So it's a bit more than a difference in taste I'd say. Still a minor point though :).

[@DieterPrivate]

@@bartkl following everything by the book is not always good. In this case It would hurt performance while none of the reasons this rule exist are present at this point in code. So in essence, FP doesn't state this.

[@rafaelpernil]

I agree with you. When I see reduce() used in these kind of situations, makes the code more complex than needed.

[@jollyjoker6340]

@barktl Disagree since using an object or array as the initialValue is very common in javascript reduce(). _But_ since it returns an object for each input it should logically be map() instead. And with validations as an array, it becomes validations.map({property, required, length} => [required && validateRequiredMessage(object[property]), ... .flat().filter(Boolean)

[@vashupandey2212]

you are greate sir!!!

[@cg8939]

More of this please

[@hassaneoutouaya]

THANK YOU SO MUCH!

[@carlosjuarez8152]

Hey... Good video! The pro version looks cool.. noob question here.. In the printErrors () function, u end up with a O(n2) time complexity... I know it is not a big deal here... But thinking on a larger project... Isn't that a bad thing?

[@modo4211]

I love these videos

[@hagergamal2856]

Amazing video ♥️ U need to make more of these ♥️♥️

[@alekdemj]

Kyle, this is very good video! My Kudo to your karma :)

[@onefilm2709]

Good lessons, i will like to see "How To Write Better Code" for PHP

[@markadeniran301]

I do enjoy this video series and wish to see more of this kind of stuff. Though I have some comments, I would only speak up on the unnecessary else I see both on this and the previous video. Most time inside a function an else does not always need to follow an if statement. Somehow similar to like guard clauses but not exactly the same a return inside the if statement should be satisfactory enough. It helps reduce nesting in my opinion.

[@vojtechsebo4119]

Thx for video 🙏🏼 Please do something similar where you will work with DOM 😉

[@Fachuro]

Wouldn't it be better to do the error handling with a try ... catch? Call youe validate(user) function and instead of returning either 'valid' or and errors array, just await its completion an throw the errors from within the function if validation doesnt pass, that way you can contain your printError logic to the catch statement and you dont have to evaluate as many expressions for code completion if the code passes validation, also then by containing your saveUser function within the same try block you can be certain that code cant be reached if an error is thrown...

[@LavotiJoelVinayKumar]

This is what a senior dev easily identifies.

[@nmanikiran]

Do we need to create *readlineInterface* multiple times (one for each askQuestion)?

[@kamiladamczyk9369]

If i understand it good, createInterface gives or "opens" the possibility to print to console and read input, but it needs to be closed eventually. In the noob version, it was opened at the beginning of the code and being closed as the last thing in the function. In advanced part every askQuestion call uses the close function, so every call has to open it before it starts doing its job. That's how I see it

[@ItsGosho]

Im not sure that a pro developer will create every time a instance of the readline, instend he will use it as singleton

[@boring-username]

Agree, but I'm not a pro, so I have a probing question. How would you know the singleton is done being used so that you know when to close it?

[@peterheijstek5288]

Singleton is probably the most controversial design pattern, therefore many developers tend to avoid it if possible. Especially when performance is not an issue

[@brandonj5557]

@@peterheijstek5288 You are right, I'm an iOS developer and using a singleton in your applications is like a sin to most devs. I don't think singletons are that bad when you need an object that needs to be alive during the whole application, for example a current user session.

[@peterheijstek5288]

@@brandonj5557 Yep, singletons make testing harder to do, because of the dependencies/tight coupling

[@germangamboa3421]

I would actually create a function that takes in the questions as an async callback so when all the questions are asked the callback returns and my outer function can perform any clean up it needs.

[@apmcd47]

At approx 6:14 you say that the interface has to be passed to the function askQuestion(). This is not true as the readlineInterface is defined external to both askQuestion() and main(). To make that statement true you could place the definition of readlineInterface in main(), which actually makes sense to do so as that is where you have to close it.

[@awekeningbro1207]

19:46, ok i am a little bit confused here, the if block of `validateRequiredMessage` and `validateLengthMessage` will only run when their conditions returns truthy value, so if the `required` is set to false or if the `length` is set to 0, the validations function won't run anyway...what's that about am i missing something here?

[@grzegorzzimnoch4463]

great video but same as in part 1 i am confused why dont you use arrow syntax for functions ? asking as a begginer

[@Allsjr]

Is there a repo that holds this code? Would like to take a closer look.

[@clydegrey5060]

Great video. Quick question: in the advanced version of the save & validate example, you have a return statement in the errors.length > 0 if statement. I presume the return statement is what is preventing the saveUser() from executing, which makes sense, if you have errors you don't want to save the user. The question I have is how is the return statement preventing this as you are not inside a function block?

[@alexlegard6245]

Could you make a video like this, but for semantic HTML and CSS?

[@BelajarPemrogramanPemula]

notif, listening .. start to meet this channel when I look for face recognition

[@enricoferaldokalengkongang6905]

I know a lot of basic or fundamentals but i didn't know how to implement in making a real world project

[@bubbagee4853]

Nice

[@TheKseon]

Thanks for great video. I don't think about that nested code like noob version in first example can by clean up using Promises. I try to remember about this concept. But in last example in pro version, I think than code could be improved using open-closed principles in validation for more reusable function than validationMessage.

[@pestrinmarco]

thank you... good video

[@user-ym8sp2yi1k]

why aren't you using try/catch for the fat problem? just wondering

[@davidjrosita496]

how about a master developer code approach? hehe

[@ridl27]

Kyle, could you share the code ? it would be nice to look at it from time to time :D

[@srinathsathyanath7435]

Hey, do you use a mechanical keyboard? Sounds nice!

[@franco-cespi]

Another grate video!

[@drnovikov]

Why is logging placed before calling createUser? What if there will be errors?

[@erzengaming]

You forgot Hacker var name = prompt("Whats your name"); var job = prompt("Whats your name"); var age = prompt("Whats your name"); console.log("Hello " + name + "You are " + age + "year old" + job); lol this is 100% better xd

[@NorteXGame]

Great vid, however, I think the 3rd (pro) version of fat functions was a bit of an overkill. You didn't save a ton and if you were sharing the code with someone else, the other developer would be more confused about how everything is happening than in the 2nd (advanced) version. I pretty much lost track when you showed the external file.

[@Timooooooooooooooo]

If this was the entire application, I would agree with you. However, a real world application will usually have dozens of models with dozens of properties, many of which need validation. In that case, the advanced solution would have loads of code duplication.

[@NorteXGame]

@@Timooooooooooooooo Fair

[@Al_Gonzo]

Hey Kyle, will you make a game for your next course?

[@rajabhishek4973]

Awosem please part 3

[@sniperhawk6969]

So in the pro version of async (6:53) could we jus use an async iife instead of defining a function and calling it?

[@smsibasish]

What's your take on refactoring? Everyone of us at some point in our career must have contributed to a huge codebase by such noob codes. They should have been handled in the review process but say your codebase is suffering from plenty of noob codes here and there and test coverage is not that great. How should we approach refactoring such a codebase since it's not the priority of the management because at the end of the day "it works"?

[@WebDevSimplified]

I generally would refactor that code as I needed to make changes to it. I wouldn't go out of my way to refactor it.

[@reymarkandog1441]

You don't use semicolumn anymore?

[@mming_my]

Part 3 - typescript

[@davison0976]

So, to understand a noob code one has to look at a half of a screen. To understand a pro code one has to follow different calls made to different functions segregated in separate files, scrolling a few pages up and down in the process. And that's for a functionality that is unlikely to be extended in the future. I guess the next series of videos can be about when it does and when it does not make sense to over engineer, hahaha.

[@yoanbello6891]

what of your videos you recomend for learn html, css and javascript because you dont have any complete crash course on javascript, html and css

[@rafaelpernil]

I don't agree with your implementation of the last example of pro code, I would change the following on validationMessages: Use forEach instead of reduce. In this case reduce does not provide an advantage, you are mutating an object. Destructure requirements as { required, length }. Simplifies the code Give proper names to your functions: There is no verb , so the action is not clear. I would name it: getValidationMessages Use spread syntax and optional chaining instead of double-nested ifs: errors[property] = [...validateRequiredMessage(object?.[property]), ...validateLengthMessage(object?.[property], length)]. Safer and simpler P.S. If this were Typescript, I would have implemented an interface for validations. It would make the code much more readable.

[@lucianosantillan164]

Hi bro! I have a question.I think your method called AskQuestion is doing two thinks: asking, waiting for the response, and returning it.

[@davidkoleckar4337]

Nice vid :)