Skip to main content

Core Concepts

Understanding the fundamental concepts of Resync will help you build better mobile experiences.

Architecture Overview​

┌─────────────────────────────────────┐
│       Resync Dashboard              │
│   (Manage Campaigns & Content)      │
└────────────┬────────────────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│       Resync API/Backend            │
│   (Store & Serve Content)           │
└────────────┬────────────────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│       Your Mobile/Web App           │
│      (Render Content)               │
└─────────────────────────────────────┘

Key Concepts​

1. Campaigns​

Campaigns are time-bound experiments or promotions with automatic variant assignment and tracking.

Key features:

  • Start/end dates with automatic scheduling
  • Multiple variants as content blocks (A/B/C testing)
  • Audience targeting
  • Statistical analysis
  • Event tracking

Example:

// In Home Page for example

// Will render different content variations per user in audience for "November Sales" campaign

return (
  <ResyncCampaignView name="November Sales" />
)

2. Content Blocks​

Content Blocks are the building blocks of Resync. Think of them as reusable UI components that you design in the dashboard and render in your app.

A Content Block can be:

  • A welcome banner
  • An onboarding flow
  • A feedback form
  • A promotional card
  • A feature announcement
  • Anything you can build with UI elements!

Example:

<ResyncContentBlock name="WelcomeCard" />

This single line renders whatever you've designed for "WelcomeCard" in your dashboard.

3. Remote Config​

Remote Config allows you to control app behavior and settings from the dashboard without code deployments.

Use cases:

  • Dynamic Content (HOME_BANNER: BANNER_30)
  • Feature flags (ENABLE_NEW_UI: true)
  • API endpoints (API_URL: "https://api.example.com")
  • App settings (MAX_RETRIES: 3)
  • Experimental toggles

Example:

const { getConfig } = useResync()
const Banner = getConfig('HOME_BANNER');

return (
  <ResyncContentBlock name={Banner} />
)

const { getConfig } = useResync()

const featureEnabled = getConfig('ENABLE_DARK_MODE');

if (featureEnabled) {
  enableDarkMode();
}

4. Audiences​

Audiences are user segments based on attributes and behaviors.

You can target users by:

  • Demographics (country, language)
  • Custom attributes (subscription tier, signup date)
  • Events (purchased in last 30 days)
  • Complex logic (AND/OR conditions)

Example:

// Set user attributes for targeting
await Resync.setUserAttributes({
  email: 'user@example.com',
  attributes: {
    subscriptionTier: 'premium',
    country: 'US',
  },
});

5. Events​

Events are user interactions and behaviors you want to track.

Use events for:

  • Analytics (button clicks, page views)
  • Audience segmentation (users who purchased)
  • Campaign conversion tracking
  • Custom metrics

Example:

Resync.logEvent({
  eventId: 'evt_button_clicked',
  metadata: {
    buttonName: 'signup',
    screen: 'homepage',
  },
});

6. Forms​

Forms are special Content Blocks designed for data collection.

Features:

  • Multiple input types (text, email, select, etc.)
  • Built-in validation
  • Custom styling
  • Flexible submission (webhooks, custom functions, internal storage)

Example:

<ResyncContentBlock 
  name="ContactForm"
/>

// Custom Submission Handler
<ResyncContentBlock 
  name="ContactForm"
  functionRegistry={{
    handleSubmit: async (formData) => {
      await submitToYourAPI(formData);
    }
  }}
/>

Content Structure​

Content Blocks are composed of:

Elements​

Individual UI components:

  • Text
  • Buttons
  • Images
  • Icons
  • Inputs
  • Dividers

Sections​

Containers that hold elements:

  • Vertical layouts
  • Horizontal layouts
  • Grids
  • Custom spacing and styling

Lists​

Dynamic collections of data:

  • Static data arrays
  • API-powered lists
  • Customizable item templates

Caching Strategy​

Resync uses intelligent caching to balance performance and freshness:

Production Mode​

  • Cache TTL: 6 hours
  • Behavior: Content is cached for 6 hours, then refreshed
  • Use for: Live applications

Sandbox Mode​

  • Cache TTL: 0 (no caching)
  • Behavior: Always fetches fresh content
  • Use for: Development and testing

Configuration:

Resync.init({
  // ...
  environment: 'production', // or 'sandbox'
});

User Identification​

Resync tracks users through two identifiers:

User ID​

A unique identifier for logged-in users:

await Resync.loginUser('user_12345', {
  email: 'user@example.com',
  name: 'John Doe',
});

Session ID​

Automatically generated for anonymous users. Used for:

  • Consistent variant assignment
  • Anonymous event tracking
  • Cross-session analytics

Log out​

If you no longer wish to track a user:

await Resync.logout();

Webhooks​

Webhooks notify your backend when events occur in Resync.

Webhook events:

  • campaign.started - Campaign automatically started
  • campaign.completed - Campaign finished
  • campaign.winner_declared - Statistical winner found
  • content.published - Content view published
  • content.unpublished - Content view unpublished
  • form.submitted - Form submission received

Configure webhooks in the dashboard to integrate with your backend systems.

Next Steps​

Now that you understand the core concepts:

Additional Resources​