Skip to content

React Conf 2018 Source Code for "Moving to Suspense" Demo

License

Notifications You must be signed in to change notification settings

FilipMessa/react-conf-2018

 
 

Repository files navigation

Moving to React Suspense

By Jared Palmer at React Conf 2018.


This is the source code to the application I demo'd at React Conf 2018. It is a small slice of Spotify called Suspensify. It's built with create react app, reach router, and good ol' setState.

It's separated into 3 folders:

  • before-suspense is the initial state of the application.
  • conf-talk-progress is where we end up--the final state of my talk--so you can follow along.
  • after-suspsense is a version where every single thing that can be moved to suspense, has been moved to suspense. I did not get this far in my talk, but it's there for completeness / reference.

Running locally

cd conf-talk-progress
yarn start

Note the Ken Wheeler and Wale routes do not work. I didn't bother making fake data for them. Sorry. Only the Drake and Big Sean routes work (first 2 results).

In the patches directory, there is a patched version of CRA's config/webpackDevServer.config.js that adds a little express middleware that will delay the high-res images from loading for demo purposes. It sniffs any requests including with -hd.jpeg and waits for the value of delay query parameter. The <Debugger /> request latency slider is used to set this query parameter's value for all images.

What's it look like?

kapture 2018-10-29 at 15 50 42

About

React Conf 2018 Source Code for "Moving to Suspense" Demo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.6%
  • CSS 12.7%
  • HTML 0.7%