Тёмный

JS Code Structure Moving Beyond Beginner 

Steve Griffith - Prof3ssorSt3v3
Подписаться 101 тыс.
Просмотров 13 тыс.
50% 1

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...

Опубликовано:

 

28 июл 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 76   
@senseicodes
@senseicodes 3 года назад
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
@mohammadhosein6847 3 года назад
Good summer night with heartsome crickets sound in background 😍
@AseDeliri
@AseDeliri 3 года назад
Steve is a gifted teacher. Honestly man do a WHOLE course HTML + CSS + JS and I'll be first to sign up.
@keronwilliams5392
@keronwilliams5392 2 года назад
This video changed my life!!!!!! Thank you!!!
@Pokemonman44441
@Pokemonman44441 2 года назад
If i could have found your video 1 year ago I would be set right now lol. THanks for this vdeo!
@mikaeileghbal5695
@mikaeileghbal5695 2 года назад
The best video i have ever watched about js. Thank you a lot. You are awsome.
@rizud5122
@rizud5122 3 года назад
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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Congratulations! Glad I could help. What was the certification?
@rizud5122
@rizud5122 3 года назад
It was Microsoft’s 70-480 Javascript html css one :-)
@pure4lyfe5
@pure4lyfe5 Год назад
I love this video. it's unbelievable how little views this has
@AbhishekAnshuuu
@AbhishekAnshuuu 2 года назад
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
@dotsa1002 2 года назад
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
@amitbiswas1885 3 года назад
I have seen many. But your teachings are unique. You love what you do without any expectations and that's the difference.
@ricardodesirat2590
@ricardodesirat2590 2 года назад
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! RU-vid 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
@americovaldazo4441 3 года назад
I'm in love with your channel, man. Thank you. Américo. From Argentina.
@joebuono8793
@joebuono8793 3 года назад
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
@williaamlarsson 3 года назад
Aperture Science approves this video
@jocelines5578
@jocelines5578 2 года назад
Another great video from Steve. Thanks for taking time to structure and explain in depth step-by-step. A gem on best practice!
@DRocksRecords
@DRocksRecords 3 года назад
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
@kezevraanwar2 2 года назад
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
@nikitak9628 2 года назад
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
@amerrashed6287 3 года назад
Awesome as usual. We hope to discuss how we structure js app in functional programming paradigm
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
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
@ProfessorSyndicateFranklai 3 года назад
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
@rmnkot 3 года назад
The best content from you, as always!!
@CameronFrederick
@CameronFrederick 10 месяцев назад
Well said professor, thank you.
@llewq
@llewq 8 месяцев назад
So good! Thank you so much for this. Super helpful!
@vikastravelchaser
@vikastravelchaser 3 года назад
This channel is gold ❤️
@somethingprogrammed426
@somethingprogrammed426 3 года назад
all i wanted to say is Thanks steve you made our life better.
@chesterxp508
@chesterxp508 2 года назад
Another very cool tutorial!
@barungh
@barungh 3 года назад
Awesome content ! Every second of the video is informative Thank You Respect
@alejandrorodriguezlopez5266
@alejandrorodriguezlopez5266 3 года назад
Thanks a lot for this videos, you are making this crisis much more enjoyable and hopeful.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Thanks.
@libertad83y
@libertad83y 3 года назад
you targeted right the good spot Steve, very pertinent!
@essohanamalou7662
@essohanamalou7662 2 года назад
Simple and clear. Thank you
@djlee0721
@djlee0721 2 месяца назад
Eye opening 💡💡💡... Thank you!!!!
@pini01ru
@pini01ru 3 года назад
You are doing a great job! Thanks
@jeanmarcpourchel307
@jeanmarcpourchel307 3 года назад
Really really brilliant ! Thank you so much !
@maximk7816
@maximk7816 3 года назад
Thank you! Great info!
@raisanjmr
@raisanjmr 3 года назад
Nice channel to learn JavaScript.
@ethernet764
@ethernet764 Год назад
01:07 basic code structure 03:06 namespaces 08:35 immediately invoked function expressions 14:30 modules
@jivanmainali1742
@jivanmainali1742 3 года назад
It's so great!
@CptBumFlufff
@CptBumFlufff 3 года назад
You rock man, thanks so much!
@robertng4666
@robertng4666 3 года назад
I like the cricket chirping int he background.
@HossamKhalaf-sr1oo
@HossamKhalaf-sr1oo 3 года назад
A Real GEM!! thanks..
@karlotomic1602
@karlotomic1602 2 года назад
This is gold
@Mari_Selalu_Berbuat_Kebaikan
@Mari_Selalu_Berbuat_Kebaikan 4 дня назад
Let's always do alot of good
@ahmedjamal9676
@ahmedjamal9676 3 года назад
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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
i have a playlist for DOM and another for ES6 features. Check my playlist page.
@userbilas
@userbilas 3 года назад
Perfect! As usually I love it) but what don't do you use in your vs code? Looks simple and calm.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Do you mean the font? Jet Brains Mono
@userbilas
@userbilas 3 года назад
@@SteveGriffith-Prof3ssorSt3v3 "don't" - that was font, sorry) Thanks!
@nixes1636
@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
@SteveGriffith-Prof3ssorSt3v3 Месяц назад
It loads earlier but doesn't run until after the DOM is ready.
@nixes1636
@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
@senseicodes 3 года назад
Hey Steve, can you do a video about bundlers, maybe preferably rollup. It would be greatly appreciated.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Have a look here to see if others have requested ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LCezax2uN3c.html and vote on tutorials you would like to see.
@mudandmoss4132
@mudandmoss4132 3 года назад
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
@senseicodes 3 года назад
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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Well said.
@adicide9070
@adicide9070 3 года назад
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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
I dont use it. Looked at it back when Angular 2 came out. Instead decided to drop Angular in favour of React.
@adicide9070
@adicide9070 3 года назад
@@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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
@@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
@adicide9070 3 года назад
@@SteveGriffith-Prof3ssorSt3v3 cool, thanks
@mohammedakel520
@mohammedakel520 3 года назад
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
@SteveGriffith-Prof3ssorSt3v3 3 года назад
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
@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
@TheAppumone 3 года назад
Cake is a lie 🤣 nice reference
@carusosiza154
@carusosiza154 3 года назад
Cracker Steve. And loving the crickets.
@20toninho
@20toninho 2 года назад
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
@rahulraidas9481 3 года назад
Please can you make a site using js
@Fooney1
@Fooney1 Год назад
No one talks about this.
@noggin86
@noggin86 2 года назад
It's 2020, why not just use classes?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
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.
Далее
Managing User Permissions with Bitwise Operators
16:17
JavaScript Classes vs Prototypes
14:39
Просмотров 62 тыс.
ШАР СКВОЗЬ БУТЫЛКУ (СКЕРЕТ)
00:46
WSL Installation
11:10
Просмотров 25
Visually Understanding JavaScript Prototypes
14:58
Просмотров 52 тыс.
Tagged Template Literals
11:11
Просмотров 10 тыс.
How Senior Programmers ACTUALLY Write Code
13:37
Просмотров 1,4 млн
How to create a Web Component using Vanilla JS
17:45
Просмотров 65 тыс.
JavaScript Clean Code
13:28
Просмотров 23 тыс.
JavaScript Pro Tips - Code This, NOT That
12:37
Просмотров 2,5 млн
Learn JavaScript DOM Traversal In 15 Minutes
14:44
Просмотров 220 тыс.
STOP Using Classes In JavaScript | Prime Reacts
14:02
Просмотров 224 тыс.