Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Asynchonicity: concurrency. A tale of Slide 1 Asynchonicity: concurrency. A tale of Slide 2 Asynchonicity: concurrency. A tale of Slide 3 Asynchonicity: concurrency. A tale of Slide 4 Asynchonicity: concurrency. A tale of Slide 5 Asynchonicity: concurrency. A tale of Slide 6 Asynchonicity: concurrency. A tale of Slide 7 Asynchonicity: concurrency. A tale of Slide 8 Asynchonicity: concurrency. A tale of Slide 9 Asynchonicity: concurrency. A tale of Slide 10 Asynchonicity: concurrency. A tale of Slide 11 Asynchonicity: concurrency. A tale of Slide 12 Asynchonicity: concurrency. A tale of Slide 13 Asynchonicity: concurrency. A tale of Slide 14 Asynchonicity: concurrency. A tale of Slide 15 Asynchonicity: concurrency. A tale of Slide 16 Asynchonicity: concurrency. A tale of Slide 17 Asynchonicity: concurrency. A tale of Slide 18 Asynchonicity: concurrency. A tale of Slide 19 Asynchonicity: concurrency. A tale of Slide 20 Asynchonicity: concurrency. A tale of Slide 21 Asynchonicity: concurrency. A tale of Slide 22 Asynchonicity: concurrency. A tale of Slide 23 Asynchonicity: concurrency. A tale of Slide 24 Asynchonicity: concurrency. A tale of Slide 25 Asynchonicity: concurrency. A tale of Slide 26 Asynchonicity: concurrency. A tale of Slide 27 Asynchonicity: concurrency. A tale of Slide 28 Asynchonicity: concurrency. A tale of Slide 29 Asynchonicity: concurrency. A tale of Slide 30 Asynchonicity: concurrency. A tale of Slide 31 Asynchonicity: concurrency. A tale of Slide 32 Asynchonicity: concurrency. A tale of Slide 33 Asynchonicity: concurrency. A tale of Slide 34 Asynchonicity: concurrency. A tale of Slide 35 Asynchonicity: concurrency. A tale of Slide 36 Asynchonicity: concurrency. A tale of Slide 37 Asynchonicity: concurrency. A tale of Slide 38 Asynchonicity: concurrency. A tale of Slide 39 Asynchonicity: concurrency. A tale of Slide 40 Asynchonicity: concurrency. A tale of Slide 41 Asynchonicity: concurrency. A tale of Slide 42 Asynchonicity: concurrency. A tale of Slide 43 Asynchonicity: concurrency. A tale of Slide 44 Asynchonicity: concurrency. A tale of Slide 45 Asynchonicity: concurrency. A tale of Slide 46 Asynchonicity: concurrency. A tale of Slide 47 Asynchonicity: concurrency. A tale of Slide 48 Asynchonicity: concurrency. A tale of Slide 49 Asynchonicity: concurrency. A tale of Slide 50 Asynchonicity: concurrency. A tale of Slide 51 Asynchonicity: concurrency. A tale of Slide 52 Asynchonicity: concurrency. A tale of Slide 53 Asynchonicity: concurrency. A tale of Slide 54 Asynchonicity: concurrency. A tale of Slide 55 Asynchonicity: concurrency. A tale of Slide 56 Asynchonicity: concurrency. A tale of Slide 57 Asynchonicity: concurrency. A tale of Slide 58 Asynchonicity: concurrency. A tale of Slide 59 Asynchonicity: concurrency. A tale of Slide 60 Asynchonicity: concurrency. A tale of Slide 61 Asynchonicity: concurrency. A tale of Slide 62 Asynchonicity: concurrency. A tale of Slide 63 Asynchonicity: concurrency. A tale of Slide 64 Asynchonicity: concurrency. A tale of Slide 65 Asynchonicity: concurrency. A tale of Slide 66 Asynchonicity: concurrency. A tale of Slide 67 Asynchonicity: concurrency. A tale of Slide 68 Asynchonicity: concurrency. A tale of Slide 69 Asynchonicity: concurrency. A tale of Slide 70 Asynchonicity: concurrency. A tale of Slide 71 Asynchonicity: concurrency. A tale of Slide 72 Asynchonicity: concurrency. A tale of Slide 73 Asynchonicity: concurrency. A tale of Slide 74 Asynchonicity: concurrency. A tale of Slide 75 Asynchonicity: concurrency. A tale of Slide 76 Asynchonicity: concurrency. A tale of Slide 77 Asynchonicity: concurrency. A tale of Slide 78 Asynchonicity: concurrency. A tale of Slide 79 Asynchonicity: concurrency. A tale of Slide 80 Asynchonicity: concurrency. A tale of Slide 81 Asynchonicity: concurrency. A tale of Slide 82 Asynchonicity: concurrency. A tale of Slide 83 Asynchonicity: concurrency. A tale of Slide 84 Asynchonicity: concurrency. A tale of Slide 85 Asynchonicity: concurrency. A tale of Slide 86 Asynchonicity: concurrency. A tale of Slide 87 Asynchonicity: concurrency. A tale of Slide 88 Asynchonicity: concurrency. A tale of Slide 89 Asynchonicity: concurrency. A tale of Slide 90 Asynchonicity: concurrency. A tale of Slide 91 Asynchonicity: concurrency. A tale of Slide 92 Asynchonicity: concurrency. A tale of Slide 93 Asynchonicity: concurrency. A tale of Slide 94 Asynchonicity: concurrency. A tale of Slide 95 Asynchonicity: concurrency. A tale of Slide 96 Asynchonicity: concurrency. A tale of Slide 97 Asynchonicity: concurrency. A tale of Slide 98 Asynchonicity: concurrency. A tale of Slide 99 Asynchonicity: concurrency. A tale of Slide 100 Asynchonicity: concurrency. A tale of Slide 101 Asynchonicity: concurrency. A tale of Slide 102 Asynchonicity: concurrency. A tale of Slide 103 Asynchonicity: concurrency. A tale of Slide 104 Asynchonicity: concurrency. A tale of Slide 105 Asynchonicity: concurrency. A tale of Slide 106 Asynchonicity: concurrency. A tale of Slide 107 Asynchonicity: concurrency. A tale of Slide 108 Asynchonicity: concurrency. A tale of Slide 109 Asynchonicity: concurrency. A tale of Slide 110 Asynchonicity: concurrency. A tale of Slide 111 Asynchonicity: concurrency. A tale of Slide 112 Asynchonicity: concurrency. A tale of Slide 113 Asynchonicity: concurrency. A tale of Slide 114 Asynchonicity: concurrency. A tale of Slide 115 Asynchonicity: concurrency. A tale of Slide 116 Asynchonicity: concurrency. A tale of Slide 117 Asynchonicity: concurrency. A tale of Slide 118 Asynchonicity: concurrency. A tale of Slide 119 Asynchonicity: concurrency. A tale of Slide 120 Asynchonicity: concurrency. A tale of Slide 121 Asynchonicity: concurrency. A tale of Slide 122 Asynchonicity: concurrency. A tale of Slide 123 Asynchonicity: concurrency. A tale of Slide 124 Asynchonicity: concurrency. A tale of Slide 125 Asynchonicity: concurrency. A tale of Slide 126 Asynchonicity: concurrency. A tale of Slide 127 Asynchonicity: concurrency. A tale of Slide 128 Asynchonicity: concurrency. A tale of Slide 129 Asynchonicity: concurrency. A tale of Slide 130 Asynchonicity: concurrency. A tale of Slide 131 Asynchonicity: concurrency. A tale of Slide 132 Asynchonicity: concurrency. A tale of Slide 133 Asynchonicity: concurrency. A tale of Slide 134 Asynchonicity: concurrency. A tale of Slide 135 Asynchonicity: concurrency. A tale of Slide 136 Asynchonicity: concurrency. A tale of Slide 137 Asynchonicity: concurrency. A tale of Slide 138 Asynchonicity: concurrency. A tale of Slide 139 Asynchonicity: concurrency. A tale of Slide 140 Asynchonicity: concurrency. A tale of Slide 141 Asynchonicity: concurrency. A tale of Slide 142 Asynchonicity: concurrency. A tale of Slide 143 Asynchonicity: concurrency. A tale of Slide 144 Asynchonicity: concurrency. A tale of Slide 145 Asynchonicity: concurrency. A tale of Slide 146 Asynchonicity: concurrency. A tale of Slide 147 Asynchonicity: concurrency. A tale of Slide 148 Asynchonicity: concurrency. A tale of Slide 149 Asynchonicity: concurrency. A tale of Slide 150 Asynchonicity: concurrency. A tale of Slide 151 Asynchonicity: concurrency. A tale of Slide 152 Asynchonicity: concurrency. A tale of Slide 153 Asynchonicity: concurrency. A tale of Slide 154 Asynchonicity: concurrency. A tale of Slide 155 Asynchonicity: concurrency. A tale of Slide 156 Asynchonicity: concurrency. A tale of Slide 157 Asynchonicity: concurrency. A tale of Slide 158 Asynchonicity: concurrency. A tale of Slide 159 Asynchonicity: concurrency. A tale of Slide 160 Asynchonicity: concurrency. A tale of Slide 161 Asynchonicity: concurrency. A tale of Slide 162 Asynchonicity: concurrency. A tale of Slide 163 Asynchonicity: concurrency. A tale of Slide 164 Asynchonicity: concurrency. A tale of Slide 165 Asynchonicity: concurrency. A tale of Slide 166 Asynchonicity: concurrency. A tale of Slide 167 Asynchonicity: concurrency. A tale of Slide 168 Asynchonicity: concurrency. A tale of Slide 169 Asynchonicity: concurrency. A tale of Slide 170 Asynchonicity: concurrency. A tale of Slide 171 Asynchonicity: concurrency. A tale of Slide 172 Asynchonicity: concurrency. A tale of Slide 173 Asynchonicity: concurrency. A tale of Slide 174 Asynchonicity: concurrency. A tale of Slide 175
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Asynchonicity: concurrency. A tale of

