electric icon indicating copy to clipboard operation
electric copied to clipboard

Write a walkthrough tutorial for an Electric web app

Open KyleAMathews opened this issue 10 months ago • 5 comments

It should cover

  • setting up a local dev environment
  • defining shapes
  • optimize app speed by preloading
  • writes
  • auth
  • securing the production deployment

KyleAMathews avatar Feb 24 '25 16:02 KyleAMathews

optimize app speed by preloading

I think this is one strategy to optimise app speed by fetching ahead. I think we could also cover basic shape patterns like:

  • fetching one shape as an index and then syncing one or more shapes using the content of it (e.g.: get all project IDs for user, then sync projects)
  • changing a shape -- how this works, how this works with a raw shape/shapestream and with useShape
  • cleanup on component unmount

I also think we should demonstrate what you can sync into. The tutorial is a perfect flow for syncing first into memory, then binding to a component, then syncing into a DB and binding using a liveQuery.

thruflo avatar Feb 25 '25 09:02 thruflo

This should be half-way between the existing quickstart (which is the "basic getting started", hence edited title) and the more detailed guides. So walkthrough the steps of more realistic e2e app development with Electric but also links out to guides for the full details.

thruflo avatar Feb 25 '25 09:02 thruflo

Generally for a tutorial you want to keep it as simple as possible with just the narrowest possible pathway connecting the key areas. They're for beginners who know absolutely nothing about what we're doing so we want to avoid presenting options or complexity beyond the minimum needed to get something basic working. Every branch in the explanation loses a lot of people.

Guides are a better place for detailed looks at complex patterns or comparing tradeoffs of syncing into memory vs. db. etc.

E.g. https://danielsieger.com/blog/2023/04/24/framework-for-better-documentation.html

KyleAMathews avatar Feb 25 '25 15:02 KyleAMathews

Yup, I think it can be a linear pathway and an opportunity to help clarify the misconceptions of what you can sync into; but also maybe a step too far. Let's see how it feels/reads in the implementation.

thruflo avatar Feb 26 '25 10:02 thruflo

Deep Research report on Saas tutorials https://chatgpt.com/share/67bf5e92-1084-800c-b728-e1cbda745393

KyleAMathews avatar Feb 26 '25 18:02 KyleAMathews