Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

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 talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Deque__Sponsor_9" name="Deque__Sponsor_9"></a>Deque - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at <a href= "https://www.deque.com/syntax">deque.com/syntax</a>. No credit card needed.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</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:32 - Seven new JavaScript proposals</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href= "https://github.com/tc39/proposals">https://github.com/tc39/proposals</a></li> </ul> <p class="has-line-data" data-line-start="19" data-line-end="20"> 06:25 - JSON Modules</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://github.com/tc39/proposal-json-modules">https://github.com/tc39/proposal-json-modules</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Builds on the import assertions</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> No named exports</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Not executed, to avoid security issues</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Not in Node yet</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 09:55 - Array Find From Last</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://github.com/tc39/proposal-array-find-from-last">https://github.com/tc39/proposal-array-find-from-last</a></li> <li class="has-line-data" data-line-start="28" data-line-end="30"> The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.</li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 11:40 - Async Do</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://github.com/tc39/proposal-async-do-expressions">https://github.com/tc39/proposal-async-do-expressions</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Async do will allow you to group together a block of code and mark it as async.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> No need for an iife</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.</li> </ul> <pre data-initialized="true" data-gclp-id="2"> <code class="has-line-data" data-line-start="37" data-line-end= "48">Promise.all([   async do {     let result = await fetch('thing A');     await result.json();   },   async do {     let result = await fetch('thing B');     await result.json();   }, ]).then(([a, b]) => console.log([a, b])); </code> </pre> <p class="has-line-data" data-line-start="49" data-line-end="50"> 14:33 - Change Array By Copy</p> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://github.com/tc39/proposal-change-array-by-copy">https://github.com/tc39/proposal-change-array-by-copy</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Like old array methods, but returns a new array rather than mutating</li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 17:48 - Temporal</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://github.com/tc39/proposal-temporal">https://github.com/tc39/proposal-temporal</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Stage 3, looking good!</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> Amazing, large, very good Date API</li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href= "https://syntax.fm/show/295/hasty-treat-temporal-date-objects-in-javascript"> Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript</a></li> </ul> <p class="has-line-data" data-line-start="59" data-line-end="60"> 18:35 - As Patterns</p> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://github.com/zkat/proposal-as-patterns">https://github.com/zkat/proposal-as-patterns</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Scott don’t get it</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Stage 0</li> <li class="has-line-data" data-line-start="63" data-line-end="65"> when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … }</li> </ul> <p class="has-line-data" data-line-start="65" data-line-end="66"> 20:47 - Pattern Matching</p> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href= "https://github.com/tc39/proposal-pattern-matching">https://github.com/tc39/proposal-pattern-matching</a></li> <li class="has-line-data" data-line-start="67" data-line-end="69"> VERY Rust-like <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href= "https://doc.rust-lang.org/1.6.0/book/patterns.html">https://doc.rust-lang.org/1.6.0/book/patterns.html</a></li> </ul> </li> <li class="has-line-data" data-line-start="69" data-line-end="71"> Stage 1</li> </ul> <pre data-initialized="true" data-gclp-id="3"> <code class="has-line-data" data-line-start="72" data-line-end= "80"><Fetch url={API_URL}>   {props => match (props) {     when ({ loading }) { <Loading />; }     when ({ error }) { <Error error={error} />; }     when ({ data }) { <Page data={data} />; }   }} </Fetch> </code> </pre> <h2 class="code-line" data-line-start="81" data-line-end="82"> <a id="Tweet_us_your_tasty_treats_81" name= "Tweet_us_your_tasty_treats_81"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.
 Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 03:32 - Seven new JavaScript proposals
  https://github.com/tc39/proposals

  06:25 - JSON Modules
  https://github.com/tc39/proposal-json-modules

 Builds on the import assertions
 No named exports
 Not executed, to avoid security issues
 Not in Node yet
  09:55 - Array Find From Last
  https://github.com/tc39/proposal-array-find-from-last

 The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.
  11:40 - Async Do
  https://github.com/tc39/proposal-async-do-expressions

 Async do will allow you to group together a block of code and mark it as async.
 No need for an iife
 Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.
  Promise.all([  async do {   let result = await fetch('thing A');   await result.json();  },  async do {   let result = await fetch('thing B');   await result.json();  }, ]).then(([a, b]) => console.log([a, b]));  14:33 - Change Array By Copy
  https://github.com/tc39/proposal-change-array-by-copy

 Like old array methods, but returns a new array rather than mutating
  17:48 - Temporal
  https://github.com/tc39/proposal-temporal

 Stage 3, looking good!
 Amazing, large, very good Date API
  Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript

  18:35 - As Patterns
  https://github.com/zkat/proposal-as-patterns

 Scott don’t get it
 Stage 0
 when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … }
  20:47 - Pattern Matching
  https://github.com/tc39/proposal-pattern-matching

 VERY Rust-like  https://doc.rust-lang.org/1.6.0/book/patterns.html

 Stage 1
   {props => match (props) {   when ({ loading }) { ; }   when ({ error }) { ; }   when ({ data }) { ; }  }}   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 - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

Poslechněte si podcast