Asynchrone Programmierung in JavaScript in 80 Minuten // deutsch

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

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

  • @orange-vlcybpd2
    @orange-vlcybpd2 2 года назад +15

    Es ist sehr angenehm dir zu folgen, weil du jeden Denkschritt kommentierst und konsequent vorgehst.

    • @thenativeweb
      @thenativeweb  2 года назад +1

      [gr] Vielen lieben Dank 😊

    • @cgsman1
      @cgsman1 2 года назад +1

      Ja, in der Tat! Du erklärst sehr deutlich und umfassend - und dennoch ohne "Längen". Man ist dann hinterher selbst in der Lage, Deine Beispiele aus dem Gedächtnis nachzuprogrammieren - gerne noch mehr davon!

  • @schneider.mariane
    @schneider.mariane 2 года назад +9

    Über die Jahre hinweg bin ich durch Stack Overflow genau den hier skizzierten Weg gegangen. Ein Hochgenuss dies kompakt und gut strukturiert mit Background nachträglich erklärt zu bekommen. Danke.

  • @HolgerSchröder-g5c
    @HolgerSchröder-g5c 7 месяцев назад

    Du machst das ganz toll und ich kann dir stundenlang zuhören. Das einzige was mir Sorgen macht, ist der Inhalt der Blechdose, die du getrunken hast. Ist das ein Energydrink, quasi Zuckerwasser. Trink bitte Tee oder Wasser (gibt es auch mit Geschmack). Wir brauchen dich noch sehr lange!

  • @kastenkarsten
    @kastenkarsten 2 года назад +6

    Absolut geniales und lehrreiches Video zu dem Thema und auch darüber hinaus. Echt sprachlos wieviel Wissen Du in knapp 80 Minuten verpackt hast :)
    vielen großen Dank dafür und beste Grüße.

  • @martinhovekamp8315
    @martinhovekamp8315 2 года назад +4

    Das ist ja eine super Agenda fürs Video. Das wird sicher vielen JS Entwicklern weiterhelfen und als "Nachschlagewerk" dienen.
    Nach der ersten Zeile "Asynchrone Programmierung" hatte ich gedacht : Oh - jetzt kommt "mit Go" .. aber es ist noch "mit Golo und JavaScript.
    Aber gut, vielleicht gibt ja später mal eine "Go" Variante und werde ich allein schon auf die Gesamtlänge des Videos schauen.

  • @ElrondMcBong86
    @ElrondMcBong86 2 года назад +4

    Mein Prof meinte ja mal (zu "callbacks in node.js"), das Video sei vieeel zu lang, als ich es einer Kommilitonin empfohlen hatte.
    Aber genauso ists echt super, weil wirklich alles genau und nachvollziehbar ist und praktisch jeder wirklich alles versteht!
    Auch, wenn man vielleicht Grundsätzliches schon verstanden hat und noch mehr Details verstehen will ist das super!
    bester Kanal! :)

    • @thenativeweb
      @thenativeweb  2 года назад

      [gr] Das freut mich sehr, vielen Dank 😊

  • @wassagtmanndazu
    @wassagtmanndazu 2 года назад +4

    Super gut erklärt. Das beste Video das ich hierzu gesehen habe. Und so viel besser nachvollziehbar, als wenn das Thema in Textform erklärt wird.
    Ich habe einige Abläufe durch dein Video das erste mal richtig nachvollziehen können! Super vielen Dank!

    • @thenativeweb
      @thenativeweb  2 года назад

      [gr] Das freut mich sehr, vielen, vielen Dank 😊

  • @boothtml9069
    @boothtml9069 2 года назад +2

    Es ist so eine Bereicherung das es Euren Kanal gibt 💪.

  • @figae2
    @figae2 2 года назад +2

    Genau das haben wir getan, ohne zu wissen was wir tun. Schön, dass wir nun unseren eigenen Code verstehen. Danke für dieses Video!

  • @psychedelic-chi
    @psychedelic-chi Год назад

    Vielen lieben Dank für deine ausführlichen Erläuterungen zu dem Thema, ein sehr gutes Video!

  • @MarkusEicher70
    @MarkusEicher70 2 года назад +3

    Hallo Golo. Also jetzt mal ehrlich, das haut mich echt vom Hocker! Vielen Dank für dieses ausgezeichnete Video. Ich werde wohl inzwischen als absoluter Fanboy wahrgenommen, aber es ist eine wahre Freude, Deinen Ausführungen folgen zu dürfen. Der Weg von der Callback Hölle zu dem eleganten Code zum Schluss ist faszinierend und ich habe wirklich viel mitgenommen. Ich werde gleich mal meinen Deutsch sprechenden Community Mitgliedern wärmstens empfehlen, sich das anzusehen. Schönen Sonntag. Gruss aus der Schweiz.

    • @thenativeweb
      @thenativeweb  2 года назад

      [gr] Vielen, vielen Dank - das freut mich sehr 😊

  • @christianhorauf9958
    @christianhorauf9958 2 года назад +2

    Sehr, sehr schöne Zusammenfassung. 👍Was man evtl. noch hätte erwähnen können, überschreitet aber womöglich den Einstiegscharakter dieses Videos, ist dass man auch heute u.U. nicht auf Promises verzichten kann. Nämlich dann, wenn man beispielsweise mehrere asynchrone Aufrufe abwarten muss und deren Ergebnise dann mit Promise.all eingesammet werden müssen.
    @Golo: Du hast ja in Deinen Videos über Go mehrfach darauf hingewiesen wie einfach asynchrone Verarbeitung mit go im Vergleich zu JS ist. Vielleicht wäre auch mal ein Vergleichsvideo interessant, wo man komplexere asynchrone UseCases mal mit JS und mit Go löst um diese Vorteile herauszustellen. Vielen Dank. 😀

  • @michaelrichter9408
    @michaelrichter9408 2 года назад

    Eine geniale Zusammenfassung von asynchronen coden in JavaScript. Vielen Dank.

  • @BariHeusken
    @BariHeusken 2 года назад +1

    Vielen Dank für das Video! Das war mal wirklich nötig für mein Verständnis. Das ganze wäre nur noch zu toppen durch eine Abwandlung für Typescript!
    Nochmals vielen Dank! Nun ist mir vieles klarer geworden.

    • @thenativeweb
      @thenativeweb  2 года назад +1

      [gr] Das freut mich sehr, vielen Dank 😊

  • @RonaldWBock
    @RonaldWBock Год назад +1

    War super lehrreich. Komplett mitprogrammiert und inhaltlich verstanden.
    Danke 😃

  • @martinheinrich4394
    @martinheinrich4394 Год назад +1

    So eine tolle Einführung! Du machst das echt super! Vielen Dank und wieder so!

  • @winstonmisha
    @winstonmisha Год назад +1

    Sehr informatives Video! Habe viel gelernt.

    • @thenativeweb
      @thenativeweb  Год назад

      [gr] Das freut mich, vielen Dank 😊

  • @axadkrk
    @axadkrk Год назад

    Danke, und wieder bin ich ein stück besserer JS Coder geworden

  • @nazguhd4623
    @nazguhd4623 Год назад

    Hallo Golo, großartiges und sehr verständliches Video! Dankeschön!

  • @michaelrichter9408
    @michaelrichter9408 2 года назад +1

    Geniale Zusammenfassung, Vielen Dank.

  • @mediainside4726
    @mediainside4726 2 года назад +1

    Hallo Golo, wieder eine sehr fundierte und verständlichen Herleitung der Problematik zur asynchronen Programmierung mit JavaScript. Super und ganz herzlichern Dank. Wie auch die anderen Tutorials, werde ich es meinen Studenten weiter empfehlen. Wir experimentieren sehr mit der React-Bibliothek. Vielleicht hast du ja auch mal Zeit und Lust über deren Grundbausteine wie useState, useEffect, useRef, useLayoutEffect, useCallback ein aktuelles Video zu produzieren!?

  • @schobihh2703
    @schobihh2703 6 месяцев назад

    super Erklärungen. Vielleicht aber etwas luftholen zwischendurch, damit man hinterherkommt.

  • @svenjodicke3129
    @svenjodicke3129 2 года назад

    Top Erklärungen... Weiter so... Bin als Anfänger (ca. 9 Monate in JS/TS/ExpressJS u. VueJS u.v.m., ansonsten langjährige Erfahrung in embedded Softwaredesign C/C++ und diverse andere Sprachen) begeistert, der aber immerhin mit allen Punkten schon Berührungen hatte. Eines ist mir in Hinblick auf asynchroner Verarbeitung aufgefallen. Ich habe es zwar schon lösen können, aber vll habt ihr ja bessere Lösungen parat und meine ist nur eine Sublösung. Ich würde meine Lösung gar nicht erst vorstellen, sondern einfach das Problem schildern.
    Problem: Ich habe einen Baum, der hat diverse Properties und eines dieser Property ist eine ID des jeweiligen Blattes (Kindes). Mit dieser ID kann man Backend-Fragen stellen, zb. lassen sich Zusatzinfos zu diesem Blatt (Kind) erfragen, die so nicht in den Blattelementen des Baumes enthalten sind.
    Um diese Zusatzinfos nun für jedes Blattelement herauszubekommen und in die Blätter auch hinein legen zu können, müsste man sich ja jetzt rekursiv durchhangeln und diese asynchone Funktion zb. GetAdditionallyInfo() aufrufen.
    Meine Frage nun: Wie geht das geschickte Aufrufen asynchoner Funktionen, wenn diese selbst rekursiv aufgerufen werden.
    Also (bitte eher als Pseudocode lesen ;-) ):
    async function MyRecursiveFunction(var leaf: Object):Object{
    const Info = await Server.GetAdditionallyInfo(leaf.ID);
    leaf.Info = Info;
    if(leaf.hasChildren){
    leaf.properties.foreach((element)=>{
    await MyRecursiveFunction(element.ID); // ich glaube das funktioniert so nicht, aber ich hoffe ich konnte das Problem skizzieren
    })
    }
    }
    Die zweite Frage, wie funktioniert generell ASYNC AWAIT im Kontext mit Methoden von Klassen in JavaScript? Soweit ich weiß kann man Methoden das Schlüsselwort ASYNC nicht geben, also bei mir ging es zu mindestens nicht.
    Ich hoffe das war soweit ansatzweise verständlich...

    • @woife0705
      @woife0705 2 года назад +1

      Ich hab jetzt nicht Alles im Detail getestet, aber vielleicht ein par Gedanken zu deinen Fragen:
      - Bei rekursiven Aufrufen gibt es mMn keine großen Unterschiede zwischen synchron und asynchron. Also wenn es für deine Anwendung passt (Abbruchbedingung, Resourcen, ...) dann kann man das schon so machen.
      - forEach kann glaube ich (kurze Google Suche bestätigt das) nicht mit asynchronen Funktionen umgehen. Daher wird in dem Callback nicht wirklich auf das Promise gewartet. (Außerdem muss die Arrow-Function async sein)
      - Du könntest aber mit .map() deine Elemente in ein Array von Promises umwandeln und dann entweder mit Promise.all() oder in einer "normalen" For-Schleife nacheinander auf alle warten
      - In deinem Beispiel könntest du die Promises parallelisieren, in dem du erst alle Promises erzeugst und danach erst await darauf aufrufst. Die Promises fangen beim Erstellen direkt mit der Ausführung an. Ein Promis bleibt aber dann in seinem Endzustand (resolved/rejected). Daher ist es nicht schlimm, wenn du später await darauf aufrufst. Je nach Resourcen und weiteren Implementierungsdetails kann das aber auch unerwünscht sein.

  • @saulgodman7872
    @saulgodman7872 2 года назад +1

    Perfekt wie immer! :)

  • @wassagtmanndazu
    @wassagtmanndazu 2 года назад +2

    Danke!

  • @Furz35
    @Furz35 2 года назад +1

    Tolles Video ;-) Ich würde mir eher browsernahe Beispiele wünschen als Node.js. Gerade das blockieren der GUI ist ein häufiges Problem was man mit multithreading (Webworker) verhindern kann.

    • @thenativeweb
      @thenativeweb  2 года назад

      [gr] Danke für Dein Lob und Dein Feedback 😊

  • @nasenbar5417
    @nasenbar5417 2 года назад +1

    Sehr starkes Video, ich wollte hier mal trotz meines unseriösen Namens fragen, ob ihr Einsteiger grundsätzlich aufnehmen würdet. Ich werde meine Ausbildung wohl dieses Jahr abschließen (Fachinformatiker Anwendungsentwicklung). Liebe Grüße

    • @thenativeweb
      @thenativeweb  2 года назад +1

      [gr] Vielen Dank für das Lob 😊
      Melde Dich einfach mal per E-Mail unter hello [at] thenativeweb [dot] io 😊

  • @woife0705
    @woife0705 2 года назад

    Toller Überblick, danke dafür! Was ich mich an der Stelle frage, ob man wissen sollte/muss ob ein Callback nun synchron oder asynchron ausgeführt wird. Weil abhängig davon das Exception handling anders berücksichtigt werden muss(?)
    Außerdem habe ich mich gefragt, was so die best practices sind, wenn man eine Art Event handler implementiert (Man also eine Liste an registrierten Callbacks nacheinander aufruft). Darf ich die beim Auftreten des Events einfach in einer Schleife aufrufen, muss/sollte ich sie in einen try-catch wrappen, oder sollte ich sie sogar per process.nextTick erstmal in die Queue werfen? Fragen über Fragen 😅

  • @oliverhenning8758
    @oliverhenning8758 2 года назад +1

    Du sagst, dass await nicht synchron wartet. Aber das heißt doch, dass die Logausgabe in Zeile 10 bei einer längeren Kopieraktion schon vor der Fertigstellung erscheint, oder?

    • @thenativeweb
      @thenativeweb  2 года назад +1

      [gr] Nein, das war anders gemeint … Wenn Du einen synchronen Funktionsaufruf hast, dann wartet der Thread aktiv auf das Ergebnis. Das bedeutet, dass in der Zeit nichts anderes passiert. Dein Programm blockiert.
      Wenn Du auf einen asynchronen Aufruf mit await wartest, dann geht es zwar an dieser Stelle nicht weiter, bevor das Ergebnis zur Verfügung steht (weil await erst dann weiter macht, wenn das zu Grunde liegende Promise resolved oder rejected wurde), aber in der Zwischenzeit können andere (!) Funktionen ausgeführt werden.
      Wenn Du zum Beispiel regelmäßig mit setInterval einen Counter ausgeben lässt, läuft der nicht weiter, solange auf eine synchrone Rückgabe gewartet wird - bei einem await hingegen schon.

  • @Xcf_341
    @Xcf_341 Год назад

    Heilige Scheiße hat dein Kanal einen Mehrwert!

  • @pat_mueller
    @pat_mueller Год назад

    Für mich die Königsdisziplin in der Programmierung
    Jedenfalls nicht Memory Management, Design Patterns oder Rekursion

  • @stefanbrandner9202
    @stefanbrandner9202 Год назад +1

    Aber wenn ich alles in ein synchrones Konstrukt zwängen tue, warum brauch ich dann überhaupt asynchrone Funktionalität. Oder gibt es auch die Möglichkeit, Promises auf die asynchrone Reise zu schicken und am Ende wieder mit await einzusammeln, bevor das synchrone Programm weiter läuft?

    • @thenativeweb
      @thenativeweb  Год назад

      [gr] Es ist gerade kein synchrones Konstrukt - es sieht nur so aus. Unter der Haube wird async / await vom Compiler wieder in die Variante mit den Promises umgebaut, ist also tatsächlich asynchron.

    • @stefanbrandner9202
      @stefanbrandner9202 Год назад +1

      Sehr angenehm, dass du dir die Mühe machst und Fragen im Chat beantwortest, auch wenn diese von Unwissenheit zeugen (wie bei mir). Daumen hoch.

    • @thenativeweb
      @thenativeweb  Год назад

      @@stefanbrandner9202 [gr] Danke schön 😊
      Ich versuch's zumindest, auch wenn es leider nicht immer klappt, was zum einen an der Zeit liegt, zum anderen aber auch daran, dass es etwas schwierig ist, auf RUclips mitzubekommen, wenn zB eine Antwort auf eine Antwort geschrieben wurde. Die Benachrichtigungen sind da, um es mal vorsichtig auszudrücken, suboptimal 😉

    • @Foreversun33
      @Foreversun33 Год назад

      @@thenativeweb Das würde mich auch mal interessieren, wieso das ( die Benachrichtigungen ) so furchtbar schlecht umgesetzt ist.

  • @BURAXON
    @BURAXON Год назад

    Gehts um Ajax?

    • @thenativeweb
      @thenativeweb  Год назад

      [gr] Nein. Es geht um asynchronen Code (Callbacks, Promises, async/await, …).