react-to-svelte-demo

A demo project I set up to demonstrate the differences in React + Next and Svelte + Sapper for a knowledge share session at work

Getting started

Since I haven't set this up as a full-fledged monorepo with something like lerna, you'll have to install the dependencies for the respective apps in one of two ways. Either run npm run superinstall from the root directory or cd into both of the react and svelte folders and npm install

Start the React example app

1. Option 1: From the root of this project, run npm run dev:react
2. Option 2: cd react and then run npm run dev

Start the Svelte example app

1. Option 1: From the root of this project, run npm run dev:svelte
2. Option 2: cd svelte and then run npm run dev

Demo sequence

1. Show the React app in the browser and the code, components, and logic it contains
2. Show the shell of the Svelte app in the browser
3. Show the hinting around unused styles, add the header to make one go away
4. Update FloatingBox to show how Svelte handles children, briefly show fallback slot, then add a temporary child (we'll come back to this after we have the data on the page)
5. Add a temporary variable for a single game and update GameItem to render it, showing how to "expose" props and prop shorthand
6. Add the onMount lifecycle method to pull in the full list of games, showing in the console that we have them
7. Show an each block to loop and render each of the games
8. Add the search input to the floating box to show event handling, event modifiers, and eventually binding. Don't add for to label at first to show a11y hinting
9. Add visibleGames to show reactive variables
10. Implement if/else block to conditionally handle when there are no visible games

If time permits

1. Show named slots with the Field component?
2. Show and example of built in transitions
3. Discuss VS Code setup

Pain points

• Styling children requires global modifier
• Maturity of the ecosystem
• DSL to learn
• Testing story (add more notes here in the morning)

TODOs

• Get an example common landing page in each project with some example components
• DOM events example (on click), including a modifier (ex: once)
• Differences with children/slots
  • Would be nice to add a named slot example
• State management and data flow differences
• Example of svelte prop shorthand
• Example that would show accessibility hinting with Svelte (and maybe an example in React via eslint plugin?)
• Show unused style hinting from Svelte
• Document VS Code environment differences
• TypeScript setup & developer experience
• Testing experience
• Routing/linking differences between Next and Sapper