Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

JS Fundamentals - Decorators

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.

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:25">00:25</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:00">01:00</a> Are decorators finally here?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href= "https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md"> TC39 proposal</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://github.com/tc39/proposal-decorators#how-does-this-proposal-compare-to-other-versions-of-decorators"> How this compares to other versions of decorators</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=06:47">06:47</a> What are use cases for decorators?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=10:55">10:55</a> How do you define a decorator?</li> <li class="has-line-data" data-line-start="10" data-line-end="12"> <a href="#t=14:20">14:20</a> Auto Accessor</li> </ul> on classes <pre><code class="has-line-data" data-line-start="15" data-line-end="18">@loggged class C {} </code></pre> on fields <pre><code class="has-line-data" data-line-start="22" data-line-end="26">class C { @logged x = 1; } </code></pre> Auto Accessor <pre><code class="has-line-data" data-line-start="30" data-line-end="34">class C { accessor x = 1; } </code></pre> sugar for below <pre><code class="has-line-data" data-line-start="38" data-line-end="50">class C { #x = 1; // # means private get x() { return this.#x; } set x(val) { this.#x = val; } } </code></pre> Can be decorated and decorator can return new get and set and init functions <pre><code class="has-line-data" data-line-start="54" data-line-end="81">function logged(value, { kind, name }) { if (kind === "accessor") { let { get, set } = value; return { get() { console.log(`getting ${name}`); return get.call(this); }, set(val) { console.log(`setting ${name} to ${val}`); return set.call(this, val); }, init(initialValue) { console.log(`initializing ${name} with value ${initialValue}`); return initialValue; } }; } // ... } </code></pre> <h2 class="code-line" data-line-start="82" data-line-end="83"> <a id="Tweet_us_your_tasty_treats_82"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is.
 Show Notes  00:25 Welcome
 01:00 Are decorators finally here?
  TC39 proposal

  How this compares to other versions of decorators

 06:47 What are use cases for decorators?
 10:55 How do you define a decorator?
 14:20 Auto Accessor
 on classes
 @loggged class C {} on fields
 class C { @logged x = 1; }  Auto Accessor
 class C {  accessor x = 1; }  sugar for below
 class C {  #x = 1; // # means private  get x() {   return this.#x;  }  set x(val) {   this.#x = val;  } }  Can be decorated and decorator can return new get and set and init functions
 function logged(value, { kind, name }) {  if (kind === "accessor") {   let { get, set } = value;   return {    get() {     console.log(`getting ${name}`);     return get.call(this);    },    set(val) {     console.log(`setting ${name} to ${val}`);     return set.call(this, val);    },    init(initialValue) {     console.log(`initializing ${name} with value ${initialValue}`);     return initialValue;    }   };  }  //... }  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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

JS Fundamentals - Decorators

Poslechněte si podcast