Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Async + Await

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<h2 id="freshbooks-sponsor">Freshbooks — Sponsor</h2> <p>If you are a small business or freelancer check out <a href="https://freshbooks.com/syntax" target="_blank" rel="noopener">Freshbooks.com Cloud Accounting</a>and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.</p> <h2 id="show-notes">Show Notes</h2> <p>02:55</p> <ul> <li><a href="https://www.youtube.com/watch?v=9YkUCxvaLEk" target= "_blank" rel="noopener">Wes' Async + Await talk on YouTube from DotJS</a></li> <li>JavaScript is Asynchronous</li> <li><a href="https://www.youtube.com/watch?v=ztspvPYybIY" target= "_blank" rel="noopener">Ryan Dhal (Creator of Node.js) original Node.js talk</a></li> </ul> <p>06:00</p> <ul> <li>Callback Hell</li> <li>Q</li> <li>Bluebird</li> <li>What is a promise?</li> <li>Promises are an IOU</li> </ul> <p>8:30</p> <ul> <li>Async + Await IS promises</li> <li>What is Async + Await?</li> <li>How does the code look?</li> <li>Returning values from an await</li> </ul> <p>15:20</p> <ul> <li>Performance Considerations</li> <li>MEGA PROMISES</li> <li>Promise.all()</li> <li>Here is an example:</li> <li>const [weather, store] = Promise.all(getWeather(), getStores());</li> </ul> <p>19:22</p> <ul> <li>This stuff is 100% native</li> <li>Most new Browser APIs are build on Promises</li> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener">Fetch()</a></li> <li>Some examples:</li> <li>await fetch('<a href= "https://api.github.com/users/wesbos').then(data" target="_blank" rel= "noopener"> https://api.github.com/users/wesbos').then(data</a> => data.json())</li> <li>OR</li> <li>await (await fetch('<a href= "https://api.github.com/users/wesbos')).json(" target="_blank" rel= "noopener"> https://api.github.com/users/wesbos')).json(</a>)</li> <li><a href="https://github.com/axios/axios" target="_blank" rel= "noopener">Axios</a></li> </ul> <p>22:48</p> <ul> <li><a href= "https://developers.google.com/web/fundamentals/payments/" target= "_blank" rel="noopener">The Payment Request API</a></li> <li>You should listen to episode 006 on <a href= "https://syntax.fm/show/006/accepting-money-on-the-internet" target="_blank" rel="noopener">accepting money on the internet</a></li> <li>Web Animation API</li> </ul> <p>27:00</p> <ul> <li>Snackisodes</li> <li>Snack Packs</li> <li>Hasty Treats?!!!</li> </ul> <p>28:00</p> <ul> <li>Making callback-based functions promised basked</li> <li><a href="https://www.npmjs.com/package/es6-promisify" target= "_blank" rel="noopener">es6-promisify</a></li> <li><a href="http://2ality.com/2017/05/util-promisify.html" target= "_blank" rel="noopener">util.promisify()</a></li> </ul> <p>30:00</p> <ul> <li>Error Handling Methods</li> <li>View <a href= "http://localhost:6969/wesbos.github.io/Async-Await-Talk/" target= "_blank" rel="noopener">my slides</a> for some code examples.</li> <li>Try/Catch</li> <li>High Order Function</li> <li>Just handle the error when you callIt().catch(dealWithIt);</li> <li>Node's process.on('unhandledRejection') event</li> </ul> <p>36:00</p> <ul> <li>Browser Support</li> <li>Babel it!</li> </ul> <p>38:00</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/API/AbortController" target="_blank" rel="noopener">AbortController()</a></li> <li><a href= "https://developers.google.com/web/updates/2017/09/abortable-fetch" target="_blank" rel="noopener">Abortable Fetch</a></li> </ul> <h2 id="siiiiick-picks">SIIIIICK PICKS</h2> <p>42:00</p> <ul> <li>Scott: <a href="http://amzn.to/2DEUJaL" target="_blank" rel="noopener">Ring Doorbell</a></li> <li>Wes: <a href= "https://www.npr.org/sections/money/567724614/the-indicator" target="_blank" rel="noopener">The Indicator Podcast</a></li> </ul> <p>47:00</p> <ul> <li>Sick Tip</li> <li>Chrome's Autoplay is changing</li> <li><a href= "https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" target="_blank" rel="noopener">Details on this</a></li> <li>Visit chrome://media-engagement to see your scores</li> </ul> <h2 id="shameless-plugs">Shameless Plugs</h2> <ul> <li><a href= "https://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg" target= "_blank" rel="noopener">Fullstack GraphQL</a></li> <li><a href="https://cssgrid.io/" target="_blank" rel= "noopener">CSS Grid Course is coming sooooon!</a></li> </ul> <h2 id="tweet-us-your-tasty-treats-">Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/" target="_blank" rel="noopener">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" target= "_blank" rel="noopener">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" target="_blank" rel="noopener">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" target="_blank" rel= "noopener">Wes' Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" target= "_blank" rel="noopener">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" target="_blank" rel= "noopener">Scott's Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM" target="_blank" rel= "noopener">@SyntaxFM</a> in your tweets</li> </ul>

Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
 Show Notes 02:55
 Wes' Async + Await talk on YouTube from DotJS
 JavaScript is Asynchronous
 Ryan Dhal (Creator of Node.js) original Node.js talk
 06:00
 Callback Hell
 Q
 Bluebird
 What is a promise?
 Promises are an IOU
 8:30
 Async + Await IS promises
 What is Async + Await?
 How does the code look?
 Returning values from an await
 15:20
 Performance Considerations
 MEGA PROMISES
 Promise.all()
 Here is an example:
 const [weather, store] = Promise.all(getWeather(), getStores());
 19:22
 This stuff is 100% native
 Most new Browser APIs are build on Promises
 Fetch()
 Some examples:
 await fetch(' https://api.github.com/users/wesbos').then(data => data.json())
 OR
 await (await fetch(' https://api.github.com/users/wesbos')).json()
 Axios
 22:48
 The Payment Request API
 You should listen to episode 006 on accepting money on the internet

 Web Animation API
 27:00
 Snackisodes
 Snack Packs
 Hasty Treats?!!!
 28:00
 Making callback-based functions promised basked
 es6-promisify
 util.promisify()
 30:00
 Error Handling Methods
 View my slides for some code examples.
 Try/Catch
 High Order Function
 Just handle the error when you callIt().catch(dealWithIt);
 Node's process.on('unhandledRejection') event
 36:00
 Browser Support
 Babel it!
 38:00
 AbortController()
 Abortable Fetch
 SIIIIICK PICKS 42:00
 Scott: Ring Doorbell

 Wes: The Indicator Podcast

 47:00
 Sick Tip
 Chrome's Autoplay is changing
 Details on this
 Visit chrome://media-engagement to see your scores
 Shameless Plugs Fullstack GraphQL
 CSS Grid Course is coming sooooon!
 Tweet us your tasty treats! Scott's Instagram
 LevelUpTutorials Instagram
 Wes' Instagram
 Wes' Twitter
 Wes' Facebook
 Scott's Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Async + Await

Poslechněte si podcast