Wenn ein Bild mehr als tausend Worte wert ist, muss eine interaktive Demo wert sein ... eine Million?

Genießen Sie es, Schlagworte durchzuführen, um den Zweck einer App zu verstehen? Wahrscheinlich nicht. Und es war mir nicht wichtig, all das Blather für mein neuestes Leidenschaftsprojekt zu schreiben, um zu probieren. Also habe ich eine interessantere Lösung verfolgt: Nest meine App auf ihrer eigenen Zielseite, damit die Benutzer erkunden können!

Durchführung

dank Reacts Zwangbarkeit können wir fast einfach unsere Root -App -Komponente rendern und es einen Tag nennen:

export const InteractiveDemo = () => {
    return (
        
    )
}

Sie werden jedoch auf ein paar Probleme stoßen:

1. Die Navigation der Demo -App navigieren durch die reale App
2. Die Demo -App ruft echte Daten ab, die möglicherweise fehlschlagen oder nicht gut zeigen
3. Es ist für Benutzer möglicherweise nicht offensichtlich, was sie ansehen

Lass uns diese lösen. Der React Router V6 und Apollo GraphQL verwenden, aber die Konzepte gelten unabhängig von der Technologie.

Navigation

Um die Navigation der Demo -App von der realen App zu trennen, wickeln wir sie in einen anderen Navigationsanbieter ein:

 import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
        // Hack to nest MemoryRouter inside BrowserRouter.
        // https://github.com/remix-run/react-router/issues/7375
        
            
                
            
        
    )
}

Hinweis Wir verwenden einen MemoryRouter, damit der Browser auf derselben Seite bleibt, während die Demo intern navigiert.

Daten

Um die Demo -App mit gefälschten Daten bereitzustellen, verwalten wir ein gefälschtes "Backend" in der Client -App mit Usestate und servieren sie über einen Mock -Client oder -Server (abhängig von der Implementierung). Für den Rest des App -Code ist es minimal invasiv und lässt uns sogar die Demo für manuelle Tests verwenden - sehr praktisch, wenn wir schnell iteriert werden.

Ich habe Mock-Apollo-Client verwendet; Für Ruhe oder TRPC können Sie so etwas wie Nock verwenden. Sie sind für automatisierte Tests bestimmt, sind aber genau das, was wir hier brauchen.

Zunächst erstellen wir einen Mock -Client, dessen Anfrage die Handlern auf eine Weise abfragen und die Demo -Daten mutieren, die das wahre Backend nachahmt:

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

Dann, genau wie bei der Navigation, wickeln wir unsere Demo in einem neuen Anbieter mit unserem Mock -Kunden ein:

 import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
    const demoClient = useDemoClient()
    return (
         
            
                
                    
                
            
        
    )
}

Wenn Sie stattdessen einen Mock -Server verwendet haben, würden Sie seine URL in den echten Client der Demo -App injizieren.

Bilder

Es funktioniert! Wie machen wir es dem Benutzer offensichtlich, dass er eine interaktive Demo ansieht?

will mobile vormal ist, also habe ich mich entschlossen, die Demo in einem Telefonrahmen zu rendern. Ich habe Geräte verwendet. Aber der Einfachheit halber werden wir hier eine Bibliothek verwenden, die reagieren, die außerhalb des Boxs reagieren: React-Device-Frameset.

Lassen Sie uns auch Zoom verwenden, um die Demo -Benutzeroberfläche zu verkleinern und sie in den Rest der Seite zu nisten. Ich musste diesen Zoom invertieren und berücksichtigen, wenn ich mit visjs-html-nodes verwendet habe, um das Invitee-Diagramm zu zeichnen, aber zum größten Teil "funktioniert".

 import { DeviceFrameset } from 'react-device-frameset'
 import 'react-device-frameset/styles/marvel-devices.min.css'

export const InteractiveDemo = () => {
    const demoClient = useDemoClient()
    return (
        



Lastly, it helps to have an animation so it's clearly not a static image. For example, Wanna continually ghost-types suggestions in the activity input field.


  
  
  Integration


Now that we have our InteractiveDemo component, we render it inside our landing page and we're done!



export const Landing = () => {
    return (
        

            {/* ... */}
            
            {/* ... */}
        
    )
}