Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

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.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:24 - Synchronous / Async</p> <p class="has-line-data" data-line-start="18" data-line-end="19"> 05:23 - Multi-threaded</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> JavaScript has a single “main thread”</li> <li class="has-line-data" data-line-start="20" data-line-end="22"> But you can have more threads with web workers</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 08:12 - Blocking</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> JavaScript can stop other things on the page from running</li> <li class="has-line-data" data-line-start="24" data-line-end="25">A script tag can block HTML from being parsed</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Most stuff in JavaScript is non-blocking</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> Node.js write to filesystem can be blocking</li> </ul> <p class="has-line-data" data-line-start="28" data-line-end="29"> 10:27 - Concurrent + Parallel</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> JavaScript start/stop are concurrent</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> The API runs on a different thread</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Doesn’t REALLY matter</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href= "https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html"> https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html</a></li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 13:22 - Consecutive / Waterfall</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> One after another</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 13:48 - Callback</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39">A function to run when this thing <em>happens</em> or <em>is done</em></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> Click event callback</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Websocket on data callback <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Like a tweet stream</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Data fetch callback <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Almost entirely replaced with async + await</li> </ul> </li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href= "http://callbackhell.com/">http://callbackhell.com/</a></li> <li class="has-line-data" data-line-start="45" data-line-end="47"> <a href= "https://caolan.github.io/async/v3/">https://caolan.github.io/async/v3/</a></li> </ul> <p class="has-line-data" data-line-start="47" data-line-end="48"> 17:56 - Script Tag Async + Defer</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Doesn’t block other content</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Runs when ready - doesn’t care about DOMcontentLoaded</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Wait until the page is loaded before running</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> If the script tag is above content, don’t wait for it</li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Good for things that aren’t called on page load</li> </ul> <p class="has-line-data" data-line-start="54" data-line-end="55"> 21:54 - Lazy</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Load it in later - maybe when it’s scrolled into view, or as needed</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Not mission-critical</li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Tweet_us_your_tasty_treats_58" name= "Tweet_us_your_tasty_treats_58"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Show Notes 03:24 - Synchronous / Async
 05:23 - Multi-threaded
  JavaScript has a single “main thread”
 But you can have more threads with web workers
  08:12 - Blocking
  JavaScript can stop other things on the page from running
 A script tag can block HTML from being parsed
 Most stuff in JavaScript is non-blocking
 Node.js write to filesystem can be blocking
  10:27 - Concurrent + Parallel
  JavaScript start/stop are concurrent
 The API runs on a different thread
 Doesn’t REALLY matter
  https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html

  13:22 - Consecutive / Waterfall
  One after another
  13:48 - Callback
 A function to run when this thing happens or is done

 Click event callback
 Websocket on data callback  Like a tweet stream

 Data fetch callback  Almost entirely replaced with async + await

 http://callbackhell.com/

 https://caolan.github.io/async/v3/

  17:56 - Script Tag Async + Defer
  Doesn’t block other content
 Runs when ready - doesn’t care about DOMcontentLoaded
 Wait until the page is loaded before running
 If the script tag is above content, don’t wait for it
 Good for things that aren’t called on page load
  21:54 - Lazy
  Load it in later - maybe when it’s scrolled into view, or as needed
 Not mission-critical
  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

Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

Poslechněte si podcast