Client-side vs Server-side, Front-end vs Back-end? Beginner Explanation of JavaScript on the Web

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ย. 2024

ความคิดเห็น • 135

  • @timbaxter5669
    @timbaxter5669 10 หลายเดือนก่อน +17

    The visual representation of placing server and client next to each other was suuuuuuper helpful. Thanks!

  • @nikitauday5137
    @nikitauday5137 2 ปีที่แล้ว +33

    This is exactly the kind of content I have been looking for when I left university. Really glad to find this, Thank you so much for sharing. 😊😇

  • @dionito70
    @dionito70 2 ปีที่แล้ว +11

    25 years developing professionally, last 10 doing services' back ends, and I had a good laugh with this video. Could not have explained it better. Keep'em coming!!

  • @neilranada
    @neilranada 2 ปีที่แล้ว +1

    Thanks for clarifying the difference between client-side vs server-side JavaScript! This is the best explanation I've seen.

  • @yawar110
    @yawar110 ปีที่แล้ว +2

    I loved the way you are using your "movable window" to point out server/ server code and client instead of using those red lines / pointers. When a trainer is having fun in teaching, students have fun in learning :)

  • @mjylove2
    @mjylove2 4 หลายเดือนก่อน +1

    this is so beautiful...i almost cry because this concept was so hard to grasp...i finally think i can understand what it means to be "on the server side" and "on the client side" thank you!

  • @WhileSilent
    @WhileSilent 5 หลายเดือนก่อน +1

    your window and cursor manipulation is impeccable. Made it entertaining and easy to understand what you were saying

  • @HossamKhalaf-sr1oo
    @HossamKhalaf-sr1oo 2 ปีที่แล้ว +2

    Real understanding of the basics is the key to understand the more complicated topics, thanks a million

  • @yaswanthtogarapu8458
    @yaswanthtogarapu8458 2 ปีที่แล้ว

    this is exactly what the beginners want the content for understading the differnce

  • @Kjrack-u9v
    @Kjrack-u9v 9 หลายเดือนก่อน +2

    Clear and concise. A+. Loved it when you said for "Mom and Dad" 🙂

  • @eziola
    @eziola 7 หลายเดือนก่อน

    Love the "Stuff they didn't teach you" beginner videos. I think there is a large audience of professionals in other fields who just need to know this stuff to get things done. Thanks! I hope you keep making these types of videos!

  • @ashleymudra99
    @ashleymudra99 2 ปีที่แล้ว +14

    I appreciate how you break this down for us beginners! Thank you! I've had the same confusion and your explanation helped. I'd love to see how you would break down what an actual API is, without using the restaurant-waiter analogy, but with code like in this video

  • @raitup00
    @raitup00 5 หลายเดือนก่อน

    I 'm a beginner, and the way you explained these concepts was exceptional!

  • @chillryan
    @chillryan 2 ปีที่แล้ว +12

    This is absolute great video Scott. Loved the way you explained it. I think going over server-side rendering would be a nice progression.

  • @semimaths
    @semimaths 2 ปีที่แล้ว +26

    Explanation of processes and threads on windows would be nice.

  • @mattcargile
    @mattcargile 2 ปีที่แล้ว +1

    Thanks Scott! Good to see you! I always enjoy when you talk out technical acronyms. In this case http.

  • @GaryKGaming
    @GaryKGaming 2 ปีที่แล้ว +1

    Thanks Scott! I don't really need these videos but I just watch them because you are an all around good egg 😊

  • @mvnworldyou
    @mvnworldyou หลายเดือนก่อน

    You're a truly gifted communicator 👍

  • @phucnguyen0110
    @phucnguyen0110 2 ปีที่แล้ว +1

    Perfectly explained, thank you, Scott!
    Before I transitioned into a developer, I am a semi-fluent computer user and I was working as a technical support agent - so I did have a slight clue about the topic (without diving too deep). And I ended up learning them more as I wanted to become a (web) developer, but still refreshing to see someone with the technical skill and experience like you breaking it down!

    • @Jack-ol4yq
      @Jack-ol4yq 2 ปีที่แล้ว

      whats web development like?

  • @salamander1782
    @salamander1782 2 ปีที่แล้ว

    Thanks so much for taking your time to share stuff like this. I really like that you're straightforward with the information so I don't have to skip half of the video where the creator is talking about something else.

  • @lonniewatson9109
    @lonniewatson9109 2 ปีที่แล้ว +1

    Yes it is very 101 but Had that kind of clarity been available to me decades ago I may still have a full head of hair today at 55...
    Great as always...

  • @spstc967
    @spstc967 2 ปีที่แล้ว

    I dont know why but your voice is so relaxing I could listen to you all day long. Love your content btw

  • @alanjrobertson
    @alanjrobertson 2 ปีที่แล้ว +2

    Your explanations are absolutely superb, thanks Scott 👍

  • @adamshwehne
    @adamshwehne 2 ปีที่แล้ว

    Gosh your way of teaching is soooo good.. the info come so easy and plain out of your mouth .. and the subjects you choose are just great.. I am a FE developer and yet I find this video very informative.. keep up the good work Sir.

  • @devhulk
    @devhulk 2 ปีที่แล้ว

    The "Bob Ross" of coding. Love it.

  • @sigma_675
    @sigma_675 2 ปีที่แล้ว

    I love this video. Basics like this were never made clear to us, but this video clarified everything. Thank you very much👍

  • @neyandeva4
    @neyandeva4 2 ปีที่แล้ว

    A great video Scott. The way you narrate things is really good.

  • @randolphschreiner4479
    @randolphschreiner4479 2 ปีที่แล้ว +1

    Much appreciated. It is a bit confusing when learning to write JS many tutorials have everything run as a client side program. It is good for learning the concepts but makes it difficult to translate over to creating server side projects. This answered many questions for me.

  • @alinesinclaire2854
    @alinesinclaire2854 ปีที่แล้ว

    man FINALLY! thanks you soooo much! I was struggling so much with this concept, you are my hero!

  • @jesusdacoast872
    @jesusdacoast872 9 หลายเดือนก่อน +1

    Thank you very much, nice , clear and concise explanation

  • @ThyagoRibeiro-k2k
    @ThyagoRibeiro-k2k หลายเดือนก่อน

    Very good video! It helped me understanding a concept that I was passing by without paying the correct attention

  • @LadyLatency
    @LadyLatency 2 ปีที่แล้ว

    great stuff Scott! One small thing I would show (which I have found helpful for students) is to run 'ss -tunlp' or 'netstat -tunlp' to show them what it looks like for it to be 'listening'. small addition , but i have found it really helpful since students can now "visualize" whats happening behind the scenes.

  • @idanbarhom
    @idanbarhom ปีที่แล้ว

    this is the video i'm looking for.
    i'm a first year computer science student and have a webDevelopment project.
    suffers from the same issue...
    ty!!!!

  • @DiomedesDominguez
    @DiomedesDominguez 2 ปีที่แล้ว

    I think that I love the fact that I can hear the 3D printer working on the background. Almost every day I code with the same background "music".

  • @AlejandroSanchez-ls4hh
    @AlejandroSanchez-ls4hh ปีที่แล้ว

    Wow. Really good teaching skills. Your nephew is very lucky 👍

  • @thejeffkershner
    @thejeffkershner 2 ปีที่แล้ว +1

    You are an excellent teacher.

  • @tjwreds1
    @tjwreds1 2 ปีที่แล้ว +1

    good video, moving yourself around and pointing cracked me up.

  • @devine_noise
    @devine_noise 2 ปีที่แล้ว

    You're a great teacher Scott!

  • @zhimu-s8e
    @zhimu-s8e 7 หลายเดือนก่อน

    Good. It`s very suit for me. For a new project, I'm learning server-side development

  • @SauravKumar-vj7ks
    @SauravKumar-vj7ks 2 ปีที่แล้ว

    Scott , this is really an awesome explanation. You just right away earned a subscriber with this video. Great content man. Please try to explain processes and threads on windows in the next video.

  • @PrafullKotecha
    @PrafullKotecha 2 ปีที่แล้ว

    I just realized Scott would be a very good sleep-story reader on "Calm"!!

  • @Contradi
    @Contradi 2 ปีที่แล้ว +2

    This stage of my learning is far behind me but if I had had an explainer like this then I would have probably made it further, sooner. Great video as always.
    I love sending these types of videos to friends who ask.

  • @anderlabaka3287
    @anderlabaka3287 2 ปีที่แล้ว +5

    Love this content, thank you so much!!
    I've ended up being an RPA developer (not sure how) and been doing that for the last 4 years. I can develop decently, but don't have the computer science background because I studied something else. This type of video is invaluable for profiles like me - it helps us get general/basic knowledge that I sometimes feel ashamed of not knowing working as a developer.. So thank you!!!
    Just out of curiosity, although probably has nothing to do: is what you have used to write logs on the client side (line 10) what could be used to run undesirable scripts on someone else's computer? I imagine it must be much more complicated than that, but just made me think about it

  • @muddy11112
    @muddy11112 10 หลายเดือนก่อน

    This is a great explanation. Much appreciated

  • @Rohit-nn9ky
    @Rohit-nn9ky 2 ปีที่แล้ว

    Thank you for making it sound so simple. Subscribed!!

  • @Anbu_Sampath
    @Anbu_Sampath ปีที่แล้ว

    Loved the way you explained it.

  • @laxlyfters8695
    @laxlyfters8695 ปีที่แล้ว

    Amazing explanation!!!! Another great beginner video would be to go over the event loop in javascript

  • @nurillaewmuzaffar
    @nurillaewmuzaffar 14 วันที่ผ่านมา +1

    Great video

  • @EzerGetulio
    @EzerGetulio ปีที่แล้ว

    What an amazing explanation! Thank you so much!

  • @justinmiller3349
    @justinmiller3349 2 ปีที่แล้ว +2

    Hey Scott, I'd love to see a video disambiguating classic asp vs asp.net vs asp.net core vs .NET etc. As someone who hasn't done much development inside the microsoft ecosystem I find it a bit confusing to navigate. Thanks again for the great content.

    • @doowruc
      @doowruc 2 ปีที่แล้ว

      Some of that is covered in this video: th-cam.com/video/bEfBfBQq7EE/w-d-xo.html

  • @prateekjha6862
    @prateekjha6862 2 ปีที่แล้ว +3

    Can you make a video on client side rendering VS server side rendering? Great video as always Scott :D

  • @soccerman1998
    @soccerman1998 2 ปีที่แล้ว

    Amazing video!!! Thank you for the continuous great content

  • @LewisKo
    @LewisKo 4 หลายเดือนก่อน

    best explanation ever. thank you sir

  • @georgeschangler2106
    @georgeschangler2106 9 หลายเดือนก่อน

    Your methodology is excellent. You would do great, if you create courses for programmers.

  • @Saadet-jp6lr
    @Saadet-jp6lr ปีที่แล้ว

    lit my last year in the univ- cs. and iwas looking for such a video.

  • @dave4347
    @dave4347 2 ปีที่แล้ว

    This is absolutely great and so useful, even for someone like me who's been doing this for 10+ years. You have such a simple and clear way of explaining things, and not with a single ounce of ego. Oftentimes, this is the kind of explanation developers in the workplace need but don't get due to assumption of knowledge or egos getting in the way.

  • @ThePakman90
    @ThePakman90 16 วันที่ผ่านมา

    This was a great video, I really appreciate it.

  • @omedjamal7509
    @omedjamal7509 2 ปีที่แล้ว

    Great. would be nice if you could go over the benefits and drawbacks of each side of these two rendering and how and when to use them.

  • @SteveRogers-gc6hg
    @SteveRogers-gc6hg 6 หลายเดือนก่อน

    Thank you very much for this video it was really clarifying!

  • @bagorolin
    @bagorolin 2 ปีที่แล้ว

    Nice video and good example to make the concepts clear. One remark client- and server-side is not the same as front- and backend. I would remove this from the title. Frontend is User-Interface related and backend is all the rest.

  • @swamiv330
    @swamiv330 2 ปีที่แล้ว +1

    Can you please make an video on how we can use browser debugging tools to identify common web page errors/issues ?

  • @avanthasiriwardana
    @avanthasiriwardana 2 ปีที่แล้ว

    Great stuffs as usual Scott

  • @JohnZuccarelli
    @JohnZuccarelli ปีที่แล้ว

    Hey Scott, love and the video and your terminal setup! Any chance you could share the theme and colors you are using for your terminal?

  • @adamohm
    @adamohm 2 ปีที่แล้ว

    Very good video, very basic but it is always nice to get some repetition!

  • @acodersjourney
    @acodersjourney ปีที่แล้ว

    Thanks for the great content. Keep it up!

  • @johngreenstreet9347
    @johngreenstreet9347 2 ปีที่แล้ว

    This is really very helpful. Thank you.

  • @fruittech2944
    @fruittech2944 ปีที่แล้ว

    Thank You Mr. Scott

  • @adnana4073
    @adnana4073 2 ปีที่แล้ว +1

    love your beginner video .
    we all love to code and I want to see videos about architect an application as a fundamental video
    I feel the roadmap to building an application is not that clear with architecture. should the app be monothic , layers or m microservies .
    I hope you understand my concern
    Thank you Scott. : )

  • @its_bea.x
    @its_bea.x 2 ปีที่แล้ว +1

    The difference between client side and server side rendering in relation to frontend development

  • @rayantovi
    @rayantovi 2 ปีที่แล้ว

    i don't understand this..
    is this a front-end or back-end youtube bug, because you're hella underrated!

  • @averyjohnson675
    @averyjohnson675 10 หลายเดือนก่อน

    Great instructor

  • @sigma_675
    @sigma_675 2 ปีที่แล้ว

    I love this video. Thank you very much👍

  • @darkice83
    @darkice83 2 ปีที่แล้ว +1

    Care to elaborate why a script tag is bad practice? Is it because JavaScript should be kept in a separate file and then referenced in the html?

  • @nafizimtiaz3539
    @nafizimtiaz3539 10 หลายเดือนก่อน

    Awesome explanation !!

  • @princeverma7695
    @princeverma7695 3 หลายเดือนก่อน

    great presentation

  • @MathCuriousity
    @MathCuriousity 4 หลายเดือนก่อน

    What was great! Do not worry about things being “too basic”! It was perfect for a noob like me. I have a question - don’t laugh: I thought servers are elsewhere - but you said it was “on your computer”. How does that work?!

  • @rahulg9414
    @rahulg9414 2 ปีที่แล้ว

    hey Mr scott. amazing content.

  • @jason-yb9qk
    @jason-yb9qk หลายเดือนก่อน

    okay so i have a question. I just read an article about three tier web app architecture and it says that the frontend is in a public subnet and the backend is on a private subnet Therefore, the backend is only accessible from the frontend ec2 (I use aws here as an example) instance and not from the public internet. My question is when a user in his laptop access the web which is the frontend ec2 instance and made a backend request (let's say the user clicks a button that has fetch("some backend url")) does the request come from the user's laptop or from the frontend ec2 instance? because if the request comes from the user's laptop does that mean it will not be allowed since the backend is only accessible from the frontend ec2 instance? or does the request is actually made from the frontend ec2 instance? Thank you in advance

  • @SnobbyLion
    @SnobbyLion ปีที่แล้ว

    Very helpful! Thank you

  • @mikael2746
    @mikael2746 2 ปีที่แล้ว

    Hi Mr. Scott. Please, can you tell me, if you want, what VS Code theme you use? Thanks.

  • @MrTranton
    @MrTranton 2 ปีที่แล้ว

    Hey Scott, i’d love to know what tool you use for zooming and annotating

  • @gugildak12
    @gugildak12 2 ปีที่แล้ว

    Nice, clear, explanation. thx

  • @totfosk
    @totfosk ปีที่แล้ว

    awesome editing!

  • @MathCuriousity
    @MathCuriousity 4 หลายเดือนก่อน

    Another thing I didn’t understand: you didn’t show the code for how your server was accepting “localhost5000”, where did you write that code?

  • @mohammaddr4652
    @mohammaddr4652 หลายเดือนก่อน

    thanks a lot . that was very helpful to me

  • @satishkumasi2326
    @satishkumasi2326 2 ปีที่แล้ว

    Great video sir. Vlookup in excel

  • @dovids.greenberger435
    @dovids.greenberger435 2 ปีที่แล้ว

    Thank you this was great!

  • @scotthanselperson892
    @scotthanselperson892 2 ปีที่แล้ว

    How many comments are hidden? I'm looking forward to the next expo.

  • @sanjivdhungel9762
    @sanjivdhungel9762 2 ปีที่แล้ว

    I watched and found useful.

  • @r7boatguy
    @r7boatguy 2 ปีที่แล้ว

    Scott, have you played around with Home Assistant? It's been a long time since I've been seriously programming, but playing around with HA to create some client-side widgets in JS, it seems that the "client side has access to the server side", and you can actually reference server-side objects in the client-side code. I think there's some websockets stuff going on, but thought I'd ask if you knew how this works, since you seem to tinker with everything!

    • @shanselman
      @shanselman  2 ปีที่แล้ว

      surely, the same tech is how Blazor works - location transparency

    • @r7boatguy
      @r7boatguy 2 ปีที่แล้ว

      @@shanselman I'm non the wiser, so I guess that's on my list to look at some day!

  • @headlights-go-up
    @headlights-go-up 2 ปีที่แล้ว +2

    localHost 5000 sounds like the name of a nerdy high school garage band.

  • @mngavish
    @mngavish 2 ปีที่แล้ว

    @Scott Hanselman, what program are you using to record your videos? thx!

    • @shanselman
      @shanselman  2 ปีที่แล้ว

      OBS

    • @bagorolin
      @bagorolin 2 ปีที่แล้ว

      He has videos about OBS in his channel. Check those out, they are very helpful :) also a podcast with the initial founder if you are interested in background stuff :)

  • @pirateben
    @pirateben 2 ปีที่แล้ว

    i have a video idea like this and my questions are kinda specific but also has core concepts i want to know .... question i want to make an end 2 end encryption app/website .. this part is the specific part now to the core ... should i do the public privet key part on the client side or the server side ... two where should we store both the public keys and how to keep the privet one secret ... core part in simpler form ... when you run client side code vs server side code and where should we store the data client side or server side .. sorry i cant explain better

  • @letsgameco3514
    @letsgameco3514 2 ปีที่แล้ว

    Hello, I would to ask what a configuration for the console in Ubuntu do you use?

  • @airconditioner6576
    @airconditioner6576 ปีที่แล้ว

    Thanks scott.

  • @faith.chronicles-i3h
    @faith.chronicles-i3h หลายเดือนก่อน

    Very impressive

  • @anhtuannguyen1102
    @anhtuannguyen1102 2 ปีที่แล้ว

    Thank you so much!

  • @KRISHNAPRASADARYAL-ew1hl
    @KRISHNAPRASADARYAL-ew1hl ปีที่แล้ว

    that means some parts of code can be run on client side and other part must be run on the serser even though we make a code under a file name and run it, am i right, sir?

  • @JagTheRipper
    @JagTheRipper 8 หลายเดือนก่อน

    Hi I’m currently stuck in my project. I have created a user form with an app.js node backend file connected to MongoDB via an api.js files to mongoDB. I want to somehow add a client side script so that when a user interacts with a button, the page changes accordingly. But I can’t seem to do that on any js file because on console log client it says unable due to text/html MIME. I researched, it’s cause I can’t interact with the Dom while I have a server side rendering script. How do I get around this? Btw I’m also using ejs to help render my pages.

    • @JagTheRipper
      @JagTheRipper 8 หลายเดือนก่อน

      I noticed you said you send a JavaScript file over to the browser but also mentioned should not do this cause it’s bad. Was wondering if got any other method?

  • @parkvince5399
    @parkvince5399 2 ปีที่แล้ว

    Thank you a lot