Best practices and advanced configuration

Five patterns

1. 1
   Mobile first, desktop second

   Base the layout on a single column, keep tap targets ≥44px and put the primary action within thumb reach. Open the layout up on wide screens — never ship a phone tab bar to desktop.

2. 2
   Wrap every call

   Network errors, quotas, disabled features are all normal. Catch them and show one sentence in the user's language; a raw error code must never reach the screen.

3. 3
   Keep the server the source of truth

   Re-read the list after a write; if you update optimistically, roll back on failure. Two devices editing the same record is a real scenario.

4. 4
   Never show an empty screen

   Loading, empty and error states all need a design. An empty state carries an action telling the person what to do next.

5. 5
   Keep collections small

   A document caps at 20K characters; paginate large lists or split them by date. Images always live in file storage with only the URL in the record.

Fragile vs solid

The resilient call pattern

async function safe(fn, onFail) {
  try { return await fn(); }
  catch (e) {
    const m = {
      ai_disabled:     'Bu özellik şu anda kapalı.',
      mail_disabled:   'E-posta gönderimi kapalı.',
      quota_exceeded:  'Depolama alanı dolu.',
      file_too_large:  'Dosya çok büyük, daha küçük bir görsel seç.',
      not_signed_in:   'Devam etmek için giriş yap.',
      rate_limited:    'Çok hızlı gittik — bir dakika sonra dene.',
    }[e.message] || 'Bir şeyler ters gitti, tekrar dener misin?';
    onFail(m);
    return null;
  }
}

const summary = await safe(() => devany.ai.ask(prompt), toast);
if (summary) render(summary);

Advanced configuration: which switch, where