transloadit / uppy.io

The Uppy website
https://uppy.io
14 stars 27 forks source link

Uppy Wizard #256

Open lakesare opened 4 months ago

lakesare commented 4 months ago

[Slightly edited copypaste from Slack, if you're a transloadit employee please go look at Slack instead, some of the important messages are there]

I think the problem with uppy.io/docs, no matter how we restructure the navigation menu, is that Uppy is a library that doesn't really go well with the list-based documentation. Uppy's structure is tree-like, some options disable some other options.

One way to go about it is to create a choose-your-own-adventure wizard that will be generating Uppy code, similarly to what we do with the Transloadit's Template Wizard. Not only to get people started, I think we can make it so that this is the only thing they'll need for most cases, everything else would be just tinkering with options.


Problems with the current /docs

  1. For beginners it's unclear what's the difference between "sources", "uploaders", "companion" and "golden retriever". They all sound like the same thing. I don't think that developers should know all this uppy lore to get up and running.
  2. When we look at "User Interfaces" => "Elements", nearly all of these elements are ALREADY in Uppy's Dashboard. The only real choice is whether we want to use "Image Editor", but the developer is required to click through all of these to understand her options.
  3. It's not immediately clear that all of the "Sources" listed can only be used with the "Dashboard" UI.

Here is what the uppy wizard could look like approximately:

Choose your FRAMEWORK
    Angular
    React
    Svelte
    Vue

Choose your UI
    Dashboard
    Drag&Drop
        Progress Bar
        Status Bar

Choose your SOURCES [only enabled for Dashboard]
    webcam
    screen capture
    audio
    file input
    oauth
        Transloadit Companion        [1. sign up]
        Express-Integrated Companion [1. set up your own server, 2. for each integration, create an oauth app]
        Standalone Companion         [1. set up your own server, 2. for each integration, create an oauth app]

Choose your UPLOADER
    Tus
        Transloadit                          [1. sign up, 2. sign up on aws]
        Standalone TUS Server (Node, Go)     [1. set up your own server, 2. sign up on aws]
        Integrations (Django, ASP.NET, Node) [1. set up your own server, 2. sign up on aws]
    AWS S3
    XHR

ADDITIONAL
    Compressor
    Golden Retriever
    Image Editor [only enabled for Dashboard]

Re:implementation - escodegen + optionally prettier should be good.

Murderlon commented 2 months ago

From Tim: poor man's version is reusing the checkboxes and the /examples page and conditionally render code underneath there. Would be done a lot quicker, although it would only be for the CDN, not with framework choice.