Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - What is the n+1 problem?

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 a common problem you’ll encounter in your development career — the n+1 problem.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Hasura__Sponsor_9" name="Hasura__Sponsor_9"></a>Hasura - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: <a href="https://hasura.info/freetrial">hasura.info</a>. We’ve also got an amazing selection of GraphQL tutorials at <a href="https://hasura.io/learn">hasura.io/learn</a>.</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/" target="_blank" rel= "noopener noreferrer">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"> 05:00 - What is the n+1 problem?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="19"> The N+1 problem can happen in any language but is especially prevalent in <a href= "https://graphql.org/">GraphQL</a> because it’s so easy to query relationships.</li> </ul> <p class="has-line-data" data-line-start="19" data-line-end="20"> 09:33 - The solution</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="22"> The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids.</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 11:11 - Should you care?</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Sometimes no: its often fine to do multiple DB Calls</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://github.com/topics/facebook-dataloader">Facebook DataLoader</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://github.com/mercurius-js/mercurius">Mercurious</a></li> <li class="has-line-data" data-line-start="26" data-line-end="31"> Many ORMs take care of this for you <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> These then break it down into my appropriate SQL</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://www.mongodb.com/">MongoDB</a> Ruby: eager loading</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://laravel.com/docs/5.0/eloquent">Laravel ORM</a> does it</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Aggregation pipelines</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Prisma N+1: <a href= "https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en">https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://mongoosejs.com/docs/populate.html">Mongoose Populate</a></li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="https://studio.apollographql.com/login">Apollo Studio</a></li> </ul> <h2 class="code-line" data-line-start="35" data-line-end="36"> <a id="Tweet_us_your_tasty_treats_35" name= "Tweet_us_your_tasty_treats_35"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> 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 a common problem you’ll encounter in your development career — the n+1 problem.
 Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
 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 05:00 - What is the n+1 problem?
  The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships.
  09:33 - The solution
  The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids.
  11:11 - Should you care?
  Sometimes no: its often fine to do multiple DB Calls
 Facebook DataLoader

 Mercurious

 Many ORMs take care of this for you  These then break it down into my appropriate SQL
 MongoDB Ruby: eager loading
 Laravel ORM does it
 Aggregation pipelines

 Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en

 Mongoose Populate

 Apollo Studio

  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 - What is the n+1 problem?

Poslechněte si podcast