JS Code Structure Moving Beyond Beginner
Вставка
- Опубліковано 18 вер 2024
- 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.co...
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 💯💯
Good summer night with heartsome crickets sound in background 😍
Steve is a gifted teacher. Honestly man do a WHOLE course HTML + CSS + JS and I'll be first to sign up.
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!
Congratulations! Glad I could help. What was the certification?
It was Microsoft’s 70-480 Javascript html css one :-)
I have seen many. But your teachings are unique. You love what you do without any expectations and that's the difference.
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.
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!
UA-cam 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.
The best video i have ever watched about js. Thank you a lot. You are awsome.
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!
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.
I love this video. it's unbelievable how little views this has
Awesome as usual. We hope to discuss how we structure js app in functional programming paradigm
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.
If i could have found your video 1 year ago I would be set right now lol. THanks for this vdeo!
I'm in love with your channel, man. Thank you.
Américo.
From Argentina.
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!!!
Another great video from Steve. Thanks for taking time to structure and explain in depth step-by-step. A gem on best practice!
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.
Aperture Science approves this video
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.
This video changed my life!!!!!! Thank you!!!
This channel is gold ❤️
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!!
all i wanted to say is Thanks steve you made our life better.
Another very cool tutorial!
Well said professor, thank you.
Simple and clear. Thank you
01:07 basic code structure
03:06 namespaces
08:35 immediately invoked function expressions
14:30 modules
So good! Thank you so much for this. Super helpful!
you targeted right the good spot Steve, very pertinent!
Eye opening 💡💡💡... Thank you!!!!
Thanks a lot for this videos, you are making this crisis much more enjoyable and hopeful.
Thanks.
The best content from you, as always!!
I like the cricket chirping int he background.
Nice channel to learn JavaScript.
Thank you! Great info!
Awesome content !
Every second of the video is informative
Thank You
Respect
This is gold
You are doing a great job! Thanks
Really really brilliant !
Thank you so much !
thank you so much
Let's always do alot of good
A Real GEM!! thanks..
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
i have a playlist for DOM and another for ES6 features. Check my playlist page.
Perfect! As usually I love it) but what don't do you use in your vs code? Looks simple and calm.
Do you mean the font? Jet Brains Mono
@@SteveGriffith-Prof3ssorSt3v3 "don't" - that was font, sorry) Thanks!
You rock man, thanks so much!
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
Hey Steve, can you do a video about bundlers, maybe preferably rollup. It would be greatly appreciated.
Have a look here to see if others have requested ua-cam.com/video/LCezax2uN3c/v-deo.html and vote on tutorials you would like to see.
Great video. I wonder why you didn't put script tag in the head if it loads only after the DOM had loaded already.
It loads earlier but doesn't run until after the DOM is ready.
@@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.
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?
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.
It's so great!
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?
I dont use it. Looked at it back when Angular 2 came out. Instead decided to drop Angular in favour of React.
@@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.
@@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.
@@SteveGriffith-Prof3ssorSt3v3 cool, thanks
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?
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.
Well said.
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?
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
Cake is a lie 🤣 nice reference
Cracker Steve. And loving the crickets.
No one talks about this.
Please can you make a site using js
It's 2020, why not just use classes?
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.