Hasty Treat - Updating / Restarting Long-Running Web Apps

Syntax

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.

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 Tweet us your tasty treats!

Audio Player

-
--:--
--:--