Skip to content

Some thoughts on client-side architecture #290

@lizheming

Description

@lizheming

Currently, when we need to use a service, we can directly import the corresponding service component. For example, using the RecaptchaV3 service in a React project:

import RecaptchaV3 from '@better-captcha/react/provider/recaptcha-v3';

<RecaptchaV3 />

To achieve this capability without increasing the complexity of maintaining multiple frameworks, better-captcha abstracts each service into @better-captcha/core, ultimately integrating the framework and services through compilation.

This approach isn't bad; it's convenient for users to use a specific service. However, it's not particularly convenient for upper-layer components that need to support multiple services and switch between them. First, it generates a lot of redundant code, making it difficult for upper-layer components to optimize their size when using better-captcha. Second, the complexity of this compiled component is relatively high, making it difficult for others to understand the project and contribute.

So I'm thinking of going back to basics and letting users input the service instance themselves. While this increases the user's learning curve, it effectively removes the compilation architecture and reduces maintenance complexity.

import BetterCaptcha from '@better-captcha/react'; 
import { RecaptchaV3 } from '@better-captcha/core';

<BetterCaptcha provider={RecaptchaV3} />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions