Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators

Поделиться
HTML-код
  • Опубликовано: 14 янв 2025

Комментарии • 141

  • @NishantGupta_Neo
    @NishantGupta_Neo 9 лет назад +40

    You Sir! ... Are legendary when it comes to explaining hard to understand stuff !

  • @ntokozonkosi9720
    @ntokozonkosi9720 9 лет назад +1

    What I couldn't learn in 2 hours reading about promises, it all made sense in 14 minutes watching this video. I had one of those Wow experience here. Thank you very much man your teaching techniques works thumbs up

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      Ntokozo Nkosi Nice! Yeah, one of the reasons I do videos instead of blogs, is I find a lot of topics MUCH easier to learn via video instead of blog or slide presentation. Glad it helped you!

  • @NeilTruick
    @NeilTruick 9 лет назад

    Will, you are a rock star! You've saved my life again...
    I'm using Sequelize as my ORM on a current Express project. Sequelize uses promises throughout, but the examples don't help you understand promises if you don't already know how they work. I wanted my API routes and my Sequelize models decoupled, so I could support multiple database platforms for development, testing and production. My searches on Stack Overflow sent me down the callback path, but it just looked too confusing to me. A RUclips search on "javascript callback functions" showed this video fifth or sixth in the list, and I went straight here, because Will. 15 minutes later, my decoupling is working better than I envisioned! I've said it before and I'll say it again...you are a masterful communicator. Thank you...

  • @veeweeherman
    @veeweeherman 8 лет назад

    I've been watching your vids for over a year now. You rock. Thank you for posting :D

  • @drikting
    @drikting 8 лет назад

    Callback refresher and more! Indeed, Generators looks cleaner - Thanks for the share and effort to do these professional videos!

  • @theway5258
    @theway5258 9 лет назад +2

    The best and evolutionary approach to demonstrate necessity of promises and their next level abstraction. Great lesson!

  • @aryaravish
    @aryaravish 8 лет назад

    One of the best videos on promises on youtube. Crystal clear. Thanks a lot.

  • @nafishasnian1367
    @nafishasnian1367 9 лет назад +2

    Man you are the best Teacher ever! I like the way you explain EVERYTHING so clearly. You are definitely better than most university teachers.

  • @freemind9500
    @freemind9500 8 лет назад

    Amazing tutorials, you are probably the best I've seen regarding teaching coding in general. Very knowledgeable, interesting and great at explaining. Feels like I'm learning from a real professional!
    Thank you!

  • @xximo
    @xximo 7 лет назад

    I am never satisfied with programming video tutorials. You Sir are the exception.

  • @alexandersobolev5284
    @alexandersobolev5284 9 лет назад +3

    Very clear explanation! Man, it is truly important to have a right mentor and materials when you learn programming. Because when it is explained in such a way you do it, all these complicated JS concepts become easy. I really enjoyed this tutorial.
    P.S. In such moments I wonder why RUclips doesn't have a triple like button!

  • @nickang6647
    @nickang6647 8 лет назад

    This is UH-MAZING! Thanks a lot for explaining (successfully) the thing I've been stuck on for over a week. :)

  • @deelanmj
    @deelanmj 8 лет назад

    This was clearly explained! Finally understood how promises work. Thank you! Subscribed ;)

  • @SANDEEPAGRAWAL003
    @SANDEEPAGRAWAL003 7 лет назад

    Nicely and easily explained promises by taking a comparison with other ways of JS ASync.
    Your video was helpful. Thanks.

  • @VladyVeselinov
    @VladyVeselinov 9 лет назад +5

    Hahaha, "the code must go on", you rock Will!

  • @EverlastingUniverse
    @EverlastingUniverse 7 лет назад

    Good Way , Better Way, Best way and Awesome way!!! - You nailed it neatly, mate

  • @vedovelli
    @vedovelli 10 лет назад +3

    Nice video, thanks a lot for this class! The only inconvenience I see with GENERATORS is that it is easier to get lost. The PROMISSES .then() method makes me feel things are glued together, being easier to find out what depends on what. Generators don't bring this kind of visual clue. To more experienced developers, it is cleaner and beautiful, but my guess is novices will have a hard time using generators!

    • @learncodeacademy
      @learncodeacademy  10 лет назад +2

      I was just thinking that today!
      A new app I'm working on is in Koa, so I was converting code to generators...It got WAY cleaner, but I kept thinking I need to edit the syntax highlighting to make a yield line have a slightly highlighted background or something.
      A yield is a pretty big action that needs a clear visual cue.

    •  10 лет назад +2

      It will get easier as more code is written like that. It is just a paradigma shift. Nice video :)

  • @fancyydk
    @fancyydk 8 лет назад

    Very helpful! Promises make so much sense now. Thank you!!

  • @chibsryder
    @chibsryder 8 лет назад

    You are pretty awesome friend. Thanks for explaining all these concepts in a simple way

  • @kebien6020
    @kebien6020 8 лет назад

    Thanks! I just refactored a bit of code and now its really beautiful (to me, at least)

  • @karlmorrison2713
    @karlmorrison2713 9 лет назад

    Extremely good explanation, ta!

  • @kamillatosinski3054
    @kamillatosinski3054 8 лет назад +8

    And the Nobel Prize in simplifying things and explaining hard things in an easy, understandable way goes to... wait for it... Will Stern!

    • @learncodeacademy
      @learncodeacademy  8 лет назад

      +Kamil Latosinski Thanks Kamil!

    • @Filipmalek1
      @Filipmalek1 6 лет назад

      I think that's a general problem with people who spend a lot of time behind books without a lot of real-world knowledge... Not to take away their skill/knowledge but IME they tend to over-complicate things. Not the case here of course!!

  • @andyhoffman1135
    @andyhoffman1135 9 лет назад

    Great energy. Clear explanation. Thank you.

  • @ankamsarav
    @ankamsarav 9 лет назад

    One video for all Async concepts. Super awesome....

  • @emiremiroglu
    @emiremiroglu 10 лет назад +1

    love your tutorials man. thanks a lot!

  • @AjinkyaBorade
    @AjinkyaBorade 10 лет назад

    I really love ur videos. Everytime I learn something gr8 about JavaScript here. Please keep post :D

  • @lawjigga02
    @lawjigga02 9 лет назад

    Wow... this was easy to understand. Thanks dude.

  • @leanprogrammer
    @leanprogrammer 8 лет назад

    "The code must go on!" - best youtube quote ever!

  • @prabhusingh7481
    @prabhusingh7481 8 лет назад

    Finally understood these concepts.

  • @tm25695
    @tm25695 9 лет назад +3

    The Code Must Go On!!

  • @tmanley1985
    @tmanley1985 9 лет назад

    Every video of yours I watch, I get an "Aha!" moment. Even when I think I understand something.

    • @learncodeacademy
      @learncodeacademy  9 лет назад +1

      +tmanley1985 oh awesome to hear. That's the goal...take the "aha" moments that sometimes took me years to stumble across and put them out there.

  • @chuangxie9258
    @chuangxie9258 9 лет назад

    Nice Voice . Clear mind . Comfortable speed in speak. It is a cool video in js. THANKS a lot

  • @antoninarcher1358
    @antoninarcher1358 8 лет назад

    That was crystal clear, thanks!

  • @abhishekpatil5291
    @abhishekpatil5291 8 лет назад

    I liked the way you explained. Awesome.

  • @piinetu
    @piinetu 9 лет назад

    The best promise explanation....THx

  • @DeathByLight
    @DeathByLight 9 лет назад

    What mic do you use? Your voice quality is great!

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      Shareonfb If you're referring to the old videos like this I had a plantronics headset mic that sounded about like a telephone...now I use a blue showball - MUCH better.

    • @DeathByLight
      @DeathByLight 9 лет назад

      nice! thanks!

  • @MrRamshinde
    @MrRamshinde 9 лет назад

    Great Tutorial, Nice Explanation, Thanks a lot !!

  • @giridharshukla9407
    @giridharshukla9407 9 лет назад

    Awesome tutorial, generators and promises...........great

  • @cinquain0
    @cinquain0 5 лет назад

    That video explained a lot of good stuff. I do think you went overkill at the end tho

  • @80amnesia
    @80amnesia 9 лет назад

    Nice video, and yep... guess generators will be my new js thing.

  • @mestrestephane9087
    @mestrestephane9087 6 лет назад

    Great explanation ! Thanks

  • @alkolaqi83
    @alkolaqi83 10 лет назад

    Omg this should go in the playlist lol. Awesome awesome videos. I like you your style

  • @elfpimp1
    @elfpimp1 7 лет назад

    Just imagining what your es6 refactor would look like..

  • @ParmeetSingh108
    @ParmeetSingh108 8 лет назад

    Awesome tutorial..Thanks!

  • @kttalkZ
    @kttalkZ 9 лет назад

    Amazing video.. clean and clear :)

  • @choppedporks671
    @choppedporks671 8 лет назад +1

    When talking about promises on the server, you often say that a function will be waited on until it gets a response before calling .then(). Doesn't this abolish the point of async? Will the code be blocking if the response does not come through immediately? What would happen if the .get('data.json') took 5 seconds to complete?

  • @Tyc00nMan
    @Tyc00nMan 10 лет назад

    Awesome man, thank you

  • @OcTVids
    @OcTVids 8 лет назад

    WOW!
    Brilliant, thank you so much!!

  • @Joey-mv7ct
    @Joey-mv7ct 8 лет назад

    Awesome video thank you!

  • @kamaludeens734
    @kamaludeens734 6 лет назад

    Great Work

  • @SoeaOu
    @SoeaOu 10 лет назад

    thanks, really good explanation

  • @ossamahjaji7985
    @ossamahjaji7985 9 лет назад

    this is gold, thx a lot !

  • @isabellabowyer320
    @isabellabowyer320 7 лет назад

    Good video. Sorry about your bruised rib.

  • @suhailsullad
    @suhailsullad 9 лет назад

    nice tutorial... great job.

  • @AWESOMEJX271
    @AWESOMEJX271 9 лет назад

    This video is beautiful

  • @davidbrodie122
    @davidbrodie122 7 лет назад

    Once again, your videos do what about a hundred articles and other videos failed to - use the right examples to show the concept. Using jQuery Ajax calls is GENIUS since it's so much easier to conceptualize about the fact that the success function won't be called UNTIL AND UNLESS the ajax call has finished successfully. Thank you thank you thank you! I just got unstuck.

  • @mtsalis31
    @mtsalis31 9 лет назад

    does the awesome method looks a lot similar with node.js module.exports you think?

  • @maloman13
    @maloman13 10 лет назад

    New to web development here. Will generators become the new best practice when dealing with Async code? I ask this because the generator code look unbelievably clean, which is a very important thing.

    • @learncodeacademy
      @learncodeacademy  10 лет назад +1

      I certainly hope so. My company has adopted them completely on the backend with node.js
      On the browser side, adoption will grow as browser support grows without needing traceur. I know Chrome supports it now...not sure what else.

  • @smcrunner88
    @smcrunner88 7 лет назад

    Hmm when I switch to the generators script it doesn't make the call. The traceur route returns a 404 error

  • @EangFmbs
    @EangFmbs 8 лет назад

    Guess you got well :) Thank You Sir

  • @joshiprabhas
    @joshiprabhas 8 лет назад

    in the last part of the video with generators, how is it not blocking - yield will wait for the promise to resolve - so if i write a click handler below that - it will not go over to the click handler untill it comes out of that IIFE with all the yields

  • @jyotilondhe259
    @jyotilondhe259 7 лет назад

    the code must go on.. JS I LOVE YOU..

  • @DeepTitanic
    @DeepTitanic 8 лет назад

    Hi there thanks for your tutorial!
    Is clean callbacks asynchronous? Isn't each function waiting for success before moving on to the next block?
    Edit. I checked the docs for $.ajax and I think it's async by default?

  • @mvargasmoran
    @mvargasmoran 10 лет назад

    awesome stuff

  • @keliao2160
    @keliao2160 9 лет назад

    this video is awesomeeeee!!

  • @Ezreal223
    @Ezreal223 7 лет назад

    Very good explanation, however it seems that promises are way better than generators, since changing a file syntax and separating chained events is a mess and counter intuitive.

  • @gillianbc
    @gillianbc 6 лет назад

    Didn't make sense to me - isn't the whole point of async that you can tell it to get multiple things simultaneously? The way it's explained here implies that it will wait before executing the next get.

  • @jeffkthompson
    @jeffkthompson 7 лет назад

    Aren't promises, as shown here, really just a messier version of synchronous code?

  • @slevinpilgrim2266
    @slevinpilgrim2266 6 лет назад

    Why have then((success)=>{...}, (fail)=>{...}) if the fail part is never used? Nobody is using the fail, any error handling is in the catch. But why have the fail function in the then? What does it do?

  • @BeginnerProgrammersnyc
    @BeginnerProgrammersnyc 9 лет назад

    I loved the video

  • @judgewest2000
    @judgewest2000 9 лет назад

    Why are only decent libraries working with promises?

    • @darrenking8941
      @darrenking8941 8 лет назад

      Because they don't cause blocking.

    • @judgewest2000
      @judgewest2000 8 лет назад

      +Darren King I can't remember what the context was of that anymore!

  • @idreessamim6796
    @idreessamim6796 9 лет назад

    LearnCode.academy Thanks for the video! I have just a question. With this method can I plot two graphs one after the other without freezing the screen? Example: plot first graph, then compute data for second graph and when it's finished plot second graph in another letting the user scroll the screen after the first graph has been plotted. Because when I try it simply does not work. The screen still freezes or does not plot the second graph.

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      Idrees Samim unfortunately, anytime you are doing heavy computations (as compared to http requests - in which javscript isn't calculating, it's waiting on a server response), the browser will lag. Now, if you're using ie10+, you can potentially use a web worker to do this JS calculation in the background, which would alleviate page lag.

  • @educaperproject739
    @educaperproject739 8 лет назад

    wonderful

  • @ravig5606
    @ravig5606 9 лет назад

    Thx Bud.

  • @DonRichards
    @DonRichards 9 лет назад

    But if this is a tutorial on Javascript why are you complicating it with jQuery?

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      +Don Richards Most JS devs, either only-understand-jquery for async or use-to-use-it, so it was my choice for using something that everyone understands in order to talk about concepts that really don't have to do with any library..

    • @DonRichards
      @DonRichards 9 лет назад

      Sadly this give a false sense of the environment to be completely frank. “If you can't explain it to a six year old, you don't understand it yourself.” ― Albert Einstein Breaking the purpose of the tutorial to its primitive basics and walking people through it that way gives a deeper understanding and clearer picture. I watch a lot of tutorials. This is the biggest flaw/turnoff/distraction. It's hard to tell what is jQuery and what is Javascript. The title being Async Javascript, these are the 2 i'd expect and nearly nothing else. Just a thought. Not trying to troll! Just hoping to help

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      No, I get what you're saying, no worries here.
      The reason is simple, almost every dev uses libraries for AJAX. I almost never see devs using native XMLHttpRequest. And by almost never, I pretty much mean never...the spec is just messy.
      The most popular async/AJAX library BY FAR is jQuery, as compared to axios, superagent, etc, so I opted for the most common ajax library of all time.
      For those using axios, superagent, etc, the syntax difference is minimal at most.

  • @elfpimp1
    @elfpimp1 7 лет назад

    How sad is it that I keep trying to scroll his code screen to read the script?! God, been typing code all day..

  • @pilkers745
    @pilkers745 10 лет назад

    Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators Wouldn't that be blocking the code?

  • @nakulghai9068
    @nakulghai9068 7 лет назад

    Simply wao!

  • @robkim55
    @robkim55 10 лет назад

    we cannot see the code . i will go to the place you recommended.

    • @learncodeacademy
      @learncodeacademy  10 лет назад

      Yeah, sorry about that. I hacked the Plunkr CSS to be as big of a font as could fit stuff on screen.
      The video will go up to 1080p, though, if you're on a decent sized monitor.

  • @OliverUnderTheMoon
    @OliverUnderTheMoon 9 лет назад

    @12:35 instantly knew what this keyword was doing and I think I think I came a little.

  • @DecaSpace
    @DecaSpace 8 лет назад +11

    He lost me when he said jQuery.

    • @learncodeacademy
      @learncodeacademy  8 лет назад

      Hah I hear you...just going shotgun blast at something everyone knows. And scary how many people still use $.ajax

    • @DecaSpace
      @DecaSpace 8 лет назад +3

      LearnCode.academy I am "new" to JS haha I felt going down jQuery lane was a bad idea - specially since the language has made some efforts to improve itself. I cringe when I see 2016-made tutorials using "var". Friends don't let friends var, now. But, again I see how it is important to help people make the transition to the newer constructs. It is challenging to join the JS 2016 Party at this point because there are so many ways to do One Thing and you are never too sure which one is the right one.

    • @zachnagatani4470
      @zachnagatani4470 8 лет назад

      Do you have a job in development?

    • @bytler4518
      @bytler4518 7 лет назад

      Same for me. This video is not noob friendly :(

    • @jayn2149
      @jayn2149 7 лет назад

      what are you supposed to use in place of $.ajax? new best practices??

  • @TrainingWithKona
    @TrainingWithKona 10 лет назад

    dude your videos are awesome but I'm buying you a new mic.
    Or you can stop using speex lol

    • @learncodeacademy
      @learncodeacademy  10 лет назад +1

      Haha, noted!...I'll see what I can do.

    • @TrainingWithKona
      @TrainingWithKona 10 лет назад +1

      lol this just made me think of the picture I saw of Chris Coyier and his mic setup. Shit is ballin.
      5by5.tv/webahead/63

    • @learncodeacademy
      @learncodeacademy  10 лет назад

      I've got one of those...I'm just lazy haha! I'd rather crank out more videos for you guys than take the time to setup a sweet mic and compress everything.
      Maybe I'm just making excuses haha.

  • @andersohlson7621
    @andersohlson7621 8 лет назад

    You did mention deferred.resolve() and reject() but didn't cover how you would create a method and work with a new deferred() object, and how to turn an non-deferred function to one; similarly, normal non-promise function to a promise so you can invoke the promise chain. github.com/zenithtekla/serialscan/blob/master/Serials/pages/assets/client/js/format_proc.js
    Disclaimer: 1. there might be many ways to turn a function that returns something, into a promise. There might be better ways.
    2. I totally understood your video.
    3. But I need to have a good understanding of deferred() vs. promise(), and in regard to my inquiry above.

  • @aliquewilliams3080
    @aliquewilliams3080 9 лет назад

    Async/await does the same thing.

  • @OnTheBrinkBook
    @OnTheBrinkBook 9 лет назад

    When I first saw this video 10 months ago it was pretty far out. Now it seems pretty basic to me lol. ^_^

    • @learncodeacademy
      @learncodeacademy  9 лет назад +1

      Nice! Yeah none of this stuff is black magic...it's just that new syntax is always freaky at first.

    • @OnTheBrinkBook
      @OnTheBrinkBook 9 лет назад

      LearnCode.academy Hey, and now two weeks later I am a ES6 Wizard with Bluebird's library. Generators are so hot. Finally, Javascript that doesn't look a slow motion trainwreck! I am so much more productive using yield than of course callbacks, but even promises.

    • @learncodeacademy
      @learncodeacademy  9 лет назад +1

      On The Brink by Anthony Mayfield Awesome! Yeah, they're really nice. There's several projects that I've been on where generators basically saved the project.

    • @OnTheBrinkBook
      @OnTheBrinkBook 9 лет назад

      LearnCode.academy Nice. Yes Async can be such a headache sometimes, which is why I have been learning Go since they have nice backed in concurrency, but I love all the Node libraries, so hopefully Generators & future ES specs can solve some of those issues. Also, thanks for the speedy response! :)

    • @OnTheBrinkBook
      @OnTheBrinkBook 9 лет назад

      LearnCode.academy Speaking of Async, I'm surprised you didn't mention the async library in this video at all! It's another solid way to tame spaghetti code

  • @CSryand2m
    @CSryand2m 8 лет назад

    How is callbacks.js asynchronous if it's waiting for success to to initiate the next AJAX request?

    • @DeepTitanic
      @DeepTitanic 8 лет назад

      I was thinking the exact same thing .. What are your thoughts? I screwed up asynch in an interview so I really want to be sure if I'm using these patterns as an answer.
      Edit. I checked the docs for $.ajax and I think it's async by default.

  • @aliquewilliams3080
    @aliquewilliams3080 9 лет назад

    Good video but you shouldn't use jquery, in my opinion.

    • @learncodeacademy
      @learncodeacademy  9 лет назад

      +Alique Williams The biggest reason I use jQuery is because almost every dev knows it and almost every Jr dev probably ONLY knows it.

    • @aliquewilliams3080
      @aliquewilliams3080 9 лет назад

      LearnCode.academy If someone only knows jquery, then they're not even remotely qualified to learn anything in this video.

  • @stormbytes
    @stormbytes 7 лет назад +1

    This is a Jquery promises tutorial and NOT Javascript promises

  • @kumareth
    @kumareth 6 лет назад +1

    did I just hear jQuery?,,,....BYE BYE 👋🏻

  • @shrekthetroll7826
    @shrekthetroll7826 8 лет назад +4

    Literally every single fucking web developer has a mac. wtf? You'd think someone with at least _some_ advanced technical knowledge would know better.

    • @wusheeify
      @wusheeify 8 лет назад +8

      Because it has both the advantages of unix and a well designed user experience, out of the box.

    • @shrekthetroll7826
      @shrekthetroll7826 8 лет назад

      wow #gay #brainwashed

    • @DavidAlsh
      @DavidAlsh 8 лет назад +1

      He's actually not wrong. As a long time PC user and a Mac hater, the unix style command line functionality in macOS is pretty king. macOS is basically a Linux distro you don't have to mess around with to get working. I hate that it's nice. Still won't buy one, but gotta hand it to Apple, they hit the nail on the head here.

    • @shrekthetroll7826
      @shrekthetroll7826 8 лет назад

      But everything just _works_ with windows

    • @DavidAlsh
      @DavidAlsh 8 лет назад

      +Shrek Thetroll except bash

  • @aryaravish
    @aryaravish 8 лет назад

    One of the best videos on promises on youtube. Crystal clear. Thanks a lot.

  • @marcioarend1
    @marcioarend1 8 лет назад

    Great Job