JS Code Structure Moving Beyond Beginner

This tutorial will help guide you beyond the beginner level where you understand how to write functions, Objects, Arrays, work with the DOM, and can make AJAX calls but frequently question how you should arrange your code.
I walk you through basic procedural code, to namespacing your code, to using IIFEs for controlling access, and finally on to using ES6 Modules.
Code from video: gist.github.com/prof3ssorSt3v...

[@senseicodes]

Damn this is a gold tutorial. I have go rewrite most of my code in projects as an update. So clean and professional. Thanks Steve 💯💯

[@mohammadhosein6847]

Good summer night with heartsome crickets sound in background 😍

[@AseDeliri]

Steve is a gifted teacher. Honestly man do a WHOLE course HTML + CSS + JS and I'll be first to sign up.

[@keronwilliams5392]

This video changed my life!!!!!! Thank you!!!

[@Pokemonman44441]

If i could have found your video 1 year ago I would be set right now lol. THanks for this vdeo!

[@mikaeileghbal5695]

The best video i have ever watched about js. Thank you a lot. You are awsome.

[@rizud5122]

Hi Steve, I passed my certification today :-) While taking the exam, no joke, I could literally hear your voice in my head helping me answer questions. Although I believe that all the tutors on youtube are contributing in their own way and everyone is good in some way or the other, but I have to say that I am yet to come across a person who teaches in such an amazing way as you do. Lots and lots of best wishes for your channel to grow in leaps and bounds. Not only because you helped me but because the bigger this channel gets the more students across the world will benefit from your outstanding skills :-) Stay blessed!

[@SteveGriffith-Prof3ssorSt3v3]

Congratulations! Glad I could help. What was the certification?

[@rizud5122]

It was Microsoft’s 70-480 Javascript html css one :-)

[@pure4lyfe5]

I love this video. it's unbelievable how little views this has

[@AbhishekAnshuuu]

This reminds me of when I used to work with jQuery, I will always be excited to write code using Namespaces and revealing module patterns. But when I moved to Javascript frameworks like Angular and Vue, they already have everything sorted out that doesn't need this way of writing. I sometimes miss those times and flexibility and the little experiments I used to do. I still use these techniques here and there which keeps me satisfied.

[@dotsa1002]

No one else has taught this stuff on youtube, name spaces ect. By far the best video I've found and believe me I've seen many. Thank you.

[@amitbiswas1885]

I have seen many. But your teachings are unique. You love what you do without any expectations and that's the difference.

[@ricardodesirat2590]

Your videos are true lessons. You explain all the different scenarios for each situation (e.g. regular expression, ES5, ES6, arrow functions..). It's just so good! KZbin should definitely pin this video at the top of Programming! All Javascript programmers should watch this. Knowing how to start a project is just so good and fundamental information. Thank you, Steve.

[@americovaldazo4441]

I'm in love with your channel, man. Thank you. Américo. From Argentina.

[@joebuono8793]

Thank you, Steve. I'm at the point where I'm trying to tie all my knowledge together and this is exactly what I needed.

[@williaamlarsson]

Aperture Science approves this video

[@jocelines5578]

Another great video from Steve. Thanks for taking time to structure and explain in depth step-by-step. A gem on best practice!

[@DRocksRecords]

This is my favorite type of content because its rarely possible to stumble on experience based practical teachings... its hard to learn and even more to teach it... I really like the iife concept!

[@kezevraanwar2]

First vid iv watched of yours and instantly subbed! Great teaching style think I’m gonna be glued to your channel for a while haha. In regards to the topic, firstly, I think the fact that you’ve managed to pick up on beginners needing to understand this puts you in a teaching league of your own compared to most other YT channels I’ve personally come across. Secondly I can’t describe how much the topic resonates with me as I really needed this to take my beginner JS programming to the next level. I’m kind of at the point where I have my head around vanilla JS and some of ES5/6 stuff but don’t feel quite ready to move into a framework. After watching this I’m mega excited to create modular style JavaScript projects and I feel ill have a better understanding of what’s going on when I start learning a framework such as React. Seriously mate thanks a lot!!

[@nikitak9628]

Thank you so much for this video. I come from Ruby. I know how to organize code in Ruby but couldn't figure out organizing tricks in Javascript. This video solved the problems I was having. Thanks again!!!

[@amerrashed6287]

Awesome as usual. We hope to discuss how we structure js app in functional programming paradigm

[@SteveGriffith-Prof3ssorSt3v3]

I use the same structure and then functional programming within when appropriate. Forcing yourself to stick with functional or OOP only limits you from choosing the best tool for the situation.

[@ProfessorSyndicateFranklai]

Excellent tutorial, I like how you get straight to the point. EloquentJS does a more abstract explanation, for those interested, but your tutorial is very practical. I wish your video had come out two years ago, but I'm glad now that there's a resource that's now there for people who need it.

[@rmnkot]

The best content from you, as always!!

[@CameronFrederick]

Well said professor, thank you.

[@llewq]

So good! Thank you so much for this. Super helpful!

[@vikastravelchaser]

This channel is gold ❤️

[@somethingprogrammed426]

all i wanted to say is Thanks steve you made our life better.

[@chesterxp508]

Another very cool tutorial!

[@barungh]

Awesome content ! Every second of the video is informative Thank You Respect

[@alejandrorodriguezlopez5266]

Thanks a lot for this videos, you are making this crisis much more enjoyable and hopeful.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks.

[@libertad83y]

you targeted right the good spot Steve, very pertinent!

[@essohanamalou7662]

Simple and clear. Thank you

[@djlee0721]

