Libatkan Pengguna Serta-merta: Benamkan Demo Interaktif dalam React SPA anda

Jika gambar bernilai seribu perkataan, maka demo interaktif mesti bernilai... satu juta?

Adakah anda gemar menatal kata kunci untuk memahami tujuan apl? Mungkin tidak. Dan saya tidak kisah untuk menulis semua itu untuk projek semangat terbaru saya, Wanna. Jadi saya meneruskan penyelesaian yang lebih menarik: sarang apl saya di dalam halaman pendaratannya sendiri untuk diterokai pengguna!

Gif ini mempunyai 263 bingkai, jadi saya rasa ia bernilai 263,000 patah perkataan

Perlaksanaan

Terima kasih kepada kebolehkomposisian React, kami boleh hampir hanya memaparkan komponen Apl akar kami dan memanggilnya sehari:

export const InteractiveDemo = () => {
    return (
        <app></app>
    )
}

Walau bagaimanapun, anda akan menghadapi beberapa masalah:

1. Navigasi apl demo akan menavigasi apl sebenar
2. Apl demo akan mendapatkan semula data sebenar, yang mungkin gagal atau tidak mempamerkannya dengan baik
3. Mungkin tidak jelas kepada pengguna apa yang mereka lihat

Mari kita selesaikan mereka. Ingin menggunakan React Router v6 dan Apollo GraphQL, tetapi konsepnya digunakan tanpa mengira teknologi.

Navigasi

Untuk memisahkan navigasi apl demo daripada apl sebenar, kami membungkusnya dengan pembekal navigasi lain:

+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
+       <unsafe_locationcontext.provider value="{null}">
+           <memoryrouter initialentries="{['/app']}">
                <app></app>
+           </memoryrouter>
+       </unsafe_locationcontext.provider>
    )
}

Perhatian kami menggunakan MemoryRouter supaya penyemak imbas kekal pada halaman yang sama semasa demo menavigasi secara dalaman.

Data

Untuk menyediakan apl demo dengan data palsu, kami mengekalkan "belakang" palsu di dalam apl pelanggan dengan useState dan menyediakannya melalui klien atau pelayan olok-olok (bergantung pada pelaksanaan). Ia invasif minimum kepada kod apl yang lain, malah membolehkan kami menggunakan tunjuk cara untuk ujian manual - sangat berguna apabila lelaran dengan cepat.

Saya menggunakan mock-apollo-client; untuk REST atau tRPC, anda mungkin menggunakan sesuatu seperti nock. Ia bertujuan untuk ujian automatik tetapi adalah apa yang kami perlukan di sini.

Pertama sekali, kami mencipta klien olok-olok yang pengendali permintaannya membuat pertanyaan dan mengubah data demo dengan cara yang meniru bahagian belakang sebenar:

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
}

Kemudian sama seperti yang kami lakukan dengan navigasi, kami membungkus demo kami dalam penyedia baharu dengan pelanggan palsu kami:

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <apolloprovider client="{demoClient}"> 
            <unsafe_locationcontext.provider value="{null}">
                <memoryrouter initialentries="{['/app']}">
                    <app></app>
                </memoryrouter>
            </unsafe_locationcontext.provider>
+       </apolloprovider>
    )
}

Jika anda menggunakan pelayan olok-olok sebaliknya, anda akan menyuntik URLnya ke dalam klien sebenar apl demo.

Visual

Ia berkesan! Sekarang, bagaimanakah kita hendak menjelaskan kepada pengguna bahawa mereka sedang melihat demo interaktif?

Wanna mengutamakan mudah alih, jadi saya memilih untuk memaparkan demo di dalam bingkai telefon. Saya menggunakan devices.css kerana ia menawarkan peranti yang saya fikir kelihatan terbaik (iaitu bezel minimum untuk memaksimumkan ruang demo). Tetapi untuk kesederhanaan, di sini kami akan menggunakan perpustakaan yang menyokong React out-of-the-box: react-device-frameset.

Mari kita gunakan zum untuk mengecilkan UI demo dan sarangkannya dengan baik di dalam seluruh halaman. Dalam Wanna saya terpaksa menyongsangkan dan mengambil kira zum ini apabila menggunakan dengan visjs-html-nodes untuk melukis graf yang dijemput, tetapi sebahagian besarnya "hanya berfungsi".

export const InteractiveDemo = () => {
    return (
        <app></app>
    )
}

Atas ialah kandungan terperinci Libatkan Pengguna Serta-merta: Benamkan Demo Interaktif dalam React SPA anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!