Si una imagen vale más que mil palabras, entonces una demostración interactiva debe valer ... un millón?

¿disfruta desplazándose por las palabras de moda para comprender el propósito de una aplicación? Probablemente no. Y no me importó escribir todo ese matar para mi último proyecto de pasión, Wanna. ¡Así que busqué una solución más interesante: ¡nida mi aplicación dentro de su propia página de destino para que los usuarios exploren!

Implementación

Gracias a la composición de React, podemos casi simplemente renderizar nuestro componente de la aplicación raíz y llamarlo un día:

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

Sin embargo, se encontrará con algunos problemas:

1. La navegación de la aplicación de demostración navegará por la aplicación real
2. La aplicación de demostración recuperará datos reales, que pueden fallar o no mostrarlos bien
3. puede no ser obvio para los usuarios lo que están viendo

Resolvamoslos. Wanna usa React Router V6 y Apollo GraphQL, pero los conceptos se aplican independientemente de la tecnología.

Navegación

Para separar la navegación de la aplicación de demostración de la aplicación real, la envolvemos dentro de otro proveedor de navegación:

 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
        
            
                
            
        
    )
}

Nota Usamos un MemoryRouter para que el navegador permanezca en la misma página mientras la demostración navega internamente.

Datos

Para proporcionar la aplicación de demostración con datos falsos, mantenemos un "backend" falso dentro de la aplicación del cliente con USESTATE y la servimos a través de un cliente o servidor simulado (dependiendo de la implementación). Es mínimamente invasivo para el resto del código de la aplicación, e incluso nos permite usar la demostración para pruebas manuales, muy útil al iterando rápidamente.

Usé mock-apollo-client; Para descansar o TRPC, puede usar algo como Nock. Están destinados a pruebas automatizadas, pero son exactamente lo que necesitamos aquí.

Primero, creamos un cliente simulado cuyos controladores de solicitudes consultan los datos de demostración de una manera que imita el backend real:

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
}

Entonces, como lo hicimos con la navegación, envolvemos nuestra demostración en un nuevo proveedor con nuestro cliente simulado:

 import { ApolloProvider } from '@apollo/client'

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

Si usara un servidor simulado en su lugar, inyectaría su URL en el cliente real de la aplicación de demostración.

Visuales

funciona! Ahora, ¿cómo hacemos obvio para el usuario que está viendo una demostración interactiva?

wanna es móvil primero, así que decidí representar la demostración dentro de un marco de teléfono. Usé dispositivos.css porque ofrece los dispositivos que pensé que se veían mejor (es decir, bisel mínimo para maximizar el espacio de demostración). Pero para simplificar, aquí usaremos una biblioteca que admite reaccionar fuera de la caja: react-device-frameset.

Usemos también Zoom para encoger la UI de demostración y anidarla bien dentro del resto de la página. En wanna, tuve que invertir y explicar este zoom cuando usa con Visjs-Html-Nodes para dibujar el gráfico invitado, pero en su mayor parte "solo funciona".

 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 (
        

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