Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Web Components and Lit with Justin Fagnani of Google

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 supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components? <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor</h2> 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. <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Show_Notes_6"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=00:49:11">00:49:11</a> Guest introduction </li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=01:03:00">01:03:00</a> Sponsor: Sentry </li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=02:02:11">02:02:11</a> Why do people use React when we have web components and lit? </li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=03:57:14">03:57:14</a> Who is Justin Fagnani? </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://justinfagnani.com/">Justin Fagnani</a> </li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://twitter.com/justinfagnani">Justin Fagnani (@justinfagnani)</a> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://github.com/justinfagnani">Justin Fagnani · GitHub</a> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://fosstodon.org/@justinfagnani">Justin Fagnani - Fosstodon</a> </li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://twitter.com/buildWithLit">Lit (@buildWithLit)</a> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://lit.dev/">Lit</a> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://en.wikipedia.org/wiki/Google_App_Maker">Google App Maker</a> </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=04:55:02">04:55:02</a> What are web components? </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://github.com/extensibleweb/manifesto">The Extensible Web Manifesto</a> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=05:59:08">05:59:08</a> What is the shadow dom? </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=08:56:02">08:56:02</a> Was there an intention for a layer on top of web components? </li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=13:22:09">13:22:09</a> What is Lit? </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=16:19:23">16:19:23</a> What are the benefits of using a library for web components? </li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://custom-elements-everywhere.com/">Custom Elements Everywhere</a> </li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=21:20:14">21:20:14</a> Why would write in React and not in web components? </li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=24:24:18">24:24:18</a> How does CSS work with web components and Lit? </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=28:00:14">28:00:14</a> Using constructable stylesheets </li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/::part">::part</a> </li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://web.dev/constructable-stylesheets/">Constructable stylesheets/</a> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=29:58:18">29:58:18</a> Does Lit do anything with CSS? </li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=32:01:01">32:01:01</a> Does Lit do routing? </li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://www.npmjs.com/package/@adobe/lit-mobx">Lit Mobx</a> </li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=34:06:02">34:06:02</a> How does Lit work with state? </li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=34:52:15">34:52:15</a> What about signals? </li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=38:49:00">38:49:00</a> Is Server Side Rendering possible with web components? </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=41:03:07">41:03:07</a> What websites are using Lit and/or web components? </li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=44:26:08">44:26:08</a> What’s the difference between Lit and Polymer? </li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=45:44:17">45:44:17</a> What is the future of web components? </li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=48:09:14">48:09:14</a> Supper club questions </li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://github.com/w3c/csswg-drafts">GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts</a> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="#t=56:36:20">56:36:20</a> SIIIIICK ××× PIIIICKS ××× </li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="#t=55:27">55:27</a> SIIIIICK ××× PIIIICKS ××× </li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="_SIIIIICK__PIIIICKS__46"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="50"> <a href="https://www.hbo.com/the-last-of-us">The Last of Us | Official Website for the HBO Series | HBO.com</a></li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Shameless_Plugs_50"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://lit.dev/">Lit</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href="https://lit.dev/discord/">Lit Discord</a></li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="Tweet_us_your_tasty_treats_55"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components?
 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  00:49:11 Guest introduction

  01:03:00 Sponsor: Sentry

  02:02:11 Why do people use React when we have web components and lit?

  03:57:14 Who is Justin Fagnani?

  Justin Fagnani

  Justin Fagnani (@justinfagnani)

  Justin Fagnani · GitHub

  Justin Fagnani - Fosstodon

  Lit (@buildWithLit)

  Lit

  Google App Maker

  04:55:02 What are web components?

  The Extensible Web Manifesto

  05:59:08 What is the shadow dom?

  08:56:02 Was there an intention for a layer on top of web components?

  13:22:09 What is Lit?

  16:19:23 What are the benefits of using a library for web components?

  Custom Elements Everywhere

  21:20:14 Why would write in React and not in web components?

  24:24:18 How does CSS work with web components and Lit?

  28:00:14 Using constructable stylesheets

  ::part

  Constructable stylesheets/

  29:58:18 Does Lit do anything with CSS?

  32:01:01 Does Lit do routing?

  Lit Mobx

  34:06:02 How does Lit work with state?

  34:52:15 What about signals?

  38:49:00 Is Server Side Rendering possible with web components?

  41:03:07 What websites are using Lit and/or web components?

  44:26:08 What’s the difference between Lit and Polymer?

  45:44:17 What is the future of web components?

  48:09:14 Supper club questions

  GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts

  56:36:20 SIIIIICK ××× PIIIICKS ×××

  55:27 SIIIIICK ××× PIIIICKS ×××

  ××× SIIIIICK ××× PIIIICKS ×××  The Last of Us | Official Website for the HBO Series | HBO.com

  Shameless Plugs  Lit

 Lit Discord

  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

Supper Club × Web Components and Lit with Justin Fagnani of Google

Poslechněte si podcast