Eye opening 💡💡💡... Thank you!!!!

[@pini01ru]

You are doing a great job! Thanks

[@jeanmarcpourchel307]

Really really brilliant ! Thank you so much !

[@maximk7816]

Thank you! Great info!

[@raisanjmr]

Nice channel to learn JavaScript.

[@ethernet764]

01:07 basic code structure 03:06 namespaces 08:35 immediately invoked function expressions 14:30 modules

[@jivanmainali1742]

It's so great!

[@CptBumFlufff]

You rock man, thanks so much!

[@robertng4666]

I like the cricket chirping int he background.

[@HossamKhalaf-sr1oo]

A Real GEM!! thanks..

[@karlotomic1602]

This is gold

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good

[@ahmedjamal9676]

Brilliant tutorial! I wish that you reorder your playlists For example, playlist for Js syntax Another one for dom Another one for bom Another one for es 6

[@SteveGriffith-Prof3ssorSt3v3]

i have a playlist for DOM and another for ES6 features. Check my playlist page.

[@userbilas]

Perfect! As usually I love it) but what don't do you use in your vs code? Looks simple and calm.

[@SteveGriffith-Prof3ssorSt3v3]

Do you mean the font? Jet Brains Mono

[@userbilas]

@@SteveGriffith-Prof3ssorSt3v3 "don't" - that was font, sorry) Thanks!

[@nixes1636]

Great video. I wonder why you didn't put script tag in the head if it loads only after the DOM had loaded already.

[@SteveGriffith-Prof3ssorSt3v3]

It loads earlier but doesn't run until after the DOM is ready.

[@nixes1636]

@@SteveGriffith-Prof3ssorSt3v3 Good point. So the website loads HTML and CSS a bit sooner if script tag is right before body end tag. Never thought of it.

[@senseicodes]

Hey Steve, can you do a video about bundlers, maybe preferably rollup. It would be greatly appreciated.

[@SteveGriffith-Prof3ssorSt3v3]

Have a look here to see if others have requested kzbin.info/www/bejne/gnTIq5SuZ9qBacU and vote on tutorials you would like to see.

[@mudandmoss4132]

Thanks Steve. Can you talk a little about naming variables? I see a lot of the time coders like to use isSomething e.g. isLoaded, isLoggedIn etc. This helps a lot with semantics. IS there a guide on when we should use something like this?

[@senseicodes]

I think a lot of coders do that for readability for both themselves and who ever is going to read their code so as to understand what this variable is doing or meant to. Same as functions and methods. Its a good practice though as I come back to code I have written and know exactly why I named that variable or function that way. Its cause is doing exactly what the name implies.

[@SteveGriffith-Prof3ssorSt3v3]

Well said.

[@adicide9070]

Thanks, Steve :) how about using TS in tutorials/projects? Are you not a fan? Where do you stand on TS in general? Perhaps a vid on that is already out there from you and I've missed it... If not, would it make sense to make one?

[@SteveGriffith-Prof3ssorSt3v3]

I dont use it. Looked at it back when Angular 2 came out. Instead decided to drop Angular in favour of React.

[@adicide9070]

@@SteveGriffith-Prof3ssorSt3v3 That's interesting, actually. Node and even React friends tell me that it's becoming the norm, especially on bigger projects. What do you reckon? I'm not biased towards TS here, not at all. In fact, perhaps the opposite.

[@SteveGriffith-Prof3ssorSt3v3]

@@adicide9070 I've known a few people who use it, who were used to things like enforced datatyping in other languages. I have not seen it much used in industry around me. Wouldn't call it the norm. People who like it will want to use it. Others already have enough to learn and wont choose to add another topic unless they have a solid reason that forces them.

[@adicide9070]

@@SteveGriffith-Prof3ssorSt3v3 cool, thanks

[@mohammedakel520]

When it comes to having multiple files, each with their own fetch requests. I am assuming that moving the base url into a separate file and exporting it from there to avoid repetition is one thing to do. Is there anything else that can be taken into account for a better code structure with all the fetches?

[@SteveGriffith-Prof3ssorSt3v3]

I would tend to put the functionality for doing the fetches in one file and then pass the URLs to those functions. Put the base URL(s) in that fetch file

[@pure4lyfe5]

Hello professor Steve, I'm back on this thread again. How does this fit together with factory functions and other objects? Could I do something like wrap an object around my factory function and dom methods? How do I pass args into my then object?

[@SteveGriffith-Prof3ssorSt3v3]

Not sure exactly what you are asking here. You've mentioned a lot of different things and this video talks about different approaches to writing code. If you are asking about putting a factory function inside a namespace, then you can do that. Arguments get passed to the functions the same way regardless of whether or not they are factory functions or not, and regardless of whether they are inside a namespace object, a module, an IIFE, a JS class, etc.

[@TheAppumone]

Cake is a lie 🤣 nice reference

[@carusosiza154]

Cracker Steve. And loving the crickets.

[@20toninho]

Do not use the same namespace or keyword this without chainability... instead leave a chainable variable like [ var $this = this ] to reference your namespace, otherwise, if for some reason u have to change the namespaces u'll have to change all of it inside the scope

[@rahulraidas9481]

Please can you make a site using js

[@Fooney1]

No one talks about this.

[@noggin86]

It's 2020, why not just use classes?

[@SteveGriffith-Prof3ssorSt3v3]

Because classes in JS are just wrappers around prototypes, because students need to understand how JS works before using syntactic sugar like JS classes, because React is moving away from classes and that is the next topic I teach my students, and because if you can understand how all the other stuff works you can pick up the class syntax in an hour.