Update

I gave an updated version of this talk at Mintel in Chicago in February 2025. Updated slides can be found here in PDF, PPTX, and Keynote formats. They include updates for how Microfrontends/BFFs are ideally suited for agentic AI development.

Code for my “Experiences, Not Apps” talk at the Chicago React Meetup, September 2023 (EDIT: See updated slides above)

Jump to code

Slides

• PDF slides
• Powerpoint
• Keynote source

To Run

1. Start the BFF/API server using the readme in bffs/products. (There's only one microfrontend right now, Products, so there's also only one BFF.)
2. Figure out which sample you want to use, and run it using the readmes in single-spa or roll-your-own.

Quickstart

# Shell 1:
cd bffs/products; npm run dev

# Then, choose one of the following:

# RYO microfrontend, Shell 1:
cd roll-your-own/products; npm run dev
# RYO microfrontend, Shell 2 (this is the example article):
cd roll-your-own/products/example; npm run start

# Single-spa
cd single-spa/products; npm run start
cd single-spa/root-config; npm run start

Check it out

• The BFF is a Node.js server that serves up the API and the microfrontend. It's not a microfrontend itself, but its types are in Typescript. If you update its openapi spec, you can regenerate them with npm run build-types in roll-your-own/products.
• It's possible to include other microfrontends from root-configs - see the single-spa/root-config's import map for an example.
• I changed the ProductsExperience microfrontend to be installed via a .hydrate() function, so that's how you'd bootstrap stuff. You can see this happening in the example index.html files.

TODOS

• For the Roll-Your-Own implementation:
  • Hot reloading in dev (would use an esbuild plugin)
  • Experiment with SSR
• For Frint
  • Actually make a demo 😉