Download to read offline

When starting to dabble with Javascript, the biggest challenge for most developers is understanding how to deal with asynchronous development. During this talk, we will cover some of the different ways to handle async programming like callbacks, promises, reactive streams and events. As we cover those, we will also plunge into some of the mechanics of the NodeJs engine, namely the event loop. Developers attending this talk will have a better understanding of asynchronous programming and will have a few new tools to their belt to tackle those issues as they come.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Asynchonicity: concurrency. A tale of

  1. 1. Asynchronicity: concurrency. A tale of (a.k.a: the subtle art of making a PB&J sandwich)
  2. 2. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  3. 3. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  4. 4. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  5. 5. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  6. 6. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  7. 7. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  8. 8. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  9. 9. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  10. 10. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  11. 11. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  12. 12. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  13. 13. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  14. 14. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  15. 15. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  16. 16. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  17. 17. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  18. 18. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  19. 19. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  20. 20. @joel__lord #iJS18 PHP Javascript <script type="text/javascript"> console.log("Before reading file"); getFileContent("sample.txt", () => { console.log("After file read"); }); console.log("Before HTTP request"); const req = new XMLHttpRequest(); req.onreadystatechange = () => { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log("After HTTP request"); } }; req.open("GET", "https://swapi.co/api/planets/1"); req.send(null); </script> <?php echo("Before reading filen"); $fileContents = file_get_contents("sample.txt"); echo("After file readn"); echo("Before HTTP requestn"); $ch = curl_init("https://swapi.co/api/ planets/1/"); $data = curl_exec($ch); curl_close($ch); echo("After HTTP requestn");
  21. 21. TitleRace Conditions
  22. 22. @joel__lord #iJS18 About Me @joel__lord joellord
  23. 23. @joel__lord #iJS18 WARNING
  24. 24. @joel__lord #iJS18 WARNING 175 slides
  25. 25. @joel__lord #iJS18 Our Agenda ! Event Loop ! Callbacks ! Promises ! Generators ! Await/Async ! Events ! Reactive Events
  26. 26. How to make a PB&J sandwich
  27. 27. @joel__lord #iJS18 PB&J Sandwich • Get the ingredients ‣ Get some bread ‣ Get some PB ‣ Get some J • Prepare the sandwich ‣ Spread PB ‣ Spread J • Close it • Eat it!
  28. 28. The Event Loop
  29. 29. @joel__lord #iJS18 Classic Architecture (PHP, Java) !
  30. 30. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • ! 🥪
  31. 31. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • ! 🥪
  32. 32. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞
  33. 33. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜
  34. 34. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜 🍓
  35. 35. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • Prepares the sandwich • ! 🥪 🍞 🥜 🍓
  36. 36. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪
  37. 37. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪
  38. 38. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪
  39. 39. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞
  40. 40. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 ! 🥪
  41. 41. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 ! 🥪 ! 🥪
  42. 42. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 ! 🥪 🍞 ! 🥪
  43. 43. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 ! 🥪 🍞
  44. 44. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 ! 🥪 🍞 🥜
  45. 45. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 ! 🥪 🍞 🥜
  46. 46. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓
  47. 47. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓
  48. 48. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪
  49. 49. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪
  50. 50. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞
  51. 51. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜
  52. 52. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓
  53. 53. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓
  54. 54. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪
  55. 55. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🥪
  56. 56. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪
  57. 57. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪
  58. 58. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜
  59. 59. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞
  60. 60. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞 🥜
  61. 61. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞 🥜 🥪 🍓
  62. 62. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞 🥜 🥪 🍓 🥪
  63. 63. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞 🥜 🥪 🍓 🥪 🥪
  64. 64. @joel__lord #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 ! 🥪 ! 🥪 🥪 🥪 🥪
  65. 65. Synchronous JS (2000’s)
  66. 66. @joel__lord #iJS18 Code let PBnJMaker = require("./pbnjmaker"); PBnJMaker.fetchBread(); PBnJMaker.fetchPeanutButter(); PBnJMaker.fetchJam(); PBnJMaker.spreadPeanutButter(); PBnJMaker.spreadJam(); let result = PBnJMaker.closeSandwich(); console.log("Eat that " + result);
  67. 67. @joel__lord #iJS18 Result
  68. 68. Callbacks (2010’s)
  69. 69. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous // //Synchronous let array = [1,2,3]; console.log("begin"); array.map((i) => {console.log(i)}); console.log("after");
  70. 70. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  71. 71. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous //Asynchronous console.log("begin"); fs.readFile("./cb.txt", (err, data) => { console.log(“File content”); }); console.log("after");
  72. 72. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  73. 73. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous //Asynchronous console.log("begin"); fs.readFile("./cb.txt", (err, data) => { console.log(“File content”); }); console.log("after");
  74. 74. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous //Asynchronous ..................... ....................... (err, data) => { console.log(“File content”); }.. .....................
  75. 75. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop console.log("begin"); fs.readFile("./cb.txt", (err, data) => { console.log(data); }); console.log("after");
  76. 76. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop fs.readFile("./cb.txt", (err, data) => { console.log(data); }); console.log("after");
  77. 77. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop console.log("after"); (err, data) => { console.log(data); }
  78. 78. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  79. 79. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  80. 80. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop
  81. 81. @joel__lord #iJS18 Code let PBnJMaker = require("../pbnjmaker"); PBnJMaker.fetchBread(() => { PBnJMaker.fetchPeanutButter(() => { PBnJMaker.fetchJam(() => { PBnJMaker.spreadPeanutButter(() => { PBnJMaker.spreadJam(() => { PBnJMaker.closeSandwich((err, output) => { console.log("Eat that " + output); }); }); }); }); }); });
  82. 82. @joel__lord #iJS18 Result
  83. 83. @joel__lord #iJS18 Callbacks ! It works! ! but… let PBnJMaker = require("../pbnjmaker"); PBnJMaker.simulateError(); PBnJMaker.fetchBread((err) => { if (err) { console.log("An error occurred while fetching the ingredients"); } else { PBnJMaker.fetchPeanutButter((err) => { if (err) { console.log("An error occurred while fetching the ingredients"); } else { PBnJMaker.fetchJam((err) => { if (err) { console.log("An error occurred while fetching the ingredients"); } else { PBnJMaker.spreadPeanutButter((err) => { if (err) { console.log("An error occurred while… the sandwich"); } else { PBnJMaker.spreadJam((err) => { if (err) { console.log("An error occurred … the sandwich"); } else { PBnJMaker.closeSandwich((err, result) => { if (err) { console.log("An error occurred"); } else { console.log("Eat that " + result); } }); } }); } }); } }); } }); } });
  84. 84. @joel__lord #iJS18 Callback Hell let PBnJMaker = require("../pbnjmaker"); PBnJMaker.simulateError(); PBnJMaker.fetchBread((err) => { if (err) { console.log("An error occurred while fetching the ingredients"); } else { PBnJMaker.fetchPeanutButter((err) => { if (err) { console.log("An error occurred while… ingredients"); } else { PBnJMaker.fetchJam((err) => {
  85. 85. Parallel events
  86. 86. @joel__lord #iJS18 Step by step Parallel events 🍓🍞 🥜 🥪 🍞 🥜 🥪 🍓
  87. 87. @joel__lord #iJS18 Code let PBnJMaker = require("../pbnjmaker");
  88. 88. @joel__lord #iJS18 Code let ingredients = 0; let steps = 0;
  89. 89. @joel__lord #iJS18 Code function fetchIngredients() { }
  90. 90. @joel__lord #iJS18 Code function fetchIngredients() { PBnJMaker.fetchBread(handleIngredients); PBnJMaker.fetchPeanutButter(handleIngredients); PBnJMaker.fetchJam(handleIngredients); }
  91. 91. @joel__lord #iJS18 Code function handleIngredients(err) { if (err) return console.log(“Error”); ingredients++; if (ingredients === 3) { prepareSandwich(); } }
  92. 92. @joel__lord #iJS18 Code function prepareSandwich() { PBnJMaker.spreadPeanutButter(preparationStepCompleted); PBnJMaker.spreadJam(preparationStepCompleted); }
  93. 93. @joel__lord #iJS18 Code function preparationStepCompleted(err) { if (err) return console.log(“Error"); steps++; if (steps === 2) { completeSandwich(); } }
  94. 94. @joel__lord #iJS18 Code function completeSandwich(err) { PBnJMaker.closeSandwich((err, result) => { if (err) { console.log("An error occurred"); } else { console.log("Eat that " + result); } }); }
  95. 95. @joel__lord #iJS18 Code fetchIngredients();
  96. 96. @joel__lord #iJS18 Result Parallel
  97. 97. Promises (2014)
  98. 98. @joel__lord #iJS18 What is a promise? ! A representation of a callback ! Returns a .then() method ! Error handling simplified //Asynchronous console.log("begin"); asyncPromise().then(onSuccess, onFailure); console.log("after");
  99. 99. @joel__lord #iJS18 What is a promise? ! A representation of a callback ! Returns a .then() method ! Error handling simplified //Asynchronous console.log("begin"); fs.readFile("./cb.txt") .then((data) => { console.log(data); }, (err) => { console.log(err); }); console.log("after");
  100. 100. @joel__lord #iJS18 What is a promise? ! A representation of a callback ! Returns a .then() method ! Error handling simplified //Asynchronous console.log("begin"); fs.readFile("./cb.txt") .then((data) => { console.log(data); }).catch((err) => { console.log(err); }); console.log("after");
  101. 101. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread()
  102. 102. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => {
  103. 103. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => {
  104. 104. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); })
  105. 105. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => {
  106. 106. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => { return PBnJMaker.fetchJam();
  107. 107. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.spreadPeanutButter();
  108. 108. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.spreadJam();
  109. 109. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.closeSandwich();
  110. 110. @joel__lord #iJS18 Code Result }).then((result) => { console.log("Eat that " + result);
  111. 111. @joel__lord #iJS18 Code Result
  112. 112. @joel__lord #iJS18 Code Result }).catch((err) => { console.log("Error with ingredients");
  113. 113. @joel__lord #iJS18 Code Result }).catch((err) => { console.log("Error with ingredients"); }).catch((err) => { console.log(“Error preparing”); }).catch((err) => { console.log(“Error somewhere”);
  114. 114. @joel__lord #iJS18 Result Promises
  115. 115. @joel__lord #iJS18 Aggregate functions ! .all() ! .race() let PBnJMaker = require("../pbnjmaker"); Promise.all([ PBnJMaker.fetchBread(), PBnJMaker.fetchPeanutButter(), PBnJMaker.fetchJam()]) .then(() => { return Promise.all([ PBnJMaker.spreadPeanutButter(), PBnJMaker.spreadJam()]); }).then(() => { return PBnJMaker.closeSandwich(); }).then((result) => { console.log("Eat that " + result); });
  116. 116. @joel__lord #iJS18 Aggregate functions ! .all() ! .race() let PBnJMaker = require("../pbnjmaker"); Promise.all([ PBnJMaker.fetchBread(), PBnJMaker.fetchPeanutButter(), PBnJMaker.fetchJam()]) .then(() => { return Promise.all([ PBnJMaker.spreadPeanutButter(), PBnJMaker.spreadJam()]); }).then(() => { return PBnJMaker.closeSandwich(); }).then((result) => { console.log("Eat that " + result); });
  117. 117. @joel__lord #iJS18 Aggregate functions ! .all() ! .race() let PBnJMaker = require("../pbnjmaker"); Promise.all([ PBnJMaker.fetchBread(), PBnJMaker.fetchPeanutButter(), PBnJMaker.fetchJam()]) .then(() => { return Promise.all([ PBnJMaker.spreadPeanutButter(), PBnJMaker.spreadJam()]); }).then(() => { return PBnJMaker.closeSandwich(); }).then((result) => { console.log("Eat that " + result); });
  118. 118. @joel__lord #iJS18 Aggregate functions ! .all() ! .race() let PBnJMaker = require("../pbnjmaker"); Promise.all([ PBnJMaker.fetchBread(), PBnJMaker.fetchPeanutButter(), PBnJMaker.fetchJam()]) .then(() => { return Promise.all([ PBnJMaker.spreadPeanutButter(), PBnJMaker.spreadJam()]); }).then(() => { return PBnJMaker.closeSandwich(); }).then((result) => { console.log("Eat that " + result); });
  119. 119. Generators (2015)
  120. 120. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  121. 121. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  122. 122. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  123. 123. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  124. 124. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  125. 125. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  126. 126. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  127. 127. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  128. 128. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  129. 129. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  130. 130. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  131. 131. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  132. 132. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  133. 133. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  134. 134. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  135. 135. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  136. 136. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } let iteration = iterable(); console.log(iteration.next()); // 3 // Do stuff console.log(iteration.next()); // 2 console.log(iteration.next()); // 1 console.log(iteration.next()); // 0 // More stuff console.log(iteration.next()); // undefined
  137. 137. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } for (let iteration of iterable()) { console.log(iteration); } // 3 // 2 // 1 // 0
  138. 138. @joel__lord #iJS18 What is a generator? ! An iterable function ! “Pauses” the execution of a function function* iterable() { let i = 4; while(i--) { yield i; } } for (let iteration of iterable()) { console.log(iteration); } // 3 // 2 // 1 // 0
  139. 139. @joel__lord #iJS18 Code Result let PBnJMaker = require("../pbnjmaker"); PBnJMaker.verbose(); function* makePBnJ() { yield PBnJMaker.fetchBread; yield PBnJMaker.fetchPeanutButter; yield PBnJMaker.fetchJam; yield PBnJMaker.spreadPeanutButter; yield PBnJMaker.spreadJam; yield PBnJMaker.closeSandwich; } for (let step of makePBnJ()) { step(); } console.log("Eat that sandwich");
  140. 140. @joel__lord #iJS18 Async Generators ! Combining the power of promises and generators module.exports = (makeGenerator) => { let generator = makeGenerator.apply(this, arguments); function handle(result) { // generator returns {done: [Boolean], value: [Any}} if (result.done) return Promise.resolve(result.value); return Promise.resolve(result.value).then(function(res) { return handle(generator.next(res)); }, function(err) { return handle(generator.throw(err)); }); } try { return handle(generator.next()); } catch(e) { return Promise.reject(e); } };
  141. 141. @joel__lord #iJS18 Code Result let PBnJMaker = require("../pbnjmaker"); let async = require("../async"); function* makePBnJ() { yield PBnJMaker.fetchBread(); yield PBnJMaker.fetchPeanutButter(); yield PBnJMaker.fetchJam(); yield PBnJMaker.spreadPeanutButter(); yield PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } async(makePBnJ).then((result) => { console.log("Eat that " + result); });
  142. 142. @joel__lord #iJS18 Code Result let PBnJMaker = require("../pbnjmaker"); let async = require("../async"); function* makePBnJ() { yield PBnJMaker.fetchBread(); yield PBnJMaker.fetchPeanutButter(); yield PBnJMaker.fetchJam(); yield PBnJMaker.spreadPeanutButter(); yield PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } async(makePBnJ).then((result) => { console.log("Eat that " + result); });
  143. 143. Async / Await (2017)
  144. 144. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  145. 145. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  146. 146. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  147. 147. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  148. 148. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  149. 149. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  150. 150. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  151. 151. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  152. 152. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  153. 153. @joel__lord #iJS18 What is async/await? ! Newly introduced in ES8 (ES2017) ! Natural evolution of generators and promises let PBnJMaker = require("../pbnjmaker"); async function makePBnJ() { await PBnJMaker.fetchBread(); await PBnJMaker.fetchPeanutButter(); await PBnJMaker.fetchJam(); await PBnJMaker.spreadPeanutButter(); await PBnJMaker.spreadJam(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log(“Eat that " + result) });
  154. 154. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  155. 155. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  156. 156. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  157. 157. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  158. 158. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  159. 159. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  160. 160. @joel__lord #iJS18 What is async/await? ! Very easy to parallelize processes let PBnJMaker = require("../pbnjmaker"); async function getIngredients() { let p1 = PBnJMaker.fetchBread(); let p2 = PBnJMaker.fetchPeanutButter(); let p3 = PBnJMaker.fetchJam(); return await p1 + await p2 + await p3; } async function prepareSandwich() { let p1 = PBnJMaker.spreadPeanutButter(); let p2 = PBnJMaker.spreadJam(); return await p1 + await p2; } async function makePBnJ() { await getIngredients(); await prepareSandwich(); return PBnJMaker.closeSandwich(); } makePBnJ().then((result) => { console.log("Eat that " + result) });
  161. 161. @joel__lord #iJS18 Async / Await Programatically define your steps let PBnJMaker = require("../pbnjmaker"); let ingredients = ["Bread", "PeanutButter", "Jam"]; let steps = ingredients.map((i) => `fetch${i}`); steps.push(...["spreadPeanutButter", "spreadJam"]); async function makePBnJ(todo) { for (var i = 0; i < todo.length; i++) { await PBnJMaker[todo[i]](); } return PBnJMaker.closeSandwich(); } makePBnJ(steps).then((result) => { console.log(“Eat that " + result) });
  162. 162. Events (1990’s)
  163. 163. @joel__lord #iJS18 Events in the browser ! At the core of the original Javascript ! window.onready = … ! button.onclick = …
  164. 164. @joel__lord #iJS18 Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  165. 165. @joel__lord #iJS18 Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  166. 166. @joel__lord #iJS18 Code Demo
  167. 167. @joel__lord #iJS18 Code Demo
  168. 168. Reactive Stream (2017)
  169. 169. @joel__lord #iJS18 RxJS ! Manipulate data, synchronous or asynchronous as streams ! Manipulate streams like arrays
  170. 170. @joel__lord #iJS18 Code Demo
  171. 171. @joel__lord #iJS18 RxJS ! RTFM
  172. 172. In Conclusion (c’est presque la faim)
  173. 173. @joel__lord #iJS18 Summary Asynchronous patterns ! The Event Loop ! Callbacks ! Promises ! Generators ! Async/Await ! Events ! Reactive Stream
  174. 174. @joel__lord #iJS18 Summary Asynchronous patterns ! The Event Loop ! Callbacks ! Promises ! Generators ! Async/Await ! Events ! Reactive Stream ! …. How to make a PBnJ sandwich!
  175. 175. Asynchronicity: concurrency. A tale of iJS, London, UK April 11, 2018 @joel__lord joellord Special thanks to @tomasz_ducin for the inspiration

When starting to dabble with Javascript, the biggest challenge for most developers is understanding how to deal with asynchronous development. During this talk, we will cover some of the different ways to handle async programming like callbacks, promises, reactive streams and events. As we cover those, we will also plunge into some of the mechanics of the NodeJs engine, namely the event loop. Developers attending this talk will have a better understanding of asynchronous programming and will have a few new tools to their belt to tackle those issues as they come.

Views

Total views

238

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×