Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV

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="0" data-line-end="1">In this supper club episode of Syntax, Wes and Scott talk with Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, and more.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Gatsby__Sponsor_2" name="Gatsby__Sponsor_2"></a>Gatsby - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit <a href="https://gatsby.dev/Syntax">Gatsby.dev/Syntax</a> to get your first Gatsby site up in minutes and experience the speed. ⚡️</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Sponsorname__Sponsor_6" name= "Sponsorname__Sponsor_6"></a>Sponsorname - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.</p> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://retool.com/syntax">retool.com/syntax</a></p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sponsorname__Sponsor_12" name= "Sponsorname__Sponsor_12"></a>Sponsorname - Sponsor</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://www.storyblok.com/?utm_source=syntaxfm&utm_medium=sponsor&utm_campaign=AWA_SPON_SFM_TRA&utm_content=syntaxfm-podcast"> Storyblok</a> is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.</p> <h2 class="code-line" data-line-start="16" data-line-end="17"> <a id="Show_Notes_16" name="Show_Notes_16"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=00:36">00:36</a></strong> Welcome</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=02:15">02:15</a></strong> Guest introduction</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://fbritoferreira.com">fbritoferreira.com</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://mobile.twitter.com/SkyShowtime">@SkyShowtime</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://mobile.twitter.com/peacock">Peacock</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=04:13">04:13</a></strong> What do the systems look like inside of Sky?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.graphql.com">GraphQL</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://redis.io">Redis</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://www.apollographql.com">Apollo GraphQL</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=06:26">06:26</a></strong> Do you use federation?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=07:50">07:50</a></strong> How do you handle caching?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=11:24">11:24</a></strong> What’s the tech stack for the front end?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=13:30">13:30</a></strong> Do you cache on client side?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=15:27">15:27</a></strong> How long has Sky been serverless?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=16:55">16:55</a></strong> Sponsor: Gatsby</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=18:05">18:05</a></strong> How was Sky’s Apple TV app built?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=21:17">21:17</a></strong> Where did you host media?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://aws.amazon.com/media/direct-to-consumer-d2c-streaming/">AWS Streaming</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.mux.com">Mux</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=24:37">24:37</a></strong> Supporting live events</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=28:03">28:03</a></strong> Sponsor: Storyblok</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=30:05">30:05</a></strong> What language are you writing the GraphQL layer?</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.the-guild.dev">The Guild</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=32:22">32:22</a></strong> How do you define your types?</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <strong><a href="#t=36:40">36:40</a></strong> Supper Club questions</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://www.apple.com/shop/product/MK293LL/A/magic-keyboard-with-touch-id-for-mac-models-with-apple-silicon-us-english?fnode=882ee89d5200bd42d9dfdb18ea688d2284453eef35a10d6d1154de2d917c59e1edbd4796140e0decd50ffa8f8c4257d359a9c5370dd91b4fd7ff1ca816e69c2101a97e0e452c1844b6387e49a9dd84f9fd4a36eb78f0f95e050323fa7fd48182"> Apple Magic Keyboard with Touch ID</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href= "https://www.apple.com/shop/product/MMMR3LL/A/magic-keyboard-with-touch-id-and-numeric-keypad-for-mac-models-with-apple-silicon-us-english-black-keys?fnode=4c07059c2c01bc9ba2a54f0652c4be0b2d1ba2671c434806d779030bf9e5528ae9e36e718a6ebb1887cb752fbad06477606b200b4eefc2a66c894a24cc214c6c36485aae46d6632518a80da22efd54cbc2ed617c7fa8c6737af423fe6f3208d05f33e8df5aa6fbf8da0267b2be277c39"> Magic Keyboard with Touch ID and Numeric Keypad</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <strong><a href="#t=44:28">44:28</a></strong> Sponsor: ReTool</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <strong><a href="#t=45:22">45:22</a></strong> AppWrite</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://appwrite.io">AppWrite</a></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <strong><a href="#t=48:42">48:42</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="_SIIIIICK__PIIIICKS__50" name= "_SIIIIICK__PIIIICKS__50"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href= "https://www.anker.com/products/a1651?ref=ganprime_top_itemlist&variant=41974350250134"> Anker 733 Power Bank (GaNPrime PowerCore 65W)</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> 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 Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, and more.
 Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
 Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
 retool.com/syntax
 Sponsorname - Sponsor  Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
 Show Notes  00:36 Welcome
 02:15 Guest introduction
 fbritoferreira.com

 @SkyShowtime

 Peacock

 04:13 What do the systems look like inside of Sky?
 GraphQL

 Redis

 Apollo GraphQL

 06:26 Do you use federation?
 07:50 How do you handle caching?
 11:24 What’s the tech stack for the front end?
 13:30 Do you cache on client side?
 15:27 How long has Sky been serverless?
 16:55 Sponsor: Gatsby
 18:05 How was Sky’s Apple TV app built?
 21:17 Where did you host media?
 AWS Streaming

 Mux

 24:37 Supporting live events
 28:03 Sponsor: Storyblok
 30:05 What language are you writing the GraphQL layer?
 The Guild

 32:22 How do you define your types?
 36:40 Supper Club questions
  Apple Magic Keyboard with Touch ID

  Magic Keyboard with Touch ID and Numeric Keypad

 44:28 Sponsor: ReTool
 45:22 AppWrite
 AppWrite

 48:42 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Anker 733 Power Bank (GaNPrime PowerCore 65W)

  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 × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV

Poslechněte si podcast