Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Updating / Restarting Long-Running Web Apps

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 updating web apps that have running for a long time — the problems to look out for and how to avoid them.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 01:54 - The problem</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="17"> This only affects the client-side</li> </ul> <p class="has-line-data" data-line-start="17" data-line-end="18"> 05:28 - What are some solutions:</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Do nothing and hope the user refreshes.</li> <li class="has-line-data" data-line-start="19" data-line-end="22"> Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available: <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> Prompt the user to refresh</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Just refresh the user (store current state in localstorage and restore)</li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Do a custom <Link> component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular <a> instead of a pushstate link.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user.</li> <li class="has-line-data" data-line-start="24" data-line-end="27"> Hot code push. <ul> <li class="has-line-data" data-line-start="25" data-line-end="27"> Vuepress has “hot reloading” baked in.</li> </ul> </li> </ul> <h2 class="code-line" data-line-start="27" data-line-end="28"> <a id="Links_27" name="Links_27"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://twitter.com/wesbos/status/1306969658751361024">https://twitter.com/wesbos/status/1306969658751361024</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://notion.so/">Notion</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://vuepress.vuejs.org/">Vuepress</a></li> <li class="has-line-data" data-line-start="31" data-line-end="33"> <a href="https://www.meteor.com/">Meteor</a></li> </ul> <h2 class="code-line" data-line-start="33" data-line-end="34"> <a id="Tweet_us_your_tasty_treats_33" name= "Tweet_us_your_tasty_treats_33"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> 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 updating web apps that have running for a long time — the problems to look out for and how to avoid them.
 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 01:54 - The problem
  This only affects the client-side
  05:28 - What are some solutions:
  Do nothing and hope the user refreshes.
 Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available:  Prompt the user to refresh
 Just refresh the user (store current state in localstorage and restore)

 Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link.

 Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user.
 Hot code push. Vuepress has “hot reloading” baked in.

  Links  https://twitter.com/wesbos/status/1306969658751361024

 Notion

 Vuepress

 Meteor

  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 - Updating / Restarting Long-Running Web Apps

Poslechněte si podcast