Summary: <h3 dir="ltr"><strong>Episode Summary</strong></h3> <p dir="ltr"><strong>Today’s guest is Håkon Krogh, and the panel is discussing his talk on lightning fast SSR React apps given at React Amsterdam. He gives a brief overview and defines his use of the Uncanny Valley (called the Valley of Lies in his talk). In this instance, the Uncanny Valley in programming occurs when everything in a website or application looks great, but none of the buttons work or users simply can’t connect. This is especially common when users try to connect to a site or app with their cell phone rather than a computer.</strong></p> <p dir="ltr"><strong>The panel discusses what can be done. It’s important to begin by measuring the lag in your applications. Designing the progressive loading experience first is suggested as a solution, as well as organizing what loads first and using React and HTML for different parts of the app. It’s important to realize that some tools don’t work in every situation. The panel talks about the merits of Next.js. </strong></p> <p dir="ltr"><strong>Next they talk about what kinds of applications require SSR that make the loading slow. They discuss the importance of SEO ratings and how it can affect your rank in a Google search. Services like Lighthouse can give you an SEO rating so that you can improve. </strong></p> <p dir="ltr"><strong>Håkon and the panel talk about other ways to improve on the Uncanny Valley. It’s important to make sure that users have a way to use your site even if they’re stuck in the Uncanny Valley. One way to do this is to provide fallbacks so that if your React isn’t working, the site is still usable. They discuss the merits of micro frontends, using SSR for only part of the app, and reducing bundle size. Unfortunately there is no silver bullet, so solutions will vary by what you’re building. </strong></p> <p dir="ltr"><strong>In spite of these setbacks, one of the great features of React is you don’t have to do everything in React. They discuss the emerging idea of shipping different JavaScript for different things and talk about some of the React-like alternatives available. Bridging the Uncanny Valley is vital because it is the reason many people are afraid of their computers, and a good user experience can make people gravitate towards your product. The show concludes with Håkon talking about things in the React community that are piquing his interest. </strong></p> <h3 dir="ltr"><strong>Panelists</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>David Ceddia</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Thomas Aylott</strong></p> </li> </ul> <p dir="ltr"><strong>With special guest: Håkon Krogh</strong></p> <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/sustain-our-software/">Sustain Our Software</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://sentry.io/">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/gitlabcommit">GitLab</a> | Get 30% off tickets with the promo code: DEVCHATCOMMIT</strong></p> </li> </ul> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=cSaFLPciWP8">Håkon Krogh’s React Amsterdam talk</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://nextjs.org/">Next.js</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://optinmonster.com/seo-ranking-factors/">SEO ratings</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.gatsbyjs.org/">Gatsby</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/GoogleChrome/lighthouse">Lighthouse</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.apollographql.com/">Apollo GraphQL</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.npmjs.com/">npm</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.typescriptlang.org/">TypeScript</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://preactjs.com/">Preact</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://infernojs.org/">Inferno.js</a></strong></p> </li> </ul> <p dir="ltr"><strong>Follow DevChatTV on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en">Twitter</a></strong></p> <h3 dir="ltr"><strong>Picks</strong></h3> <p dir="ltr"><strong>David Ceddia:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/antonmedv/fx">FX</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://microjs.com/">microjs.com</a></strong></p> </li> </ul> <p dir="ltr"><strong>Thomas Aylott:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.amazon.com/Mindset-Psychology-Carol-S-Dweck/dp/0345472322/ref=sr_1_2?%20?ie=UTF8&qid=1548462018&sr=8-1&linkCode=ll1&tag=devchattv-20&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&language=en_US">Mindset by Carol Dwek</a></strong></p> </li> </ul> <p dir="ltr"><strong>Håkon Krogh:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://bundlephobia.com/">Bundlephobia</a> </strong></p> </li> </ul>
